← Back to branch summary

~mortenoh/+junk/dhis2-detailed-import-export

« back to all changes in this revision

Viewing changes to gis/dhis-gis-geostat/mfbase/openlayers/examples/panel.html

  • Committer: larshelge at gmail
  • Date: 2009-03-03 16:46:36 UTC
  • Revision ID: larshelge@gmail.com-20090303164636-2sjlrquo7ib1gf7r
Initial check-in

Show diffs side-by-side

added added

removed removed

Lines of Context:
gis/dhis-gis-geostat/mfbase/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>