2f:T739,viewof settings = Inputs.form({ selectedXmlDoc: Inputs.select(xmlDocOptions, { format: (d) => d.name, value: xmlDocOptions.find( (t) => t.name === "ferrieresSoulorAubisqueLaruns" ), label: "Select GPX route data" }), mapHeight: Inputs.range([200, 1200], { value: 500, step: 10, label: "Map height" }), mapWidth: Inputs.range([200, width], { value: width, step: 10, label: "Map width" }), mapPadding: Inputs.range([0, 12 * 12], { value: 12, step: 1, label: "Map padding" }), basemapOption: Inputs.select(basemapOptions, { value: DEFAULT_SETTINGS.basemap, label: "Basemap" }), mapBackgroundColor: Inputs.color({ label: "Map background color", value: "#ffffff" }), routeColor: Inputs.color({ label: "Route Color", value: "#fb12ff" }), statsFontColor: Inputs.color({ label: "Stats Font Color", value: "#000000" }), routeStrokeWidth: Inputs.range([0.25, 6], { step: 0.25, value: 2.5, label: "Route width" }), routeCapStyle: Inputs.select(lineCapOptions, { value: "round", label: "Route line cap style" }), routeJoinStyle: Inputs.select(lineJoinOptions, { value: "round", label: "Route line join style" }), routeDashStyle: Inputs.select(lineDashOptions, { value: "solid", label: "Route line dash style" }), mapBackgroundImage: Inputs.file({ label: "Map background image", accept: [".jpg", ".png", ".jpeg"], required: false }), imageHeight: Inputs.range([200, 1200], { value: 500, step: 10, label: "Background image height" }), imageWidth: Inputs.range([200, width], { value: width, step: 10, label: "Background image width" }), mapPosition: Inputs.select(mapPositions, { value: "upper-left", label: "Map position with background image" }) })30:Td6f,map = { const container = htl.html`

`; yield container; const map = new ArcGIS.Map({ basemap: DEFAULT_SETTINGS.basemap, ground: "world-elevation" }); const mapView = new ArcGIS.MapView({ map, center: [-122.27, 37.8], padding: { top: 16, right: 16, left: 16, bottom: 16 }, zoom: 13, container: container.querySelector(".map-container"), navigation: { mouseWheelZoomEnabled: false, browserTouchPanEnabled: false }, ui: { components: [] } }); // 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(); }); const polyline = new ArcGIS.Polyline({ paths: coordinates }); const polylineSymbol = { type: "simple-line", width: settings.routeStrokeWidth, color: settings.routeColor, cap: settings.routeCapStyle, style: settings.routeDashStyle, join: settings.routeJoinStyle }; const polylineGraphic = new ArcGIS.Graphic({ geometry: polyline, symbol: polylineSymbol }); mapView.graphics.add(polylineGraphic); mapView.goTo(polylineGraphic.geometry.extent); const elevationProfile = new ArcGIS.ElevationProfileViewModel({ view: mapView, input: polylineGraphic, unit: "imperial", profiles: [ { type: "input", color: "#f57e42", title: "Line elevation" } ] }); const handlerStats = ArcGIS.reactiveUtils.watch( () => elevationProfile.profiles.items?.[0]?.statistics, (statistics) => { let statsContainer = container.querySelector(".route-stats-container"); if (statsContainer) { statsContainer.remove(); } container.querySelector(".wrapper").append(statisticsView(statistics)); } ); return Object.assign(container, { map, mapView, polyline, polylineGraphic }); invalidation.then(() => { mapView.destroy(); polylineGraphic.destroy(); elevationProfile.destroy(); handlerStats.remove(); }); }31:T5ec,// renders the UI for the route statistics statisticsView = (elevStatsObj) => { if (!elevStatsObj) return; const { maxDistance, maxElevation } = elevStatsObj; const stats = [ { name: "Distance", value: maxDistance, unit: "mi" }, { name: "Elevation Gain", value: maxElevation, unit: "ft" } ]; // NOTE: not all GPX data contains timestamps for track_points, // for example routes created with planning tools like RideWithGPS.com if (durationInSeconds) { const value = getPaceInMPH(maxDistance, durationInSeconds); stats.push({ name: "Pace", value, unit: "mph" }); } const container = html`

`; const renderStat = (name, value, unit) => htl.html`

${name}:

${value.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${unit}

`; stats.forEach(({ name, value, unit }) => { container .querySelector("#route-stats") .append(renderStat(name, value, unit)); }); return container; }32:[{"id":"dd259c558cc2438118629451246d10365ca7b36adcd410f47a0e01f49099db0e051c318ae19c9c073749d6c06cae8cbc60813a84107d77537690de16f10e5fd5","href":"https://static.observableusercontent.com/files/dd259c558cc2438118629451246d10365ca7b36adcd410f47a0e01f49099db0e051c318ae19c9c073749d6c06cae8cbc60813a84107d77537690de16f10e5fd5","name":"Luckyduck_Shop_Ride__168__Goldenrod_(copy).gpx","type":"application/xml","lastModified":1670438798965.486,"size":257288},{"id":"a74161c79726f7d4a3987eb31472970745bb0fca6f6840578cadef0ab77fbc1813f2dce9d16b1933628a7b2c5cfd99ce659438d9ce7127a60efe5b92cd80131f","href":"https://static.observableusercontent.com/files/a74161c79726f7d4a3987eb31472970745bb0fca6f6840578cadef0ab77fbc1813f2dce9d16b1933628a7b2c5cfd99ce659438d9ce7127a60efe5b92cd80131f","name":"Nitro_Trail_10K.gpx","type":"application/xml","lastModified":1670438798965.486,"size":71006},{"id":"3ae3dac60306d8459c549d9181183f85e1f3f78fd5175c68af1dd23bfeef537f2f742b6bc6196456b7c22d072c08f926c56dbaea0b75b90cc527a9c3e5234941","href":"https://static.observableusercontent.com/files/3ae3dac60306d8459c549d9181183f85e1f3f78fd5175c68af1dd23bfeef537f2f742b6bc6196456b7c22d072c08f926c56dbaea0b75b90cc527a9c3e5234941","name":"Half_Moon_Bay.gpx","type":"application/xml","lastModified":1670438798965.486,"size":331461},{"id":"25c2e87ae2258d44252346027d40376b7b9a24a5a279b366a97b74912d6ef924529b821f173e255107224d8bcf4c92526ed1eabe1e584726aa918f43c44d7c7e","href":"https://static.observableusercontent.com/files/25c2e87ae2258d44252346027d40376b7b9a24a5a279b366a97b74912d6ef924529b821f173e255107224d8bcf4c92526ed1eabe1e584726aa918f43c44d7c7e","name":"Gravel_Tuesday_Canonical_Route.gpx","type":"application/xml","lastModified":1670438798965.486,"size":62881},{"id":"d8ff25b3271cbfd5a259143d5434315139a6b05b1ea79dc442a814c1383c51e8d5a7612e4c5991653b2e8db5fcba86ba382edb21907ded4d1f1b6db384be1166","href":"https://static.observableusercontent.com/files/d8ff25b3271cbfd5a259143d5434315139a6b05b1ea79dc442a814c1383c51e8d5a7612e4c5991653b2e8db5fcba86ba382edb21907ded4d1f1b6db384be1166","name":"Winter_Audax_-_straight_on_at_Rosies._200km_PBP_qualifier.gpx","type":"application/xml","lastModified":1670438798965.486,"size":4161506},{"id":"195934b187ec325c202db87456179d5607bf411b015509ff30db983c1ae0b13c5ed97d4c199dbce336955f8ad423bce8b9d808da81fd99b6720a6c07c9ca4c41","href":"https://static.observableusercontent.com/files/195934b187ec325c202db87456179d5607bf411b015509ff30db983c1ae0b13c5ed97d4c199dbce336955f8ad423bce8b9d808da81fd99b6720a6c07c9ca4c41","name":"Ferrières-Soulor-Aubisque-Laruns.gpx","type":"application/xml","lastModified":1670438798965.486,"size":1818706},{"id":"5f2051ee72c67c554db5a86fb888fa6b65439a31db481a1d924763f59c7680405ea5ed4aed837ceaa5b59eda32bd57147325c9d81d30fd597876411c81026e1a","href":"https://static.observableusercontent.com/files/5f2051ee72c67c554db5a86fb888fa6b65439a31db481a1d924763f59c7680405ea5ed4aed837ceaa5b59eda32bd57147325c9d81d30fd597876411c81026e1a","name":"Silk_Road_Mountain_Race_2022.gpx","type":"application/xml","lastModified":1670438798965.486,"size":2385133},{"id":"eff4e4c0e9de1b9c3b4a8ce5061647a9b5cdaa4706c2bea394a2716c05a570e07904d1da91ceedf068e82e826a250967544e063a31a166363246fffd82659bd4","href":"https://static.observableusercontent.com/files/eff4e4c0e9de1b9c3b4a8ce5061647a9b5cdaa4706c2bea394a2716c05a570e07904d1da91ceedf068e82e826a250967544e063a31a166363246fffd82659bd4","name":"Marin_Headlands_Loop.gpx","type":"application/xml","lastModified":1670438798965.486,"size":196878},{"id":"55462cb8027fd26e0c443385b3ba9f91abd747e4a621f6cafa38ae3b59b9709241065bad35f662947cf79137c8b6c1ce6d2c810f50a49363f94be835a1ca86e0","href":"https://static.observableusercontent.com/files/55462cb8027fd26e0c443385b3ba9f91abd747e4a621f6cafa38ae3b59b9709241065bad35f662947cf79137c8b6c1ce6d2c810f50a49363f94be835a1ca86e0","name":"Bike_to_Wherever_Day_-_Alviso_to_San_Jose.gpx","type":"application/xml","lastModified":1670438798965.486,"size":35010},{"id":"d534d47853535cc06b2c1c9a9875c00624e5d3706a6355fd472628f69f7bf514c66ad9b0336686acff9ffab9f850f349c574a9ee68a89fd9ab16a9cbbc8369bd","href":"https://static.observableusercontent.com/files/d534d47853535cc06b2c1c9a9875c00624e5d3706a6355fd472628f69f7bf514c66ad9b0336686acff9ffab9f850f349c574a9ee68a89fd9ab16a9cbbc8369bd","name":"SF_tour_with_Twin_Peaks_(24m_1500_ft).gpx","type":"application/xml","lastModified":1670438798965.486,"size":56340},{"id":"1c3ade41041e9507c1fe9a81d421e15fc5da2953955458ec682c7de6bfb27f6f528f24134a3e2e8ef3b1775bc9fe9a5016ab224697213f91ce375eb0245cbb75","href":"https://static.observableusercontent.com/files/1c3ade41041e9507c1fe9a81d421e15fc5da2953955458ec682c7de6bfb27f6f528f24134a3e2e8ef3b1775bc9fe9a5016ab224697213f91ce375eb0245cbb75","name":"Portland_via_Bike_Trails.gpx","type":"application/xml","lastModified":1670438798965.486,"size":232719}] 2d:{"title":"ArcGIS JS API: GPX Route Map Designer (enhancements WIP )","cells":[{"id":0,"value":"# ArcGIS JS API: GPX Route Map Designer (enhancements WIP )\n\nDesign a GPX route map, including using a background image instead of a basemap!","pinned":false,"hidden":false,"mode":"md"},{"id":404,"value":"## Map Rendering Settings","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"settings.basemapOption !== \"none\"\n ? htl.html`

Tip: set the Basemap option to \"none\" before changing the Map background color.

`\n : \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":625,"value":"{\n if (!map || !map.map || !map.mapView) return;\n\n // doesn't really work, because when \"settings\" changes the whole map cell re-excutes I think\n map.map.basemap = settings.basemapOption;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":514,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":509,"value":"## Implementation Details","pinned":false,"hidden":false,"mode":"md"},{"id":508,"value":"### Route Statistics Generation","pinned":false,"hidden":false,"mode":"md"},{"id":507,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":540,"value":"getPaceInMPH = (distanceInMiles, timeInSeconds) => {\n const oneHourInSeconds = 60 * 60;\n const durationHours = timeInSeconds / oneHourInSeconds;\n const mph = distanceInMiles / durationHours;\n return mph;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":504,"value":"coordinates = data.features[0].geometry.coordinates","pinned":true,"hidden":false,"mode":"ojs"},{"id":531,"value":"durationInSeconds = {\n if (!times || !Array.isArray(times) || times.length < 2) return;\n\n const start = new Date(times.at(0));\n const end = new Date(times.at(-1));\n const diff = end.getTime() - start.getTime();\n return diff / 1000;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":529,"value":"times = dataCoordinateProps?.times","pinned":true,"hidden":false,"mode":"ojs"},{"id":524,"value":"dataCoordinateProps = data?.features?.[0]?.properties?.coordinateProperties","pinned":true,"hidden":false,"mode":"ojs"},{"id":503,"value":"data = toGeoJson.gpx(settings.selectedXmlDoc.value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":502,"value":"### Map Settings Options","pinned":false,"hidden":false,"mode":"md"},{"id":384,"value":"BG_IMG_URL = settings.mapBackgroundImage\n ? settings.mapBackgroundImage.url()\n : \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"MAP_WIDTH = `${settings.mapWidth}px`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"MAP_HEIGHT = `${settings.mapHeight}px`","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"DEFAULT_SETTINGS = ({\n basemap: \"arcgis-topographic\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":429,"value":"mapPositionProps = ({\n \"upper-left\": \"top: 0; left: 0;\",\n top: \"top: 0; margin-left: auto; margin-right: auto; left: 0; right: 0;\",\n \"upper-right\": \"top: 0; right: 0;\",\n right: \"right: 0; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto;\",\n \"lower-right\": \"bottom: 0; right: 0;\",\n bottom:\n \"bottom: 0; right: 0; left: 0; margin-right: auto; margin-left: auto;\",\n \"lower-left\": \"bottom: 0; left: 0;\",\n left: \"left: 0; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto;\",\n center: \"top: 0; left: 0; bottom: 0; right: 0; margin: auto;\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"routeMapOptions = ({\n mapWidth: MAP_WIDTH,\n mapHeight: MAP_HEIGHT,\n mapBasemap: BG_IMG_URL ? \"none\" : settings.basemapOption,\n mapBackgroundColor: BG_IMG_URL ? \"transparent\" : settings.mapBackgroundColor,\n symbolColor: settings.routeColor,\n symbolWidth: settings.routeStrokeWidth,\n symbolLineCap: settings.routeCapStyle,\n symbolLineJoin: settings.routeJoinStyle,\n symbolLineDash: settings.routeDashStyle,\n viewPadding: settings.mapPadding,\n viewDisableUX: true,\n viewHideUI: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"lineJoinOptions = [\"bevel\", \"miter\", \"round\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"lineCapOptions = [\"butt\", \"round\", \"square\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"lineDashOptions = `dash\ndash-dot\ndot\nlong-dash\nlong-dash-dot\nlong-dash-dot-dot\nnone\nshort-dash\nshort-dash-dot\nshort-dash-dot-dot\nshort-dot\nsolid`.split(\"\\n\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"mapPositions = [\n \"upper-left\",\n \"top\",\n \"upper-right\",\n \"right\",\n \"lower-right\",\n \"bottom\",\n \"lower-left\",\n \"left\",\n \"center\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"basemapOptions = `arcgis-imagery\narcgis-light-gray\narcgis-dark-gray\narcgis-navigation\narcgis-navigation-night\narcgis-streets\narcgis-streets-night\narcgis-streets-relief\narcgis-topographic\narcgis-community\narcgis-charted-territory\narcgis-colored-pencil\narcgis-midcentury\narcgis-newspaper\narcgis-hillshade-dark\narcgis-hillshade-light\nnone`.split(\"\\n\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"xmlDocOptions = {\n const names = `half_moon_bay,\n bike_to_wherever_day_alviso_to_san_jose,\n ferrieresSoulorAubisqueLaruns,\n marin_headlands_loop,\n sf_tour_with_twin_peaks_24m_1500_ft,\n silk_road_mountain_race_2022,\n winter_audax_straight_on_at_rosies_200km_pbp_qual,\n gravel_tuesday_canonical_route,\n nitro_trail_10k,\n luckyduck_shop_ride__168__goldenrod_Copy,\n portland_via_bike_trails`\n .split(\"\\n\")\n .map((d) => d.replace(\",\", \"\"))\n .map((d) => d.trim());\n return documents.map((doc, index) => ({ name: names[index], value: doc }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"### GPX File Attachments","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"documents = [\n half_moon_bay,\n bike_to_wherever_day_alviso_to_san_jose,\n ferrieresSoulorAubisqueLaruns,\n marin_headlands_loop,\n sf_tour_with_twin_peaks_24m_1500_ft,\n silk_road_mountain_race_2022,\n winter_audax_straight_on_at_rosies_200km_pbp_qual,\n gravel_tuesday_canonical_route,\n nitro_trail_10k,\n luckyduck_shop_ride__168__goldenrod_Copy,\n portland_via_bike_trails\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"bike_to_wherever_day_alviso_to_san_jose = FileAttachment(\n \"Bike_to_Wherever_Day_-_Alviso_to_San_Jose.gpx\"\n).xml()","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"ferrieresSoulorAubisqueLaruns = FileAttachment(\"Ferrières-Soulor-Aubisque-Laruns.gpx\").xml()","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"marin_headlands_loop = FileAttachment(\"Marin_Headlands_Loop.gpx\").xml()","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"sf_tour_with_twin_peaks_24m_1500_ft = FileAttachment(\"SF_tour_with_Twin_Peaks_(24m_1500_ft).gpx\").xml()","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"silk_road_mountain_race_2022 = FileAttachment(\"Silk_Road_Mountain_Race_2022.gpx\").xml()","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"half_moon_bay = FileAttachment(\"Half_Moon_Bay.gpx\").xml()","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"winter_audax_straight_on_at_rosies_200km_pbp_qual = FileAttachment(\n \"Winter_Audax_-_straight_on_at_Rosies._200km_PBP_qualifier.gpx\"\n).xml()","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"gravel_tuesday_canonical_route = FileAttachment(\"Gravel_Tuesday_Canonical_Route.gpx\").xml()","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"nitro_trail_10k = FileAttachment(\"Nitro_Trail_10K.gpx\").xml()","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"luckyduck_shop_ride__168__goldenrod_Copy = FileAttachment(\"Luckyduck_Shop_Ride__168__Goldenrod_(copy).gpx\").xml()","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"portland_via_bike_trails = FileAttachment(\"Portland_via_Bike_Trails.gpx\").xml()","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":488,"value":"toGeoJson = require(\"@tmcw/togeojson\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"import { ArcGIS } from \"@clhenrick/arcgis-js-api-custom-elev-profile-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { renderRouteMap } from \"@clhenrick/arcgis-js-api-gpx-route-mapper\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}