Maps, Data, Viz, UX, Design
// basic rendering with default options
renderRouteMap(luckyduck_shop_ride__168__goldenrod)
// render a different basemap, adjust the overlay symbology styles
renderRouteMap(marin_headlands_loop, {
mapBasemap: "arcgis-streets-night",
symbolColor: "yellow",
symbolWidth: 1.5
})
// hide the map UI and disable the map UX
renderRouteMap(bike_to_wherever_day_alviso_to_san_jose, {
viewHideUI: true,
viewDisableUX: true
})
// render the overlay with no basemap and instead a flat background color
renderRouteMap(nitro_trail_10k, {
mapBasemap: "none",
mapBackgroundColor: "hsl(45, 95%, 80%)",
viewHideUI: true
})
renderRouteMap(sf_tour_with_twin_peaks_24m_1500_ft, {
mapBasemap: "arcgis-dark-gray"
})
renderRouteMap(silk_road_mountain_race_2022, {
mapBasemap: "arcgis-terrain"
})
renderRouteMap(gravel_tuesday_canonical_route, {
mapBasemap: "arcgis-newspaper",
symbolColor: "#000"
})
renderRouteMap(nitro_trail_10k, {
mapBasemap: "arcgis-terrain",
symbolColor: "red",
symbolLineJoin: "round",
symbolLineDash: "dash"
})
renderRouteMap = function* (xmlDoc, options = {}) {
let geojsonUrl;
if (xmlDoc instanceof XMLDocument) {
geojsonUrl = convertGpx(xmlDoc);
} else {
return "Requires XMLDocument object as first argument.";
}
if (!geojsonUrl) {
return "Invalid GPX file";
}
const {
mapWidth,
mapHeight,
mapBasemap,
mapBackgroundColor,
symbolColor,
symbolWidth,
symbolLineCap,
symbolLineDash,
symbolLineJoin,
viewPadding,
viewCenter,
viewZoom,
viewHideUI,
viewDisableUX
} = {
...defaultOptions,
...options
};
const id = `viewDiv-${DOM.uid().id}`;
const container = htl.html`<div id=${id} />
<style>
#${id} {
height: ${mapHeight};
width: ${mapWidth};
background-color: ${mapBackgroundColor};
}
</style>
`;
yield container;
const map = new ArcGIS.Map({
basemap: mapBasemap === "none" ? undefined : mapBasemap
});
const geojsonRenderer = new ArcGIS.SimpleRenderer({
symbol: new ArcGIS.SimpleLineSymbol({
width: symbolWidth,
color: symbolColor,
cap: symbolLineCap,
style: symbolLineDash,
join: symbolLineJoin
})
});
const geojsonLayer = new ArcGIS.GeoJSONLayer({
url: geojsonUrl,
renderer: geojsonRenderer
});
const mapView = new ArcGIS.MapView({
map,
center: viewCenter,
...(!viewHideUI && { zoom: viewZoom }),
padding: {
top: viewPadding,
right: viewPadding,
left: viewPadding,
bottom: viewPadding
},
container,
navigation: {
mouseWheelZoomEnabled: false,
browserTouchPanEnabled: false
},
...(viewHideUI && { ui: { components: [] } })
});
map.add(geojsonLayer);
geojsonLayer
.when(() => {
return geojsonLayer.queryExtent();
})
.then((response) => {
mapView.goTo(response.extent);
});
if (viewDisableUX) {
// see: https://developers.arcgis.com/javascript/latest/sample-code/view-disable-navigation/
mapView.on("key-down", (event) => {
const prohibitedKeys = ["+", "-", "Shift", "_", "="];
const keyPressed = event.key;
if (prohibitedKeys.indexOf(keyPressed) !== -1) {
event.stopPropagation();
}
});
mapView.on("double-click", (event) => {
event.stopPropagation();
});
mapView.on("double-click", ["Control"], (event) => {
event.stopPropagation();
});
mapView.on("drag", (event) => {
event.stopPropagation();
});
mapView.on("drag", ["Shift"], (event) => {
event.stopPropagation();
});
mapView.on("drag", ["Shift", "Control"], (event) => {
event.stopPropagation();
});
}
return container;
// clean up when cell re-runs
invalidation.then(() => mapView.destroy());
}
defaultOptions = ({
mapWidth: `${width}px`,
mapHeight: "500px",
mapBasemap: "arcgis-topographic",
mapBackgroundColor: "#333",
symbolWidth: 2,
symbolColor: "#fb12ff",
symbolLineCap: "round",
symbolLineJoin: "round",
symbolLineDash: "solid",
viewPadding: 16,
viewCenter: [-122.27, 37.8],
viewZoom: 13,
viewHideUI: false,
viewDisableUX: false
})
convertGpx = function (xmlDocument) {
let dataUrl = "";
try {
const geojson = toGeoJson.gpx(xmlDocument);
const blob = new Blob([JSON.stringify(geojson)], {
type: "application/json"
});
dataUrl = URL.createObjectURL(blob);
} catch {}
return dataUrl;
}
luckyduck_shop_ride__168__goldenrod = FileAttachment(
"Luckyduck_Shop_Ride__168__Goldenrod_(copy).gpx"
).xml()
marin_headlands_loop = FileAttachment("Marin_Headlands_Loop.gpx").xml()
bike_to_wherever_day_alviso_to_san_jose = FileAttachment(
"Bike_to_Wherever_Day_-_Alviso_to_San_Jose.gpx"
).xml()
ferrieresSoulorAubisqueLaruns = FileAttachment("Ferrières-Soulor-Aubisque-Laruns.gpx").xml()
sf_tour_with_twin_peaks_24m_1500_ft = FileAttachment("SF_tour_with_Twin_Peaks_(24m_1500_ft).gpx").xml()
silk_road_mountain_race_2022 = FileAttachment("Silk_Road_Mountain_Race_2022.gpx").xml()
gravel_tuesday_canonical_route = FileAttachment("Gravel_Tuesday_Canonical_Route.gpx").xml()
nitro_trail_10k = FileAttachment("Nitro_Trail_10K.gpx").xml()
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") =>
await (
await import(`${JS_API_BASE_URL}${path}${ext}`)
).default
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;
}
toGeoJson = require("@tmcw/togeojson")
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.
