Maps, Data, Viz, UX, Design
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"
getImport = async ({ path, ext = ".js", def = true }) => {
const uri = `${JS_API_BASE_URL}${path}${ext}`;
const module = await await import(uri);
if (def) {
return module.default;
}
return module;
}
ArcGIS = {
const imports = await Promise.all(
[
{ path: "/config" },
{ path: "/Map" },
{ path: "/views/MapView" },
{ path: "/views/SceneView" },
{ path: "/Graphic" },
{ path: "/core/reactiveUtils", def: false },
{ path: "/core/promiseUtils", def: false }
].map((d) => getImport(d))
);
const importNames = [
"Config",
"Map",
"MapView",
"SceneView",
"Graphic",
"reactiveUtils",
"promiseUtils"
];
const ArcGIS = Object.fromEntries(imports.map((d, i) => [importNames[i], d]));
const { Config } = ArcGIS;
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 ArcGIS;
}
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.
