CODEWITHSUNDEEP
javascriptmapsmapboxmapbox-gl-jsmapbox-gl
Lahari
Lahari

Reputation: 479

setPaintProperty() in mapbox is going blank when added transparent

I am integrating mapbox gl in my project. I want to add the water color as transparent so that the background will match with my website background. But it doesn't seems to work out. When I gave a background color as transparent the map is going blank with the base color. Here is the code:

mapboxgl.accessToken = '<my access token>';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/<my username>/ckqkr515l1axc18qvy59x80fo',
    center: [28.88, 6.33],
    zoom: 1,
    attributionControl: false
    })
map.on('load', function () {
    map.setPaintProperty('water', 'fill-color', 'transparent');
})

Also I'm attaching the codepen link for reference. Thanks in advance!!

Upvotes: 0

Views: 464

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126697

Your style has a background layer which is covering the whole world. You could make it transparent like this:

map.setPaintProperty('land','background-color','transparent')

https://codepen.io/stevebennett/pen/abWOVZx

With this particular style there isn't a way to make just the water transparent and just the land non-transparent, because there isn't a shape which is "just the land".

Upvotes: 2

Related Questions