Mapbox GL basic template

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.1/mapbox-gl.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.js"></script>
<div id='map'>
</div>
<!-- vertex shader -->
<script id="vertInstanced" type="x-shader/x-vertex">
attribute vec3 cubePos;

attribute vec3 color;
varying vec3 vColor;

void main() {
		vColor = color;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position + cubePos, 1.0 );
}
</script>
<!-- fragment shader -->
<script id="fragInstanced" type="x-shader/x-fragment">
varying vec3 vColor;
void main() {
		gl_FragColor = vec4( vColor, 1.0 );
}
</script>

<script type="x-shader/x-vertex" id="vert">
attribute vec2 uv;
attribute vec3 position;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
attribute vec3 offset;
attribute vec2 uvOffset;
attribute vec2 uvScale;
varying vec2 vUv;

void main() {
    vUv = uv * uvScale + uvOffset;
    vec3 pos = position * 0.5 + offset;
    
    vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );
    mvPosition.xy += pos.xy;

    gl_Position = projectionMatrix * mvPosition;
    
}</script>

<script type="x-shader/x-fragment" id="frag">
	#ifdef GL_OES_standard_derivatives
  	#extension GL_OES_standard_derivatives : enable
	#endif
	
  precision highp float;
	
  uniform float opacity;
	uniform vec3 textColor;
	uniform sampler2D texture;
	varying vec2 vUv;

	float aastep(float value) {
        #ifdef GL_OES_standard_derivatives
          float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757;
        #else
          float afwidth = (1.0 / 32.0) * (1.4142135623730951 / (2.0 * gl_FragCoord.w));
        #endif
        return smoothstep(0.5 - afwidth, 0.5 + afwidth, value);
  }

  void main() {
    vec4 col = texture2D(texture, vUv);
    float alpha = aastep(col.a);
    gl_FragColor = vec4(textColor, opacity * alpha);
    if...

CSS

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

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiY2hya2kiLCJhIjoid0ZoNy1SZyJ9.X5fpB3ORT1-BSWItzx3Xbw';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
    center: [-97, 39], // starting position,
    pitch: 30,
    zoom: 3 // starting zoom
});

function transformCoords(coords) {
  const MERCATOR_A = 6378137.0;
  const PROJECTION_WORLD_SIZE = 512 / (2 * (MERCATOR_A * Math.PI));

  const projected = [
    -MERCATOR_A * coords[0] * (Math.PI / 180) * PROJECTION_WORLD_SIZE,
    -MERCATOR_A * Math.log(Math.tan((Math.PI * 0.25) + (0.5 * coords[1] * (Math.PI / 180)))) * PROJECTION_WORLD_SIZE
  ];

  return new THREE.Vector3(projected[0], projected[1], 0);
}

var camera, scene, renderer;

renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
renderer.setSize( map.transform.width, map.transform.height );
map._container.appendChild( renderer.domElement );
renderer.domElement.style["position"] = "relative";
renderer.domElement.style["pointer-events"] = "none";

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(28, window.innerWidth / window.innerHeight, 0.000001, 5000000000);
camera.matrixAutoUpdate = false;   // We're in charge of the camera now!

var world = new THREE.Group();
world.matrixAutoUpdate = false;
scene.add( world );

var nodes = [
  [-122.3, 47.45],
  [-84.43, 33.65],
  [-80.28, 25.8],
  [-95.3, 29.65],
  [-94.73, 39.29]
];

  var positions = [];
  var uvOffsets = [];
  var uvScales = [];

var cX = 389;
  var cY = 109;
  var cWidth = 25;
  var cHeight = 28;
  var left = cX / 512;
  var top = (512 - (cY + cHeight)) / 512;



offsets = [];
colors = [];
var color = new THREE.Color();
for ( var i = 0; i < nodes.length; i ++ ) {
	var c = transformCoords(nodes[i]);
	offsets.push(c.x, c.y, c.z);
  
	color.set('red');
  colors.push(color.r, color.g, color.b);
  color.setHex(i + 1000);
  
  positions.push(c.x, c.y, 10.0);
  uvOffsets.push(left,...