]> dev.renevier.net Git - syp.git/blob - openlayers/examples/select-feature-openpopup.html
err_lonlat_invalid exceptions not thrown correctly
[syp.git] / openlayers / examples / select-feature-openpopup.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2   <head>
3     <title>Open Popup on Layer.Vector</title> 
4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
5     <link rel="stylesheet" href="style.css" type="text/css" />
6     <style type="text/css">
7         #controlToggle li {
8             list-style: none;
9         }
10     </style>
11     <script src="../lib/OpenLayers.js"></script>
12     <script type="text/javascript">
13         var map, drawControls, selectControl, selectedFeature;
14         function onPopupClose(evt) {
15             selectControl.unselect(selectedFeature);
16         }
17         function onFeatureSelect(feature) {
18             selectedFeature = feature;
19             popup = new OpenLayers.Popup.FramedCloud("chicken", 
20                                      feature.geometry.getBounds().getCenterLonLat(),
21                                      null,
22                                      "<div style='font-size:.8em'>Feature: " + feature.id +"<br />Area: " + feature.geometry.getArea()+"</div>",
23                                      null, true, onPopupClose);
24             feature.popup = popup;
25             map.addPopup(popup);
26         }
27         function onFeatureUnselect(feature) {
28             map.removePopup(feature.popup);
29             feature.popup.destroy();
30             feature.popup = null;
31         }    
32         function init(){
33             map = new OpenLayers.Map('map');
34             var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
35                 "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}); 
36
37             var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
38
39             map.addLayers([wmsLayer, polygonLayer]);
40             map.addControl(new OpenLayers.Control.LayerSwitcher());
41             map.addControl(new OpenLayers.Control.MousePosition());
42             
43             selectControl = new OpenLayers.Control.SelectFeature(polygonLayer,
44                 {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
45             drawControls = {
46                 polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
47                             OpenLayers.Handler.Polygon),
48                 select: selectControl
49             };
50             
51             for(var key in drawControls) {
52                 map.addControl(drawControls[key]);
53             }
54
55             
56             map.setCenter(new OpenLayers.LonLat(0, 0), 3);
57
58         }
59
60         function toggleControl(element) {
61             for(key in drawControls) {
62                 var control = drawControls[key];
63                 if(element.value == key && element.checked) {
64                     control.activate();
65                 } else {
66                     control.deactivate();
67                 }
68             }
69         }
70     </script>
71   </head>
72   <body onload="init()">
73     <h1 id="title">Open Popup on Layer.Vector</h1> 
74     <p id="shortdesc">
75       Using a Control.SelectFeature, open a popup on click.
76     </p>
77     <div id="map" class="smallmap"></div>
78     <ul id="controlToggle">
79         <li>
80             <input type="radio" name="type" value="none" id="noneToggle"
81                    onclick="toggleControl(this);" checked="checked" />
82             <label for="noneToggle">navigate</label>
83         </li>
84         <li>
85             <input type="radio" name="type" value="polygon" id="polygonToggle"
86                    onclick="toggleControl(this);" />
87             <label for="polygonToggle">draw polygon</label>
88         </li>
89         <li>
90             <input type="radio" name="type" value="select" id="selectToggle"
91                    onclick="toggleControl(this);" />
92             <label for="selectToggle">select polygon on click</label>
93         </li>
94     </ul>       
95     <p>It is possible to use the onSelect/onUnselect hooks on the SelectFeature
96        to do fun things -- like open a popup.
97     </p>   
98   </body>
99 </html>