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
<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?
Solved! Go to Solution.
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.
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
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):
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
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.
Thank you very much Rene! That was it!