Public
Edited
Mar 9, 2023
Insert cell
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 geojsonRenderer = new ArcGIS.SimpleRenderer({
symbol: new ArcGIS.SimpleLineSymbol({
width: 2,
color: "#333"
})
});

const geojsonLayer = new ArcGIS.GeoJSONLayer({
url: dataUrl,
renderer: geojsonRenderer
});

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
}
});

// add the geojson layer to the map
map.add(geojsonLayer);

// set the map's zoom and extent to that of the geojson layer's
geojsonLayer
.when(() => {
return geojsonLayer.queryExtent();
})
.then((response) => {
mapView.goTo(response.extent);
});

// clean up when cell re-runs
invalidation.then(() => mapView.destroy());
}
Insert cell
dataUrl = {
const blob = new Blob([JSON.stringify(data)], { type: "application/json" });
const url = URL.createObjectURL(blob);
return url;
}
Insert cell
dataCoordinateProps = data?.features?.[0]?.properties?.coordinateProperties
Insert cell
data = toGeoJson.gpx(dataRaw || luckyduck_shop_ride__168__goldenrod_Copy)
Insert cell
dataRaw = {
if (!file) return null;
const text = await file.text();
const parser = new DOMParser();
const doc = parser.parseFromString(text, "application/xml");
return doc;
}
Insert cell
luckyduck_shop_ride__168__goldenrod_Copy = FileAttachment("Luckyduck_Shop_Ride__168__Goldenrod_(copy).gpx").xml()
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
getImport = async (path, ext = ".js") =>
await (
await import(`${JS_API_BASE_URL}${path}${ext}`)
).default
Insert cell
ArcGIS = {
const imports = await Promise.all(
[
"/config",
"/layers/GeoJSONLayer",
"/Map",
"/views/MapView",
"/renderers/SimpleRenderer",
"/symbols/SimpleLineSymbol"
].map((d) => getImport(d))
);

const importNames = [
"Config",
"GeoJSONLayer",
"Map",
"MapView",
"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;
}
Insert cell
toGeoJson = require("@tmcw/togeojson")
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