Click Event Example

http://openlayers.org/dev/examples/click.html

by Thomas B.

HTML

<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<script src="http://fbug.googlecode.com/svn/lite/branches/flexBox/content/firebug-lite-dev.js"></script>
<script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ"></script>
<script src="http://dev.openlayers.org/releases/OpenLayers-2.13.1/OpenLayers.js"></script>
        <h1 id="title">Click Event Example</h1>



        <div id="map" class="smallmap"></div>
    

  <br />
  <p><a href="http://openlayers.org/dev/examples/click.html">Original
  OpenLayers Example</a>.</p>

CSS

.olControlAttribution {
                bottom: 5px;
            }
            #map {
                width: 600px;
                height: 400px;
            }

JavaScript

(function($) {

    OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
        defaultHandlerOptions: {
            'single': true,
            'double': false,
            'pixelTolerance': 1,
            'stopSingle': false,
            'stopDouble': false
        },

        initialize: function(options) {
            this.handlerOptions = OpenLayers.Util.extend({}, this.defaultHandlerOptions);
            OpenLayers.Control.prototype.initialize.apply(
            this, arguments);
            this.handler = new OpenLayers.Handler.Click(
            this, {
                'click': this.trigger
            }, this.handlerOptions);
        },

        trigger: function(e) {
            var lonlat = map.getLonLatFromViewPortPx(e.xy);
            alert('Click event near ' + lonlat.lat + ' N, ' + lonlat.lon + ' E');
        }

    });
    var map;

    function init() {
        map = new OpenLayers.Map('map');
        
        map.events.register("touchstart", this, function(e) {
                       var lonlat = map.getLonLatFromViewPortPx(e.xy);
            alert('Touch event near ' + lonlat.lat + ' N, ' + lonlat.lon + ' E');                                    
                });
        
        var ol_wms = new OpenLayers.Layer.WMS('OpenLayers WMS', 'http://vmap0.tiles.osgeo.org/wms/vmap0?', {
            layers: 'basic'
        });

        var jpl_wms = new OpenLayers.Layer.WMS('NASA Global Mosaic', 'http://t1.hypercube.telascience.org/cgi-bin/landsat7', {
            layers: 'landsat7'
        });

        jpl_wms.setVisibility(false);

        map.addLayers([ol_wms, jpl_wms]);
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        // map.setCenter(new OpenLayers.LonLat(0, 0), 0);
        map.zoomToMaxExtent();

        var click = new OpenLayers.Control.Click();
       map.addControl(click);
        click.activate();

    }

    init();
})(jQuery);