← 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/events.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/events.html
 
1
<html xmlns="http://www.w3.org/1999/xhtml">
 
2
    <head>
 
3
        <title>OpenLayers Event Handling</title>
 
4
        <link rel="stylesheet" href="style.css" type="text/css" />
 
5
        <style type="text/css">
 
6
            #panel {
 
7
                margin: 5px;
 
8
                height: 30px; 
 
9
                width: 200px;
 
10
            }
 
11
            #panel div { 
 
12
                float: left;
 
13
                margin-left: 5px;
 
14
                width: 25px;
 
15
                height: 25px;
 
16
                border: 1px solid gray;
 
17
            }
 
18
            #output {
 
19
                position: absolute;
 
20
                left: 550px;
 
21
                top: 40px;
 
22
                width: 350px;
 
23
                height: 400px;
 
24
            }
 
25
            div.blueItemInactive {
 
26
                background-color: #aac;
 
27
            }
 
28
            div.blueItemActive {
 
29
                background-color: #33c;
 
30
            }
 
31
            div.orangeItemInactive {
 
32
                background-color: #ca6;
 
33
            }
 
34
            div.orangeItemActive {
 
35
                background-color: #ea0;
 
36
            }
 
37
            div.greenItemInactive {
 
38
                background-color: #aca;
 
39
            }
 
40
            div.greenItemActive {
 
41
                background-color: #3c3;
 
42
            }
 
43
                
 
44
        </style>
 
45
        <script src="../lib/OpenLayers.js"></script>
 
46
        <script type="text/javascript">
 
47
            var map, panel;
 
48
 
 
49
            function init(){
 
50
                
 
51
                // define custom map event listeners
 
52
                function mapEvent(event) {
 
53
                    log(event.type);
 
54
                }
 
55
                function mapBaseLayerChanged(event) {
 
56
                    log(event.type + " " + event.layer.name);
 
57
                }
 
58
                function mapLayerChanged(event) {
 
59
                    log(event.type + " " + event.layer.name + " " + event.property);
 
60
                }
 
61
                map = new OpenLayers.Map('map', {
 
62
                    eventListeners: {
 
63
                        "moveend": mapEvent,
 
64
                        "zoomend": mapEvent,
 
65
                        "changelayer": mapLayerChanged,
 
66
                        "changebaselayer": mapBaseLayerChanged
 
67
                    }
 
68
                });
 
69
 
 
70
                panel = new OpenLayers.Control.Panel(
 
71
                    {div: document.getElementById("panel")}
 
72
                );
 
73
                
 
74
                // define custom event listeners
 
75
                function toolActivate(event) {
 
76
                    log("activate " + event.object.displayClass);
 
77
                }
 
78
                function toolDeactivate(event) {
 
79
                    log("deactivate " + event.object.displayClass);
 
80
                }
 
81
                
 
82
                // Multiple objects can share listeners with the same scope
 
83
                var toolListeners = {
 
84
                    "activate": toolActivate,
 
85
                    "deactivate": toolDeactivate
 
86
                };
 
87
                var blue = new OpenLayers.Control({
 
88
                    type: OpenLayers.Control.TYPE_TOGGLE,
 
89
                    eventListeners: toolListeners,
 
90
                    displayClass: "blue"
 
91
                });
 
92
                var orange = new OpenLayers.Control({
 
93
                    type: OpenLayers.Control.TYPE_TOGGLE,
 
94
                    eventListeners: toolListeners,
 
95
                    displayClass: "orange"
 
96
                });
 
97
                var green = new OpenLayers.Control({
 
98
                    type: OpenLayers.Control.TYPE_TOGGLE,
 
99
                    eventListeners: toolListeners,
 
100
                    displayClass: "green"
 
101
                });
 
102
                
 
103
                // add buttons to a panel
 
104
                panel.addControls([blue, orange, green]);
 
105
                map.addControl(panel);
 
106
                
 
107
                var vmap = new OpenLayers.Layer.WMS(
 
108
                    "OpenLayers WMS",
 
109
                    "http://labs.metacarta.com/wms/vmap0",
 
110
                    {layers: 'basic'}
 
111
                );
 
112
                var landsat = new OpenLayers.Layer.WMS(
 
113
                    "NASA Global Mosaic",
 
114
                    "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
 
115
                    {layers: "landsat7"}
 
116
                );
 
117
                var nexrad = new OpenLayers.Layer.WMS(
 
118
                    "Nexrad",
 
119
                    "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi",
 
120
                    {layers:"nexrad-n0r-wmst", transparent: "TRUE", format: 'image/png'},
 
121
                    {isBaseLayer: false}
 
122
                );
 
123
 
 
124
 
 
125
                map.addLayers([vmap, landsat, nexrad]);
 
126
                map.addControl(new OpenLayers.Control.LayerSwitcher());
 
127
                map.zoomToMaxExtent();
 
128
 
 
129
            }
 
130
            function log(msg) {
 
131
                document.getElementById("output").innerHTML += msg + "\n";
 
132
            }
 
133
        </script>
 
134
    </head>
 
135
    <body onload="init()">
 
136
        <h1 id="title">Event Handling</h1>
 
137
 
 
138
        <div id="tags">
 
139
        </div>
 
140
 
 
141
        <p id="shortdesc">
 
142
            Demonstrating various styles of event handling in OpenLayers.
 
143
        </p>
 
144
 
 
145
        <div id="map" class="smallmap"></div>
 
146
        <div id="panel"></div>
 
147
        <textarea id="output"></textarea>
 
148
        <div id="docs"></div>
 
149
    </body>
 
150
</html>