topic Re: PointDrawAction Event Listener Working example? in ArcGIS JavaScript Maps SDK Questions

PointDrawAction Event Listener Working example?

DaleBecker — Tue, 23 Nov 2021 16:45:00 GMT

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.

Re: PointDrawAction Event Listener Working example?

RobertScheitlin__GISP — Tue, 23 Nov 2021 17:10:04 GMT

@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>

Re: PointDrawAction Event Listener Working example?

MarcBazin — Fri, 15 Jul 2022 19:25:50 GMT

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 !