I try to get a piece of code sample for obtaining X/Y though a mouse-click. Appreciate if you can share yours.
Solved! Go to Solution.
Is there any way we can add address also along with longitude and latitude. Below is the script I wrote for address but don't know how add XY info in it.
map = new Map("mapDiv", {
basemap: "topo",
center: [-95.249, 38.954],
zoom: 5,
sliderStyle: "large"
});
// Set up a locator task using the world geocoding service
var locator = new Locator("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
var infoTemplate = new InfoTemplate("Location", "Address: ${Address}<br/>" +
"City: ${City}<br/>" +
"State: ${Region}<br/>");
var symbol = new SimpleMarkerSymbol().setStyle(
SimpleMarkerSymbol.STYLE_CIRCLE).setColor(
new Color([0,0,255,0.5])
);
locator.on("location-to-address-complete", function(evt) {
map.graphics.clear();
console.log(evt);
if (evt.address.address) {
var address = evt.address.address;
var location = webMercatorUtils.geographicToWebMercator(evt.address.location);
var graphic = new Graphic(location, symbol, address, infoTemplate);
map.graphics.add(graphic);
map.infoWindow.setTitle(graphic.getTitle());
map.infoWindow.setContent(graphic.getContent());
//display the info window with the address information
var screenPnt = map.toScreen(location);
map.infoWindow.resize(300,100);
map.infoWindow.show(screenPnt, map.getInfoWindowAnchor(screenPnt), evt.mapPoint);
}
});
map.on("click", function(evt) {
map.graphics.clear();
var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
locator.locationToAddress(mp, 100);
});
Thanks
Not sure exactly what you're trying to accomplish here. This is the simplest way to pull XY values from a mouse click:
map.on("click", function(evt){
var mp = webMercatorUtils.webMercatorToGeographic(evt);
var x = mp.x.toFixed(3);
var y = mp.y.toFixed(3);
})
If you console.log(); x and y, you'll get latitude and longitude coordinates to three digits.
I am trying to add XY coordinates as well as address of that location. And if there is no address then it should show no address found for this location.
Thanks
Manjari Goyal
Hey,
Try this sample-
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Get Map Coordinates</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<style>
html, body, #mapDiv {
padding: 0;
margin: 0;
height: 100%;
}
#messages{
background-color: #fff;
box-shadow: 0 0 5px #888;
font-size: 1.1em;
max-width: 15em;
padding: 0.5em;
position: absolute;
right: 20px;
top: 20px;
z-index: 40;
}
</style>
<script src="https://js.arcgis.com/3.18/"></script>
<script>
var map;
require([
"esri/map",
"esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol", "esri/Color", "dojo/dom", "dojo/domReady!"
], function(
Map,
Graphic, InfoTemplate, SimpleMarkerSymbol,
SimpleLineSymbol, Color, dom
) {
map = new Map("mapDiv", {
basemap: "streets",
center: [-95.249, 38.954],
zoom: 14,
slider: false
});
// selection symbol used to draw the selected census block points within the buffer polygon
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
12,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_NULL,
new Color([247, 34, 101, 0.9]),
1
),
new Color([207, 34, 171, 0.5])
);
//when the map is clicked create a buffer around the click point of the specified distance.
map.on("click", function(evt){
map.graphics.clear();
map.graphics.add(new Graphic(evt.mapPoint, symbol));
map.infoWindow.setContent("X: " + evt.mapPoint.x.toString() + ", <br>Y: " + evt.mapPoint.y.toString());
map.infoWindow.show(evt.mapPoint)
});
});
</script>
</head>
<body>
<span id="messages">Click on the map to get the coordinates.</span>
<div id="mapDiv"></div>
</body>
</html>
hello,
I think if you want to display address too then that becomes a service related query that the mouse event has to fire at the time of click.
These are the two links that might be helpful to you. Second link would be more helpful.
ArcGIS API for JavaScript Sandbox
ArcGIS API for JavaScript Sandbox
Harsh