I found the answer. It turns out it's very easy to have a SelectFeature work on more than one layer and the problem is easily solved.<div><br><br><div class="gmail_quote">On Fri, May 11, 2012 at 1:15 PM, Scott Chapman <span dir="ltr"><<a href="mailto:scott@mischko.com" target="_blank">scott@mischko.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">I have a layer called 'stores_layer' and another one called 'app_WS_us_layer', and I will be adding more of the same.<br>
I want to have all these layers share the same popup handling code so I don't have to make n copies of the same code with small variations in it.<br>
<br>This function appears to be the hangup for me:<br>function onStoresPopupClose(evt) {<br>
// 'this' is the popup.<br>
var feature = this.feature;<br>
if (feature.layer) { // The feature is not destroyed<br>
selectStoresCtrl.unselect(feature);<br>
} else { // After "moveend" or "refresh" events on POIs layer all <br>
// features have been destroyed by the Strategy.BBOX<br>
this.destroy();<br>
}<br>
}<br><br>The selectStoresCtrl is hardcoded here. I need to make it so that it refers to the SelectFeature without it being hardcoded but I can't find a reference to the control via 'this' or 'evt'.<br>
It would be very nice if I could have a SelectFeature that worked on more than one layer!<br><br>Any clues on how to do this?<br> Thanks!<br>Scott<br><br>Full map code is below:<br><br>var arrayOSM = [<br> "<a href="http://otile1.mqcdn.com/tiles/1.0.0/osm/$%7Bz%7D/$%7Bx%7D/$%7By%7D.jpg" target="_blank">http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg</a>",<br>
"<a href="http://otile2.mqcdn.com/tiles/1.0.0/osm/$%7Bz%7D/$%7Bx%7D/$%7By%7D.jpg" target="_blank">http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg</a>",<br> "<a href="http://otile3.mqcdn.com/tiles/1.0.0/osm/$%7Bz%7D/$%7Bx%7D/$%7By%7D.jpg" target="_blank">http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg</a>",<br>
"<a href="http://otile4.mqcdn.com/tiles/1.0.0/osm/$%7Bz%7D/$%7Bx%7D/$%7By%7D.jpg" target="_blank">http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg</a>"<br> ];<br><br>var baseOSM_options = {wrapDateLine: true, <br>
attribution: '<p>Tiles Courtesy of <a href="<a href="http://www.mapquest.com/" target="_blank">http://www.mapquest.com/</a>" target="_blank">MapQuest</a> <img src="<a href="http://developer.mapquest.com/content/osm/mq_logo.png" target="_blank">http://developer.mapquest.com/content/osm/mq_logo.png</a>"></p>'<br>
};<br><br>var baseOSM = new OpenLayers.Layer.OSM("BaseMap", <br> arrayOSM, <br> baseOSM_options);<br><br>var navigation_options = {mouseWheelOptions: {interval: 100}};<br>
<br>var stores_style = new OpenLayers.Style({<br> //pointRadius: "${radius}",<br> pointRadius: 5,<br> fillColor: "${fillcolor}",<br> fillOpacity: 1.0,<br>
strokeWidth: "${strokewidth}",<br> strokeColor: "black",<br> strokeOpacity: 1.0<br> }, {<br> context: {<br> radius: function(feature) {<br>
return feature.attributes.count + 4;<br> },<br> strokewidth: function(feature) {<br> if(feature.cluster.length > 1) {<br>
return 3;<br> } else {<br> return 1;<br> }<br> },<br> fillcolor: function(feature) {<br>
if(feature.cluster) {<br> var redCount = 0;<br> var greenCount = 0;<br> for(var c = 0; c < feature.cluster.length; c++) {<br>
var i = feature.cluster[c].attributes.late;<br> if( i == 1) {<br> redCount += 1;<br> } else if (i == 0) {<br>
greenCount += 1;<br> }<br> }<br> var redPercent = Math.floor(255*(redCount / feature.cluster.length));<br>
var greenPercent = Math.floor(255*(greenCount / feature.cluster.length));<br> var rgb = "rgb(" + redPercent + "," + greenPercent + ",0)";<br>
return rgb;<br> }<br> }<br> }<br> });<br> <br>var nodes_style = new OpenLayers.Style({<br> pointRadius: 5,<br>
fillColor: "blue",<br> fillOpacity: 1.0,<br> strokeWidth: 0,<br> strokeColor: "black",<br> strokeOpacity: 1.0<br>
});<br><br>var stores_layer = new OpenLayers.Layer.Vector("Stores", {<br> styleMap: new OpenLayers.StyleMap({"default": stores_style}),<br> strategies: [<br> new OpenLayers.Strategy.Fixed(),<br>
new OpenLayers.Strategy.Refresh({interval: 60000}),<br> new OpenLayers.Strategy.Cluster()<br> ],<br> protocol: new OpenLayers.Protocol.HTTP(<br> {<br> url: "/kiosks_status_geoJSON/",<br>
headers: {'Accept':'application/json'},<br> format: new OpenLayers.Format.GeoJSON()<br> }<br> )<br> }); <br> <br>var nodes_layer = new OpenLayers.Layer.Vector("Nodes not heard from", {<br>
styleMap: new OpenLayers.StyleMap({"default": nodes_style}),<br> strategies: [<br> new OpenLayers.Strategy.Fixed(),<br> new OpenLayers.Strategy.Refresh({interval: 60000}),<br>
new OpenLayers.Strategy.Cluster()<br> ],<br> protocol: new OpenLayers.Protocol.HTTP(<br> {<br> url: "/nodes_geoJSON/",<br> headers: {'Accept':'application/json'},<br>
format: new OpenLayers.Format.GeoJSON()<br> }<br> )<br> }); <br><br>var app_WS_us_layer = new OpenLayers.Layer.Vector("WS_us", {<br> styleMap: new OpenLayers.StyleMap({"default": stores_style}),<br>
strategies: [<br> new OpenLayers.Strategy.Fixed(),<br> new OpenLayers.Strategy.Refresh({interval: 60000}),<br> new OpenLayers.Strategy.Cluster()<br> ],<br> protocol: new OpenLayers.Protocol.HTTP(<br>
{<br> url: "/kiosks_status_geoJSON/WS_us",<br> headers: {'Accept':'application/json'},<br> format: new OpenLayers.Format.GeoJSON()<br>
}<br> )<br> }); <br><br>var map_options = {controls: [<br> new OpenLayers.Control.LayerSwitcher(),<br> new OpenLayers.Control.PanZoom(),<br> new OpenLayers.Control.ScaleLine(),<br>
new OpenLayers.Control.Attribution(),<br> new OpenLayers.Control.Navigation(navigation_options)<br> ],<br> layers: [<br> baseOSM, <br>
stores_layer,<br> nodes_layer,<br> app_WS_us_layer<br> ]<br> };<br><br>var map = new OpenLayers.Map( <br> this.getContentElement().getDomElement(), <br>
map_options<br> );<br>this.__map = map;<br><br>var wgs84 = new OpenLayers.Projection("EPSG:4326");<br>var mercator = new OpenLayers.Projection("EPSG:900913");<br>
<br>map.setCenter(<br> new OpenLayers.LonLat(-98.4375,39.774769).transform(wgs84, mercator),<br> 4<br>);<br><br>var selectStoresCtrl = new OpenLayers.Control.SelectFeature(stores_layer, {<br> hover: false,<br> highlightOnly: false,<br>
onSelect: onStoreSelect,<br> onUnselect: onStoreUnselect,<br> renderIntent: "temporary"<br>});<br><br>var selectWS_us_layerCtrl = new OpenLayers.Control.SelectFeature(app_WS_us_layer, {<br> hover: false,<br>
highlightOnly: false,<br> onSelect: onStoreSelect,<br> onUnselect: onStoreUnselect,<br> renderIntent: "temporary"<br>});<br><br>map.addControl(selectStoresCtrl);<br>map.addControl(selectWS_us_layerCtrl);<br>
<br>selectStoresCtrl.activate();<br>selectWS_us_layerCtrl.activate();<br><br>function onStoresPopupClose(evt) {<br> // 'this' is the popup.<br> var feature = this.feature;<br> if (feature.layer) { // The feature is not destroyed<br>
selectStoresCtrl.unselect(feature);<br> } else { // After "moveend" or "refresh" events on POIs layer all <br> // features have been destroyed by the Strategy.BBOX<br> this.destroy();<br>
}<br>}<br><br>function onStoreSelect(feature) {<br> if (feature.attributes.count == 1) {<br> var feat = feature.cluster[0];<br> var host_id = feat.fid;<br> var label = feat.attributes.hoststring;<br>
var mainTabs = qx.core.Init.getApplication().getUserData("mainTabs");<br> mainTabs.openOrSelectKioskDetailTab(label, host_id);<br> } else {<br> var buffer = ["<h2>Hosts:</h2>"];<br>
<br> for(var c = 0; c < feature.cluster.length; c++) {<br> var late = feature.cluster[c].attributes.late;<br> var id = feature.cluster[c].fid;<br> var hoststring = feature.cluster[c].attributes.hoststring;<br>
buffer.push("<div>");<br> if (late == 0) {<br> buffer.push("<img src='/images/green_tiny.png'/> ");<br> } else {<br> buffer.push("<img src='/images/red_tiny.png'/> ");<br>
}<br> buffer.push(hoststring);<br> buffer.push("</div>");<br> }<br> var popup_html = buffer.join("");<br><br> var popup = new OpenLayers.Popup.FramedCloud("featurePopup",<br>
feature.geometry.getBounds().getCenterLonLat(), // lat/lon for popup<br> null, // size - autosize true by default.<br> popup_html,<br>
null, //anchor<br> true, // close box<br> onStoresPopupClose // close callback<br> );<br> <br>
feature.popup = popup;<br> popup.feature = feature;<br> map.addPopup(popup, true);<br> }<br>}<br><br>function onStoreUnselect(feature) {<br> if (feature.popup) {<br> feature.popup.feature = null;<br>
map.removePopup(feature.popup);<br> feature.popup.destroy();<br> feature.popup = null;<br> }<br>}<br>
</blockquote></div><br></div>