31:T735,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: "arcgis-topographic", 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" }) })32: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; }33:T677,elevationMap = { // this map is only used for generating the route statistics so we don't want to render it (hence the 1px by 1px dimensions). const container = html`

`; yield container; const map = new ArcGIS.Map({ basemap: "arcgis-topographic", 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, navigation: { mouseWheelZoomEnabled: false, browserTouchPanEnabled: false } }); const polyline = new ArcGIS.Polyline({ paths: coordinates }); const polylineSymbol = { type: "simple-line", // autocasts as SimpleLineSymbol() color: [226, 119, 40], width: 2.5 }; const polylineGraphic = new ArcGIS.Graphic({ geometry: polyline, symbol: polylineSymbol }); mapView.graphics.add(polylineGraphic); 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) => { mutable elevationViewModelStatistics = statistics; } ); invalidation.then(() => { mapView.destroy(); polylineGraphic.destroy(); elevationProfile.destroy(); handlerStats.remove(); }); }34:[{"id":"dd259c558cc2438118629451246d10365ca7b36adcd410f47a0e01f49099db0e051c318ae19c9c073749d6c06cae8cbc60813a84107d77537690de16f10e5fd5","href":"https://static.observableusercontent.com/files/dd259c558cc2438118629451246d10365ca7b36adcd410f47a0e01f49099db0e051c318ae19c9c073749d6c06cae8cbc60813a84107d77537690de16f10e5fd5","name":"Luckyduck_Shop_Ride__168__Goldenrod_(copy).gpx","type":"application/xml","lastModified":1667345959095.068,"size":257288},{"id":"a74161c79726f7d4a3987eb31472970745bb0fca6f6840578cadef0ab77fbc1813f2dce9d16b1933628a7b2c5cfd99ce659438d9ce7127a60efe5b92cd80131f","href":"https://static.observableusercontent.com/files/a74161c79726f7d4a3987eb31472970745bb0fca6f6840578cadef0ab77fbc1813f2dce9d16b1933628a7b2c5cfd99ce659438d9ce7127a60efe5b92cd80131f","name":"Nitro_Trail_10K.gpx","type":"application/xml","lastModified":1667345959095.068,"size":71006},{"id":"3ae3dac60306d8459c549d9181183f85e1f3f78fd5175c68af1dd23bfeef537f2f742b6bc6196456b7c22d072c08f926c56dbaea0b75b90cc527a9c3e5234941","href":"https://static.observableusercontent.com/files/3ae3dac60306d8459c549d9181183f85e1f3f78fd5175c68af1dd23bfeef537f2f742b6bc6196456b7c22d072c08f926c56dbaea0b75b90cc527a9c3e5234941","name":"Half_Moon_Bay.gpx","type":"application/xml","lastModified":1667345959095.068,"size":331461},{"id":"25c2e87ae2258d44252346027d40376b7b9a24a5a279b366a97b74912d6ef924529b821f173e255107224d8bcf4c92526ed1eabe1e584726aa918f43c44d7c7e","href":"https://static.observableusercontent.com/files/25c2e87ae2258d44252346027d40376b7b9a24a5a279b366a97b74912d6ef924529b821f173e255107224d8bcf4c92526ed1eabe1e584726aa918f43c44d7c7e","name":"Gravel_Tuesday_Canonical_Route.gpx","type":"application/xml","lastModified":1667345959095.068,"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":1667345959095.068,"size":4161506},{"id":"195934b187ec325c202db87456179d5607bf411b015509ff30db983c1ae0b13c5ed97d4c199dbce336955f8ad423bce8b9d808da81fd99b6720a6c07c9ca4c41","href":"https://static.observableusercontent.com/files/195934b187ec325c202db87456179d5607bf411b015509ff30db983c1ae0b13c5ed97d4c199dbce336955f8ad423bce8b9d808da81fd99b6720a6c07c9ca4c41","name":"Ferrières-Soulor-Aubisque-Laruns.gpx","type":"application/xml","lastModified":1667345959095.068,"size":1818706},{"id":"5f2051ee72c67c554db5a86fb888fa6b65439a31db481a1d924763f59c7680405ea5ed4aed837ceaa5b59eda32bd57147325c9d81d30fd597876411c81026e1a","href":"https://static.observableusercontent.com/files/5f2051ee72c67c554db5a86fb888fa6b65439a31db481a1d924763f59c7680405ea5ed4aed837ceaa5b59eda32bd57147325c9d81d30fd597876411c81026e1a","name":"Silk_Road_Mountain_Race_2022.gpx","type":"application/xml","lastModified":1667345959095.068,"size":2385133},{"id":"eff4e4c0e9de1b9c3b4a8ce5061647a9b5cdaa4706c2bea394a2716c05a570e07904d1da91ceedf068e82e826a250967544e063a31a166363246fffd82659bd4","href":"https://static.observableusercontent.com/files/eff4e4c0e9de1b9c3b4a8ce5061647a9b5cdaa4706c2bea394a2716c05a570e07904d1da91ceedf068e82e826a250967544e063a31a166363246fffd82659bd4","name":"Marin_Headlands_Loop.gpx","type":"application/xml","lastModified":1667345959095.068,"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":1667345959095.068,"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":1667345959095.068,"size":56340},{"id":"1c3ade41041e9507c1fe9a81d421e15fc5da2953955458ec682c7de6bfb27f6f528f24134a3e2e8ef3b1775bc9fe9a5016ab224697213f91ce375eb0245cbb75","href":"https://static.observableusercontent.com/files/1c3ade41041e9507c1fe9a81d421e15fc5da2953955458ec682c7de6bfb27f6f528f24134a3e2e8ef3b1775bc9fe9a5016ab224697213f91ce375eb0245cbb75","name":"Portland_via_Bike_Trails.gpx","type":"application/xml","lastModified":1667345959095.068,"size":232719}] 2f:{"title":"ArcGIS JS API: GPX Route Map Designer","cells":[{"id":0,"value":"# ArcGIS JS API: GPX Route Map Designer\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":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"routeMapDesign = htl.html`\n

\n ${renderRouteMap(settings.selectedXmlDoc.value, routeMapOptions)}\n

\n ${statisticsView(elevationViewModelStatistics)}\n

\n\n`","pinned":false,"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":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"mutable elevationViewModelStatistics = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"coordinates = data.features[0].geometry.coordinates","pinned":false,"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":false,"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":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"times = dataCoordinateProps?.times","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"dataCoordinateProps = data?.features?.[0]?.properties?.coordinateProperties","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"data = toGeoJson.gpx(settings.selectedXmlDoc.value)","pinned":false,"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":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":"$W34","stdlib":"1","titling":"auto"}