openlayers/examples/panel.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>OpenLayers: Control Panel</title>
   4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   5     <link rel="stylesheet" href="style.css" type="text/css" />
   6     <style type="text/css">
   7         .olControlPanel div {
   8           display:block;
   9           width:  24px;
  10           height: 24px;
  11           margin: 5px;
  12           background-color:red;
  13         }
  14
  15         .olControlPanel .olControlMouseDefaultsItemActive {
  16           background-color: blue;
  17           background-image: url("../theme/default/img/pan_on.png");
  18         }
  19         .olControlPanel .olControlMouseDefaultsItemInactive {
  20           background-color: orange;
  21           background-image: url("../theme/default/img/pan_off.png");
  22         }
  23         .olControlPanel .olControlDrawFeatureItemActive {
  24           width:  22px;
  25           height: 22px;
  26           background-image: url("../theme/default/img/draw_line_on.png");
  27         }
  28         .olControlPanel .olControlDrawFeatureItemInactive {
  29           width:  22px;
  30           height: 22px;
  31           background-image: url("../theme/default/img/draw_line_off.png");
  32         }
  33         .olControlPanel .olControlZoomBoxItemInactive {
  34           width:  22px;
  35           height: 22px;
  36           background-color: orange;
  37           background-image: url("../img/drag-rectangle-off.png");
  38         }
  39         .olControlPanel .olControlZoomBoxItemActive {
  40           width:  22px;
  41           height: 22px;
  42           background-color: blue;
  43           background-image: url("../img/drag-rectangle-on.png");
  44         }
  45         .olControlPanel .olControlZoomToMaxExtentItemInactive {
  46           width:  18px;
  47           height: 18px;
  48           background-image: url("../img/zoom-world-mini.png");
  49         }
  50
  51     </style>
  52     <script src="../lib/Firebug/firebug.js"></script>
  53     <script src="../lib/OpenLayers.js"></script>
  54     <script type="text/javascript">
  55         var lon = 5;
  56         var lat = 40;
  57         var zoom = 5;
  58         var map, layer;
  59
  60         function init(){
  61             map = new OpenLayers.Map( 'map', { controls: [] } );
  62             layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  63                     "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
  64             map.addLayer(layer);
  65
  66             vlayer = new OpenLayers.Layer.Vector( "Editable" );
  67             map.addLayer(vlayer);
  68
  69
  70             zb = new OpenLayers.Control.ZoomBox(
  71                 {title:"Zoom box: Selecting it you can zoom on an area by clicking and dragging."});
  72             var panel = new OpenLayers.Control.Panel({defaultControl: zb});
  73             panel.addControls([
  74                 new OpenLayers.Control.MouseDefaults(
  75                     {title:'You can use the default mouse configuration'}),
  76                 zb,
  77                 new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path,
  78                     {title:'Draw a feature'}),
  79                 new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to the max extent"})
  80             ]);
  81             map.addControl(panel);
  82
  83             map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
  84         }
  85     </script>
  86   </head>
  87   <body onload="init()">
  88     <h3 id="title">Custom Control.Panel</h3>
  89     <p id="shortdesc">
  90       Create a custom control.panel, styled entirely with
  91       CSS, and add your own controls to it.
  92     </p>
  93     <div id="panel"></div>
  94     <div id="map" class="smallmap"></div>
  95   </body>
  96 </html>