D3 Examples - WebGL GeoJSON tile rendering

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <title>Saturday</title>
    <script src="https://teczno.com/squares/squares-d3-0.0.4.min.js" type="application/javascript"></script>
    <script src="gl-boilerplate.js" type="application/javascript"></script>
    <script src="tile-queue.js" type="application/javascript"></script>
    <script src="map.js" type="application/javascript"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="map"><canvas id="c" width="960" height="420"></div>
    
    <script id="shader-vertex" type="x-shader/x-vertex">
    
        const mat4 view = mat4 (2.0/960.0, 0, 0, 0, 0, -2.0/420.0, 0, 0, 0, 0, 1, 0, -1, 1, 0, 1);
        uniform mat4 panzoom;
​
        attribute vec2 xy;
​
        void main()
        {
            gl_Position = view * panzoom * vec4(xy, 0, 1);
        }
    
    </script>
    
    <script id="shader-fragment" type="x-shader/x-fragment">
        
        precision mediump float;
        
        void main()
        {
            gl_FragColor = vec4(0.44, 0.41, 0.29, 1);
    
        }
    
    </script>
    
    <script type="application/javascript">
    <!--
    
        var ctx = get_webgl_context();
        
        var geo = new sq.Geo.Mercator();
        var map = new Map(document.getElementById('map'), geo, {lat: 37.8043, lon: -122.2712}, 15);
        
        function features_array(map, features)
        {
            var floats = [];
            
            for(var i in features)
            {
                var geometry = features[i]['geometry'],
                    parts = (geometry['type'] == 'LineString') ? [geometry['coordinates']] : geometry['coordinates'];
                
                for(var j in parts)
                {
                    for(var k = 0; k < parts[j].length - 1; k++)
                    {
                        var loc1 = {lon: parts[j][k][0], lat: parts[j][k][1]},
                            loc2 = {lon: parts[j][k+1][0], lat: parts[j][k+1][1]},
                            p1 = map.projection.project(loc1),
                            p2 = map.projection.project(loc2);
                        
                        floats.push(p1.x);
                        floats.push(p1.y);
                        floats.push(p2.x);
                        floats.push(p2.y);
                    }
                }
            }
            
            return new Float32Array(floats);
        }
        
        function get_webgl_context(matrix)
        {
            var c = document.getElementById('c'),
                gl = c.getContext('experimental-webgl'),
                vsource = document.getElementById('shader-vertex').innerText,
                fsource = document.getElementById('shader-fragment').innerText,
                program = linkProgram(gl, vsource, fsource);
            
            gl.useProgram(program);
            
            var xy_buffer = gl.createBuffer(),
                xy_attrib = gl.getAttribLocation(program, 'xy'),
                panzoom = gl.getUniformLocation(program, 'panzoom'),
                length = 0;
            
            gl.enableVertexAttribArray(xy_attrib);
            gl.bindBuffer(gl.ARRAY_BUFFER, xy_buffer);
            
            function data(xys)
            {
                gl.bufferData(gl.ARRAY_BUFFER, xys, gl.DYNAMIC_DRAW);
                length = xys.length/2;
            }
            
            function draw(size, ul, lr)
            {
                // mx+b style transformation.
                
                var mx = size.x / (lr.x - ul.x), bx = -mx * ul.x,
                    my = size.y / (lr.y - ul.y), by = -my * ul.y;
                
                var matrix = new Float32Array([mx, 0, 0, 0, 0, my, 0, 0, 0, 0, 1, 0, bx, by, 0, 1]);
                
                gl.clearColor(0.83, 0.77, 0.56, 1);
                gl.clear(gl.COLOR_BUFFER_BIT);
                gl.enable(gl.DEPTH_TEST);
                
                gl.uniformMatrix4fv(panzoom, false, matrix);
​
                gl.vertexAttribPointer(xy_attrib, 2, gl.FLOAT, false, 4*2, 0);
                gl.drawArrays(gl.LINES, 0, length);
            }
            
            return {draw: draw, data: data};
        }
        
    //-->
    </script>
</body>
</html>
​
    