Change a map's style

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

by jscastro76

HTML

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



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

CSS

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

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

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoianNjYXN0cm8iLCJhIjoiY2s2YzB6Z25kMDVhejNrbXNpcmtjNGtpbiJ9.28ynPf1Y5Q8EyB_moOHylw';
		var map = new mapboxgl.Map({
		  container: 'map',
		  style: 'mapbox://styles/mapbox/light-v10',
		  center: [-122.662323, 45.523751],
		  zoom: 11
		});

		// code from the next step will go here!
		var geojson = {
		  type: 'FeatureCollection',
		  features: [{
		      type: 'Feature',
		      geometry: {
		        type: 'Point',
		        coordinates: [-122.662323, 45.523751]
		      },
		      properties: {
		        title: 'Mapbox',
		        description: 'Washington, D.C.'
		      }
		    },
		    {
		      type: 'Feature',
		      geometry: {
		        type: 'Point',
		        coordinates: [-122.692323, 45.523751]
		      },
		      properties: {
		        title: 'Mapbox',
		        description: 'San Francisco, California'
		      }

		    },
		    {
		      type: 'Feature',
		      geometry: {
		        type: 'Point',
		        coordinates: [-122.612323, 45.523751]
		      },
		      properties: {
		        title: 'Mapbox',
		        description: 'San Francisco, California'
		      }

		    },
		    {
		      type: 'Feature',
		      geometry: {
		        type: 'Point',
		        coordinates: [-122.682323, 45.523751]
		      },
		      properties: {
		        title: 'Mapbox',
		        description: 'San Francisco, California'
		      }

		    }
		  ]
		};

		// add markers to map
		geojson.features.forEach(function(marker) {

		  // create a HTML element for each feature
		  var el = document.createElement('div');
		  el.className = 'marker';

		  // make a marker for each feature and add to the map
		  new mapboxgl.Marker(el)
		    .setLngLat(marker.geometry.coordinates)
		    .addTo(map);


		});



		map.on('load', () => {

		  map.addLayer({
		    id: 'route',
		    type: 'line',
		    source: {
		      'type': 'geojson',
		      'data': {
		        'type': 'Feature',
		        'properties': {},
		        'geometry': {
		         ...