I am using an OSM dataset using which I am plotting those points on a map (google maps API). I am plotting these points using webgl shader code (see: http://psousa.net/demos/webgl/)
The above link by itself is an extension of the Google maps WebGL example : http://google-maps-utility-library-v3.googlecode.com/svn/trunk/canvaslayer/examples/hello_webgl.html. The difference between the example I quoted and mine is, I have imported the OSM dataset into a postgres database. I am fetching the result (the points that i need to plot) as json objects. After I get the json objects, I am trying to plot these using the webgl shadercode as in the example link above.
The problem is, I am getting the json points (when I do a console.log) but my webgl code does not plot these points. I do not know where I am going wrong.
Here is my code for retrieving the points from the postgres database using jquery, as json objects:
//data.js
$(document).ready(function(){
$.ajax({ type: "GET",
dataType: "json",
url: "/database.php",
data: {
format: "json"
},
success: function(data)
{
points = data;
console.log(data);
}
});
});
The rest are same as in the example link.
Every other function such as resize()
, translateMatrix()
, scaleMatrix()
, init()
, loadData()
, update()
are the same. The only difference is that, while the example plots random points across the map, I am plotting the points I retrieved from my postgres database as json objects. What am I doing wrong here?
Edit : This is the postgres query I used:
SELECT ST_AsText(ST_Transform(way,4326)) FROM planet_osm_line WHERE highway IS NOT NULL AND ref = 'US 101' AND ST_Intersects(way, ST_Transform(ST_MakeEnvelope((-122.302571660907), (37.5601802504715), (-122.436330806712), (37.8074531813721), 94326), 900913));
and the output is in this format:
"LINESTRING(-122.436063557915 37.7998944536137,-122.436172613391 37.7998804703684,-122.437602282165 37.7996967004673,-122.437703791792 37.7996837109204)"
(I am retrieving points within a bounding box)