JSFiddle - React, Tailwind, and code Playground

by Chombito

HTML

<script src="maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ"></script>
<script src="OpenLayers.js"></script>
<link rel="stylesheet" href="style.css">
        <h1 id="title">Click Event Example</h1>

        <div id="tags">
            click control, double, doubleclick, double-click, event, events, 
            propagation, light
        </div>

        <p id="shortdesc">
            This example shows the use of the click handler and 
            getLonLatFromViewPortPx functions to trigger events on mouse click. 
        </p>

        <div id="map" class="smallmap"></div>
    
        <div id="docs">
            <p>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.</p> 
        </div>

  <br />

CSS

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

JavaScript

(function($) {

    OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
        defaultHandlerOptions: {
            'single': true,
            'double': false,
            'pixelTolerance': 0,
            '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('You clicked near ' + lonlat.lat + ' N, ' + lonlat.lon + ' E');
        }

    });
    var map;

    function init() {
        map = new OpenLayers.Map('map');

        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);