Mapbox - What are my layer ID's? - html

Question

I'm new to using Mapbox.
I'm trying to add a new layer to my map that is above the water layer but below labels.
map.addLayer({
'id': 'maine',
'type': 'fill',
'source': 'maine',
'layout': {},
'paint': {
'fill-color': '#088',
'fill-opacity': 0.8
}
}, 'water');
(This code was taken from some example code from Mapbox.)
Right now, this creates a layer that is below the water layer and the labels. However, I can't figure out what layer ID would bring it above the water layer.
This is the stylesheet I'm using:
mapbox://styles/mapbox/light-v9
How do I find the other valid layer ID's for this style sheet? I've tried 'streets', 'roads', 'road', 'land', etc, but nothing has worked. I thought this link included all the layer names:
https://www.mapbox.com/studio/styles/mapbox/light-v9/
but the only one that keeps my new layer from just being on top of everything is 'water'. Help!

Answer 1

You can retrieve style specifications from the styles api.
For example to get all the layer_ids on the light-v10 style you could do this in python:
import requests
for layer in requests.get('https://api.mapbox.com/styles/v1/mapbox/light-v10?access_token=pk.eyJ1IjoiYmNrb2hhbiIsImEiOiJja2Zvamc4ejcyZjRxMzFwMXNwcGIxdDVlIn0.KdUOuJFIaV4eCzq94AgMGw').json()['layers']: print(layer['id'])
Which yields:
land
landcover
national-park
landuse
water-shadow
waterway
water
hillshade
land-structure-polygon
land-structure-line
aeroway-polygon
aeroway-line
building-outline
building
tunnel-street-minor-low
tunnel-street-minor-case
tunnel-primary-secondary-tertiary-case
tunnel-major-link-case
tunnel-motorway-trunk-case
tunnel-construction
tunnel-path
tunnel-steps
tunnel-major-link
tunnel-pedestrian
tunnel-street-minor
tunnel-primary-secondary-tertiary
tunnel-motorway-trunk
road-pedestrian-case
road-minor-low
road-street-low
road-minor-case
road-street-case
road-secondary-tertiary-case
road-primary-case
road-major-link-case
road-motorway-trunk-case
road-construction
road-path
road-steps
road-major-link
road-pedestrian
road-minor
road-street
road-secondary-tertiary
road-primary
road-motorway-trunk
road-rail
bridge-pedestrian-case
bridge-street-minor-low
bridge-street-minor-case
bridge-primary-secondary-tertiary-case
bridge-major-link-case
bridge-motorway-trunk-case
bridge-construction
bridge-path
bridge-steps
bridge-major-link
bridge-pedestrian
bridge-street-minor
bridge-primary-secondary-tertiary
bridge-motorway-trunk
bridge-rail
bridge-major-link-2-case
bridge-motorway-trunk-2-case
bridge-major-link-2
bridge-motorway-trunk-2
admin-1-boundary-bg
admin-0-boundary-bg
admin-1-boundary
admin-0-boundary
admin-0-boundary-disputed
road-label
waterway-label
natural-line-label
natural-point-label
water-line-label
water-point-label
poi-label
airport-label
settlement-subdivision-label
settlement-label
state-label
country-label
I would just add a note of caution that the layer ids for the default styles can change significantly version to version.

Answer 2

You can experiment in Mapbox.com/studio by adding your maine tile set into a new style, then you can move the layer interactively to experiment and proof the effect that you want.
The second parameter for addLayer is before, so your maine source should've gone before the water layer. See the docs on addLayer for details
https://www.mapbox.com/mapbox-gl-js/api/#Map#addLayer
The names of the layers are identified by "id" in the Style.json.
You can find the names of the layers by going to the link you posted
https://www.mapbox.com/studio/styles/mapbox/light-v9/
there you will see a nice visualization of the layer ids from Mapbox.
The water layer is near the bottom of the layers stack of the Mapbox light style.
Here are the layers with water in the "id.
"id": "waterway-river-canal",
"id": "water shadow",
"id": "water",
"id": "waterway-label",
"id": "water-label",

Answer 3

Your layer ID can be found by opening your map in Mapbox Studio. If you go to View style details (the box with an arrow in the top right corner of the left hand window, it will reveal all the layers.