No additional events registered on the LayerSwitcher.

With the buttonclick event, we can also handle clicks on layer names and checkboxes/radiobuttons when they get the olButton class. To make this work on iOS, we have to add a check in buttonclick.js to handle the case where the event occurred on a text element (nodeType === 3).

lib/OpenLayers/Control/LayerSwitcher.js

@@ -197,11 +197,25 @@ OpenLayers.Control.LayerSwitcher =
      * evt - {Event}
      */
     onButtonClick: function(evt) {
-        if (evt.buttonElement === this.minimizeDiv) {
+        var button = evt.buttonElement;
+        if (button === this.minimizeDiv) {
             this.minimizeControl();
-        } else if (evt.buttonElement === this.maximizeDiv) {
+        } else if (button === this.maximizeDiv) {
             this.maximizeControl();
-        };
+        } else if (button._layerSwitcher === this.id) {
+            if (button["for"]) {
+                button = document.getElementById(button["for"]);
+            }
+            if (!button.disabled) {
+                if (button.type == "radio") {
+                    button.checked = true;
+                    this.map.setBaseLayer(this.map.getLayer(button._layer));
+                } else {
+                    button.checked = !button.checked;
+                    this.updateMap();
+                }
+            }
+        }
     },
 
     /** 
@@ -213,14 +227,6 @@ OpenLayers.Control.LayerSwitcher =
      * layersType - {String}  
      */
     clearLayersArray: function(layersType) {
-        var layers = this[layersType + "Layers"];
-        if (layers) {
-            for(var i=0, len=layers.length; i<len ; i++) {
-                var layer = layers[i];
-                OpenLayers.Event.stopObservingElement(layer.inputElem);
-                OpenLayers.Event.stopObservingElement(layer.labelSpan);
-            }
-        }
         this[layersType + "LayersDiv"].innerHTML = "";
         this[layersType + "Layers"] = [];
     },
@@ -320,32 +326,26 @@ OpenLayers.Control.LayerSwitcher =
                 inputElem.value = layer.name;
                 inputElem.checked = checked;
                 inputElem.defaultChecked = checked;
+                inputElem.className = "olButton";
+                inputElem._layer = layer.id;
+                inputElem._layerSwitcher = this.id;
 
                 if (!baseLayer && !layer.inRange) {
                     inputElem.disabled = true;
                 }
-                var context = {
-                    'inputElem': inputElem,
-                    'layer': layer,
-                    'layerSwitcher': this
-                };
-                var onInputClick = OpenLayers.Function.bindAsEventListener(
-                    this.onInputClick, context
-                );
-                OpenLayers.Event.observe(inputElem, "mousedown", onInputClick);
-                OpenLayers.Event.observe(inputElem, "touchstart", onInputClick);
                 
                 // create span
-                var labelSpan = document.createElement("span");
+                var labelSpan = document.createElement("label");
-                OpenLayers.Element.addClass(labelSpan, "labelSpan");
+                labelSpan["for"] = inputElem.id;
+                OpenLayers.Element.addClass(labelSpan, "labelSpan olButton");
+                labelSpan._layer = layer.id;
+                labelSpan._layerSwitcher = this.id;
                 if (!baseLayer && !layer.inRange) {
                     labelSpan.style.color = "gray";
                 }
                 labelSpan.innerHTML = layer.name;
                 labelSpan.style.verticalAlign = (baseLayer) ? "bottom" 
                                                             : "baseline";
-                OpenLayers.Event.observe(labelSpan, "click", onInputClick);
-                OpenLayers.Event.observe(labelSpan, "touchstart", onInputClick);
                 // create line break
                 var br = document.createElement("br");
     
@@ -376,49 +376,6 @@ OpenLayers.Control.LayerSwitcher =
         return this.div;
     },
 
-    /** 
-     * Method:
-     * A label has been clicked, check or uncheck its corresponding input
-     * 
-     * Parameters:
-     * e - {Event} 
-     *
-     * Context: 
-     * - {Object}
-     *
-     * Object structure:
-     *  inputElem - {DOMElement} 
-     *  layerSwitcher - {<OpenLayers.Control.LayerSwitcher>} 
-     *  layer - {<OpenLayers.Layer>} 
-     */
-
-    onInputClick: function(e) {
-
-        if (!this.inputElem.disabled) {
-            if (this.inputElem.type == "radio") {
-                this.inputElem.checked = true;
-                this.layer.map.setBaseLayer(this.layer);
-            } else {
-                this.inputElem.checked = !this.inputElem.checked;
-                this.layerSwitcher.updateMap();
-            }
-        }
-        OpenLayers.Event.stop(e);
-    },
-    
-    /**
-     * Method: onLayerClick
-     * Need to update the map accordingly whenever user clicks in either of
-     *     the layers.
-     * 
-     * Parameters: 
-     * e - {Event} 
-     */
-    onLayerClick: function(e) {
-        this.updateMap();
-    },
-
-
     /** 
      * Method: updateMap
      * Cycles through the loaded data and base layer input arrays and makes

lib/OpenLayers/Events/buttonclick.js

@@ -108,7 +108,7 @@ OpenLayers.Events.buttonclick = OpenLayers.Class({
         var propagate = true,
             element = OpenLayers.Event.element(evt);
         if (element && (OpenLayers.Event.isLeftClick(evt) || !~evt.type.indexOf("mouse"))) {
-            if (OpenLayers.Element.hasClass(element, "olAlphaImg")) {
+            if (element.nodeType === 3 || OpenLayers.Element.hasClass(element, "olAlphaImg")) {
                 element = element.parentNode;
             }
             if (OpenLayers.Element.hasClass(element, "olButton")) {