title: Draw multiple polygons(buildings, borders) in a single draw call using gl.drawLines on a map using WebGL
body: <p>I am using WebGL to draw polygons on a canvas layer on top of my map for OSM data. I am first plotting the coordinate points for each polygon and trying to connect those points using gl.LINES. I have written a query(in PHP) that returns a list of polygons from the planet_osm_polygon table. It returns the list as JSON objects. I am using an index buffer and drawElements to draw the polygons like this:</p>
  
  <pre><code>gl.drawElements(gl.LINES, vetexIndex.length, gl.UNSIGNED_SHORT, 0);
  </code></pre>
  
  <p>This is my index buffer:</p>
  
  <pre><code>pIndexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, pIndexBuffer); 
  pVertexIndices = new Uint16Array([0,1, 1,2, 2,3, 3,4, 4,5, 5,6, 6,7, 7,8]);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, pVertexIndices, gl.STATIC_DRAW);
  </code></pre>
  
  <p>Every time I try to draw the polygons in a single draw call, only the last polygon in my OSM table is rendered/drawn. The other polygons are never drawn, though the points/coordinates for them are being passed correctly from the PHP-land to the WebGL-land(I tried to print the points). I am using scaling as such:</p>
  
  <pre><code>function scaleMatrix(matrix, scaleX, scaleY) {
    matrix[0] *= scaleX;
    .....
    matrix[3] *= scaleX;
    matrix[4] *= scaleY;
    .....
    matrix[7] *= scaleY;
  }
  </code></pre>
  
  <p>And my translation is</p>
  
  <pre><code>function translateMatrix(matrix, tx, ty) {
  
     matrix[12] += matrix[0]*tx + matrix[4]*ty;
     matrix[13] += matrix[1]*tx + matrix[5]*ty;
     .....
     matrix[15] += matrix[3]*tx + matrix[7]*ty;
  }
  </code></pre>
  
  <p>What am I missing here? </p>
  
  <p>Edit -- My PhP query/code looks like this: </p>
  
  <pre><code>$sql = "SELECT name, ST_AsText(ST_Transform(way,4326))
        FROM planet_osm_polygon
        WHERE highway IS NOT NULL
        AND ST_Intersects(way, ST_Transform(ST_MakeEnvelope((-122.302571660907),
          (37.5601802504715), (-122.436330806712),
            (37.8074531813721), 94326), 900913))";
  
  .....
  $points_collection = array();
   while($data=pg_fetch_assoc($query_result)) {
  
      $st_astext = $data["st_astext"];
      .....
      $points = array();
      foreach($locations as $location) {
        $tmp = explode(" ", $location);
        array_push($points ,array("lon"=&gt;(float) $tmp[0], "lat"=&gt; (float) $tmp[1]));
      }
      array_push($points_collection, $points);
  }
  </code></pre>
  
  <p>So now, this returns the lat-long points for each place (each row) in the DB. This is passed to the WebGL-land.</p>
  
  <p>In WebGL,I have the usual shaders and compile shader functions, as in this link: 
  <a href="http://build-failed.blogspot.com/2013/02/displaying-webgl-data-on-google-maps.html" rel="nofollow">http://build-failed.blogspot.com/2013/02/displaying-webgl-data-on-google-maps.html</a></p>
  
  <p>All of the functions used are pretty much the same as in the above link. I have only added the extra index buffer (see above) and have modified the drawArrays() to a drawElements() function. Now I need to draw many polygons with a single draw call; always the last one only is getting drawn.</p>