openlayers/examples/click.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2     <head>
   3         <title>OpenLayers Click Event Example</title>
   4
   5         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   6         <link rel="stylesheet" href="style.css" type="text/css" />
   7         <script src="../lib/OpenLayers.js"></script>
   8         <script type="text/javascript">
   9             OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
  10                 defaultHandlerOptions: {
  11                     'single': true,
  12                     'double': false,
  13                     'pixelTolerance': 0,
  14                     'stopSingle': false,
  15                     'stopDouble': false
  16                 },
  17
  18                 initialize: function(options) {
  19                     this.handlerOptions = OpenLayers.Util.extend(
  20                         {}, this.defaultHandlerOptions
  21                     );
  22                     OpenLayers.Control.prototype.initialize.apply(
  23                         this, arguments
  24                     );
  25                     this.handler = new OpenLayers.Handler.Click(
  26                         this, {
  27                             'click': this.trigger
  28                         }, this.handlerOptions
  29                     );
  30                 },
  31
  32                 trigger: function(e) {
  33                     var lonlat = map.getLonLatFromViewPortPx(e.xy);
  34                     alert("You clicked near " + lonlat.lat + " N, " +
  35                                               + lonlat.lon + " E");
  36                 }
  37
  38             });
  39             var map;
  40             function init(){
  41                 map = new OpenLayers.Map('map');
  42
  43                 var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  44                     "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );
  45
  46             var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
  47                 "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
  48                 {layers: "landsat7"});
  49
  50                 jpl_wms.setVisibility(false);
  51
  52                 map.addLayers([ol_wms, jpl_wms]);
  53                 map.addControl(new OpenLayers.Control.LayerSwitcher());
  54                 // map.setCenter(new OpenLayers.LonLat(0, 0), 0);
  55                 map.zoomToMaxExtent();
  56
  57                 var click = new OpenLayers.Control.Click();
  58                 map.addControl(click);
  59                 click.activate();
  60
  61             }
  62         </script>
  63     </head>
  64     <body onload="init()">
  65         <h1 id="title">Click Event Example</h1>
  66
  67         <div id="tags">
  68         </div>
  69
  70         <p id="shortdesc">
  71             This example shows the use of the click handler and getLonLatFromViewPortPx functions to trigger events on mouse click.
  72
  73         </p>
  74
  75         <div id="map" class="smallmap"></div>
  76
  77         <div id="docs">
  78             Using the Click handler allows you to (for example) catch clicks without catching double clicks, something that standard browser events don't do for you. (Try double clicking: you'll zoom in, whereas using the browser click event, you would just get two alerts.) This example click control shows you how to use it.
  79         </div>
  80     </body>
  81 </html>