[OpenLayers-Users] passing html string to popup
Nicholas Efremov-Kendall
n.e.kendall at gmail.com
Thu Jun 30 12:42:15 EDT 2011
Hi Arnd,
I'm still cracking at this and I'm still kind of confused. I can put an
alert for some of the html attributes in the parseTweetsQ function, and it
will return values meant for the the popups.
I switched the popups code and fed in the variable/object tweet into those
functions. For a little while, this resulted in popups which opened but
returned all values as undefined.
I've stepped away from the code for a little while and now I get new errors:
in firebug "too much recursion" in chrome: uncaught rangeError: maximum call
stack exceeded, or "typeerror: cannot property 'div' of null"
from this, I deduce, I should write my div html further up the
function...but I'm still blanking here...
code 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 onFeatureUnselect(evt)
{map.removePopup(evt.feature.popup);evt.feature.popup.destroy();evt.feature.popup
= null;}
//Map features and so forth
function initGIS(){
map.addControl(new OpenLayers.Control.LayerSwitcher());
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
map.addLayer(tweetz);
map.addLayer(marker);
tweetz.events.on({
'featureselected': onFeatureSelect,
'featureunselected': onFeatureUnselect
});
selectControl = new OpenLayers.Control.SelectFeature(tweetz,
{clickout: true, toggle: false,hover: false}
);
map.addControl(selectControl);
selectControl.activate();
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){
var feat = new OpenLayers.Feature.Vector(new
OpenLayers.Geometry.Point(position.coords.longitude,position.coords.latitude).transform(new
OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()),14);
marker.addFeatures([feat]);
var bounds = marker.getDataExtent();
map.setCenter(bounds.getCenterLonLat(),10);
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){
var lon = tweet.geo.coordinates[1];
var lat = tweet.geo.coordinates[0];
tweet.point = new OpenLayers.Geometry.Point(lon,lat).transform(new
OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
//alert(tweet.from_user);
plotTwt(tweet);}}}
function popupHTML(tweet) {
tweet.html = '';
tweet.html += '<div class="tweet_info">';
tweet.html += '<img alt="' + tweet.from_user_id + '" src="' +
tweet.profile_image_url + '" class="tweet_profile"/>';
tweet.html += '<h3>' + tweet.from_user + '</h3>';
tweet.html += '<p>' + tweet.text + '</p>';
tweet.html += '<p>Source: <a href="' + tweet.source + '"/>' +
tweet.source + '</a></p>';
tweet.html += '</div>';
onFeatureSelect(tweet);
//alert(tweet.from_user);
}
function plotTwt(tweet){
var twtfeat = new OpenLayers.Feature.Vector(tweet.point);
//twtfeat.attributes = tweet.attributes;
tweetz.addFeatures(twtfeat);
}
function onPopupClose(tweet) {
selectControl.unselect(selectedFeature);
}
function onFeatureSelect(tweet) {
selectedFeature = tweet.feature;
popup = new OpenLayers.Popup.FramedCloud(
"chicken",
tweet.feature.geometry.getBounds().getCenterLonLat(),
null,
popupHTML(tweet),
null, true, onPopupClose);
tweet.feature.popup = popup;
map.addPopup(popup);
}
On Sun, Jun 26, 2011 at 5:31 AM, Arnd Wippermann <arnd.wippermann at web.de>wrote:
> **
> Hello Nick,
>
> in your plotTwt function you create a feature without attributes. Most
> likely is this the cause of the error. Perhaps you need only to add the line
>
> twtfeat.attributes = tweet.attributes;
>
> function plotTwt(tweet){
> var twtfeat = new OpenLayers.Feature.Vector(tweet.point);
> twtfeat.attributes = tweet.attributes;
> tweetz.addFeatures(twtfeat);
> }
> Arnd
>
> ------------------------------
> *Von:* Nicholas Efremov-Kendall [mailto:n.e.kendall at gmail.com]
> *Gesendet:* Samstag, 25. Juni 2011 21:20
> *An:* Arnd Wippermann
> *Cc:* users at openlayers.org
> *Betreff:* Re: [OpenLayers-Users] passing html string to popup
>
> Hi Arnd,
>
> Thanks, that worked, but I've hit another stumbling block. I'm probably
> messing up here somehow, but I tried passing in tweet to the function like
> so
>
> function onFeatureSelect(evt, tweet)
> {selectedFeature = evt.feature;
> popup = new OpenLayers.Popup.FramedCloud(
> "chicken",
> evt.feature.geometry.getBounds().getCenterLonLat(),
> null,
> popupHTML(tweet),
> null, true, onPopupClose);evt.feature.popup = popup; map.addPopup(popup);}
>
> which now returns an error 'cannot read property of 'from_user_id' of
> undefined, which means that the html is being fed into the popup, but that
> the info from the json object is being passed in. Full code is below, again,
> sorry for my novice questions...
>
>
>
> 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 = '?=';
> // Need something here for popups or marker lables
>
>
> function onFeatureUnselect(evt)
> {map.removePopup(evt.feature.popup);evt.feature.popup.destroy();evt.feature.popup
> = null;}
>
> //Map features and so forth
> function initGIS(){
> map.addControl(new OpenLayers.Control.LayerSwitcher());
> var mapnik = new OpenLayers.Layer.OSM();
> map.addLayer(mapnik);
> map.addLayer(tweetz);
> map.addLayer(marker);
> tweetz.events.on({
> 'featureselected': onFeatureSelect,
> 'featureunselected': onFeatureUnselect
> });
> selectControl = new OpenLayers.Control.SelectFeature(tweetz,
> {clickout: true, toggle: false,hover: false}
> );
> map.addControl(selectControl);
> selectControl.activate();
> 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){
> var feat = new OpenLayers.Feature.Vector(new
> OpenLayers.Geometry.Point(position.coords.longitude,position.coords.latitude).transform(new
> OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()),14);
> marker.addFeatures([feat]);
> var bounds = marker.getDataExtent();
> map.setCenter(bounds.getCenterLonLat(),10);
> 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){
> var lon = tweet.geo.coordinates[1];
> var lat = tweet.geo.coordinates[0];
> tweet.point = new OpenLayers.Geometry.Point(lon,lat).transform(new
> OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
> //tweet.attributes = {};
> plotTwt(tweet);}}}
>
>
> function popupHTML(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){
> var twtfeat = new OpenLayers.Feature.Vector(tweet.point);
> tweetz.addFeatures(twtfeat);
> }
> function onPopupClose(evt)
> {
> selectControl.unselect(selectedFeature);
> }
> function onFeatureSelect(evt, tweet)
> {selectedFeature = evt.feature;
> popup = new OpenLayers.Popup.FramedCloud(
> "chicken",
> evt.feature.geometry.getBounds().getCenterLonLat(),
> null,
> popupHTML(tweet),
> null, true, onPopupClose);evt.feature.popup = popup; map.addPopup(popup);}
>
> On Sat, Jun 25, 2011 at 1:41 PM, Nicholas Efremov-Kendall <
> n.e.kendall at gmail.com> wrote:
>
>> Thanks Arnd!
>>
>> Will give it a shot.
>>
>>
>> On Sat, Jun 25, 2011 at 1:26 PM, Arnd Wippermann <arnd.wippermann at web.de>wrote:
>>
>>> **
>>> Hi,
>>>
>>> if you know the argument "tweet" from your evt.feature, then the below
>>> code should work:
>>>
>>> function onFeatureSelect(evt)
>>> {
>>> selectedFeature = evt.feature;
>>> tweet = ...;
>>> popup = new OpenLayers.Popup.FramedCloud(
>>> "chicken",
>>> evt.feature.geometry.getBounds().getCenterLonLat(),
>>> null,
>>> popupHTML(tweet), //returns the html string
>>>
>>>
>>> null, true, onPopupClose);
>>> evt.feature.popup = popup;
>>> map.addPopup(popup);
>>> }
>>> Arnd
>>> ------------------------------
>>> *Von:* openlayers-users-bounces at lists.osgeo.org [mailto:
>>> openlayers-users-bounces at lists.osgeo.org] *Im Auftrag von *Nicholas
>>> Efremov-Kendall
>>> *Gesendet:* Samstag, 25. Juni 2011 18:34
>>> *An:* users at openlayers.org
>>> *Betreff:* [OpenLayers-Users] passing html string to popup
>>>
>>> Hi all,
>>>
>>> I'm currently creating popups and populating their html content with the
>>> following code
>>>
>>>
>>> function onFeatureSelect(evt)
>>> {selectedFeature = evt.feature;
>>> popup = new OpenLayers.Popup.FramedCloud(
>>> "chicken",
>>> evt.feature.geometry.getBounds().getCenterLonLat(),
>>> null,
>>> "<div style='font-size:.8em'>User Name: " +evt.feature.id + "</div>",
>>>
>>> null, true, onPopupClose);evt.feature.popup = popup;
>>> map.addPopup(popup);}
>>>
>>> rather than pull out the attributes myself, I'd like to pass in a
>>> preformed html string via a variable, but I'm not sure how to do this, and I
>>> currently lack a sufficient knowledge of jscript syntax to research this. I
>>> can form an html string via this function but I'm not sure how to pass it
>>> back to the popup function above...
>>>
>>> function popupHTML(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;
>>> }
>>>
>>> thanks again in advance...
>>>
>>
>>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20110630/02b024b5/attachment-0001.html
More information about the Users
mailing list