]> dev.renevier.net Git - syp.git/blob - openlayers/examples/draw-feature.html
detects when server sends a bad formed html page
[syp.git] / openlayers / examples / draw-feature.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2     <head>
3         <title>Draw 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             #controlToggle li {
9                 list-style: none;
10             }
11             p {
12                 width: 512px;
13             }
14         </style>
15         <script src="../lib/OpenLayers.js"></script>
16         <script type="text/javascript">
17             var map, drawControls;
18             OpenLayers.Util.onImageLoadErrorColor = "transparent";
19             function init(){
20                 map = new OpenLayers.Map('map');
21
22                 var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
23                     "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
24
25                 var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
26                 var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
27                 var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
28
29                 map.addLayers([wmsLayer, pointLayer, lineLayer, polygonLayer]);
30                 map.addControl(new OpenLayers.Control.LayerSwitcher());
31                 map.addControl(new OpenLayers.Control.MousePosition());
32
33                 drawControls = {
34                     point: new OpenLayers.Control.DrawFeature(pointLayer,
35                                 OpenLayers.Handler.Point),
36                     line: new OpenLayers.Control.DrawFeature(lineLayer,
37                                 OpenLayers.Handler.Path),
38                     polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
39                                 OpenLayers.Handler.Polygon)
40                 };
41
42                 for(var key in drawControls) {
43                     map.addControl(drawControls[key]);
44                 }
45
46                 map.setCenter(new OpenLayers.LonLat(0, 0), 3);
47
48                 document.getElementById('noneToggle').checked = true;
49             }
50
51             function toggleControl(element) {
52                 for(key in drawControls) {
53                     var control = drawControls[key];
54                     if(element.value == key && element.checked) {
55                         control.activate();
56                     } else {
57                         control.deactivate();
58                     }
59                 }
60             }
61         </script>
62     </head>
63     <body onload="init()">
64         <h1 id="title">OpenLayers Draw Feature Example</h1>
65
66         <div id="tags"></div>
67
68         <p id="shortdesc">
69             Demonstrate on-screen digitizing tools for point, line, and polygon creation.
70         </p>
71
72         <div id="map" class="smallmap"></div>
73     
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         </ul>
93
94         <div id="docs">
95             <p>With the point drawing control active, click on the map to add a point.  You can drag the point
96             before letting the mouse up if you want to adjust the position.</p>
97             <p>With the line drawing control active, click on the map to add the points that make up your line.
98             Double-click to finish drawing.</p>
99             <p>With the polygon drawing control active, click on the map to add the points that make up your
100             polygon.  Double-click to finish drawing.</p>
101             <p>Hold down the shift key while drawing to activate freehand mode.  While drawing lines or polygons
102             in freehand mode, hold the mouse down and a point will be added with every mouse movement.<p>
103         </div>
104     </body>
105 </html>