31:T659,descriptionLists = htl.html`

Events and Properties

Map Events

${event}:: inactive

Map Properties

${property}:

`32:[] 2f:{"title":"ArcGIS JS API: Map Interactivity Explorer","cells":[{"id":0,"value":"# ArcGIS JS API: Map Interactivity Explorer\n\nInteract with the map below to see how events are listened for and when the map's properties are updated. This is done using the [`MapView`](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html)'s `on` and `watch` methods. \n\n**Credit:** Some code borrowed from the ArcGIS JS API docs [Event Explorer](https://developers.arcgis.com/javascript/latest/sample-code/event-explorer/).","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"map = {\n const container = html`

\n \n`;\n\n yield container;\n\n const map = new ArcGIS.Map({\n basemap: \"arcgis-topographic\"\n });\n\n const mapView = new ArcGIS.MapView({\n map,\n center: [-118.805, 34.027],\n zoom: 13,\n container,\n navigation: {\n mouseWheelZoomEnabled: false,\n browserTouchPanEnabled: false\n }\n });\n\n // update a mutable cell on a click event\n mapView.on(\"click\", (value) => {\n mutable clicked = value;\n });\n\n // update a mutable cell on a pointer-move event\n mapView.on(\"pointer-move\", (value) => {\n mutable pointerMoved = value;\n });\n\n // listen to all events\n events.forEach((event) => {\n setupEventListener(mapView, event);\n });\n\n // watch all properties\n properties.forEach((prop) => {\n setupPropertiesListener(mapView, prop);\n });\n\n invalidation.then(() => mapView.destroy());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"clicked\n ? md`You clicked the map at x: ${clicked.x}, y: ${clicked.y}`\n : md`Click the map!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"pointerMoved\n ? md`Map mouse position is x: ${pointerMoved.x}, y: ${pointerMoved.y}`\n : md`Move the mouse over the map!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"mutable clicked = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"mutable pointerMoved = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"function setupEventListener(view, name) {\n const eventRow = document.querySelector(`#${name}`);\n const eventRowData = eventRow.querySelector(`.event-data-${name}`);\n view.on(name, (value) => {\n eventRow.className = \"event active\";\n eventRowData.innerHTML = \"active\";\n if (eventRow.highlightTimeout) {\n clearTimeout(eventRow.highlightTimeout);\n }\n eventRow.highlightTimeout = setTimeout(() => {\n // after a timeout of one second disable the highlight\n eventRow.className = \"event inactive\";\n eventRowData.innerHTML = \"inactive\";\n }, 1000);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"function setupPropertiesListener(view, name) {\n const propertiesRow = document.querySelector(`#${name}`);\n console.log(\"propertiesRow: \", propertiesRow, name);\n const propertiesRowData = propertiesRow.querySelector(\n `.property-data-${name}`\n );\n view.watch(\n name,\n (value) => {\n propertiesRow.className = \"property active\";\n // set the text to the received value\n const formattedValue =\n typeof value === \"number\" ? value.toFixed(4) : value;\n propertiesRowData.innerHTML = formattedValue.toString();\n if (propertiesRow.highlightTimeout) {\n clearTimeout(propertiesRow.highlightTimeout);\n }\n propertiesRow.highlightTimeout = setTimeout(() => {\n // after a timeout of one second disable the highlight\n propertiesRow.className = \"property inactive\";\n }, 1000);\n },\n {\n initial: true\n }\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"// NOTE: Observable doesn't seem to want to allow querying html elements that have ids with \".\" in them\nproperties = [\n \"focused\",\n \"interacting\",\n \"updating\",\n \"resolution\",\n \"scale\",\n \"zoom\",\n \"stationary\"\n // \"camera.position.z\",\n // \"camera.tilt\",\n // \"camera.heading\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"events = [\n \"pointer-enter\",\n \"pointer-leave\",\n \"pointer-move\",\n \"pointer-down\",\n \"pointer-up\",\n \"immediate-click\",\n \"click\",\n \"immediate-double-click\",\n \"double-click\",\n \"mouse-wheel\",\n \"drag\",\n \"hold\",\n \"key-down\",\n \"key-up\",\n \"focus\",\n \"blur\",\n \"resize\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"JS_API_VERSION = 4.25","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"JS_API_BASE_URL = `https://js.arcgis.com/${JS_API_VERSION}/@arcgis/core`","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"// NOTE: This key will only work for this notebook, please acquire your own at: https://developers.arcgis.com/api-keys\nJS_API_KEY = \"AAPKeaa067e241884f1f8ea72a5593cb8821aRuJV_aPxvhDXViKpdrzEOnB8RKhvKVPogv2Ry0d5AlAMEqq8S66zKkwHWHFBZKg\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"ArcGIS = {\n const Config = await (await import(`${JS_API_BASE_URL}/config.js`)).default;\n const Map = await (await import(`${JS_API_BASE_URL}/Map.js`)).default;\n const MapView = await (\n await import(`${JS_API_BASE_URL}/views/MapView.js`)\n ).default;\n\n Config.apiKey = JS_API_KEY;\n\n if (!Config._style) {\n const href = await require.resolve(\n `${JS_API_BASE_URL}/assets/esri/themes/light/main.css`\n );\n document.head.appendChild(\n (Config._style = html``)\n );\n }\n\n return {\n Config,\n Map,\n MapView\n };\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}