PointDrawAction Event Listener Working example?

DaleBecker · ‎11-23-2021

I am trying to implement PointDrawAction by adding to the code example at:

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-draw-PointDrawAction.html

My goal is to have the draw tool enabled on map load so that a user does not need to click on a widget button but just clicks on the map to select a point and a graphic marker will be added. When they click on a different point the 1st graphic should be removed and a new graphic created.

I tried simple adding a minimal event listener to the example code in the docs but it did not work:

view.on("Click", enableCreatePoint);

Any advice or examples you can point me to would be very helpful.

RobertScheitlin__GISP · ‎11-23-2021

@DaleBecker

Here is a sample for that:

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Draw point | Sample | ArcGIS API for JavaScript 4.21</title>

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

    <style>
      html,
      body,
      #viewDiv {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/views/draw/Draw",
        "esri/Graphic",
        "esri/layers/GraphicsLayer"
      ], (Map, MapView, Draw, Graphic, GraphicsLayer) => {
        const drawGL = new GraphicsLayer({
          id: "draw Graphics Layer"
        });
        
        const map = new Map({
          basemap: "gray-vector",
          layers:[drawGL]
        });
        
        const view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 15,
          center: [18.06, 59.34]
        });
        //map.addLayer(drawGL)

        const draw = new Draw({
          view: view
        });
        
        view.when(()=>{
          setDrawAction();
        });
        
        function setDrawAction() {
          let action = draw.create("point");

          // PointDrawAction.cursor-update
          // Give a visual feedback to users as they move the pointer over the view
          action.on("cursor-update", function (evt) {
            createPointGraphic(evt.coordinates);
          });
        
          // PointDrawAction.draw-complete
          // Create a point when user clicks on the view or presses "C" key.
          action.on("draw-complete", function (evt) {
            createPointGraphic(evt.coordinates, true);
            setDrawAction();
          });
        }
        
        function createPointGraphic(coordinates, addToGL){
          view.graphics.removeAll();
          let point = {
            type: "point", // autocasts as /Point
            x: coordinates[0],
            y: coordinates[1],
            spatialReference: view.spatialReference
          };
        
          let graphic = new Graphic({
            geometry: point,
            symbol: {
              type: "simple-marker", // autocasts as SimpleMarkerSymbol
              style: "square",
              color: "red",
              size: "16px",
              outline: { // autocasts as SimpleLineSymbol
                color: [255, 255, 0],
                width: 3
              }
            }
          });
          if(addToGL){
            drawGL.removeAll();
            drawGL.add(graphic);
          }else{
            view.graphics.add(graphic);
          }
        }
      });
    </script>
  </head>

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

View solution in original post

RobertScheitlin__GISP · ‎11-23-2021

@DaleBecker

Here is a sample for that:

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Draw point | Sample | ArcGIS API for JavaScript 4.21</title>

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

    <style>
      html,
      body,
      #viewDiv {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/views/draw/Draw",
        "esri/Graphic",
        "esri/layers/GraphicsLayer"
      ], (Map, MapView, Draw, Graphic, GraphicsLayer) => {
        const drawGL = new GraphicsLayer({
          id: "draw Graphics Layer"
        });
        
        const map = new Map({
          basemap: "gray-vector",
          layers:[drawGL]
        });
        
        const view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 15,
          center: [18.06, 59.34]
        });
        //map.addLayer(drawGL)

        const draw = new Draw({
          view: view
        });
        
        view.when(()=>{
          setDrawAction();
        });
        
        function setDrawAction() {
          let action = draw.create("point");

          // PointDrawAction.cursor-update
          // Give a visual feedback to users as they move the pointer over the view
          action.on("cursor-update", function (evt) {
            createPointGraphic(evt.coordinates);
          });
        
          // PointDrawAction.draw-complete
          // Create a point when user clicks on the view or presses "C" key.
          action.on("draw-complete", function (evt) {
            createPointGraphic(evt.coordinates, true);
            setDrawAction();
          });
        }
        
        function createPointGraphic(coordinates, addToGL){
          view.graphics.removeAll();
          let point = {
            type: "point", // autocasts as /Point
            x: coordinates[0],
            y: coordinates[1],
            spatialReference: view.spatialReference
          };
        
          let graphic = new Graphic({
            geometry: point,
            symbol: {
              type: "simple-marker", // autocasts as SimpleMarkerSymbol
              style: "square",
              color: "red",
              size: "16px",
              outline: { // autocasts as SimpleLineSymbol
                color: [255, 255, 0],
                width: 3
              }
            }
          });
          if(addToGL){
            drawGL.removeAll();
            drawGL.add(graphic);
          }else{
            view.graphics.add(graphic);
          }
        }
      });
    </script>
  </head>

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

MarcBazin · ‎07-15-2022

Hi Robert,

Thank you so much for the sample you provided, it helped me a ton ! It's exactly what I'm trying to do, except that contrary to what Dale was looking for, I would like to be able to insert this code in a widget (web Appbuilder) : the user would click on a widget button which would enable the creation of a point, which in turn would open a specific url in a new tab or window upon the click on the map.

I've been trying to simplify the Draw widget (https://developers.arcgis.com/web-appbuilder/api-reference/draw.htm) but I'm not getting anywhere. Sorry if this is too easy or has been resolved before, I am new to this.

Thanks in advance !