[OpenLayers-Users] Re: How to refactor this to share the
onStoresPopupClose function without hard coding?
Scott Chapman
scott at mischko.com
Fri May 11 14:21:36 PDT 2012
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 <scott at mischko.com> 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;
> }
> }
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20120511/c5f9e458/attachment.html
More information about the Users
mailing list