Add water outline to my "light" mapbox map

1
votes

I see that some maps styles use a layer called "water outline." You can see this layer in this pic as the blue outline next to the water. enter image description here

I am using the light-v9 style from mapbox and am wondering how to "import" this layer onto my map so that I can have water outlines, too.

Here is how I set my map:

var map = new mapboxgl.Map({
    container: this.mapContainer,
    style: 'mapbox://styles/mapbox/light-v9',
    interactive: true,
    maxZoom: 16,
});

And this is how I make a couple style changes:

map.on('load', function () {
    map.setPaintProperty('background','background-color', 'rgb(246, 246, 246)')
    map.setPaintProperty('parks','fill-color', 'rgb(217, 232, 222)')
    map.setPaintProperty('water','fill-color', 'rgb(224, 230, 230)')
    ...
})
1
mapbox

1 Answers

1
votes

It looks like that layer comes from the Mapbox Streets v7 vector tiles. If you would like to create a new line layer from that source, you would want to query the map's source for the water layer, then use it to create a line layer. For example:

map.addLayer({
    'id': 'water-line-layer',
    'source': 'composite',
    'source-layer': 'water',
    'type': 'line',
    'minzoom': 15,
    'paint': {
        'line-color': '#000000',
        'line-width': 10
    }
}