topic Re: Sketch component events not triggering in ArcGIS JavaScript Maps SDK Questions

Sketch component events not triggering

RyanDickinson1 — Mon, 29 Apr 2024 19:17:50 GMT

I have a simple standalone app to test out the web components. The components in the app are a map and sketch. The map events for arcgisViewReadyChange and arcgisViewClick work as expected. However, I cannot get any events from the sketch component to trigger. See the below snippet:

works

document.querySelector('arcgis-map').addEventListener('arcgisViewClick', (event) => {

console.log("event", event )

});

does nothing

document.querySelector('arcgis-sketch').addEventListener('sketchCreate', (event) => {

console.log("sketch create", event);

});

<arcgis-map item-id="my_map_id">
<arcgis-elevation-profile position="bottom-right">
</arcgis-elevation-profile>
<arcgis-legend position="bottom-left"></arcgis-legend>
<arcgis-sketch position="top-right" creationMode="single">
</arcgis-sketch>
</arcgis-map>

Has anyone been successful in adding events to the sketch component?

Re: Sketch component events not triggering

ReneRubalcava — Tue, 30 Apr 2024 00:20:59 GMT

This works in "next", but we made some changes to the event names.

https://codepen.io/odoe/pen/yLrbBoR?editors=0011

Event names no longer include the name of the component and they are all prefixed with 'arcgis' in the names.

We'll get that added to the breaking changes here.

https://github.com/Esri/feedback-js-api-next/blob/main/CHANGELOG.md#components-breaking-changes

Re: Sketch component events not triggering

RyanDickinson1 — Tue, 30 Apr 2024 12:54:55 GMT

Thank you Rene! I copied your pen and attempted using it in a vanilla single page app. However, the event listeners couldn't register (worked in your pen):

Re: Sketch component events not triggering

ReneRubalcava — Tue, 30 Apr 2024 14:30:09 GMT

That error looks like you don't have an arcgis-sketch element on the page. If you provide a repro per the doc, could tell better.

https://developers.arcgis.com/javascript/latest/troubleshooting/#minimal-reproducible-application

Re: Sketch component events not triggering

RyanDickinson1 — Tue, 30 Apr 2024 16:19:28 GMT

I put the code into a pen and it functioned as expected. I have the standalone app hosted on a webserver and registered with Enterprise 11.1. Here is the link to the standalone in github.

Re: Sketch component events not triggering

ReneRubalcava — Tue, 30 Apr 2024 16:32:20 GMT

Ok, move the script tag with the load code to after the arcgis-map tag and before end of body tag.

<!doctype html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" /> <title>Map components AMD template</title> <link rel="icon" href="data:;base64,=" /> <style> html, body { background-color: var(--calcite-ui-foreground-2); padding: 0; margin: 0; width: 100vw; height: 100vh; } .my-button { margin: 0; position: absolute; left: 100px; top: 10px; } </style> <script type="module" src="https://js.arcgis.com/calcite-components/2.6.0/calcite.esm.js"></script> <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.6.0/calcite.css" /> <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/dark/main.css" /> <script src="https://js.arcgis.com/next/"></script> <script type="module" src="https://jsdev.arcgis.com/map-components/next/arcgis-map-components.esm.js"></script> </head> <body> <arcgis-map id="mapElem" item-id="d5dda743788a4b0688fe48f43ae7beb9"> <arcgis-sketch position="top-right"></arcgis-sketch> </arcgis-map> <script> async function load() { const sketch = document.querySelector("arcgis-sketch"); sketch.addEventListener("arcgisReady", () => { console.log("sketch ready"); }); sketch.addEventListener("arcgisCreate", (e) => { console.log("sketch create", e); }); sketch.addEventListener("arcgisUpdate", (e) => { console.log("sketch update", e); }); } load(); </script> </body> </html>

You typically want script tags with JS as the last tag in the body so that it loads after contents of the html body load.

Re: Sketch component events not triggering

RyanDickinson1 — Tue, 30 Apr 2024 18:36:13 GMT

Thank you very much Rene! That was it!