openlayers/examples/editingtoolbar-outside.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3   <head>
   4     <title>OpenLayers: Custom Editing Toolbar</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">
   8         .olControlEditingToolbar  {
   9             float:left;
  10             right: 0px;
  11             height: 30px;
  12             width: 150px;
  13         }
  14     </style>
  15     <script src="../lib/Firebug/firebug.js"></script>
  16     <script src="../lib/OpenLayers.js"></script>
  17     <script type="text/javascript">
  18         var lon = 5;
  19         var lat = 40;
  20         var zoom = 5;
  21         var map, layer;
  22
  23         function init(){
  24             map = new OpenLayers.Map('map', {theme: null});
  25             layer = new OpenLayers.Layer.WMS(
  26                 "OpenLayers WMS",
  27                 "http://labs.metacarta.com/wms/vmap0",
  28                 {layers: "basic"}
  29             );
  30             map.addLayer(layer);
  31
  32             vlayer = new OpenLayers.Layer.Vector( "Editable" );
  33             map.addLayer(vlayer);
  34             var container = document.getElementById("panel");
  35             var panel = new OpenLayers.Control.EditingToolbar(
  36                 vlayer, {div: container}
  37             );
  38             map.addControl(panel);
  39
  40             map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
  41         }
  42     </script>
  43   </head>
  44   <body onload="init()">
  45     <h1 id="title">OpenLayers EditingToolbar Outside Viewport</h1>
  46     <p id="shortdesc">
  47         Display an editing toolbar panel outside the map viewport.
  48     </p>
  49     <div id="map" class="smallmap"></div>
  50     <div id="panel" class="olControlEditingToolbar"></div>
  51   </body>
  52 </html>