Invert raster tiles with maplibre

I'm trying to invert raster tiles in maplibre (like in CSS filter: invert). I have the following code for a minimum example that doesn't show any errors but doesn't invert the tiles.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        const map = new maplibregl.Map({
            container: 'map',
            center: [0, 0],
            zoom: 2,
            style: {
                version: 8,
                sources: {
                    'osm-tiles': {
                        type: 'raster',
                        tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
                        tileSize: 256,
                        attribution: '© OpenStreetMap contributors'
                    }
                },
                layers: [{
                    id: 'osm-tiles-layer',
                    type: 'raster',
                    source: 'osm-tiles',
                    paint: {
                        'raster-fade-duration': 0
                    }
                }]
            }
        });

        map.on('load', () => {
            map.addLayer({
                id: 'custom-shader-layer',
                type: 'custom',
                renderingMode: '2d',
                onAdd: function(map, gl) {
                    const vertexSource = `
                        attribute vec2 a_pos;
                        varying vec2 v_texcoord;
                        void main() {
                            gl_Position = vec4(a_pos, 0.0, 1.0);
                            v_texcoord = (a_pos + 1.0) / 2.0;
                        }
                    `;
                    const fragmentSource = `
                        precision mediump float;
                        uniform sampler2D u_texture;
                        varying vec2 v_texcoord;
                        void main() {
                            vec4 color = texture2D(u_texture, v_texcoord);
                            gl_FragColor = vec4(1.0 - color.r, 1.0 - color.g, 1.0 - color.b, color.a);
                        }
                    `;
                    this.program = gl.createProgram();
                    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
                    gl.shaderSource(vertexShader, vertexSource);
                    gl.compileShader(vertexShader);
                    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
                    gl.shaderSource(fragmentShader, fragmentSource);
                    gl.compileShader(fragmentShader);
                    gl.attachShader(this.program, vertexShader);
                    gl.attachShader(this.program, fragmentShader);
                    gl.linkProgram(this.program);
                },
                render: function(gl, matrix) {
                    gl.useProgram(this.program);
                    gl.bindTexture(gl.TEXTURE_2D, map.painter.context.activeTexture.texture);
                    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
                }
            });
        });
    </script>
</body>
</html>

Upvotes: 0

Invert raster tiles with maplibre

Answers (0)

Related Questions