CODEWITHSUNDEEP
mapboxmapbox-gl-js
Richard
Richard

Reputation: 65530

Mapbox GL JS: Set base layer to white?

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.

Upvotes: 5

Views: 2658

Answers (2)

Steve Bennett
Steve Bennett

Reputation: 126205

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

      },
});

Upvotes: 9

Richard
Richard

Reputation: 65530

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.

Upvotes: -1

Related Questions