]> dev.renevier.net Git - syp.git/blob - openlayers/examples/drag-feature.html
fixes notices
[syp.git] / openlayers / examples / drag-feature.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2     <head>
3         <title>Drag Feature Example</title>
4         
5         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
6         <link rel="stylesheet" href="style.css" type="text/css" />
7         <style type="text/css">
8             #controls {
9                 width: 512px;
10             }
11             #controlToggle {
12                 padding-left: 1em;
13             }
14             #controlToggle li {
15                 list-style: none;
16             }
17         </style>
18         <script src="../lib/OpenLayers.js"></script>
19         <script type="text/javascript">
20             var map, vectors, controls;
21             function init(){
22                 map = new OpenLayers.Map('map');
23                 var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
24                     "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
25     
26                 vectors = new OpenLayers.Layer.Vector("Vector Layer");
27
28                 map.addLayers([wms, vectors]);
29                 map.addControl(new OpenLayers.Control.LayerSwitcher());
30                 map.addControl(new OpenLayers.Control.MousePosition());
31
32                 controls = {
33                     point: new OpenLayers.Control.DrawFeature(vectors,
34                                 OpenLayers.Handler.Point),
35                     line: new OpenLayers.Control.DrawFeature(vectors,
36                                 OpenLayers.Handler.Path),
37                     polygon: new OpenLayers.Control.DrawFeature(vectors,
38                                 OpenLayers.Handler.Polygon),
39                     drag: new OpenLayers.Control.DragFeature(vectors)
40                 };
41
42                 for(var key in controls) {
43                     map.addControl(controls[key]);
44                 }
45
46                 map.setCenter(new OpenLayers.LonLat(0, 0), 3);
47                 document.getElementById('noneToggle').checked = true;
48             }
49
50             function toggleControl(element) {
51                 for(key in controls) {
52                     var control = controls[key];
53                     if(element.value == key && element.checked) {
54                         control.activate();
55                     } else {
56                         control.deactivate();
57                     }
58                 }
59             }
60         </script>
61     </head>
62     <body onload="init()">
63         <h1 id="title">Drag Feature Example</h1>
64
65         <div id="tags"></div>
66
67         <p id="shortdesc">
68             Demonstrates point, line and polygon creation and editing.
69         </p>
70
71         <div id="map" class="smallmap"></div>
72         
73         <div id="controls">
74             <ul id="controlToggle">
75                 <li>
76                     <input type="radio" name="type" value="none" id="noneToggle"
77                            onclick="toggleControl(this);" checked="checked" />
78                     <label for="noneToggle">navigate</label>
79                 </li>
80                 <li>
81                     <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
82                     <label for="pointToggle">draw point</label>
83                 </li>
84                 <li>
85                     <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
86                     <label for="lineToggle">draw line</label>
87                 </li>
88                 <li>
89                     <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
90                     <label for="polygonToggle">draw polygon</label>
91                 </li>
92                 <li>
93                     <input type="radio" name="type" value="drag" id="dragToggle"
94                            onclick="toggleControl(this);" />
95                     <label for="dragToggle">drag feature</label>
96                 </li>
97             </ul>
98         </div>
99
100         <div id="docs"></div>
101     </body>
102 </html>