[OpenLayers-Users] passing html string to popup

Sat Jun 25 15:20:27 EDT 2011

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/20110625/6b8935a6/attachment-0001.html