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

SiyabongaKubeka · ‎04-16-2020

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>

</html>

RobertScheitlin__GISP · ‎04-20-2020

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

RobertScheitlin__GISP · ‎04-16-2020

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

SketchViewModel | ArcGIS API for JavaScript 4.15

SiyabongaKubeka · ‎04-16-2020

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>

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

RobertScheitlin__GISP · ‎04-17-2020

<!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 · ‎04-18-2020

Thank you very much Robert

SiyabongaKubeka · ‎04-20-2020

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?

RobertScheitlin__GISP · ‎04-20-2020

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

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

SiyabongaKubeka · ‎04-20-2020

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

});

RobertScheitlin__GISP · ‎04-20-2020

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 · ‎04-20-2020

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.