1 <html xmlns="http://www.w3.org/1999/xhtml">
3 <title>OpenLayers Click Event Example</title>
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: {
18 initialize: function(options) {
19 this.handlerOptions = OpenLayers.Util.extend(
20 {}, this.defaultHandlerOptions
22 OpenLayers.Control.prototype.initialize.apply(
25 this.handler = new OpenLayers.Handler.Click(
28 }, this.handlerOptions
32 trigger: function(e) {
33 var lonlat = map.getLonLatFromViewPortPx(e.xy);
34 alert("You clicked near " + lonlat.lat + " N, " +
41 map = new OpenLayers.Map('map');
43 var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
44 "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );
46 var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
47 "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
48 {layers: "landsat7"});
50 jpl_wms.setVisibility(false);
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();
57 var click = new OpenLayers.Control.Click();
58 map.addControl(click);
64 <body onload="init()">
65 <h1 id="title">Click Event Example</h1>
71 This example shows the use of the click handler and getLonLatFromViewPortPx functions to trigger events on mouse click.
75 <div id="map" class="smallmap"></div>
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.