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.10.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css">

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

CSS

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

JavaScript

// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'REPLACEME';
    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-v11', // style URL
        center: [-74.5, 40], // starting position [lng, lat]
        zoom: 9, // starting zoom
        projection: 'globe', // display the map as a 3D globe,
        preserveDrawingBuffer: true
    });

    map.on('render', () => {
      var img, tex, vloc, tloc, vertexBuff, texBuff;
      var cvs3d = map.getCanvas();
       var ctx3d  = cvs3d.getContext("experimental-webgl");
       
       var uLoc;
		ctx3d.pixelStorei(ctx3d.UNPACK_FLIP_Y_WEBGL, true); 
	// create shaders
	var vertexShaderSrc = `
		attribute vec2 aVertex;
		attribute vec2 aUV;
		varying vec2 vTex;
		uniform vec2 pos;
		void main(void) {
			gl_Position = vec4(aVertex + pos, 0.0, 1.0);
			vTex = aUV;
		}`;

	var fragmentShaderSrc = `
		precision highp float;
		varying vec2 vTex;
		uniform sampler2D sampler0;
		void main(void){
			gl_FragColor = texture2D(sampler0, vTex);
		}`;

	var vertShaderObj = ctx3d.createShader(ctx3d.VERTEX_SHADER);
	var fragShaderObj = ctx3d.createShader(ctx3d.FRAGMENT_SHADER);
	ctx3d.shaderSource(vertShaderObj, vertexShaderSrc);
	ctx3d.shaderSource(fragShaderObj, fragmentShaderSrc);
	ctx3d.compileShader(vertShaderObj);
	ctx3d.compileShader(fragShaderObj);

	var progObj = ctx3d.createProgram();
	ctx3d.attachShader(progObj, vertShaderObj);
	ctx3d.attachShader(progObj, fragShaderObj);

	ctx3d.linkProgram(progObj);
	ctx3d.useProgram(progObj);

	ctx3d.viewport(0, 0, 64, 64);
  
	vertexBuff = ctx3d.createBuffer();
	ctx3d.bindBuffer(ctx3d.ARRAY_BUFFER, vertexBuff);
	ctx3d.bufferData(ctx3d.ARRAY_BUFFER, new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]), ctx3d.STATIC_DRAW);

	texBuff =...