Add a custom style layer
Use a custom style layer to render custom WebGL content.
<!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://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.js"></script><link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.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>goongjs.accessToken = '8qzxZAuxcsctSlmOszInchP1A5GrmRBHJwCBCjO6';var map = (window.map = new goongjs.Map({container: 'map',zoom: 3,center: [23.477125089122936, 54.809424416263155],style: 'https://tiles.goong.io/assets/goong_map_web.json',antialias: true // create the gl context with MSAA antialiasing, so custom layers are antialiased})); // create a custom style layer to implement the WebGL contentvar highlightLayer = {id: 'highlight',type: 'custom', // method called when the layer is added to the map// https://docs.goong.io/javascript/properties/#styleimageinterface#onaddonAdd: function (map, gl) {// create GLSL source for vertex shadervar vertexSource ='' +'uniform mat4 u_matrix;' +'attribute vec2 a_pos;' +'void main() {' +' gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);' +'}'; // create GLSL source for fragment shadervar fragmentSource ='' +'void main() {' +' gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);' +'}'; // create a vertex shadervar vertexShader = gl.createShader(gl.VERTEX_SHADER);gl.shaderSource(vertexShader, vertexSource);gl.compileShader(vertexShader); // create a fragment shadervar fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(fragmentShader, fragmentSource);gl.compileShader(fragmentShader); // link the two shaders into a WebGL programthis.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'); // define vertices of the triangle to be rendered in the custom style layervar helsinki = goongjs.MercatorCoordinate.fromLngLat({lng: 25.004,lat: 60.239});var berlin = goongjs.MercatorCoordinate.fromLngLat({lng: 13.403,lat: 52.562});var kyiv = goongjs.MercatorCoordinate.fromLngLat({lng: 30.498,lat: 50.541}); // create and initialize a WebGLBuffer to store vertex and color datathis.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);}, // method fired on each animation frame// https://docs.goong.io/javascript/map/#map.event:renderrender: 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);}}; // add the custom style layer to the mapmap.on('load', function () {map.addLayer(highlightLayer, 'road-primary');});</script> </body></html>