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

854
11
Jump to solution
04-16-2020 06:01 AM
SiyabongaKubeka
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>

<head>
<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 {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link 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/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();
map.add(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
});
graphicsLayer.add(pointGraphic);
});
</script>
</head>

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

</html>

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
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();

View solution in original post

11 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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

SketchViewModel | ArcGIS API for JavaScript 4.15 

0 Kudos
SiyabongaKubeka
Occasional Contributor

Hi Robert

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

<!DOCTYPE html>
<html>
<head>
<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 {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>

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

webmap.layers.add(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
});
graphicsLayer.add(pointGraphic);

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

view.ui.add(sketch, {
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>
</head>

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor
<!DOCTYPE html>
<html>

<head>
  <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 {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link 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",
      "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();
      webmap.layers.add(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
      });
      graphicsLayer.add(pointGraphic);

      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>
</head>

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

</html>
SiyabongaKubeka
Occasional Contributor

Thank you very much Robert

0 Kudos
SiyabongaKubeka
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?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

https://developers.arcgis.com/javascript/3/jsapi/point-amd.html#getlatitude 

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

});

0 Kudos
RobertScheitlin__GISP
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();

SiyabongaKubeka
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.

0 Kudos