Change a map's style

Switch to another map style. See the example: https://docs.mapbox.com//mapbox-gl-js/example/setstyle/

by mapmyindia_map

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css">



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

<div id="menu">
    <input id="satellite-v9" type="radio" name="rtoggle" value="satellite" checked="checked">
    <!-- See a list of Mapbox-hosted public styles at -->
    <!-- https://docs.mapbox.com/api/maps/styles/#mapbox-styles -->
    <label for="satellite-v9">satellite</label>
    <input id="light-v10" type="radio" name="rtoggle" value="light">
    <label for="light-v10">light</label>
    <input id="dark-v10" type="radio" name="rtoggle" value="dark">
    <label for="dark-v10">dark</label>
    <input id="streets-v11" type="radio" name="rtoggle" value="streets">
    <label for="streets-v11">streets</label>
    <input id="outdoors-v11" type="radio" name="rtoggle" value="outdoors">
    <label for="outdoors-v11">outdoors</label>
</div>

CSS

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

    #menu {
        position: absolute;
        background: #efefef;
        padding: 10px;
        font-family: 'Open Sans', sans-serif;
    }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiMTE2MDY4NTYiLCJhIjoiY2tqam1kNTdtMDNvZDMwbWpjYWU1cHFnZyJ9.mbzDVkDWnPj6IBdNP0vCiA';
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        style: 'mapbox://styles/mapbox/satellite-v9', // style URL
        center: [77.486958, 27.82931], // starting position [lng, lat]
        zoom: 12 // starting zoom
    });
    
    map.on('load', () => {
map.addSource('route', {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'LineString',
'coordinates': [
[77.483482, 27.833174],
[77.483396, 27.8327],
[77.483568, 27.832056],
[77.48404, 27.831141],
[77.48404, 27.830497],
[77.483482, 27.82992],
[77.483568, 27.829548],
[77.48507, 27.829446],
[77.4861, 27.828802],
[77.486958, 27.82931],
[77.487001, 27.830802],
[77.487516, 27.831683],
[77.488031, 27.832158],
[77.488889, 27.832971],
[77.489876, 27.832632],
[77.490434, 27.832937],
[77.49125, 27.832429],
[77.491636, 27.832564],
[77.492237, 27.833378],
[77.493782, 27.833683]
]
}
}
});
map.addLayer({
'id': 'route',
'type': 'line',
'source': 'route',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': 'red',
'line-width': 8
}
});
});
    
    

    const layerList = document.getElementById('menu');
    const inputs = layerList.getElementsByTagName('input');

    for (const input of inputs) {
        input.onclick = (layer) => {
            const layerId = layer.target.id;
            
            map.setStyle('mapbox://styles/mapbox/' + layerId);
            map.moveLayer('route');
        };
    }