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>
