Mapbox GL JS: Set base layer to white?

Question

I'd like to display a Mapbox GL JS map with a white background, rather than a map background.

This is my code right now:

mapboxgl.accessToken = 'mytoken';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    minZoom: 4,
    maxZoom: 14,
    center: [-2.0, 53.3],
});

How can I replace the light background with plain white? If I change style to white then I get an error.

Steve Bennett · Accepted Answer · 2017-03-01 03:43:54Z

9

You don't need to create the style in Mapbox Studio, you can create it in the browser:

var map = new mapboxgl.Map({
    container: 'map',
    style: {
        version: 8,
        sources: {

        },
        layers: [
          {
            id: 'background',
            type: 'background',
            paint: { 
              'background-color': 'white' 
            }
          }
        ]

      },
});

answered Mar 1, 2017 at 3:43

Steve Bennett

130k45 gold badges188 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kamil Kiełczewski Over a year ago

great answer :)

Richard · Accepted Answer · 2017-02-28 17:49:27Z

-1

I figured this out. You need to make your own "style" in Mapbox Studio and set it to be plain white, then add this in the style property of the map.

answered Feb 28, 2017 at 17:49

Richard

66.1k136 gold badges359 silver badges573 bronze badges

Collectives™ on Stack Overflow

Mapbox GL JS: Set base layer to white?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related