Mapbox WebGL Prototype

by Leo

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css">
<div id='map'></div>

CSS

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

JavaScript

var map = new mapboxgl.Map({
    container: 'map',
    zoom: 3,
    center: [7.5, 58],
    style: {
    	version: 8,
      sources: {
      	slippymap: {
          type: "raster",
          scheme: "xyz",
          tiles: [
          	"https://a.tile.openstreetmap.org/{z}/{x}/{y}.png", 	
          	"https://b.tile.openstreetmap.org/{z}/{x}/{y}.png", 
          	"https://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
          ],
          tileSize: 256
        }
      },
      layers: [
      	{
            id: "slippymap",
            type: "raster",
            source: "slippymap"
        }
      ]
    }
});

var highlightLayer = {
    id: 'highlight',
    type: 'custom',

    onAdd: function (map, gl) {
        var vertexSource = "" +
        "uniform mat4 u_matrix;" +
        "attribute vec2 a_pos;" +
        "void main() {" +
        "    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);" +
        "}";

        var fragmentSource = "" +
        "void main() {" +
        "    gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);" +
        "}";

        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vertexSource);
        gl.compileShader(vertexShader);
        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, fragmentSource);
        gl.compileShader(fragmentShader);

        this.program = gl.createProgram();
        gl.attachShader(this.program, vertexShader);
        gl.attachShader(this.program, fragmentShader);
        gl.linkProgram(this.program);

        this.aPos = gl.getAttribLocation(this.program, "a_pos");

        var helsinki = mapboxgl.MercatorCoordinate.fromLngLat({ lng: 25.004, lat: 60.239 });
        var berlin = mapboxgl.MercatorCoordinate.fromLngLat({ lng: 13.403, lat: 52.562 });
        var kyiv = mapboxgl.MercatorCoordinate.fromLngLat({ lng: 30.498, lat: 50.541 });

        this.buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
     ...