Display a map

Initialize a map in an HTML element with Mapbox GL JS. See the example: https://docs.mapbox.com//mapbox-gl-js/example/simple-map/

by khrome

HTML

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

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

CSS

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

JavaScript

mapboxgl.accessToken = 'pk.eyJ1Ijoia2hyb21lLWNhcGUiLCJhIjoiY2pvaHN6OXRyMDFzYzNscGJ3Zm1henUxeSJ9.1H0sY7c5dMGVwOzy2yk_jw';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11'
    });
    map.fitBounds([
    	-87.84430512905642,
      42.10333907382637,
      -87.83927360402491,
      42.10560550530201
    ], {
      	padding: 40,
        duration: 0
    });

    map.on('load', function() {
      map.addLayer({
            "id": 'tiles-layer',
            "type": "raster",
            "source": {
                type : "raster",
                tileSize : 256,
                "raster-fade-duration" : 500,
                tiles : [
                	'https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}@2x.jpg90?access_token=pk.eyJ1Ijoia2hyb21lLWNhcGUiLCJhIjoiY2pvaHN6OXRyMDFzYzNscGJ3Zm1henUxeSJ9.1H0sY7c5dMGVwOzy2yk_jw'
                ]
            }
        });
        map.addSource('maine', {
      	"type":"geojson",
        "data":{
      		"type":"Feature",
        	"properties":{},
        	"geometry":{
          	"type":"Polygon",
            "coordinates":[
        			[
          			[-180,-90],[-180,90],[180,90],[180,-90],[-180,-90]
          		],[
         ...