Change a map's style configuration property | Mapbox GL JS

This feature is available in the Mapbox GL JS v3

Mapbox Standard Style is now enabled by default

The Mapbox Standard Style is now enabled by default when no style option is provided to the Map constructor. You can still explicitly set the style by passing the URL to the style option of the Map constructor.

This example adds a clickable interface that enables a user to apply several different configuration properties to the Mapbox Standard Style.

When the user clicks a configuration property, it uses setConfigProperty and a basemap keyword as a reference to the Standard Style to update the style appearance associated with that configuration property.

New *-emissive-strength properties, such as line-emissive-strength, allow you to control the intensity of light emitted on the source features. By adjusting the line-emissive-strength, you can enhance the visibility of lines, especially in darker light presets, making them stand out more prominently in your map designs.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Change a map's style configuration property</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
    .map-overlay {
        font:
            12px/20px 'Helvetica Neue',
            Arial,
            Helvetica,
            sans-serif;
        position: absolute;
        width: 200px;
        top: 0;
        left: 0;
        padding: 10px;
    }

    .map-overlay .map-overlay-inner {
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        border-radius: 3px;
        padding: 10px;
        margin-bottom: 10px;
    }

    .map-overlay-inner fieldset {
        display: flex;
        justify-content: space-between;
        border: none;
    }

    .map-overlay-inner label {
        font-weight: bold;
        margin-right: 10px;
    }

    .map-overlay-inner .select-fieldset {
        display: block;
    }

    .map-overlay-inner .select-fieldset label {
        display: block;
        margin-bottom: 5px;
    }

    .map-overlay-inner .select-fieldset select {
        width: 100%;
    }
</style>

<div id="map"></div>

<div class="map-overlay top">
    <div class="map-overlay-inner">
        <fieldset class="select-fieldset">
            <label>Select light preset</label>
            <select id="lightPreset" name="lightPreset">
                <!-- Each value matches a light preset -->
                <option value="dawn">Dawn</option>
                <option value="day" selected="">Day</option>
                <option value="dusk">Dusk</option>
                <option value="night">Night</option>
            </select>
        </fieldset>
        <fieldset>
            <label for="showPlaceLabels">Show place labels</label>
            <input type="checkbox" id="showPlaceLabels" checked="">
        </fieldset>
        <fieldset>
            <label for="showPointOfInterestLabels">Show POI labels</label>
            <input type="checkbox" id="showPointOfInterestLabels" checked="">
        </fieldset>
        <fieldset>
            <label for="showRoadLabels">Show road labels</label>
            <input type="checkbox" id="showRoadLabels" checked="">
        </fieldset>
        <fieldset>
            <label for="showTransitLabels">Show transit labels</label>
            <input type="checkbox" id="showTransitLabels" checked="">
        </fieldset>
    </div>
</div>

<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        center: [2.2932, 48.86069], // starting position [lng, lat]
        zoom: 15.1, // starting zoom
        pitch: 62, // starting pitch
        bearing: -20 // starting bearing
    });

    map.on('style.load', () => {
        map.addSource('line', {
            type: 'geojson',
            lineMetrics: true,
            data: {
                type: 'LineString',
                coordinates: [
                    [2.293389857555951, 48.85896319631851],
                    [2.2890810326441624, 48.86174223718291]
                ]
            }
        });

        map.addLayer({
            id: 'line',
            source: 'line',
            type: 'line',
            paint: {
                'line-width': 12,
                // The `*-emissive-strength` properties control the intensity of light emitted on the source features.
                // To enhance the visibility of a line in darker light presets, increase the value of `line-emissive-strength`.
                'line-emissive-strength': 0.8,
                'line-gradient': [
                    'interpolate',
                    ['linear'],
                    ['line-progress'],
                    0,
                    'red',
                    1,
                    'blue'
                ]
            }
        });
    });

    document
        .getElementById('lightPreset')
        .addEventListener('change', function () {
            map.setConfigProperty('basemap', 'lightPreset', this.value);
        });

    document
        .querySelectorAll('.map-overlay-inner input[type="checkbox"]')
        .forEach((checkbox) => {
            checkbox.addEventListener('change', function () {
                map.setConfigProperty('basemap', this.id, this.checked);
            });
        });
</script>

</body>
</html>

Was this example helpful?