Add a custom style layer

Use a custom style layer to render custom WebGL content. See the example: https://docs.mapbox.com//mapbox-gl-js/example/custom-style-layer/

by Benderlio

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css">

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

CSS

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

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiYmVuZGVybGlkemUiLCJhIjoiY2pud3c0MnN1MDdraTN4cXBraDR3MHdyaCJ9.OsQLWGIWOutuIXCHgT8coQ';
    var map = (window.map = new mapboxgl.Map({
        container: 'map',
        zoom: 3,
        center: [7.5, 58],
        style: 'mapbox://styles/mapbox/light-v10',
        antialias: true // create the gl context with MSAA antialiasing, so custom layers are antialiased
    }));

    // create a custom style layer to implement the WebGL content
    var highlightLayer = {
        id: 'highlight',
        type: 'custom',

        // method called when the layer is added to the map
        // https://docs.mapbox.com/mapbox-gl-js/api/#styleimageinterface#onadd
        onAdd: function(map, gl) {
            // create GLSL source for vertex shader
            var vertexSource =
                '' +
                'uniform mat4 u_matrix;' +
                'attribute vec2 a_pos;' +
                'void main() {' +
                '    gl_Position = u_matrix * vec4(a_pos, 0.0, 1);' +
                '}';

            // create GLSL source for fragment shader
            var fragmentSource =
                `
//uniform float u_time;
void main() {
	gl_FragColor = vec4(1.0,0.0,1.0,1);
}



`

            // create a vertex shader
            var vertexShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vertexShader, vertexSource);
            gl.compileShader(vertexShader);

            // create a fragment shader
            var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fragmentShader, fragmentSource);
            gl.compileShader(fragmentShader);

            // link the two shaders into a WebGL program
            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');

            //...