<head><script src="https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script><link href="https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" rel="stylesheet" /> <meta charset="utf-8" /><title>Display a map with a custom style</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script><link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" rel="stylesheet" /><style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style></head><body>div id='map' style='width: 800px; height: 600px;'&gt;<script> mapboxgl.accessToken = 'pk.eyJ1IjoiaGlsbGFudGhvbnkiLCJhIjoiY2pzOWQ1djRlMWxjbjQ5dGZqcDh5bnowMiJ9.796Ltll2aySt8LpnmvtKig'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11' }); </script> <div id="map"></div> <script> mapboxgl.accessToken = 'pk.eyJ1IjoiaGlsbGFudGhvbnkiLCJhIjoiY2pzOWQ1djRlMWxjbjQ5dGZqcDh5bnowMiJ9.796Ltll2aySt8LpnmvtKig'; var map = new mapboxgl.Map({ container: 'map', // container id style: 'mapbox://styles/mapbox/dark-v9', //hosted style id center: [-77.38, 39], // starting position zoom: 3 // starting zoom }); </script></body>