how to hide/show layers in Mapbox

Viewed 61

I want to be able to hide and show/layers in Mapbox like this example provided by Mapbox.... https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/

I have some vector data saved as a tile set in Mapbox, but I don't know where to find the URL is shown in the example below as 'mapbox://mapbox.2opop9hr'. Can anyone tell me how to find it for my own data?

// Wait until the map has finished loading.
map.on('load', () => {
// Add a custom vector tileset source. This tileset contains
// point features representing museums. Each feature contains
// three properties. For example:
// {
//     alt_name: "Museo Arqueologico",
//     name: "Museo Inka",
//     tourism: "museum"
// }
map.addSource('museums', {
type: 'vector',
url: 'mapbox://mapbox.2opop9hr'
});
1 Answers

mapbox://mapbox.2opop9hr is a reference to a mapbox custom vector tileset. You can make one of your own by uploading data in Mapbox Studio: https://docs.mapbox.com/studio-manual/reference/tilesets/. Mapbox will then serve this tileset for your map to consume.

However, this isn't necessary to toggle map layers using the technique shown in the example. map.setLayoutProperty() can be used to show or hide any layer, including layers that came with the base style, or layers added after the fact using vector tiles or geojson sources.

If you are working with small/simple data, you may want to just add a geojson source and layer, and then use setLayoutProperty() to show and hide it as in the example.

Related