topic Getting currently selected Graphic: Graphic is empty object in ArcGIS JavaScript Maps SDK Questions

Getting currently selected Graphic: Graphic is empty object

DavidDrennan — Thu, 30 May 2024 17:40:08 GMT

Hello!

We are trying to calculate the distance/area of a user drawn graphic with the Sketch widget, which they've selected by clicking on the graphic on the map. However, it seems that the graphic is always an empty object.

The follow is a sample of what we have:

reactiveUtils.on( () => mapView, "click", (event) => { // graphicLayer is, you guessed it, a GraphicLayer mapView?.hitTest(event, { include: graphicLayer }).then(function (response) { const graphicHits = response.results?.filter( (hitResult) => hitResult?.type === "graphic" ); console.log(graphicHits); if (graphicHits?.length > 0) { // hitObj, currGraphic, and currMeasurements are initially defined // somewhere else as null hitObj = graphicHits?.at(0); currGraphic = hitObj?.graphic; console.log(currGraphic); // <- will always show a blank object // simplyGeo just calls geometryEngine.simplify() const simplified = simplifyGeo(currGraphic); // creates an object with keys geodisc and planar that are // assigned a value based on the results of // geometryEngine.geodesicArea / geometryEngine.geodesicLength or // geometryEngine.planarArea / geometryEngine.planarLength // respectively currMeasurements = getGraphicMeasurements(simplified); } }); } );

Is there something else we have to do to get the graphic's data, instead of a blank object?

Re: Getting currently selected Graphic: Graphic is empty object

JoelBennett — Thu, 30 May 2024 22:13:00 GMT

Below is the code for the Sketch widget sample with lines 52-57 added to test this behavior, and it seems to be working as expected. What version of the SDK are you using?

<html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Sketch widget | Sample | ArcGIS Maps SDK for JavaScript 4.29</title> <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.29/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> require([ "esri/widgets/Sketch", "esri/Map", "esri/layers/GraphicsLayer", "esri/views/MapView" ], (Sketch, Map, GraphicsLayer, MapView) => { const graphicsLayer = new GraphicsLayer(); const map = new Map({ basemap: "topo-vector", layers: [graphicsLayer] }); const view = new MapView({ container: "viewDiv", map: map, zoom: 5, center: [90, 45] }); view.when(() => { const sketch = new Sketch({ layer: graphicsLayer, view: view, // graphic will be selected as soon as it is created creationMode: "update" }); view.ui.add(sketch, "top-right"); view.on("click", function(evt) { view.hitTest(evt, {include:graphicsLayer}).then(function(response) { var graphic = response.results[0]?.graphic; console.info(graphic); }); }); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

Re: Getting currently selected Graphic: Graphic is empty object

DavidDrennan — Fri, 31 May 2024 14:52:53 GMT

We're using the ES module, version 4.29.7. We tried on 4.29.10 and it made no difference.

If it helps, the sample code isn't 100% the same as what we have, as it's inside of a Vue 3 application. So as a better example, we have more or less the following in a Vue 3 script-setup tag: