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>