Hi,
Is there anyways to get the value of longitude/latitude when click on the map?
I want the value to be display on input textbox. Is it possible to do that?
Below is my code:
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic"
], function(Map,
MapView, Graphic) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [110.36402943937549,1.5128959885365645], // longitude, latitude
zoom: 18
});
var point = {
type: "point",
longitude: 110.36402943937549,
latitude: 1.5128959885365645
};
var simpleMarkerSymbol = {
type: "simple-marker",
color: [226, 119, 40], // orange
outline: {
color: [255, 255, 255], // white
width: 1
}
};
var pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol
});
view.graphics.add(pointGraphic);
});
Thank you so much!
Regards,
Stacie
Solved! Go to Solution.
Hi Stacie T.,
Of course you can! The moment you have these values (i.e. lon and lat) you can do anything you want with them... 🙂
I have modified the code above by adding a line (line 92), to show the values in the "instruction" div:
document.getElementById("instruction").innerHTML = "Lon: " + lon + " / Lat: " + lat;
Is this what you need?
Egge-Jan
Hi Stacie,
What do you think about the code below?
I modified this sample to make your map clickable:
Intro to popups | ArcGIS API for JavaScript 4.11
When you click in your map you will not only retrieve the coordinates but also an address (when available).
Please let me know what you think 🙂
Cheers,
Egge-Jan
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: click on the map</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#instruction {
padding: 15px;
background: white;
color: black;
border: 5px solid gold;
font-family: sans-serif;
font-size: 1.2em;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/tasks/Locator",
"esri/Map",
"esri/views/MapView",
"esri/Graphic"
], function(Locator, Map, MapView, Graphic) {
// Set up a locator task using the world geocoding service
var locatorTask = new Locator({
url:
"https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
});
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [110.36402943937549,1.5128959885365645], // longitude, latitude
zoom: 18
});
view.ui.add("instruction", "bottom-left");
var point = {
type: "point",
longitude: 110.36402943937549,
latitude: 1.5128959885365645
};
var simpleMarkerSymbol = {
type: "simple-marker",
color: [226, 119, 40], // orange
outline: {
color: [255, 255, 255], // white
width: 1
}
};
var pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol
});
view.graphics.add(pointGraphic);
/*******************************************************************
* This click event sets generic content on the popup not tied to
* a layer, graphic, or popupTemplate. The location of the point is
* used as input to a reverse geocode method and the resulting
* address is printed to the popup content.
*******************************************************************/
view.popup.autoOpenEnabled = false;
view.on("click", function(event) {
// Get the coordinates of the click on the view
var lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
var lon = Math.round(event.mapPoint.longitude * 1000) / 1000;
view.popup.open({
// Set the popup's title to the coordinates of the location
title: "Reverse geocode: [" + lon + ", " + lat + "]",
location: event.mapPoint // Set the location of the popup to the clicked location
});
document.getElementById("instruction").innerHTML = "Lon: " + lon + " / Lat: " + lat;
// Display the popup
// Execute a reverse geocode using the clicked location
locatorTask
.locationToAddress(event.mapPoint)
.then(function(response) {
// If an address is successfully found, show it in the popup's content
view.popup.content = response.address;
})
.catch(function(error) {
// If the promise fails and no result is found, show a generic message
view.popup.content = "No address was found for this location";
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="instruction">
Click on the map to retrieve coordinates and address
</div>
</body>
</html>
Hi Egge-Jan,
Yes, this is what I want. But can it be on textbox (value of longitude and latitude) instead of popup message?
Thanks,
Stacie
Hi Stacie T.,
Of course you can! The moment you have these values (i.e. lon and lat) you can do anything you want with them... 🙂
I have modified the code above by adding a line (line 92), to show the values in the "instruction" div:
document.getElementById("instruction").innerHTML = "Lon: " + lon + " / Lat: " + lat;
Is this what you need?
Egge-Jan
Hi Egge-Jan Pollé,
Yes. Thank you so much! This is what I want.
Is it possible to make the marker follow whenever click on the map?
Regards,
Stacie
Hi Stacie T.,
You told me that you already found a solution for this last question about the marker following your clicks on the map.
Below I publish the code of my solution anyway, so you can compare it with yours.
The idea is simple:
Does this match your solution?
BR,
Egge-Jan
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: point on the map</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#instruction {
padding: 15px;
background: white;
color: black;
border: 5px solid gold;
font-family: sans-serif;
font-size: 1.2em;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/tasks/Locator",
"esri/Map",
"esri/views/MapView",
"esri/Graphic"
], function(Locator, Map, MapView, Graphic) {
// Set up a locator task using the world geocoding service
var locatorTask = new Locator({
url:
"https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
});
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [110.36402943937549,1.5128959885365645], // longitude, latitude
zoom: 18
});
view.ui.add("instruction", "bottom-left");
var simpleMarkerSymbol = {
type: "simple-marker",
color: [226, 119, 40], // orange
outline: {
color: [255, 255, 255], // white
width: 1
}
};
//create a Graphic without geometry - this will be set later
var pointOnTheMap = new Graphic({
symbol: simpleMarkerSymbol
});
// add the 'invisible' Graphic to the MapView
view.graphics.add(pointOnTheMap);
/*******************************************************************
* This click event sets generic content on the popup not tied to
* a layer, graphic, or popupTemplate. The location of the point is
* used as input to a reverse geocode method and the resulting
* address is printed to the popup content.
*******************************************************************/
view.popup.autoOpenEnabled = false;
view.on("click", function(event) {
// Get the coordinates of the click on the view
var longitude = event.mapPoint.longitude;
var latitude = event.mapPoint.latitude;
// Round the coordinates for visualization purposes
var lon = Math.round(longitude * 1000) / 1000;
var lat = Math.round(latitude * 1000) / 1000;
var point = {
type: "point",
longitude: longitude, // Please make sure to use the unrounded values
latitude: latitude // otherwise your point will appear in the wrong spot
};
pointOnTheMap.geometry = point;
view.popup.open({
// Set the popup's title to the coordinates of the location
title: "Reverse geocode: [" + longitude + ", " + latitude + "]",
location: event.mapPoint // Set the location of the popup to the clicked location
});
document.getElementById("instruction").innerHTML = "Lon: " + lon + " / Lat: " + lat;
// Display the popup
// Execute a reverse geocode using the clicked location
locatorTask
.locationToAddress(event.mapPoint)
.then(function(response) {
// If an address is successfully found, show it in the popup's content
view.popup.content = response.address;
})
.catch(function(error) {
// If the promise fails and no result is found, show a generic message
view.popup.content = "No address was found for this location";
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="instruction">
Click on the map to retrieve coordinates and address
</div>
</body>
</html>