From ed7daa46fc50e13481bd75ac88240d53a81bd4a6 Mon Sep 17 00:00:00 2001
From: crschmidt <crschmidt@crschmidt.net>
Date: Fri, 7 Sep 2007 15:25:55 +0000
Subject: [PATCH] Example of how to open a popup when selecting a feature.

git-svn-id: http://svn.openlayers.org/trunk/openlayers@4194 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
---
 examples/select-feature-openpopup.html | 97 ++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 examples/select-feature-openpopup.html
diff --git a/examples/select-feature-openpopup.html b/examples/select-feature-openpopup.html
new file mode 100644
index 0000000000..8da9a9c19d
--- /dev/null
+++ b/examples/select-feature-openpopup.html
@@ -0,0 +1,97 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style type="text/css">
+        #map {
+            width: 800px;
+            height: 350px;
+            border: 1px solid gray;
+        }
+        #controlToggle li {
+            list-style: none;
+        }
+    </style>
+    <script src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        <!--
+        var map, drawControls, select;
+        function onFeatureSelect(feature) {
+            popup = new OpenLayers.Popup.Anchored("chicken", 
+                                     feature.geometry.getBounds().getCenterLonLat(),
+                                     new OpenLayers.Size(250,75),
+                                     "<div style='font-size:.8em'>Feature: " + feature.id +"<br />Area: " + feature.geometry.getArea()+"</div>",
+                                     null, true);
+            feature.popup = popup;
+            map.addPopup(popup);
+        }
+        function onFeatureUnselect(feature) {
+            map.removePopup(feature.popup);
+            feature.popup.destroy();
+            feature.popup = null;
+        }    
+        function init(){
+            map = new OpenLayers.Map('map');
+            var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
+                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}); 
+
+            var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
+
+            map.addLayers([wmsLayer, polygonLayer]);
+            map.addControl(new OpenLayers.Control.LayerSwitcher());
+            map.addControl(new OpenLayers.Control.MousePosition());
+            
+            drawControls = {
+                polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
+                            OpenLayers.Handler.Polygon),
+                select: new OpenLayers.Control.SelectFeature(polygonLayer,
+                {onSelect: onFeatureSelect,
+                 onUnselect: onFeatureUnselect
+                })
+            };
+            
+            for(var key in drawControls) {
+                map.addControl(drawControls[key]);
+            }
+
+            
+            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
+
+        }
+
+        function toggleControl(element) {
+            for(key in drawControls) {
+                var control = drawControls[key];
+                if(element.value == key && element.checked) {
+                    control.activate();
+                } else {
+                    control.deactivate();
+                }
+            }
+        }
+        // -->
+    </script>
+  </head>
+  <body onload="init()">
+    <h1>OpenLayers Draw Feature Example</h1>
+    <div id="map"></div>
+    <ul id="controlToggle">
+        <li>
+            <input type="radio" name="type" value="none" id="noneToggle"
+                   onclick="toggleControl(this);" checked="checked" />
+            <label for="noneToggle">navigate</label>
+        </li>
+        <li>
+            <input type="radio" name="type" value="polygon" id="polygonToggle"
+                   onclick="toggleControl(this);" />
+            <label for="polygonToggle">draw polygon</label>
+        </li>
+        <li>
+            <input type="radio" name="type" value="select" id="selectToggle"
+                   onclick="toggleControl(this);" />
+            <label for="selectToggle">select polygon on click</label>
+        </li>
+    </ul>       
+    <p>It is possible to use the onSelect/onUnselect hooks on the SelectFeature
+       to do fun things -- like open a popup.
+    </p>   
+  </body>
+</html>
