Hi I need to show coordinates from the map in the text box below. Can you make the code showing the latitude and longitude onmouseclick?

I will be very grateful.

<html>
<head>
  <title>OpenLayers Example</title>
     <script src="http://openlayers.org/api/OpenLayers.js"></script>
     <script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
    <body>
    <div id = "container" style = "width:1250px">
      <div id="header" style="background-color:#CCCCCC;text-align:center;"><h1>Услуги с кадастрални данни</h1></div>
      <div style="width:900px; height:500px; float:left" id="map"></div>
      <div id = "featureinfo" style = "width:350px; height:500px; background-color:#CCCCCC; float:right"></div>
      <div id="wrapper" style="margin:5px"><div id="map" style="width: 800px; height: 450px"></div></div>
<table cellpadding="5" cellspacing="0" border="1">
<tr>
<td width="50%" valign="left">
<br>

<h3>Get the Latitude and Longitude of a Point</h3>
<p>When you click on the map, move the marker or enter an address the latitude and longitude coordinates of the point are inserted in the boxes below.</p>
<table width="40%">
<tr><td>Latitude:</td><td colspan="3"><input size="15" type="text" id="latbox" name="lat" value="" ></td></tr>
<tr><td >Longitude:</td><td colspan="3"><input size="15" type="text" id="lonbox" name="lon" value="" ></td></tr>
<tr><td colspan="4"><br><hr></td></tr>
<tr><td> </td><td><strong>Degrees</strong></td><td><strong>Minutes</strong></td><td><strong>Seconds</strong></td></tr>
<tr><td>Latitude:</td><td><input size="5" type="text" id="latboxm" name="latm" value="" ></td><td><input size="6" type="text" id="latboxmd" name="latmd" value="" ></td><td><input size="8" type="text" id="latboxms" name="latms" value="" ></td></tr>
<tr><td >Longitude:</td><td><input size="5" type="text" id="lonboxm" name="lonm" value="" ></td><td><input size="6" type="text" id="lonboxmd" name="lonmd" value="" ></td><td><input size="8" type="text" id="lonboxms" name="lonms" value="" ></td></tr>
</table>
</td>
      <div id="coords" style="background-color:#00FF00;clear:both;"></div>
      <script defer="defer" type="text/javascript">
      /*Iniiaie ea?oe (basic layers)*/
        var layerOSGEO = new OpenLayers.Layer.WMS( "OpenLayers WMS","http://vmap0.tiles.osgeo.org/wms/vmap0", {layers:'basic'});
        var layerGoogleTerrain = new OpenLayers.Layer.Google("Google Physical",{type: google.maps.MapTypeId.TERRAIN}, {layers:'basic'});
        var layerGoogleHibrid = new OpenLayers.Layer.Google("Google Hybrid",{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20});
        /* Layers from Geoserver*/
        var myBaseLayer = new OpenLayers.Layer.WMS( "Geoserver layer","http://localhost:8080/geoserver/wms/cadsystem",
                                                    {layers:'cadsystem:cad', transparent:"true"},
                                                    {opacity: 0.4},
                                                    {isBaseLayer:false});
        var myMapLayer = new OpenLayers.Layer.WMS( "Geoserver layer","http://localhost:8080/geoserver/wms/cadsystem",
                                                    {layers:'cadsystem:zembnd', transparent:"true"},
                                                    {opacity:0.5},
                                                    {isBaseLayer:false} );

        /*Nucaaaa ea?oa a noa?e?ia ia?eaoi?iaa i?iaeoey iiecaaia io Google {projection:"EPSG:900913"}*/
        var map = new OpenLayers.Map('map', 
                                            {projection:"EPSG:900913"},
                                            {controls:[
                                            new OpenLayers.Control.PanZoom(),
                                            new OpenLayers.Control.Permalink(),
                                            new OpenLayers.Control.Navigation()
                    ]});
        map.addLayer(layerGoogleHibrid);
        map.addLayers([myMapLayer,myBaseLayer]);
        //map.addLayers([myBaseLayer]);
        map.addControl(new OpenLayers.Control.LayerSwitcher());

        var from = new OpenLayers.Projection("EPSG:4326"); 
        var to = new OpenLayers.Projection("EPSG:900913");
        var bounds = new OpenLayers.Bounds( 21.0, 40.0, 29.0, 45.0).transform(from, to);
        map.zoomToExtent(bounds);

        var crs4326 = new OpenLayers.Projection("EPSG:4326"); 
        var crs900913 = new OpenLayers.Projection("EPSG:900913");
        var crs3034 = new OpenLayers.Projection("EPSG:3034");
        var bounds = new OpenLayers.Bounds( 25.8, 42.4, 26.1, 42.6).transform(crs4326, crs900913);
        map.zoomToExtent(bounds);

        //Iieacaa oaeoue eii?aeiaoe ia eo?ni?a  
        map.events.register("mousemove", map, 
                            function(e) 
                                {
                                    var latlon = map.getLonLatFromViewPortPx(e.xy);
                                    var lat = latlon.lat;
                                    var lon = latlon.lon;
                                    OpenLayers.Util.getElement("coords").innerHTML = 
                                    'Проекционни координати: Spherical Mercator EPSG:900913: X ='+lat+'| Y='+lon;
                                });
        //Eiio?ie "clic". Iieacaa eii?aeiaoeoa ia eca?aia oi?ea io ea?oaoa
        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).transform(crs900913, crs4326);
                    alert("You clicked near " + lonlat.lat + " N, " +
                                              + lonlat.lon + " E");
                }
        });
        var click = new OpenLayers.Control.Click();
        map.addControl(click);
        click.activate();
        </script>

</body>
</html>

Recommended Answers

All 3 Replies

Try to change this:

trigger: function(e) {
    var lonlat = map.getLonLatFromPixel(e.xy).transform(crs900913, crs4326);
    alert("You clicked near " + lonlat.lat + " N, " +
    + lonlat.lon + " E");
}

with this:

trigger: function(e) {
    var lonlat = map.getLonLatFromPixel(e.xy).transform(crs900913, crs4326);
    document.getElementById("latbox").value = lonlat.lat; 
    document.getElementById("lonbox").value = lonlat.lon;
}

Thank you very much! It worked well. Unfortunatelly now I don't get the Longitude and Latitude in Degrees, Minutes Seconds. I'd be very grateful if you say me what could be the reason.

Kind Regards

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.