]> dev.renevier.net Git - syp.git/blob - openlayers/examples/panel.html
add some margin around image
[syp.git] / 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>