how to display the coordinates of a openlayers map with a jquery in my asp.net textbox?

Question 1

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();
 }

Question 2

I note that the getCoordsClick function is not running even though I called I want to know why not?

Question 3

I want to be sure I understand. When user clicks on map, you want to display coordinates in the textbox called "LabelCoords"? And in place of "show x" and "show y" you want to show real coordinates, for example -12.21 and 31.54 ?

Question 4

yes exactely thats what i want to do

Question 5

Is this code available to see online? You can try using Google Chrome, press F12, see "console". i.imgur.com/cdQpMMw.png Do you see any error here, when you click on the map?

Question 6

i have some errore but i don understand what to do i.imgur.com/Nu8WeJs.jpg

Question 7

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>

Question 8

after using this code i have after I click on the map I get this i.imgur.com/Vjx9wgx.jpg

Question 9

I think the function getCoordsClick is not in a state of reading I use a master page it may be its the problem!!!

Question 10

@wissam I edited my answer. I don't know your HTML structure. You only showed small part of HTML. But I think problem is conflict between jquery and openlayers. When user clicks in the map, openlayers click event happens.

Question 11

it work for <input type="textbox" id="siteX" /> but not for <asp:TextBox ID="siteX" runat="server"></asp:TextBox> whene i try to call the inpute in my classe map.aspx.cs it doesnt called

Question 12

Edit your question, show map.aspx code. I use ASP.NET at work, don't know why you have a problem. Do you have Iframe in your page?

afaf12 afaf12 842 silver badges15 bronze badges · Accepted Answer · 2014-04-19 20:49:21Z

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>

after using this code i have after I click on the map I get this i.imgur.com/Vjx9wgx.jpg
I think the function getCoordsClick is not in a state of reading I use a master page it may be its the problem!!!
@wissam I edited my answer. I don't know your HTML structure. You only showed small part of HTML. But I think problem is conflict between jquery and openlayers. When user clicks in the map, openlayers click event happens.
it work for <input type="textbox" id="siteX" /> but not for <asp:TextBox ID="siteX" runat="server"></asp:TextBox> whene i try to call the inpute in my classe map.aspx.cs it doesnt called
Edit your question, show map.aspx code. I use ASP.NET at work, don't know why you have a problem. Do you have Iframe in your page?

Stack Exchange Network

how to display the coordinates of a openlayers map with a jquery in my asp.net textbox?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

how to display the coordinates of a openlayers map with a jquery in my asp.net textbox?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions