[OpenLayers-Commits] r7319 - sandbox/topp/almanac/examples

commits at openlayers.org commits at openlayers.org
Thu Jun 5 22:32:58 EDT 2008


Author: sbenthall
Date: 2008-06-05 22:32:58 -0400 (Thu, 05 Jun 2008)
New Revision: 7319

Added:
   sandbox/topp/almanac/examples/radio-toolswitch.html
Log:
Example for demonstrating the Radio and ToolSwitch controls

Added: sandbox/topp/almanac/examples/radio-toolswitch.html
===================================================================
--- sandbox/topp/almanac/examples/radio-toolswitch.html	                        (rev 0)
+++ sandbox/topp/almanac/examples/radio-toolswitch.html	2008-06-06 02:32:58 UTC (rev 7319)
@@ -0,0 +1,96 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+		<title>Edit Feature</title>
+                <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+        <style type="text/css">
+            #map {
+                width: 512px;
+                height: 512px;
+                border: 1px solid gray;
+            }
+            
+            div .selected {
+                background-color: #EEEEEE
+            }
+        </style>
+        <script language="javascript" type="text/javascript" src="./lib/Firebug/firebug.js"></script>
+        <script src="../lib/OpenLayers.js"></script>
+        <script type="text/javascript">
+             var map, vectors, controls, toolswitch, radio;
+        function init(){
+            map = new OpenLayers.Map('map');
+            var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
+                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
+            vectors = new OpenLayers.Layer.Vector("Vector Layer");
+
+            map.addLayers([wms, vectors]);
+            map.addControl(new OpenLayers.Control.LayerSwitcher());
+            map.addControl(new OpenLayers.Control.MousePosition())
+            
+            var tools = {
+                'point': new OpenLayers.Control.DrawFeature(vectors,
+                            OpenLayers.Handler.Point),
+                'polygon': new OpenLayers.Control.DrawFeature(vectors,
+                            OpenLayers.Handler.Polygon),
+                'modify': new OpenLayers.Control.ModifyFeature(vectors)
+            };        
+                        
+            toolswitch = new OpenLayers.Control.ToolSwitch(vectors, tools);
+            map.addControl(toolswitch);
+            
+            radio = new OpenLayers.Control.Radio(
+                [
+                    {
+                        id: "modifyFeatureRadio",
+                        value: 'modify'
+                    },
+                    {
+                        id: "drawPointRadio",
+                        value: 'point'
+                    },
+                    {
+                        id: "drawPolygonRadio",
+                        value: 'polygon'
+                    }
+                ]
+            )
+            map.addControl(radio);
+            
+            var radioBehavior = function(evt){
+                toolswitch.switchTool(evt.value);
+            }
+            
+            //oh, behave!
+            radio.setOnclickBehavior('modify', null, radioBehavior);            
+            radio.setOnclickBehavior('point', null, radioBehavior);           
+            radio.setOnclickBehavior('polygon', null, radioBehavior);
+            
+            radio.activate();
+            toolswitch.activate();
+
+            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
+        }
+        
+        </script>
+        
+	</head>
+	<body onload="init()">
+	    <div id="map"></div>
+         <div id="controls">
+          Click to activate the tools.
+          <ul id="controlToggle">
+            <li>
+                <div id="modifyFeatureRadio">modify feature</div>
+            </li>
+            <li>
+                <div id="drawPointRadio">draw point</div>
+            </li>
+            <li>
+                <div id="drawPolygonRadio">draw polygon</div>
+            </li>
+        </ul>
+    </div>
+	</body>
+</html>



More information about the Commits mailing list