How to get the coordinates of the pin/marker?

SiyabongaKubeka · ‎01-07-2020

Hi,

I have this JavaScript code that allows me to drop a pin/marker on to a map. Now I want to get the coordinates of the dropped pin. How do I do that? Please see code below:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>APPLICATION</title>

const map = new Map({
basemap: "streets",
layers: [layer]
});

const view = new MapView({
container: "viewDiv",
map: map,
zoom: 5,
center: [90, 45]
});

const sketch = new Sketch({
layer: layer,
view: view,
availableCreateTools: ["point"]
});

view.ui.add(sketch, "top-right");

sketch.on('create', function(evt){
console.info(evt.graphic.geometry);
});
});
</script>
</head>

Egge-Jan_Pollé · ‎01-07-2020

Hi Siyabonga Kubeka,

To get the X an Y coordinates of the pin, I only slightly modified your code:

I removed console.info(evt.graphic.geometry); and replaced it with 2 new lines:

console.log("X = ", evt.graphic.geometry.x);
console.log("Y = ", evt.graphic.geometry.y);

(See line 57 and 58 in the script below)

This will print the coordinate values to the console.

HTH,

Egge-Jan

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>APPLICATION</title>

<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>

<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/widgets/Sketch",
"esri/Map",
"esri/layers/GraphicsLayer",
"esri/views/MapView"
], function(Sketch, Map, GraphicsLayer, MapView) {
const layer = new GraphicsLayer();

const map = new Map({
basemap: "streets",
layers: [layer]
});

const view = new MapView({
container: "viewDiv",
map: map,
zoom: 5,
center: [90, 45]
});

const sketch = new Sketch({
layer: layer,
view: view,
availableCreateTools: ["point"]
});

view.ui.add(sketch, "top-right");

sketch.on('create', function(evt){
console.log("X = ", evt.graphic.geometry.x);
console.log("Y = ", evt.graphic.geometry.y);
});
});
</script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

Egge-Jan_Pollé · ‎01-07-2020