CODEWITHSUNDEEP
javascriptmapbox-gl-js
musicformellons
musicformellons

Reputation: 13383

What are workarounds to refresh an individual vector tile zoomlayer in mapbox-gl-js?

I have a datasource consisting of vector tile points. When I currently add a new point on my client, the server adds it to the database and using an afterhook from sequalize runs a command which updates the relevant tiles for all relevant zoomlayers. Then it shows up in my client at all zoomlayers (when zooming in & out after adding the point), so it is working as it should, except on the zoomlayer on which the point was added as that tile did not refresh yet... It will eventually appear when you refresh the page for example.

As currently you can not refresh individual tiles in the client, I need somehow to work around this. How can this be done? Preferably of course without a refresh.

The setup is as follows:

Code

axios.post('urlServerB', newpointGeojsonobject)
  .then(function (response) {
    map.removeLayer(datapointsLayerID)
    map.removeSource('datapoints')
    addDatapointsSource(map)
    map.addLayer(datapoints)
  })
  .catch(function (error) {
    console.log(error)
  })

Upvotes: 5

Views: 3378

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126205

Your main problem is probably that the browser has already cached your vector tiles, yet the content of them has changed. You can work around that by replacing your vector tile source with a slightly different URL, by adding nonsense parameters.

For instance:

  map.removeSource('osm') ;
  map.addSource('osm', {    
    "type": "vector",
    "tiles": ["https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.mvt?api_key=vector-tiles-LM25tq4&update=" + Math.random()]
  });

https://codepen.io/stevebennett/pen/LzNjVv

Click on the map to refresh the data source. It does flicker a bit. You may be able to work around that by disabling repaint for a second or so, or using some other technique mask the behaviour.

Upvotes: 4

Related Questions