<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Event explorer / watch properties | Sample | ArcGIS Maps SDK for JavaScript</title>
<!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
<script type="module" src="https://js.arcgis.com/5.0/"></script>
grid-template-columns: 1fr auto;
--calcite-font-size: 0.85rem;
transition: background-color 0.5s ease-out;
font-size: var(--calcite-font-size);
background-color: #99ccff;
camera-position="-101.17, 20.76793656, 12908164.47184"
<arcgis-zoom slot="top-left"></arcgis-zoom>
<arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
<arcgis-compass slot="top-left"></arcgis-compass>
<calcite-panel class="menu" scale="s">
<calcite-block-group scale="s">
<calcite-block expanded id="events" heading="Component Events">
href="https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#events"
<calcite-action scale="s" text="Information" icon="information"></calcite-action>
<calcite-block expanded id="properties" heading="Component Properties">
href="https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#properties"
<calcite-action scale="s" text="Information" icon="information"></calcite-action>
const [reactiveUtils] = await $arcgis.import(["@arcgis/core/core/reactiveUtils.js"]);
const viewElement = document.querySelector("arcgis-scene");
"arcgisViewPointerEnter",
"arcgisViewPointerLeave",
"arcgisViewImmediateClick",
"arcgisViewImmediateDoubleClick",
// For the purpose of the sample, this is only a selection of properties,
// but any property on the component can be watched for.
await viewElement.viewOnReady();
// Dynamically create the table of events and properties from the defined array.
const createTables = () => {
const eventsTable = document.getElementById("events");
let content = eventsTable.innerHTML;
for (let i = 0; i < events.length; i++) {
content += '<div class="event" id="' + events[i] + '">' + events[i];
eventsTable.innerHTML = content;
const propertiesTable = document.getElementById("properties");
content = propertiesTable.innerHTML;
for (let i = 0; i < properties.length; i++) {
'<div class="property" id="' + properties[i] + '">' + properties[i] + " = </div>";
propertiesTable.innerHTML = content;
const setupEventListener = (element, name) => {
const eventRow = document.getElementById(name);
element.addEventListener(name, () => {
eventRow.className = "event active";
if (eventRow.highlightTimeout) {
clearTimeout(eventRow.highlightTimeout);
eventRow.highlightTimeout = setTimeout(() => {
// After a timeout of one second disable the highlight.
eventRow.className = "event inactive";
const updatePropertiesRow = (value, propertiesRow) => {
propertiesRow.className = "property active";
propertiesRow.innerHTML = propertiesRow.innerHTML.substring(
propertiesRow.innerHTML.indexOf(" = "),
// Set the text to the received value.
const formattedValue = typeof value === "number" ? value.toFixed(4) : value;
propertiesRow.innerHTML += " = " + formattedValue.toString();
if (propertiesRow.highlightTimeout) {
clearTimeout(propertiesRow.highlightTimeout);
propertiesRow.highlightTimeout = setTimeout(() => {
// After a timeout of one second disable the highlight.
propertiesRow.className = "property inactive";
const setupPropertiesListener = (view, name) => {
const propertiesRow = document.getElementById(name);
const nameParts = name.split(".");
nameParts.length === 1 &&
() => view[nameParts[0]],
(value) => updatePropertiesRow(value, propertiesRow),
nameParts.length === 2 &&
() => view[nameParts[0]][nameParts[1]],
(value) => updatePropertiesRow(value, propertiesRow),
nameParts.length === 3 &&
() => view[nameParts[0]][nameParts[1]][nameParts[2]],
(value) => updatePropertiesRow(value, propertiesRow),
// Create the tables for the events and properties.
// setup all view events defined in the array
for (let i = 0; i < events.length; i++) {
setupEventListener(viewElement, events[i]);
// Setup all watch properties defined in the array.
for (let i = 0; i < properties.length; i++) {
setupPropertiesListener(viewElement, properties[i]);