Add a custom style layer
Use a custom style layer to render custom WebGL content.
Mapbox GL unsupported
Mapbox GL requires WebGL support. Please check that you are using a supported browser and that WebGL is enabled.
<!DOCTYPE html><html><head><meta charset='utf-8' /><title>Add a custom style layer</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'></div><script>mapboxgl.accessToken = '<your access token here>';var map = window.map = new mapboxgl.Map({container: 'map',zoom: 3,center: [7.5, 58],style: 'mapbox://styles/mapbox/light-v9'}); 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);gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([helsinki.x, helsinki.y,berlin.x, berlin.y,kyiv.x, kyiv.y,]), gl.STATIC_DRAW);}, render: function (gl, matrix) {gl.useProgram(this.program);gl.uniformMatrix4fv(gl.getUniformLocation(this.program, "u_matrix"), false, matrix);gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);gl.enableVertexAttribArray(this.aPos);gl.vertexAttribPointer(this.aPos, 2, gl.FLOAT, false, 0, 0);gl.enable(gl.BLEND);gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);}}; map.on('load', function() {map.addLayer(highlightLayer, 'building');});</script> </body></html>