diff --git a/lib/OpenLayers/Control/LayerSwitcher.js b/lib/OpenLayers/Control/LayerSwitcher.js index 69497e468b..39ac5cf104 100644 --- a/lib/OpenLayers/Control/LayerSwitcher.js +++ b/lib/OpenLayers/Control/LayerSwitcher.js @@ -25,7 +25,7 @@ OpenLayers.Control.LayerSwitcher.prototype = baseLayersDiv: null, /** @type Array */ - baseLayerInputs: null, + baseLayers: null, /** @type DOMElement */ @@ -35,7 +35,7 @@ OpenLayers.Control.LayerSwitcher.prototype = dataLayersDiv: null, /** @type Array */ - dataLayerInputs: null, + dataLayers: null, /** @type DOMElement */ @@ -85,6 +85,27 @@ OpenLayers.Control.LayerSwitcher.prototype = return this.div; }, + /** user specifies either "base" or "data". we then clear all the + * corresponding listeners, the div, and reinitialize a new array. + * + * @private + * + * @param {String} layersType Ei + */ + clearLayersArray: function(layersType) { + var layers = this[layersType + "Layers"]; + if (layers) { + for(var i=0; i < layers.length; i++) { + var layer = layers[i]; + OpenLayers.Event.stopObservingElement(layer.inputElem); + OpenLayers.Event.stopObservingElement(layer.labelSpan); + } + } + this[layersType + "LayersDiv"].innerHTML = ""; + this[layersType + "Layers"] = new Array(); + }, + + /** Goes through and takes the current state of the Map and rebuilds the * control to display that state. Groups base layers into a radio-button * group and lists each data layer with a checkbox. @@ -95,11 +116,8 @@ OpenLayers.Control.LayerSwitcher.prototype = redraw: function() { //clear out previous layers - this.baseLayersDiv.innerHTML = ""; - this.baseLayerInputs = new Array(); - - this.dataLayersDiv.innerHTML = ""; - this.dataLayerInputs = new Array(); + this.clearLayersArray("base"); + this.clearLayersArray("data"); var containsOverlays = false; @@ -128,14 +146,17 @@ OpenLayers.Control.LayerSwitcher.prototype = inputElem.value = layer.name; inputElem.checked = checked; inputElem.defaultChecked = checked; - inputElem.layer = layer; - inputElem.control = this; if (!baseLayer && !layer.inRange) { inputElem.disabled = true; } + var context = { + 'inputElem': inputElem, + 'layer': layer, + 'layerSwitcher': this + } OpenLayers.Event.observe(inputElem, "mouseup", - this.onInputClick.bindAsEventListener(inputElem)); + this.onInputClick.bindAsEventListener(context)); // create span var labelSpan = document.createElement("span"); @@ -143,16 +164,21 @@ OpenLayers.Control.LayerSwitcher.prototype = labelSpan.style.color = "gray"; } labelSpan.innerHTML = layer.name; - labelSpan.style.verticalAlign = (baseLayer) ? "bottom" : "baseline"; + labelSpan.style.verticalAlign = (baseLayer) ? "bottom" + : "baseline"; OpenLayers.Event.observe(labelSpan, "click", - this.onInputClick.bindAsEventListener(inputElem)); + this.onInputClick.bindAsEventListener(context)); // create line break var br = document.createElement("br"); - var groupArray = (baseLayer) ? this.baseLayerInputs - : this.dataLayerInputs; - groupArray.push(inputElem); + var groupArray = (baseLayer) ? this.baseLayers + : this.dataLayers; + groupArray.push({ + 'layer': layer, + 'inputElem': inputElem, + 'labelSpan': labelSpan + }); var groupDiv = (baseLayer) ? this.baseLayersDiv @@ -173,18 +199,24 @@ OpenLayers.Control.LayerSwitcher.prototype = * * @private * + * @context + * {DOMElement} inputElem + * {OpenLayers.Control.LayerSwitcher} layerSwitcher + * {OpenLayers.Layer} layer + * * @param {Event} e */ onInputClick: function(e) { - if (!this.disabled) { - if (this.type == "radio") { - this.checked = true; + + if (!this.inputElem.disabled) { + if (this.inputElem.type == "radio") { + this.inputElem.checked = true; this.layer.map.setBaseLayer(this.layer, true); this.layer.map.events.triggerEvent("changebaselayer"); } else { - this.checked = !this.checked; - this.control.updateMap(); + this.inputElem.checked = !this.inputElem.checked; + this.layerSwitcher.updateMap(); } } OpenLayers.Event.stop(e); @@ -211,17 +243,17 @@ OpenLayers.Control.LayerSwitcher.prototype = updateMap: function() { // set the newly selected base layer - for(var i=0; i < this.baseLayerInputs.length; i++) { - var input = this.baseLayerInputs[i]; - if (input.checked) { - this.map.setBaseLayer(input.layer, false); + for(var i=0; i < this.baseLayers.length; i++) { + var layerEntry = this.baseLayers[i]; + if (layerEntry.inputElem.checked) { + this.map.setBaseLayer(layerEntry.layer, false); } } // set the correct visibilities for the overlays - for(var i=0; i < this.dataLayerInputs.length; i++) { - var input = this.dataLayerInputs[i]; - input.layer.setVisibility(input.checked, true); + for(var i=0; i < this.dataLayers.length; i++) { + var layerEntry = this.dataLayers[i]; + layerEntry.layer.setVisibility(layerEntry.inputElem.checked, true); } },