1 <html xmlns="http://www.w3.org/1999/xhtml">
3 <title>OpenLayers Event Handling</title>
4 <link rel="stylesheet" href="style.css" type="text/css" />
5 <style type="text/css">
16 border: 1px solid gray;
25 div.blueItemInactive {
26 background-color: #aac;
29 background-color: #33c;
31 div.orangeItemInactive {
32 background-color: #ca6;
34 div.orangeItemActive {
35 background-color: #ea0;
37 div.greenItemInactive {
38 background-color: #aca;
41 background-color: #3c3;
45 <script src="../lib/OpenLayers.js"></script>
46 <script type="text/javascript">
51 // define custom map event listeners
52 function mapEvent(event) {
55 function mapBaseLayerChanged(event) {
56 log(event.type + " " + event.layer.name);
58 function mapLayerChanged(event) {
59 log(event.type + " " + event.layer.name + " " + event.property);
61 map = new OpenLayers.Map('map', {
65 "changelayer": mapLayerChanged,
66 "changebaselayer": mapBaseLayerChanged
70 panel = new OpenLayers.Control.Panel(
71 {div: document.getElementById("panel")}
74 // define custom event listeners
75 function toolActivate(event) {
76 log("activate " + event.object.displayClass);
78 function toolDeactivate(event) {
79 log("deactivate " + event.object.displayClass);
82 // Multiple objects can share listeners with the same scope
84 "activate": toolActivate,
85 "deactivate": toolDeactivate
87 var blue = new OpenLayers.Control({
88 type: OpenLayers.Control.TYPE_TOGGLE,
89 eventListeners: toolListeners,
92 var orange = new OpenLayers.Control({
93 type: OpenLayers.Control.TYPE_TOGGLE,
94 eventListeners: toolListeners,
95 displayClass: "orange"
97 var green = new OpenLayers.Control({
98 type: OpenLayers.Control.TYPE_TOGGLE,
99 eventListeners: toolListeners,
100 displayClass: "green"
103 // add buttons to a panel
104 panel.addControls([blue, orange, green]);
105 map.addControl(panel);
107 var vmap = new OpenLayers.Layer.WMS(
109 "http://labs.metacarta.com/wms/vmap0",
112 var landsat = new OpenLayers.Layer.WMS(
113 "NASA Global Mosaic",
114 "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
117 var nexrad = new OpenLayers.Layer.WMS(
119 "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi",
120 {layers:"nexrad-n0r-wmst", transparent: "TRUE", format: 'image/png'},
125 map.addLayers([vmap, landsat, nexrad]);
126 map.addControl(new OpenLayers.Control.LayerSwitcher());
127 map.zoomToMaxExtent();
131 document.getElementById("output").innerHTML += msg + "\n";
135 <body onload="init()">
136 <h1 id="title">Event Handling</h1>
142 Demonstrating various styles of event handling in OpenLayers.
145 <div id="map" class="smallmap"></div>
146 <div id="panel"></div>
147 <textarea id="output"></textarea>
148 <div id="docs"></div>