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

user_3294412 0
Viewed 2118

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:

  • base map: a vector tile source from server A
  • datapoints: a vector tile source from server B which is a separate layer on the base map called 'datapoints'

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)
  })
mapbox-gl-js javascript
1 Answers

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.

user_2632680
Related