Public
Edited
Apr 14, 2023
5 forks
2 stars
Also listed in…
ArcGIS JS SDK
Insert cell
Insert cell
map = {
const container = html`<div id="viewDiv" />
<style>
#viewDiv {
height: 500px;
width: ${width}px;
}
</style>
`;

yield container;

const map = new ArcGIS.Map({
basemap: "arcgis-topographic"
});

const mapView = new ArcGIS.MapView({
map,
center: [-118.805, 34.027],
zoom: 13,
container,
navigation: {
mouseWheelZoomEnabled: false,
browserTouchPanEnabled: false
}
});

invalidation.then(() => mapView.destroy());
}
Insert cell
Insert cell
JS_API_VERSION = 4.25
Insert cell
JS_API_BASE_URL = `https://js.arcgis.com/${JS_API_VERSION}/@arcgis/core`
Insert cell
// 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"
Insert cell
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
};
}
Insert cell

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.
Learn more