[GIS] how to display the coordinates of a openlayers map with a jquery in the asp.net textbox

asp.netjqueryopenlayers-2

this is my initmap.js 

OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions: {
},

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).transform("EPSG:4326", "EPSG:900913");
    alert("You clicked near " + lonlat.lat + " N, " +
                              +lonlat.lon + " E");
    //document.getElementById("TextBox1").value = lonlat.lat;
    //document.getElementById("TextBox2").value = lonlat.lon;

}

});
function init() {
size = new OpenLayers.Size(26, 30);

var mapOptions = {
    projection: new OpenLayers.Projection("EPSG:900913"),
    displayProjection: new OpenLayers.Projection("EPSG:4326"),
    //units: "m",
    //maxResolution: 156543.0339,
    //numZoomLevels: 18,
    controls: [
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.NavToolbar(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.LayerSwitcher({ 'ascending': false }),
                    //new OpenLayers.Control.Permalink(),
                    new OpenLayers.Control.ScaleLine(),
                    //new OpenLayers.Control.Permalink('Refresh'),
                    new OpenLayers.Control.MousePosition(),
                    new OpenLayers.Control.LayerSwitcher(),
                    new OpenLayers.Control.OverviewMap({
                        mapOptions: mapOptions,
                        maximized: true,

                    }),
                ]
};

map = new OpenLayers.Map('map', mapOptions);

nav = new OpenLayers.Control.NavigationHistory();
map.addControl(nav);
panel = new OpenLayers.Control.Panel(
    { div: document.getElementById("panel") }
);
panel.addControls([nav.next, nav.previous]);
map.addControl(panel);


//Ajouter les couche google
var gphy = new OpenLayers.Layer.Google(
    "Google Physical",
    { type: google.maps.MapTypeId.TERRAIN }
);
var gmap = new OpenLayers.Layer.Google(
    "Google Streets", // the default
    {numZoomLevels: 20 }
);
var ghyb = new OpenLayers.Layer.Google(
    "Google Hybrid",
    { type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20, isBaseLayer: true }
);
var gsat = new OpenLayers.Layer.Google(
    "Google Satellite",
    { type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 20}
);
map.addLayers([gsat, ghyb, gmap, gphy]);


map.addControl(new OpenLayers.Control.MousePosition({ div: document.getElementById("LabelCoords"), numDigits: 5, prefix: "", separator: ",", mapOptions: mapOptions }));
map.setCenter(new OpenLayers.LonLat(-9.2, 31.9).transform("EPSG:4326", "EPSG:900913"), 7);
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();

 }

Best Answer

You can try using OpenLayers click, and not jquery click. Here are examples: OpenLayers-2.13.1/examples/click.html, getting-the-coordinates-of-a-click-in-openlayers-map/

I created an example and uploaded to my website, it is available here: http://xerocode.com/gis/Openlayers.html

Fragments from my html file. Pay attention to the START/END blocks.

<!DOCTYPE html>
<html>
<head>
    <script src="js/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>
Related Question