[OpenLayers-Users] populate vector layer from json response

Nicholas Efremov-Kendall n.e.kendall at gmail.com
Tue Jun 21 12:10:55 EDT 2011


Hi Heath,
I believe I am calling the function on the LonLat pair with the below code

tweet.point = new
OpenLayers.LonLat(tweet.geo.coordinates[0],tweet.geo.coordinates[1]).transform(new
OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());

which returns POINT(NaN Nan) when I call an alert in the below function. If
I don't call the transform function on the point, which works by the way
with placing the geolocated position which centers the map to get the 50km
radius for the tweets.

I've tried your suggestion as well

function parseTweetsQ(){
if (tweetsQ.length > 0) {
var tweet = tweetsQ.pop();
if (tweet.geo){
var latlon = new
OpenLayers.LonLat(tweet.geo.coordinates[0],tweet.geo.coordinates[1]);
latlon.transform(new
OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
tweet.point = latlon;
tweet.attributes = {};
plotTwt(tweet);
}}}

function plotTwt(tweet){
twtpoint = new OpenLayers.Geometry.Point(tweet.point);
alert(twtpoint);
twtmark = new OpenLayers.Features.Vector(twtpoint);
tweetz.addFeatures([twtmark]);
}

and I still get a POINT(Nan NaN) in the alert. I'm not sure what I'm doing
wrong here, but the syntax follows from other examples, and I know I'm
missing something really obvious here. If I call the alert in the parsetweet
function, it appears that the lon is converted, but the lat is corrupted to
a NaN...

function plotTwt(tweet){
twtpoint = new OpenLayers.Geometry.Point(tweet.point);
alert(twtpoint);
twtmark = new OpenLayers.Features.Vector(twtpoint);
tweetz.addFeatures([twtmark]);
alert(tweet.point);
}

Full code is below

var feat, OpenLayers, latlon;
var tweetz = new OpenLayers.Layer.Vector("Tweets", {styleMap: new
OpenLayers.StyleMap({externalGraphic:
"OpenLayers-2.11-rc1/img/marker-green.png", pointRadius: 10})});
var marker = new OpenLayers.Layer.Vector("Marker", {styleMap: new
OpenLayers.StyleMap({externalGraphic: "OpenLayers-2.11-rc1/img/marker.png",
pointRadius: 10})});
var map = new OpenLayers.Map('map');
var tweets = [];
var tweetsQ = [];
var refreshQuery = '?=';

function initGIS(){
map.addControl(new OpenLayers.Control.LayerSwitcher());
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
map.addLayer(tweetz);
map.setCenter(new OpenLayers.LonLat(-90, 38).transform(new
OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()),12);
$(document).everyTime('30s', acquireTweets);
$(document).everyTime('100ms', parseTweetsQ);
getLoc();}


function getLoc(){
if (Modernizr.geolocation) {
 navigator.geolocation.getCurrentPosition(plotLoc,handle_error);
} else {
yqlgeo.get('visitor',norm_yql_resp);
}}

function createTWTsrcURL (){
var temp = map.getCenter().transform(new
OpenLayers.Projection("EPSG:900913"),new
OpenLayers.Projection("EPSG:4326"));
return 'http://search.twitter.com/search.json' + refreshQuery + '&geocode='
+ temp.lat +'%2C' + temp.lon + '%2C50km&rpp=100&callback=?';}

function plotLoc (position){
map.addLayer(marker);
var feat = new OpenLayers.Feature.Vector(new
OpenLayers.Geometry.Point(position.coords.longitude,position.coords.latitude).transform(new
OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()));
marker.addFeatures([feat]);
var bounds = marker.getDataExtent();
map.zoomToExtent(bounds);
acquireTweets();}

function acquireTweets(){
$.getJSON(createTWTsrcURL(), function(data){
if(data.results)
$.each(data.results, function(i, tweet){
if (tweet.geo || tweet.location)
tweetsQ.push(tweet);
});
refreshQuery = data.refresh_url;
});}

function parseTweetsQ(){
if (tweetsQ.length > 0) {
var tweet = tweetsQ.pop();
if (tweet.geo){
tweet.point = new
OpenLayers.LonLat(tweet.geo.coordinates[0],tweet.geo.coordinates[1]).transform(new
OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
tweet.attributes = {};
plotTwt(tweet);
}}}

function createInfoContent(tweet) {
var retval = '';
retval += '<div class="tweet_info">';
retval += '<img alt="' + tweet.from_user_id + '" src="' +
tweet.profile_image_url + '" class="tweet_profile"/>';
retval += '<h3>' + tweet.from_user + '</h3>';
retval += '<p>' + tweet.text + '</p>';
retval += '<p>Source: <a href="' + tweet.source + '"/>' +
tweet.source + '</a></p>';
retval += '</div>';
return retval;}

function plotTwt(tweet){
twtpoint = new OpenLayers.Geometry.Point(tweet.point);
alert(twtpoint);
twtmark = new OpenLayers.Features.Vector(twtpoint);
tweetz.addFeatures([twtmark]);
alert(tweet.point);}


function handle_error(error) {
switch(error.code){
case error.PERMISSION_DENIED: alert("This application reguires you to agree
to share your location. Please reload the page to see it work properly.
There is a privacy disclaimer at the bottom of this page. This site does not
currently record or store these data, and in the future will not record
unique user information without informing the user or asking their
permission. -Virtual Spatiality");
break;
case error.POSITION_UNAVAILABLE: alert("could not determine position");
break;
case error.TIMEOUT: alert("timeout retrieving position");
break;
default: alert("unknown error");
break;}}
function norm_yql_resp(response){
if (response.error) {
var error = {code : 0};
handle_error(error);
return;}var position = {coords:
{ latitude: response.place.centroid.latitude,
longitude: response.place.centroid.longitude
},
address :
{city: response.place.locality2.content,
region: response.place.admin1.content,
country: response.place.country.content
}};handle_geolocation_query(position);}
On Tue, Jun 21, 2011 at 10:44 AM, B. Heath Robinson
<heath at midnighthour.org>wrote:

> I should have proofread the email BEFORE I sent it.
>
> Actually, it would be something like this:
>
> var latlon = new
> OpenLayers.LonLat(tweet.geo.coordinates[0],tweet.geo.coordinates[1]);
> latlon.transform(new
> OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
> tweet.point = latlon;
>
> This assumes that tweet.geo.coordinates[0],tweet.geo.coordinates[1] is
> something that the LonLat constructor will take.
>
> On Jun 21, 2011, at 10:39 AM, B. Heath Robinson wrote:
>
> Transform operates on the coordinates, it does not return a new
> coordinates.  You should use it like this:
> var latlon = weet.geo.coordinates[0],tweet.geo.coordinates[1];
> latlon.transform(new
> OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
>
> tweet.point = latlon;
>
>
> On Jun 21, 2011, at 10:21 AM, Nicholas Efremov-Kendall wrote:
>
> Hi guys thanks for the previous advice,
>
> I'm still running into an issue, and I'm not sure how to resolve it. When I
> first use a OpenLayers.LonLat and transform the point, I get the lon
> converted correctect, but the lat is returned NaN. If I don't transform it,
> the coordinates remain correct.
>
> tweet.point = new
> OpenLayers.LonLat(tweet.geo.coordinates[0],tweet.geo.coordinates[1]).transform(new
> OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
>
> I've been playing around with some different iterations, and I can get
> tweet.point to alert out with ever tweet that's pulled into the plotting
> function, but the markers aren't added. The issue seems to be with how I'm
> calling the transform function, because somehow after calling the function I
> get NaN's for the lat-lon's inside the point object. I'm really hitting a
> wall here.
>
>
>
> On Tue, Jun 21, 2011 at 3:23 AM, Nick Kendall <n.e.kendall at gmail.com>wrote:
>
>> Thanks! Will take another crack at this Tom!
>>
>> Sent from my mobile device
>>
>> On Jun 21, 2011, at 2:37 AM, "Sveen Atle Frenvik (Geomatikk IKT)" <
>> Atle.Frenvik.Sveen at geomatikk.no> wrote:
>>
>> try using an OpenLayers.Geometry.Point instead of an OpenLayers.LonLat
>>
>> ie (untested, but i think this is rather correct):
>>
>> function parseTweetsQ(){
>>     if (tweetsQ.length > 0) {
>>         var tweet = tweetsQ.pop();
>>         if (tweet.geo){
>>             tweet.point = new
>> OpenLayers.Geometry.Point(tweet.geo.coordinates[0],tweet.geo.coordinates[1]).transform(new
>> OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
>>             tweet.attributes = {}; //in this you coukd stuff attributes of
>> the tweet for easy access on clicks etc.
>>              plotTwt(tweet);
>>         }
>>     }
>> }
>>
>>  function plotTwt(tweet){
>>     //why do you keep adding the layer for each tweet?
>>      map.addLayer(tweetz);
>>     tweet.marker = new
>> OpenLayers.Feature.Vector(tweet.point,{attributes:{tweet.attributes]});
>>     tweetz.addFeatures([tweet.marker]);
>> }
>>
>>
>>
>> On 2011-06-21 05:00, Nicholas Efremov-Kendall wrote:
>>
>> Hi Phil et al,
>>
>>  Thanks for your response. The code as is does iterate through the
>> features as they are returned. I have a handle on it up to the plotting
>> function. An alert on the tweet.marker object returns [object Object], while
>> tweet.latlng returns readable coordinates lon=38.6834,lat=-90.4313. I guess
>> what I'm unsure about is how to parse the object which is passed to the
>> third function. Thanks again.
>>
>>
>>  function acquireTweets(){
>> $.getJSON(createTWTsrcURL(), function(data){
>> if(data.results)
>> $.each(data.results, function(i, tweet){
>> if (tweet.geo || tweet.location)
>> tweetsQ.push(tweet);
>> });
>> refreshQuery = data.refresh_url;
>> });}
>>
>>  function parseTweetsQ(){
>> if (tweetsQ.length > 0) {
>> var tweet = tweetsQ.pop();
>> if (tweet.geo){
>> tweet.latlng = new
>> OpenLayers.LonLat(tweet.geo.coordinates[0],tweet.geo.coordinates[1]);
>> plotTwt(tweet);
>> }}}
>>
>>  function plotTwt(tweet){
>>  map.addLayer(tweetz);
>> tweet.marker = new OpenLayers.Feature.Vector(new
>> OpenLayers.Geometry.Point(tweet.latlng).transform(new
>> OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()));
>> tweetz.addFeatures([tweet.marker]);}
>>
>>
>>
>>
>> On Mon, Jun 20, 2011 at 9:13 PM, Phil Scadden < <p.scadden at gns.cri.nz>
>> p.scadden at gns.cri.nz> wrote:
>>
>>> I have no idea what the object returned by twitter is but surely, but if
>>> you are using jsonp, then
>>> have in your code something like:
>>> jsonp_function(json)
>>> where jsonp_function is the name of jsonp callback and json is the
>>> returned object. I would guess it contains an array of feature type
>>> objects, so you would iterate through the array, creating feature for
>>> each row, and calling vectorLayer.addFeatures(features) to add them to
>>> the vector layer.
>>>
>>> Notice: This email and any attachments are confidential. If received in
>>> error please destroy and immediately notify us. Do not copy or disclose the
>>> contents.
>>>
>>> _______________________________________________
>>> Users mailing list
>>>  <Users at lists.osgeo.org>Users at lists.osgeo.org
>>>  <http://lists.osgeo.org/mailman/listinfo/openlayers-users>
>>> http://lists.osgeo.org/mailman/listinfo/openlayers-users
>>>
>>
>>
>> _______________________________________________
>> Users mailing list <Users at lists.osgeo.org>Users at lists.osgeo.org <http://lists.osgeo.org/mailman/listinfo/openlayers-users>http://lists.osgeo.org/mailman/listinfo/openlayers-users
>>
>>
>>
>> --
>> Atle Frenvik Sveen
>> Utvikler
>> Geomatikk IKT AS
>> tlf: 45 27 86 89 <atle.frenvik.sveen at geomatikk.no>atle.frenvik.sveen at geomatikk.no
>>
>> _______________________________________________
>> Users mailing list
>> Users at lists.osgeo.org
>> http://lists.osgeo.org/mailman/listinfo/openlayers-users
>>
>>
>  _______________________________________________
> Users mailing list
> Users at lists.osgeo.org
> http://lists.osgeo.org/mailman/listinfo/openlayers-users
>
>
> _______________________________________________
> Users mailing list
> Users at lists.osgeo.org
> http://lists.osgeo.org/mailman/listinfo/openlayers-users
>
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20110621/59146bfd/attachment-0001.html


More information about the Users mailing list