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.
On Fri, May 11, 2012 at 1:15 PM, Scott Chapman <[email protected]> wrote: > I have a layer called 'stores_layer' and another one called > 'app_WS_us_layer', and I will be adding more of the same. > 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. > > This function appears to be the hangup for me: > function onStoresPopupClose(evt) { > // 'this' is the popup. > var feature = this.feature; > if (feature.layer) { // The feature is not destroyed > selectStoresCtrl.unselect(feature); > } else { // After "moveend" or "refresh" events on POIs layer all > // features have been destroyed by the Strategy.BBOX > this.destroy(); > } > } > > 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'. > It would be very nice if I could have a SelectFeature that worked on more > than one layer! > > Any clues on how to do this? > Thanks! > Scott > > Full map code is below: > > var arrayOSM = [ > " > http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg";, > " > http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg";, > " > http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg";, > " > http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg"; > ]; > > var baseOSM_options = {wrapDateLine: true, > attribution: '<p>Tiles Courtesy of <a href=" > http://www.mapquest.com/"; target="_blank">MapQuest</a> <img src=" > http://developer.mapquest.com/content/osm/mq_logo.png";></p>' > }; > > var baseOSM = new OpenLayers.Layer.OSM("BaseMap", > arrayOSM, > baseOSM_options); > > var navigation_options = {mouseWheelOptions: {interval: 100}}; > > var stores_style = new OpenLayers.Style({ > //pointRadius: "${radius}", > pointRadius: 5, > fillColor: "${fillcolor}", > fillOpacity: 1.0, > strokeWidth: "${strokewidth}", > strokeColor: "black", > strokeOpacity: 1.0 > }, { > context: { > radius: function(feature) { > return feature.attributes.count + 4; > }, > strokewidth: function(feature) { > if(feature.cluster.length > 1) { > return 3; > } else { > return 1; > } > }, > fillcolor: function(feature) { > if(feature.cluster) { > var redCount = 0; > var greenCount = 0; > for(var c = 0; c < feature.cluster.length; > c++) { > var i = feature.cluster[c].attributes.late; > if( i == 1) { > redCount += 1; > } else if (i == 0) { > greenCount += 1; > } > } > var redPercent = Math.floor(255*(redCount / > feature.cluster.length)); > var greenPercent = Math.floor(255*(greenCount > / feature.cluster.length)); > var rgb = "rgb(" + redPercent + "," + > greenPercent + ",0)"; > return rgb; > } > } > } > }); > > var nodes_style = new OpenLayers.Style({ > pointRadius: 5, > fillColor: "blue", > fillOpacity: 1.0, > strokeWidth: 0, > strokeColor: "black", > strokeOpacity: 1.0 > }); > > var stores_layer = new OpenLayers.Layer.Vector("Stores", { > styleMap: new OpenLayers.StyleMap({"default": stores_style}), > strategies: [ > new OpenLayers.Strategy.Fixed(), > new OpenLayers.Strategy.Refresh({interval: 60000}), > new OpenLayers.Strategy.Cluster() > ], > protocol: new OpenLayers.Protocol.HTTP( > { > url: "/kiosks_status_geoJSON/", > headers: {'Accept':'application/json'}, > format: new OpenLayers.Format.GeoJSON() > } > ) > }); > > var nodes_layer = new OpenLayers.Layer.Vector("Nodes not heard from", { > styleMap: new OpenLayers.StyleMap({"default": nodes_style}), > strategies: [ > new OpenLayers.Strategy.Fixed(), > new OpenLayers.Strategy.Refresh({interval: 60000}), > new OpenLayers.Strategy.Cluster() > ], > protocol: new OpenLayers.Protocol.HTTP( > { > url: "/nodes_geoJSON/", > headers: {'Accept':'application/json'}, > format: new OpenLayers.Format.GeoJSON() > } > ) > }); > > var app_WS_us_layer = new OpenLayers.Layer.Vector("WS_us", { > styleMap: new OpenLayers.StyleMap({"default": stores_style}), > strategies: [ > new OpenLayers.Strategy.Fixed(), > new OpenLayers.Strategy.Refresh({interval: 60000}), > new OpenLayers.Strategy.Cluster() > ], > protocol: new OpenLayers.Protocol.HTTP( > { > url: "/kiosks_status_geoJSON/WS_us", > headers: {'Accept':'application/json'}, > format: new OpenLayers.Format.GeoJSON() > } > ) > }); > > var map_options = {controls: [ > new OpenLayers.Control.LayerSwitcher(), > new OpenLayers.Control.PanZoom(), > new OpenLayers.Control.ScaleLine(), > new OpenLayers.Control.Attribution(), > new OpenLayers.Control.Navigation(navigation_options) > ], > layers: [ > baseOSM, > stores_layer, > nodes_layer, > app_WS_us_layer > ] > }; > > var map = new OpenLayers.Map( > this.getContentElement().getDomElement(), > map_options > ); > this.__map = map; > > var wgs84 = new OpenLayers.Projection("EPSG:4326"); > var mercator = new OpenLayers.Projection("EPSG:900913"); > > map.setCenter( > new OpenLayers.LonLat(-98.4375,39.774769).transform(wgs84, mercator), > 4 > ); > > var selectStoresCtrl = new OpenLayers.Control.SelectFeature(stores_layer, { > hover: false, > highlightOnly: false, > onSelect: onStoreSelect, > onUnselect: onStoreUnselect, > renderIntent: "temporary" > }); > > var selectWS_us_layerCtrl = new > OpenLayers.Control.SelectFeature(app_WS_us_layer, { > hover: false, > highlightOnly: false, > onSelect: onStoreSelect, > onUnselect: onStoreUnselect, > renderIntent: "temporary" > }); > > map.addControl(selectStoresCtrl); > map.addControl(selectWS_us_layerCtrl); > > selectStoresCtrl.activate(); > selectWS_us_layerCtrl.activate(); > > function onStoresPopupClose(evt) { > // 'this' is the popup. > var feature = this.feature; > if (feature.layer) { // The feature is not destroyed > selectStoresCtrl.unselect(feature); > } else { // After "moveend" or "refresh" events on POIs layer all > // features have been destroyed by the Strategy.BBOX > this.destroy(); > } > } > > function onStoreSelect(feature) { > if (feature.attributes.count == 1) { > var feat = feature.cluster[0]; > var host_id = feat.fid; > var label = feat.attributes.hoststring; > var mainTabs = > qx.core.Init.getApplication().getUserData("mainTabs"); > mainTabs.openOrSelectKioskDetailTab(label, host_id); > } else { > var buffer = ["<h2>Hosts:</h2>"]; > > for(var c = 0; c < feature.cluster.length; c++) { > var late = feature.cluster[c].attributes.late; > var id = feature.cluster[c].fid; > var hoststring = feature.cluster[c].attributes.hoststring; > buffer.push("<div>"); > if (late == 0) { > buffer.push("<img src='/images/green_tiny.png'/> "); > } else { > buffer.push("<img src='/images/red_tiny.png'/> "); > } > buffer.push(hoststring); > buffer.push("</div>"); > } > var popup_html = buffer.join(""); > > var popup = new OpenLayers.Popup.FramedCloud("featurePopup", > > feature.geometry.getBounds().getCenterLonLat(), // lat/lon for popup > null, // size - autosize true by default. > popup_html, > null, //anchor > true, // close box > onStoresPopupClose // close callback > ); > > feature.popup = popup; > popup.feature = feature; > map.addPopup(popup, true); > } > } > > function onStoreUnselect(feature) { > if (feature.popup) { > feature.popup.feature = null; > map.removePopup(feature.popup); > feature.popup.destroy(); > feature.popup = null; > } > } >
_______________________________________________ Users mailing list [email protected] http://lists.osgeo.org/mailman/listinfo/openlayers-users
![http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg"](http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg"){kind=link}
![http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg"](http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg"){kind=link}
![http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg"](http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg"){kind=link}
![http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg"](http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg"){kind=link}
![http://developer.mapquest.com/content/osm/mq_logo.png"](http://developer.mapquest.com/content/osm/mq_logo.png"){kind=link}