0

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>
2
Contributors
3
Replies
41
Views
3 Years
Discussion Span
Last Post by albucurus
0

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;
}
0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.