Hi Arnd,<div><br></div><div>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.</div>
<div><br></div><div>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.</div><div><br></div>
<div>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"</div>
<div><br></div><div>from this, I deduce, I should write my div html further up the function...but I'm still blanking here...</div><div><br></div><div>code below...</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><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 class="Apple-tab-span" style="white-space:pre"> </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>//alert(tweet.from_user);</div>
<div>plotTwt(tweet);}}}</div><div><br></div><div><br></div><div>function popupHTML(tweet) {</div><div>tweet.html = '';</div><div>tweet.html += '<div class="tweet_info">';</div><div>tweet.html += '<img alt="' + tweet.from_user_id + '" src="' +</div>
<div>tweet.profile_image_url + '" class="tweet_profile"/>';</div><div>tweet.html += '<h3>' + tweet.from_user + '</h3>';</div><div>tweet.html += '<p>' + tweet.text + '</p>';</div>
<div>tweet.html += '<p>Source: <a href="' + tweet.source + '"/>' +</div><div>tweet.source + '</a></p>';</div><div>tweet.html += '</div>';</div><div>onFeatureSelect(tweet);</div>
<div>//alert(tweet.from_user);</div><div>}</div><div><br></div><div>function plotTwt(tweet){</div><div>var twtfeat = new OpenLayers.Feature.Vector(tweet.point);</div><div>//twtfeat.attributes = tweet.attributes;</div><div>
tweetz.addFeatures(twtfeat);</div><div>}</div><div><br></div><div>function onPopupClose(tweet) {</div><div>selectControl.unselect(selectedFeature);</div><div>}</div><div><br></div><div>function onFeatureSelect(tweet) {</div>
<div>selectedFeature = tweet.feature;</div><div>popup = new OpenLayers.Popup.FramedCloud(</div><div>"chicken",</div><div>tweet.feature.geometry.getBounds().getCenterLonLat(),</div><div>null,</div><div>popupHTML(tweet), </div>
<div>null, true, onPopupClose);</div><div>tweet.feature.popup = popup; </div><div>map.addPopup(popup);</div><div>}</div></div><div><br></div><div><br><div class="gmail_quote">On Sun, Jun 26, 2011 at 5:31 AM, Arnd Wippermann <span dir="ltr"><<a href="mailto:arnd.wippermann@web.de" target="_blank">arnd.wippermann@web.de</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<u></u>
<div>
<div dir="ltr" align="left"><font color="#0000ff" size="2" face="Arial"><span>Hello Nick,</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>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></span></font> </div>
<div dir="ltr" align="left"><font color="#0000ff" size="2" face="Arial"><span>twtfeat.attributes =
tweet.attributes;</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"><div>function
plotTwt(tweet){<br>var twtfeat = new
OpenLayers.Feature.Vector(tweet.point);<br></div>twtfeat.attributes =
tweet.attributes;<br>tweetz.addFeatures(twtfeat);<br>}<br></font></div>
<div><span><font color="#0000ff" size="2" face="Arial">Arnd</font></span></div>
<div><br></div>
<div dir="ltr" lang="de" align="left">
<hr>
<font size="2" face="Tahoma"><b>Von:</b> Nicholas Efremov-Kendall
[mailto:<a href="mailto:n.e.kendall@gmail.com" target="_blank">n.e.kendall@gmail.com</a>] <br><b>Gesendet:</b> Samstag, 25. Juni 2011
21:20<br><b>An:</b> Arnd Wippermann<br><b>Cc:</b>
<a href="mailto:users@openlayers.org" target="_blank">users@openlayers.org</a><br><b>Betreff:</b> Re: [OpenLayers-Users] passing html
string to popup<br></font><br></div><div><div></div><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-wrap"> </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" target="_blank">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" target="_blank">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><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></div></div></div>
</blockquote></div><br>
</div>