1 <html xmlns="http://www.w3.org/1999/xhtml">
3 <title>Drag Feature Example</title>
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">
18 <script src="../lib/OpenLayers.js"></script>
19 <script type="text/javascript">
20 var map, vectors, controls;
22 map = new OpenLayers.Map('map');
23 var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
24 "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
26 vectors = new OpenLayers.Layer.Vector("Vector Layer");
28 map.addLayers([wms, vectors]);
29 map.addControl(new OpenLayers.Control.LayerSwitcher());
30 map.addControl(new OpenLayers.Control.MousePosition());
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)
42 for(var key in controls) {
43 map.addControl(controls[key]);
46 map.setCenter(new OpenLayers.LonLat(0, 0), 3);
47 document.getElementById('noneToggle').checked = true;
50 function toggleControl(element) {
51 for(key in controls) {
52 var control = controls[key];
53 if(element.value == key && element.checked) {
62 <body onload="init()">
63 <h1 id="title">Drag Feature Example</h1>
68 Demonstrates point, line and polygon creation and editing.
71 <div id="map" class="smallmap"></div>
74 <ul id="controlToggle">
76 <input type="radio" name="type" value="none" id="noneToggle"
77 onclick="toggleControl(this);" checked="checked" />
78 <label for="noneToggle">navigate</label>
81 <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
82 <label for="pointToggle">draw point</label>
85 <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
86 <label for="lineToggle">draw line</label>
89 <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
90 <label for="polygonToggle">draw polygon</label>
93 <input type="radio" name="type" value="drag" id="dragToggle"
94 onclick="toggleControl(this);" />
95 <label for="dragToggle">drag feature</label>
100 <div id="docs"></div>