Search code examples
browser-cachemapbox-gl-jsvector-tiles

Avoid cached vector tiles from Mapbox


I'm running into a problem with Mapbox-GL-JS where there are cached vector tiles in my browser, preventing recent changes being seen. The normal workaround is to append a unique string onto the end of the tile string (example.com/tiles/1/2/3.png?update=1), but I'm not sure how to make that work in Mapbox-GL-JS, because it constructs the tile strings for me, from a composite of layers:

...
metadata": {
    "mapbox:autocomposite": true,
    "mapbox:type": "default"
  },
  "sources": {
    "mapbox": {
      "url": "mapbox://mapbox.satellite",
      "type": "raster",
      "tileSize": 256
    },
    "composite": {
      "url": "mapbox://stevage.9vj4wkw3,mapbox.mapbox-streets-v7,stevage.ab95cml8",
      "type": "vector"
    }
  },

Is there some way to force some extra text into the URL?


Solution

  • Any query parameters at the end of a mapbox:// url will be preserved. You may find interesting the fresh parameter which we have special-cased to skip most API-side caches.

    ...
    metadata": {
        "mapbox:autocomposite": true,
        "mapbox:type": "default"
      },
      "sources": {
        "mapbox": {
          "url": "mapbox://mapbox.satellite?fresh=true",
          "type": "raster",
          "tileSize": 256
        },
        "composite": {
          "url": "mapbox://stevage.9vj4wkw3,mapbox.mapbox-streets-v7,stevage.ab95cml8?fresh=true",
          "type": "vector"
        }
      },