Display a map on a webpage

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

HTML

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

<div id="map" class=""></div>
<div id="controls">
  Drag the slider until the pink body color starts appearing.<br />
  0% <input id="padding-range" type="range" min="0" max="100" value="0" step="1"> 100%
  <div id="values"></div>
</div>

CSS

body { margin: 0; padding: 0; background-color: salmon; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
#controls { position: absolute; background-color: white; }

JavaScript

// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
const map = new mapboxgl.Map({
  container: 'map', // container ID
  // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
  style: 'mapbox://styles/mapbox/streets-v12', // style URL
  center: [-74.5, 40], // starting position [lng, lat]
  zoom: 2, // starting zoom
  projection: 'globe',
});
function setPadding(value) {
	document.getElementById("values").innerHTML = `padding: ${value.toFixed(1)} (${(value / window.innerHeight * 100).toFixed(1)}%) window: ${window.innerHeight}`
  map.setPadding({
    top: 0,
    right: 0,
    left: 0,
    bottom: value,
  })
}

setPadding(0)
document.getElementById("padding-range").addEventListener("input", (evt) => setPadding(evt.currentTarget.value / 100 * window.innerHeight))