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>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css" type="text/css" />
<!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<style>
  #geocoder {
    z-index: 1;
    width: 100%;
    text-align: center;
    top: 20px;
  }

  .mapboxgl-ctrl-geocoder {
    min-width: 100%;
  }

</style>
<div id="geocoder">

</div>

<div class="position">
  <div id="coords"></div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

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

.position {
  position: absolute;
  background: #fff;
  min-width: 100px;
  bottom: 50px;
  left: 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/streets-v9',
	  center: [-79.4512, 43.6568],
	  zoom: 13
	});

	var geocoder = new MapboxGeocoder({
	  accessToken: mapboxgl.accessToken,
	  types: 'poi',
	  // see https://docs.mapbox.com/api/search/#geocoding-response-object for information about the schema of each response feature
	  render: function(item) {
	    // extract the item's maki icon or use a default
	    var maki = item.properties.maki || 'marker';
	    return (
	      "<div class='geocoder-dropdown-item'><img class='geocoder-dropdown-icon' src='https://unpkg.com/@mapbox/[email protected]/icons/" +
	      maki +
	      "-15.svg'><span class='geocoder-dropdown-text'>" +
	      item.text +
	      '</span></div>'
	    );
	  },
	  mapboxgl: mapboxgl
	});

	map.addControl(geocoder);

	geocoder.on('result', function(r) {
	  console.log(r);
	  document.getElementById("coords").innerHTML = r.result.center;
	})