Public
Edited
Nov 9, 2022
1 fork
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
smallMultiples = {
const container = htl.html`<div class="container" />`;
yield container;

for await (const map of documents.map((doc) =>
renderRouteMap(doc, routeMapOptions)
)) {
for await (const step of map) {
container.appendChild(step);
yield container;
}
}

return container;
}
Insert cell
routeMapOptions = ({
mapWidth: "100%",
mapHeight: MAP_SIZE,
mapBasemap: basemapOption,
mapBackgroundColor,
symbolColor: routeColor,
symbolWidth: routeStrokeWidth,
viewDisableUX: true,
viewHideUI: true
})
Insert cell
htl.html`<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(${MAP_SIZE}, 1fr));
gap: 1rem;
padding-bottom: 1rem;
}
</style>`
Insert cell
MAP_SIZE = `${mapSize}px`
Insert cell
basemapOptions = `arcgis-imagery
arcgis-light-gray
arcgis-dark-gray
arcgis-navigation
arcgis-navigation-night
arcgis-streets
arcgis-streets-night
arcgis-streets-relief
arcgis-topographic
arcgis-community
arcgis-charted-territory
arcgis-colored-pencil
arcgis-midcentury
arcgis-newspaper
arcgis-hillshade-dark
arcgis-hillshade-light
none`.split("\n")
Insert cell
Insert cell
documents = [
half_moon_bay,
bike_to_wherever_day_alviso_to_san_jose,
ferrieresSoulorAubisqueLaruns,
marin_headlands_loop,
sf_tour_with_twin_peaks_24m_1500_ft,
silk_road_mountain_race_2022,
winter_audax_straight_on_at_rosies_200km_pbp_qual,
gravel_tuesday_canonical_route,
nitro_trail_10k,
luckyduck_shop_ride__168__goldenrod_Copy,
portland_via_bike_trails
]
Insert cell
bike_to_wherever_day_alviso_to_san_jose = FileAttachment(
"Bike_to_Wherever_Day_-_Alviso_to_San_Jose.gpx"
).xml()
Insert cell
ferrieresSoulorAubisqueLaruns = FileAttachment("Ferrières-Soulor-Aubisque-Laruns.gpx").xml()
Insert cell
marin_headlands_loop = FileAttachment("Marin_Headlands_Loop.gpx").xml()
Insert cell
sf_tour_with_twin_peaks_24m_1500_ft = FileAttachment("SF_tour_with_Twin_Peaks_(24m_1500_ft).gpx").xml()
Insert cell
silk_road_mountain_race_2022 = FileAttachment("Silk_Road_Mountain_Race_2022.gpx").xml()
Insert cell
half_moon_bay = FileAttachment("Half_Moon_Bay.gpx").xml()
Insert cell
winter_audax_straight_on_at_rosies_200km_pbp_qual = FileAttachment(
"Winter_Audax_-_straight_on_at_Rosies._200km_PBP_qualifier.gpx"
).xml()
Insert cell
gravel_tuesday_canonical_route = FileAttachment("Gravel_Tuesday_Canonical_Route.gpx").xml()
Insert cell
nitro_trail_10k = FileAttachment("Nitro_Trail_10K.gpx").xml()
Insert cell
luckyduck_shop_ride__168__goldenrod_Copy = FileAttachment("Luckyduck_Shop_Ride__168__Goldenrod_(copy).gpx").xml()
Insert cell
portland_via_bike_trails = FileAttachment("Portland_via_Bike_Trails.gpx").xml()
Insert cell
Insert cell
import { renderRouteMap } from "@clhenrick/arcgis-js-api-gpx-route-mapper"
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