Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript">
        // START
        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.getLonLatFromPixel(e.xy);
            document.getElementById("siteX").value = lonlat.lat;
            document.getElementById("siteY").value = lonlat.lon;
        }
​
        });
        // END
​
        var lon = 5;
        var lat = 40;
        var zoom = 5;
        var map, layer;
​
        function init()
        {
            map = new OpenLayers.Map( 'map' );
            layer = new OpenLayers.Layer.MapServer( "OpenLayers WMS",
                    "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'},
                    {gutter: 15});
            map.addLayer(layer);
​
            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
            map.addControl( new OpenLayers.Control.LayerSwitcher() );
​
            // START
            var click = new OpenLayers.Control.Click();
            map.addControl(click);
            click.activate();
           // END
        }
    </script>
</head>
<body onload="init()">
    <div id="map" class="smallmap"></div>
    <!-- START -->
    <input type="textbox" id="siteX" />
    <input type="textbox" id="siteY" />
    <!-- END -->
</body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers