add LayerSwitcher control. Currently, when added, this will simply loop through all the map layers, display a div (with text in it) which allows you tu turn the layer on or off. Layer visibility is a new concept in Layer.js, including a getter and setter, which uses the style.visibility prop to change the status of the layer.

git-svn-id: http://svn.openlayers.org/trunk/openlayers@31 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

example.html

@@ -24,6 +24,7 @@
                 {map: '/mapdata/vmap_wms.map', layers: 'basic', format: 'image/jpeg'} );
                 
             map.addLayer(layer);
+            map.addControl( new OpenLayers.Control.LayerSwitcher() );
             map.setCenter(new OpenLayers.LatLon(lat, lon), zoom);
         }
         // -->

google.html

@@ -29,6 +29,7 @@
             map.setCenter(new OpenLayers.LatLon(lat, lon), zoom);
             map.addLayer(layer);
             map.addLayer(gmap);
+            map.addControl( new OpenLayers.Control.LayerSwitcher() );
         }
         // -->
     </script>

lib/OpenLayers.js

@@ -45,7 +45,8 @@ catch(e){
         "OpenLayers/Layer/Grid.js",
         "OpenLayers/Layer/WMS.js",
         "OpenLayers/Control.js",
-        "OpenLayers/Control/PanZoom.js"
+        "OpenLayers/Control/PanZoom.js",
+        "OpenLayers/Control/LayerSwitcher.js"
     ); // etc.
 
     var allScriptTags = "";

lib/OpenLayers/Control/LayerSwitcher.js

@@ -0,0 +1,41 @@
+OpenLayers.Control.LayerSwitcher = Class.create();
+OpenLayers.Control.LayerSwitcher.prototype = 
+  Object.extend( new OpenLayers.Control(), {
+    initialize: function() {
+        OpenLayers.Control.prototype.initialize.apply(this, arguments);
+    },
+    
+    draw: function() {
+        // initialize our internal div
+        OpenLayers.Control.prototype.draw.apply(this);
+        var pixel = new OpenLayers.Pixel(this.map.div.clientWidth-200,4);
+        for(i=0; i<this.map.layers.length; i++) {
+            var div = OpenLayers.Util.createDiv("LayerControl_layer"+i,pixel,new OpenLayers.Size(200,20));
+            div.innerHTML = this.map.layers[i].name;
+            div.style.backgroundColor="white";
+            div.style.padding="5px";
+            div.layerid = i;
+            div.map = this.map;
+            div.ondblclick = this.doubleClick.bindAsEventListener(div);
+            div.onmousedown = this.singleClick.bindAsEventListener(div);
+            this.div.appendChild(div);
+            pixel = pixel.addY(35);
+        }
+        return this.div;
+    },
+    singleClick: function(evt) {
+        var status = this.map.layers[this.layerid].getVisibility();
+        this.map.layers[this.layerid].setVisibility(!status);
+        if (status) {
+            this.style.backgroundColor="black";
+            this.style.color="white";
+        } else {
+            this.style.backgroundColor="white";
+            this.style.color="black";
+        }
+        Event.stop(evt);
+    },
+    doubleClick: function(evt) {
+        Event.stop(evt);
+    }
+});

lib/OpenLayers/Layer.js

@@ -10,6 +10,8 @@ OpenLayers.Layer.prototype = {
     // OpenLayers.Map
     map: null,
 
+    status: null,
+
     /**
     * @param {str} name
     */
@@ -18,6 +20,7 @@ OpenLayers.Layer.prototype = {
         this.div = OpenLayers.Util.createDiv();
         this.div.style.width="100%";
         this.div.style.height="100%";
+        this.status = true;
     },
     
     /**
@@ -35,5 +38,17 @@ OpenLayers.Layer.prototype = {
     moveTo: function (bound,zoomChanged) {
         // not implemented here
         return;
+    },
+    getVisibility: function() {
+        return this.status;
+    },
+    setVisibility: function(on) {
+        if (on) {
+            this.div.style.display="block";
+        } else {
+            this.div.style.display="none";
+        }
+        this.status = on;
     }
+    
 };