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