1 files changed, 106 insertions, 0 deletions
diff --git a/misc/openlayers/examples/select-feature-openpopup.html b/misc/openlayers/examples/select-feature-openpopup.html
new file mode 100644
index 0000000..cdd0e41
--- /dev/null
+++ b/misc/openlayers/examples/select-feature-openpopup.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <title>Open Popup on Layer.Vector</title> 
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+    <link rel="stylesheet" href="style.css" type="text/css">
+    <style type="text/css">
+        #controlToggle li {
+            list-style: none;
+        }
+    </style>
+    <script src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        var map, drawControls, selectControl, selectedFeature;
+        function onPopupClose(evt) {
+            selectControl.unselect(selectedFeature);
+        }
+        function onFeatureSelect(feature) {
+            selectedFeature = feature;
+            popup = new OpenLayers.Popup.FramedCloud("chicken", 
+                                     feature.geometry.getBounds().getCenterLonLat(),
+                                     null,
+                                     "<div style='font-size:.8em'>Feature: " + feature.id +"<br>Area: " + feature.geometry.getArea()+"</div>",
+                                     null, true, onPopupClose);
+            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://vmap0.tiles.osgeo.org/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());
+            
+            selectControl = new OpenLayers.Control.SelectFeature(polygonLayer,
+                {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
+            drawControls = {
+                polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
+                            OpenLayers.Handler.Polygon),
+                select: selectControl
+            };
+            
+            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 id="title">Open Popup on Layer.Vector</h1> 
+    <div id="tags">
+        vector, feature, selecting, selection, popup
+    </div>    
+    <p id="shortdesc">
+      Using a Control.SelectFeature, open a popup on click.
+    </p>
+    <div id="map" class="smallmap"></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>