Maps, Data, Viz, UX, Design
viewof selectedData = Inputs.radio(
["Multiple LineString Features", "Single MultiLineString Feature"],
{ label: "Select one", value: "Multiple LineString Features" }
)
mutable debug = null
renderElevationStats = (statsObj) => {
return htl.html`<h3>Elevation Statistics (imperial units)</h3><ul style="padding: 0">${Object.entries(
statsObj
).map(
([key, value]) =>
htl.html`<li style="margin: 0 0.5em 0 0; display: inline-block;"><strong>${key}</strong>: ${value.toLocaleString(
"en-US",
{ maximumSignificantDigits: 3 }
)}</li>`
)}</ul>`;
}
mutable elevationViewModelStatistics = null
mutable elevationStatistics = null
dataUrl = {
const blob = new Blob([JSON.stringify(geojson)], {
type: "application/json"
});
const url = URL.createObjectURL(blob);
return url;
}
coordinates = {
// data.features[0].geometry.coordinates
return features.reduce((acc, cur) => {
const coords =
selectedData === "Multiple LineString Features"
? cur.geometry.coordinates
: cur.geometry.coordinates[0];
acc.push(coords);
return acc;
}, []);
}
features = {
if (selectedData === "Multiple LineString Features") {
return geojson.features.filter(
(feature) => feature.geometry.type === "LineString"
);
}
return geojson.features;
}
// data = toGeoJson.gpx(lime_mesa)
geojson = {
const dataRaw = datasetsMap.get(selectedData);
if (selectedData === "Multiple LineString Features") {
return toGeoJson.gpx(dataRaw);
}
return dataRaw;
}
datasetsMap = new Map([
["Multiple LineString Features", lime_mesa],
["Single MultiLineString Feature", lime_mesa_tracks]
])
lime_mesa_tracks = FileAttachment("lime_mesa_tracks.json").json()
lime_mesa = FileAttachment("Lime_Mesa.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",
"/widgets/ElevationProfile",
"/widgets/ElevationProfile/ElevationProfileViewModel",
"/geometry/Polyline",
"/Graphic"
].map((d) => getImport(d))
);
const importNames = [
"Config",
"GeoJSONLayer",
"Map",
"MapView",
"SimpleRenderer",
"SimpleLineSymbol",
"ElevationProfile",
"ElevationProfileViewModel",
"Polyline",
"Graphic"
];
const ArcGIS = Object.fromEntries(imports.map((d, i) => [importNames[i], d]));
const reactiveUtils = await import(
`${JS_API_BASE_URL}/core/reactiveUtils.js`
);
ArcGIS.reactiveUtils = reactiveUtils;
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.
