AW: [OpenLayers-Users] passing html string to popup

[Arnd Wippermann]

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/20110626/66077b53/attachment-0001.html