OpenLayers OpenLayers

root/trunk/openlayers/examples/events.html

Revision 7095, 5.2 kB (checked in by tschaub, 4 months ago)

giving examples some style

Line 
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>
Note: See TracBrowser for help on using the browser.