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 Steve Bennett · Accepted Answer · 2017-03-01T03:43:54

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' 
            }
          }
        ]

      },
});

Mapbox GL JS: Set base layer to white?

2 Answers