# How to edit the point on a Map by dragging the point?

854
11
04-16-2020 06:01 AM
Occasional Contributor

Hi, I want to know hod can I edit a point on a map clicking on the point then dragging it, and also updating the coordinates of the point. Below is my code, where I create a point using the saved coordinates.

<html>

<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Display point, line, and polygon graphics</title>
<style>
html,
body,
#viewDiv {
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://js.arcgis.com/4.14/"></script>

<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer"
], function(Map, MapView, Graphic, GraphicsLayer) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [28.159843448357865, -26.374449292814024],
zoom: 13
});
var graphicsLayer = new GraphicsLayer();

// Create a point
var point = {
type: "point",
longitude: 28.159843448357865,
latitude: -26.374449292814024
};
var simpleMarkerSymbol = {
type: "simple-marker",
color: [226, 119, 40], // orange
size: 30,
style: "triangle", // default is a circle
outline: {
color: [255, 255, 255], // white
width: 2
}
};
var pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol
});
});
</script>

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

</html>

Tags (4)
1 Solution

Accepted Solutions
MVP Esteemed Contributor

Not at all. You use your variable for the point class that you want thew lat an lon for and then code like this.

var lat = myPointVar.getLatitutde();

var lon = myPointVar.getLongitutde();

11 Replies
MVP Esteemed Contributor

Just use SketchViewModel update function. The SketchViewModel handles all the click events and geometry updates for you.

Occasional Contributor

Hi Robert

Please see my code, now it does not work, it does not not display the map anymore.

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Load a basic WebMap - 4.14</title>

<style>
html,
body,
#viewDiv {
margin: 0;
height: 100%;
width: 100%;
}
</style>

rel="stylesheet"
href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
/>

<script src="https://js.arcgis.com/4.14/"></script>

<script>
require(["esri/views/MapView",
"esri/WebMap",
"esri/Graphic",
"esri/config",
"esri/widgets/Sketch/SketchViewModel",
"esri/layers/GraphicsLayer"
], function(MapView, WebMap, Graphic, esriConfig, SketchViewModel, GraphicsLayer) {
/************************************************************
* Creates a new WebMap instance. A WebMap must reference
* a PortalItem ID that represents a WebMap saved to
* arcgis.com or an on-premise portal.
*
* To load a WebMap from an on-premise portal, set the portal
* url with esriConfig.portalUrl.
************************************************************/
esriConfig.portalUrl = "https://portal.environment.gov.za/portal";

var webmap = new WebMap({
portalItem: {
// autocasts as new PortalItem()
id: "04582be14885483da48f29398960f653"
}

});

/************************************************************
* Set the WebMap instance to the map property in a MapView.
************************************************************/
var view = new MapView({
map: webmap,
container: "viewDiv"
center:[ 28.159843448357865, -26.374449292814024],
zoom: 14
});

var graphicsLayer = new GraphicsLayer();

// Create a point
var point = {
type: "point",
longitude: 28.159843448357865,
latitude: -26.374449292814024
};

var simpleMarkerSymbol = {
type: "simple-maker",
color: [226, 119, 40], // orange
size: 30,
style: "circle",
outline: {
color: [255, 255, 255], // white
width: 2
}
};

var pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol
});

var sketch = new SketchViewModel({
layer: graphicsLayer,
view: view,
//container: "viewDiv"
});

position: "top-right"
});
// Listen to sketch widget's create event.
sketch.on("create", function(event) {
// check if the create event's state has changed to complete indicating
// the graphic create operation is completed.
console.log(view.zoom);
if (event.state === "complete") {
// remove the graphic from the layer. Sketch adds
// the completed graphic to the layer by default.
graphicsLayer.remove(event.graphic);

// use the graphic.geometry to query features that intersect it
selectFeatures(event.graphic.geometry);
}
});
});
</script>

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

MVP Esteemed Contributor
``````<!DOCTYPE html>
<html>

<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Load a basic WebMap - 4.14</title>

<style>
html,
body,
#viewDiv {
margin: 0;
height: 100%;
width: 100%;
}
</style>

<script src="https://js.arcgis.com/4.14/"></script>

<script>
require(["esri/views/MapView",
"esri/WebMap",
"esri/Graphic",
"esri/config",
"esri/widgets/Sketch/SketchViewModel",
"esri/layers/GraphicsLayer",
"esri/geometry/support/webMercatorUtils"
], function (MapView, WebMap, Graphic, esriConfig, SketchViewModel, GraphicsLayer, webMercatorUtils) {
/************************************************************
* Creates a new WebMap instance. A WebMap must reference
* a PortalItem ID that represents a WebMap saved to
* arcgis.com or an on-premise portal.
*
* To load a WebMap from an on-premise portal, set the portal
* url with esriConfig.portalUrl.
************************************************************/
esriConfig.portalUrl = "https://portal.environment.gov.za/portal";

var webmap = new WebMap({
portalItem: {
// autocasts as new PortalItem()
id: "04582be14885483da48f29398960f653"
}
});

/************************************************************
* Set the WebMap instance to the map property in a MapView.
************************************************************/
var view = new MapView({
map: webmap,
container: "viewDiv",
//You were missing the comma at the end of this line
center: [28.159843448357865, -26.374449292814024],
zoom: 14
});

var graphicsLayer = new GraphicsLayer();

// Create a point
var point = {
type: "point",
longitude: 28.159843448357865,
latitude: -26.374449292814024
};

var simpleMarkerSymbol = {
//You had "simple maker" notice the "r" is missing
type: "simple-marker", //
color: [226, 119, 40], // orange
size: 30,
style: "circle",
outline: {
color: [255, 255, 255], // white
width: 2
}
};

var pointGraphic = new Graphic({
//edited geometry has to be in the same spatial reference as the view
geometry: webMercatorUtils.geographicToWebMercator(point),
symbol: simpleMarkerSymbol
});

var sketch = new SketchViewModel({
layer: graphicsLayer,
view: view,
//container: "viewDiv"
});

// // Listen to sketch widget's create event.
// sketch.on("create", function (event) {
//   // check if the create event's state has changed to complete indicating
//   // the graphic create operation is completed.
//   console.log(view.zoom);
//   if (event.state === "complete") {
//     // remove the graphic from the layer. Sketch adds
//     // the completed graphic to the layer by default.
//     graphicsLayer.remove(event.graphic);

//     // use the graphic.geometry to query features that intersect it
//     selectFeatures(event.graphic.geometry);
//   }
// });

//You have to activate the sketchviewmodels update method
view.on("click", function (event) {
view.hitTest(event).then(function (response) {
var results = response.results;
results.forEach(function (result) {
if (result.graphic.layer === sketchViewModel.layer) {
sketchViewModel.update([result.graphic], {
tool: "move"
});
}
});
})
});
});
</script>

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

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍``````
Occasional Contributor

Thank you very much Robert

Occasional Contributor

Hi Robert,

Once again, thank you very much for your assistance. Your code works like a charm, thank you very much. My one last question is this, supposed I get the latitude and longitude from variables, now after I have moved the point or the pin from one location to the other obviously the coordinates will change, how can I update the variables?

MVP Esteemed Contributor

Use the Point class getLatitude() and getLongitude() methods.

Occasional Contributor

Hi Robert,

Thank you very much for the response. I went through the article, but it is not clear on how to use getLatitude() and getLongitude() methods. Must I do it like this?

var point = new Point(

{

getLatitude();

getLongitude();

});

MVP Esteemed Contributor

Not at all. You use your variable for the point class that you want thew lat an lon for and then code like this.

var lat = myPointVar.getLatitutde();

var lon = myPointVar.getLongitutde();

Occasional Contributor

Hi Robert,

When you look at the code, is

``````// Create a point
var point = {
type: "point",
longitude: 28.159843448357865,
latitude: -26.374449292814024
};``````

a point class that you are referring to? Or must I create a new class like this?

``````// Create a new class
var point = new Point{
var myLatitude;
var myLongitude;
};``````

Please forgive me for such many questions, I am new on Esri and GIS, I am trying to get as much knowledge as I can.