[OpenLayers-Users] How to refactor this to share the onStoresPopupClose function without hard coding?

[Scott Chapman]

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/48785caa/attachment-0001.html