<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META content="text/html; charset=us-ascii" http-equiv=Content-Type>
<META name=GENERATOR content="MSHTML 8.00.6001.19088"></HEAD>
<BODY>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Arial><SPAN
class=937060510-26062011>Hello Nick,</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Arial><SPAN
class=937060510-26062011></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Arial><SPAN
class=937060510-26062011>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</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Arial><SPAN
class=937060510-26062011></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Arial><SPAN
class=937060510-26062011>twtfeat.attributes =
tweet.attributes;</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Arial><SPAN
class=937060510-26062011></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Arial>function
plotTwt(tweet){<BR>var twtfeat = new
OpenLayers.Feature.Vector(tweet.point);<BR>twtfeat.attributes =
tweet.attributes;<BR>tweetz.addFeatures(twtfeat);<BR>}<BR></DIV>
<DIV></FONT><SPAN class=937060510-26062011><FONT color=#0000ff size=2
face=Arial>Arnd</FONT></SPAN></DIV>
<DIV><BR></DIV>
<DIV dir=ltr lang=de class=OutlookMessageHeader align=left>
<HR tabIndex=-1>
<FONT size=2 face=Tahoma><B>Von:</B> Nicholas Efremov-Kendall
[mailto:n.e.kendall@gmail.com] <BR><B>Gesendet:</B> Samstag, 25. Juni 2011
21:20<BR><B>An:</B> Arnd Wippermann<BR><B>Cc:</B>
users@openlayers.org<BR><B>Betreff:</B> Re: [OpenLayers-Users] passing html
string to popup<BR></FONT><BR></DIV>
<DIV></DIV>Hi Arnd,
<DIV><BR></DIV>
<DIV>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</DIV>
<DIV><BR></DIV>
<DIV>
<DIV>function onFeatureSelect(evt, tweet) </DIV>
<DIV>{selectedFeature = evt.feature;</DIV>
<DIV>popup = new OpenLayers.Popup.FramedCloud(</DIV>
<DIV>"chicken",</DIV>
<DIV>evt.feature.geometry.getBounds().getCenterLonLat(),</DIV>
<DIV>null,</DIV>
<DIV>popupHTML(tweet),
</DIV>
<DIV>null, true, onPopupClose);evt.feature.popup = popup;
map.addPopup(popup);}</DIV>
<DIV><BR></DIV>
<DIV>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...</DIV>
<DIV><BR></DIV>
<DIV><BR></DIV>
<DIV><BR></DIV>
<DIV>
<DIV>var feat, OpenLayers, latlon;</DIV>
<DIV>var tweetz = new OpenLayers.Layer.Vector("Tweets", {styleMap: new
OpenLayers.StyleMap({externalGraphic:
"OpenLayers-2.11-rc1/img/marker-green.png", pointRadius: 10})});</DIV>
<DIV>var marker = new OpenLayers.Layer.Vector("Marker", {styleMap: new
OpenLayers.StyleMap({externalGraphic: "OpenLayers-2.11-rc1/img/marker.png",
pointRadius: 10})});</DIV>
<DIV>var map = new OpenLayers.Map('map');</DIV>
<DIV>var tweets = [];</DIV>
<DIV>var tweetsQ = [];</DIV>
<DIV>var refreshQuery = '?=';</DIV>
<DIV>// Need something here for popups or marker lables</DIV>
<DIV><BR></DIV>
<DIV><BR></DIV>
<DIV>function onFeatureUnselect(evt)
{map.removePopup(evt.feature.popup);evt.feature.popup.destroy();evt.feature.popup
= null;} </DIV>
<DIV><BR></DIV>
<DIV>//Map features and so forth<SPAN style="WHITE-SPACE: pre"
class=Apple-tab-span> </SPAN></DIV>
<DIV>function initGIS(){</DIV>
<DIV>map.addControl(new OpenLayers.Control.LayerSwitcher());</DIV>
<DIV>var mapnik = new OpenLayers.Layer.OSM();</DIV>
<DIV>map.addLayer(mapnik);</DIV>
<DIV>map.addLayer(tweetz);</DIV>
<DIV>map.addLayer(marker);</DIV>
<DIV>tweetz.events.on({</DIV>
<DIV>'featureselected': onFeatureSelect,</DIV>
<DIV>'featureunselected': onFeatureUnselect</DIV>
<DIV>});</DIV>
<DIV>selectControl = new OpenLayers.Control.SelectFeature(tweetz,</DIV>
<DIV>{clickout: true, toggle: false,hover: false}</DIV>
<DIV>);</DIV>
<DIV>map.addControl(selectControl);</DIV>
<DIV>selectControl.activate();</DIV>
<DIV>map.setCenter(new OpenLayers.LonLat(-90, 38).transform(new
OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()),12);</DIV>
<DIV>$(document).everyTime('30s', acquireTweets);</DIV>
<DIV>$(document).everyTime('100ms', parseTweetsQ);</DIV>
<DIV>getLoc();</DIV>
<DIV>} </DIV>
<DIV><BR></DIV>
<DIV>function getLoc(){</DIV>
<DIV>if (Modernizr.geolocation) {</DIV>
<DIV> navigator.geolocation.getCurrentPosition(plotLoc,handle_error);</DIV>
<DIV>} else {</DIV>
<DIV>yqlgeo.get('visitor',norm_yql_resp);</DIV>
<DIV>}</DIV>
<DIV>}</DIV>
<DIV><BR></DIV>
<DIV>function createTWTsrcURL (){</DIV>
<DIV>var temp = map.getCenter().transform(new
OpenLayers.Projection("EPSG:900913"),new
OpenLayers.Projection("EPSG:4326"));</DIV>
<DIV>return '<A
href="http://search.twitter.com/search.json">http://search.twitter.com/search.json</A>'
+ refreshQuery + '&geocode=' + temp.lat +'%2C' + temp.lon +
'%2C50km&rpp=100&callback=?';</DIV>
<DIV>}</DIV>
<DIV><BR></DIV>
<DIV><BR></DIV>
<DIV>function plotLoc (position){</DIV>
<DIV>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);</DIV>
<DIV>marker.addFeatures([feat]);</DIV>
<DIV>var bounds = marker.getDataExtent();</DIV>
<DIV>map.setCenter(bounds.getCenterLonLat(),10);</DIV>
<DIV>acquireTweets();</DIV>
<DIV>}</DIV>
<DIV><BR></DIV>
<DIV><BR></DIV>
<DIV><BR></DIV>
<DIV>function acquireTweets(){</DIV>
<DIV>$.getJSON(createTWTsrcURL(), function(data){</DIV>
<DIV>if(data.results)</DIV>
<DIV>$.each(data.results, function(i, tweet){</DIV>
<DIV>if (tweet.geo || tweet.location)</DIV>
<DIV>tweetsQ.push(tweet);</DIV>
<DIV>});refreshQuery = data.refresh_url;});}</DIV>
<DIV><BR></DIV>
<DIV>function parseTweetsQ(){</DIV>
<DIV>if (tweetsQ.length > 0) {</DIV>
<DIV>var tweet = tweetsQ.pop();</DIV>
<DIV>if (tweet.geo){</DIV>
<DIV>var lon = tweet.geo.coordinates[1];</DIV>
<DIV>var lat = tweet.geo.coordinates[0];</DIV>
<DIV>tweet.point = new OpenLayers.Geometry.Point(lon,lat).transform(new
OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());</DIV>
<DIV>//tweet.attributes = {};</DIV>
<DIV>plotTwt(tweet);}}}</DIV>
<DIV><BR></DIV>
<DIV><BR></DIV>
<DIV>function popupHTML(tweet) {</DIV>
<DIV>var retval = '';</DIV>
<DIV>retval += '<div class="tweet_info">';</DIV>
<DIV>retval += '<img alt="' + tweet.from_user_id + '" src="' +</DIV>
<DIV>tweet.profile_image_url + '" class="tweet_profile"/>';</DIV>
<DIV>retval += '<h3>' + tweet.from_user + '</h3>';</DIV>
<DIV>retval += '<p>' + tweet.text + '</p>';</DIV>
<DIV>retval += '<p>Source: <a href="' + tweet.source + '"/>' +</DIV>
<DIV>tweet.source + '</a></p>';</DIV>
<DIV>retval += '</div>';</DIV>
<DIV>return retval;</DIV>
<DIV>}</DIV>
<DIV><BR></DIV>
<DIV>function plotTwt(tweet){</DIV>
<DIV>var twtfeat = new OpenLayers.Feature.Vector(tweet.point);</DIV>
<DIV>tweetz.addFeatures(twtfeat);</DIV>
<DIV>}</DIV>
<DIV>function onPopupClose(evt) </DIV>
<DIV>{</DIV>
<DIV>selectControl.unselect(selectedFeature);</DIV>
<DIV>}</DIV>
<DIV>function onFeatureSelect(evt, tweet) </DIV>
<DIV>{selectedFeature = evt.feature;</DIV>
<DIV>popup = new OpenLayers.Popup.FramedCloud(</DIV>
<DIV>"chicken",</DIV>
<DIV>evt.feature.geometry.getBounds().getCenterLonLat(),</DIV>
<DIV>null,</DIV>
<DIV>popupHTML(tweet),
</DIV>
<DIV>null, true, onPopupClose);evt.feature.popup = popup;
map.addPopup(popup);}</DIV></DIV><BR>
<DIV class=gmail_quote>On Sat, Jun 25, 2011 at 1:41 PM, Nicholas Efremov-Kendall
<SPAN dir=ltr><<A
href="mailto:n.e.kendall@gmail.com">n.e.kendall@gmail.com</A>></SPAN>
wrote:<BR>
<BLOCKQUOTE
style="BORDER-LEFT: #ccc 1px solid; MARGIN: 0px 0px 0px 0.8ex; PADDING-LEFT: 1ex"
class=gmail_quote>Thanks Arnd!
<DIV><BR></DIV>
<DIV>Will give it a shot.
<DIV>
<DIV></DIV>
<DIV class=h5><BR><BR>
<DIV class=gmail_quote>On Sat, Jun 25, 2011 at 1:26 PM, Arnd Wippermann <SPAN
dir=ltr><<A href="mailto:arnd.wippermann@web.de"
target=_blank>arnd.wippermann@web.de</A>></SPAN> wrote:<BR>
<BLOCKQUOTE
style="BORDER-LEFT: #ccc 1px solid; MARGIN: 0px 0px 0px 0.8ex; PADDING-LEFT: 1ex"
class=gmail_quote><U></U>
<DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2
face=Arial><SPAN>Hi,</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2
face=Arial><SPAN></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Arial><SPAN>if you
know the argument "tweet" from your evt.feature, then the below code should
work:</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2
face=Arial><SPAN></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT face=Arial><FONT color=#0000ff><FONT size=2>
<DIV>function onFeatureSelect(evt) <BR>{<BR>
selectedFeature = evt.feature;<BR></DIV><SPAN> tweet =
...;</SPAN></FONT></FONT></FONT></DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Arial>
<DIV> popup = new
OpenLayers.Popup.FramedCloud(<BR>
"chicken",<BR>
evt.feature.geometry.getBounds().getCenterLonLat(),<BR>
null,<BR></DIV>
popupHTML(tweet), <SPAN>
</SPAN> <SPAN>//returns the html
string</SPAN>
<DIV><BR> null, true,
onPopupClose);<BR> evt.feature.popup = popup;
<BR>
map.addPopup(popup);<BR>}<BR></DIV></FONT></DIV><SPAN></SPAN><FONT
face=Arial><FONT color=#0000ff><FONT
size=2>Arnd<SPAN></SPAN></FONT></FONT></FONT><BR>
<DIV dir=ltr lang=de align=left>
<HR>
<FONT size=2 face=Tahoma><B>Von:</B> <A
href="mailto:openlayers-users-bounces@lists.osgeo.org"
target=_blank>openlayers-users-bounces@lists.osgeo.org</A> [mailto:<A
href="mailto:openlayers-users-bounces@lists.osgeo.org"
target=_blank>openlayers-users-bounces@lists.osgeo.org</A>] <B>Im Auftrag
von </B>Nicholas Efremov-Kendall<BR><B>Gesendet:</B> Samstag, 25. Juni 2011
18:34<BR><B>An:</B> <A href="mailto:users@openlayers.org"
target=_blank>users@openlayers.org</A><BR><B>Betreff:</B> [OpenLayers-Users]
passing html string to popup<BR></FONT><BR></DIV>
<DIV>
<DIV></DIV>
<DIV>
<DIV></DIV>Hi all,
<DIV><BR></DIV>
<DIV>I'm currently creating popups and populating their html content with
the following code</DIV>
<DIV><BR></DIV>
<DIV><BR></DIV>
<DIV>
<DIV>function onFeatureSelect(evt) </DIV>
<DIV>{selectedFeature = evt.feature;</DIV>
<DIV>popup = new OpenLayers.Popup.FramedCloud(</DIV>
<DIV>"chicken",</DIV>
<DIV>evt.feature.geometry.getBounds().getCenterLonLat(),</DIV>
<DIV>null,</DIV>
<DIV>"<div style='font-size:.8em'>User Name: " +<A
href="http://evt.feature.id" target=_blank>evt.feature.id</A> +
"</div>",
</DIV>
<DIV>null, true, onPopupClose);evt.feature.popup = popup;
map.addPopup(popup);}</DIV></DIV>
<DIV><BR></DIV>
<DIV>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...</DIV>
<DIV><BR></DIV>
<DIV>
<DIV>function popupHTML(tweet) {</DIV>
<DIV>var retval = '';</DIV>
<DIV>retval += '<div class="tweet_info">';</DIV>
<DIV>retval += '<img alt="' + tweet.from_user_id + '" src="' +</DIV>
<DIV>tweet.profile_image_url + '" class="tweet_profile"/>';</DIV>
<DIV>retval += '<h3>' + tweet.from_user + '</h3>';</DIV>
<DIV>retval += '<p>' + tweet.text + '</p>';</DIV>
<DIV>retval += '<p>Source: <a href="' + tweet.source + '"/>'
+</DIV>
<DIV>tweet.source + '</a></p>';</DIV>
<DIV>retval += '</div>';</DIV>
<DIV>return retval;</DIV>
<DIV>}</DIV></DIV>
<DIV><BR></DIV>
<DIV>thanks again in
advance...</DIV></DIV></DIV></DIV></BLOCKQUOTE></DIV><BR></DIV></DIV></DIV></BLOCKQUOTE></DIV><BR></DIV></BODY></HTML>