Maps, Data, Viz, UX, Design
Public
Edited
Dec 2, 2022
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",
ground: "world-elevation"
});
const sceneView = new ArcGIS.SceneView({
container: "viewDiv", // Reference to the DOM node that will contain the view
map: map // References the map object created in step 3
});
// const mapView = new ArcGIS.MapView({
// map,
// center: [-122.27, 37.8],
// padding: {
// top: 16,
// right: 16,
// left: 16,
// bottom: 16
// },
// zoom: 13,
// container,
// navigation: {
// mouseWheelZoomEnabled: false,
// browserTouchPanEnabled: false
// }
// });
invalidation.then(() => sceneView.destroy());
}
ArcGIS = {
const imports = await Promise.all(
[
"/config",
"/layers/GeoJSONLayer",
"/Map",
"/views/MapView",
"/views/SceneView",
"/renderers/SimpleRenderer",
"/symbols/SimpleLineSymbol"
].map((d) => getImport(d))
);
const importNames = [
"Config",
"GeoJSONLayer",
"Map",
"MapView",
"SceneView",
"SimpleRenderer",
"SimpleLineSymbol"
];
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;
}
import {
getImport,
JS_API_KEY,
JS_API_BASE_URL
} from "@clhenrick/arcgis-js-api-gpx-route-overlay"
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.
