Maps, Data, Viz, UX, Design
mutable clicked = null
mutable pointerMoved = null
function setupEventListener(view, name) {
const eventRow = document.querySelector(`#${name}`);
const eventRowData = eventRow.querySelector(`.event-data-${name}`);
view.on(name, (value) => {
eventRow.className = "event active";
eventRowData.innerHTML = "active";
if (eventRow.highlightTimeout) {
clearTimeout(eventRow.highlightTimeout);
}
eventRow.highlightTimeout = setTimeout(() => {
// after a timeout of one second disable the highlight
eventRow.className = "event inactive";
eventRowData.innerHTML = "inactive";
}, 1000);
});
}
function setupPropertiesListener(view, name) {
const propertiesRow = document.querySelector(`#${name}`);
console.log("propertiesRow: ", propertiesRow, name);
const propertiesRowData = propertiesRow.querySelector(
`.property-data-${name}`
);
view.watch(
name,
(value) => {
propertiesRow.className = "property active";
// set the text to the received value
const formattedValue =
typeof value === "number" ? value.toFixed(4) : value;
propertiesRowData.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";
}, 1000);
},
{
initial: true
}
);
}
// NOTE: Observable doesn't seem to want to allow querying html elements that have ids with "." in them
properties = [
"focused",
"interacting",
"updating",
"resolution",
"scale",
"zoom",
"stationary"
// "camera.position.z",
// "camera.tilt",
// "camera.heading"
]
events = [
"pointer-enter",
"pointer-leave",
"pointer-move",
"pointer-down",
"pointer-up",
"immediate-click",
"click",
"immediate-double-click",
"double-click",
"mouse-wheel",
"drag",
"hold",
"key-down",
"key-up",
"focus",
"blur",
"resize"
]
JS_API_VERSION = 4.25
JS_API_BASE_URL = `https://js.arcgis.com/${JS_API_VERSION}/@arcgis/core`
// NOTE: This key will only work for this notebook, please acquire your own at: https://developers.arcgis.com/api-keys
JS_API_KEY = "AAPKeaa067e241884f1f8ea72a5593cb8821aRuJV_aPxvhDXViKpdrzEOnB8RKhvKVPogv2Ry0d5AlAMEqq8S66zKkwHWHFBZKg"
ArcGIS = {
const Config = await (await import(`${JS_API_BASE_URL}/config.js`)).default;
const Map = await (await import(`${JS_API_BASE_URL}/Map.js`)).default;
const MapView = await (
await import(`${JS_API_BASE_URL}/views/MapView.js`)
).default;
Config.apiKey = JS_API_KEY;
if (!Config._style) {
const href = await require.resolve(
`${JS_API_BASE_URL}/assets/esri/themes/light/main.css`
);
document.head.appendChild(
(Config._style = html`<link href=${href} rel=stylesheet>`)
);
}
return {
Config,
Map,
MapView
};
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
