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>