29:null 2a:["$","title",null,{"children":"ArcGIS JS API: GPX route overlay with Elevation Profile | Chris Henrick | Observable"}] 2f:Tb82,map = { const container = html`

`; yield container; const map = new ArcGIS.Map({ basemap: "arcgis-topographic", ground: "world-elevation" }); const geojsonRenderer = new ArcGIS.SimpleRenderer({ symbol: new ArcGIS.SimpleLineSymbol({ width: 0, color: "#fb12ff" }) }); const geojsonLayer = new ArcGIS.GeoJSONLayer({ url: dataUrl, renderer: geojsonRenderer }); // add the geojson layer to the map // this allows us to center the map on route's extent map.add(geojsonLayer); 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], // rgb width: 2.5 }; // the polylineGraphic is required for the ElevationProfile.input, // we can't just use our GeoJSONLayer above. const polylineGraphic = new ArcGIS.Graphic({ geometry: polyline, symbol: polylineSymbol }); mapView.graphics.add(polylineGraphic); console.log(polylineGraphic); // add the elevation profile const elevationProfile = new ArcGIS.ElevationProfile({ view: mapView, input: polylineGraphic, unit: "imperial", profiles: [ /** autocasts as new ElevationProfileLineGround() uses the map's ground layer to compute elevation instead of the GeoJSON/Graphic's Z values */ { type: "ground", color: "#61d4a4", title: "Ground elevation" }, /** autocasts as new ElevationProfileLineInput() uses the GeoJSON/Graphic's Z values for computing the elevation */ { type: "input", color: "#f57e42", title: "Line elevation" } ] }); // set the map's zoom and extent to that of the geojson layer's geojsonLayer .when(() => { return geojsonLayer.queryExtent(); }) .then((response) => { mapView.goTo(response.extent); }); // add the elevation profile widget to the map view mapView.ui.add(elevationProfile, "bottom-left"); // listen for changes to the elevationProfile's profile property // and access the first profile's statistics const handler = ArcGIS.reactiveUtils.watch( () => elevationProfile.profiles.items?.[0]?.statistics, (stastics) => { mutable elevationStatistics = stastics; } ); // do clean up when this cell re-runs invalidation.then(() => { mapView.destroy(); polylineGraphic.destroy(); elevationProfile.destroy(); handler.remove(); }); }30:T968,map2 = { const container = html`

`; yield container; const map = new ArcGIS.Map({ basemap: "arcgis-topographic", ground: "world-elevation" }); const mapView = new ArcGIS.MapView({ map, center: [0, 0], //[-122.27, 37.8], padding: { top: 16, right: 16, left: 16, bottom: 16 }, zoom: 13, container, navigation: { mouseWheelZoomEnabled: false, browserTouchPanEnabled: false } }); /* NOTE: that instead of relying on a GeoJSONLayer's extent to set the Map's center and zoom, we can use a Graphic's geometry and avoid having to create a GeoJSONLayer all together. */ // const geojsonRenderer = new ArcGIS.SimpleRenderer({ // symbol: new ArcGIS.SimpleLineSymbol({ // width: 0, // color: "#fb12ff" // }) // }); // const geojsonLayer = new ArcGIS.GeoJSONLayer({ // url: dataUrl, // renderer: geojsonRenderer // }); // map.add(geojsonLayer); // geojsonLayer // .when(() => { // return geojsonLayer.queryExtent(); // }) // .then((response) => { // mapView.goTo(response.extent); // }); 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 }); // will be above other graphics in the map. // alternatively create a graphics layer and add to the map view. mapView.graphics.add(polylineGraphic); // zoom to the graphic's geometry extent mapView.goTo(polylineGraphic.geometry); const elevationProfile = new ArcGIS.ElevationProfileViewModel({ view: mapView, input: polylineGraphic, unit: "imperial", profiles: [ { type: "input", color: "#f57e42", title: "Line elevation" } ] }); const handler = ArcGIS.reactiveUtils.watch( () => elevationProfile.profiles.items?.[0]?.statistics, (statistics) => { mutable elevationViewModelStatistics = statistics; } ); invalidation.then(() => { mapView.destroy(); polylineGraphic.destroy(); elevationProfile.destroy(); handler.remove(); }); }31:T474,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``) ); } return ArcGIS; }32:T513,sampleXmlDocString = ` Garmin International 2009-10-17T22:58:43Z Example GPX Document 4.46 2009-10-17T18:37:26Z 4.94 2009-10-17T18:37:31Z 6.87 2009-10-17T18:37:34Z `;33:[{"id":"dd259c558cc2438118629451246d10365ca7b36adcd410f47a0e01f49099db0e051c318ae19c9c073749d6c06cae8cbc60813a84107d77537690de16f10e5fd5","href":"https://static.observableusercontent.com/files/dd259c558cc2438118629451246d10365ca7b36adcd410f47a0e01f49099db0e051c318ae19c9c073749d6c06cae8cbc60813a84107d77537690de16f10e5fd5","name":"Luckyduck_Shop_Ride__168__Goldenrod_(copy).gpx","type":"application/xml","lastModified":1667252450192.913,"size":257288}] 2d:{"id":"ec47c3ed01a9700f","slug":"arcgis-js-api-gpx-route-with-elevation-profile","title":"ArcGIS JS API: GPX route overlay with Elevation Profile","thumbnail":"75667847388c3fbc4fef2f8ec045ee7dfb1c2d25b65a55511ece87f34235d035","access_level":"public","create_time":"$D2022-10-31T21:40:50.192Z","update_time":"$D2023-04-17T22:09:27.804Z","view_time":null,"first_public_time":"$D2022-11-01T21:11:03.965Z","has_unpublished_edits":null,"fork":{"id":"7305006f12eb3c3d","slug":"arcgis-js-api-gpx-route-overlay","title":"ArcGIS JS API: GPX route overlay","owner":{"id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick"}},"stars":1,"starred":false,"owner":{"type":"team","id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":"starter_2024"},"version":455,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"152f84cb3c7f97b6","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":null}],"members":[{"type":"individual","id":"152f84cb3c7f97b6","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"8d9316eeede5ac0d","slug":"arcgis-js-api","title":"ArcGIS JS SDK","owner":{"id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick"}},"type":"notebook","body":{"title":"ArcGIS JS API: GPX route overlay with Elevation Profile","cells":[{"id":0,"value":"# ArcGIS JS API: GPX route overlay with Elevation Profile\n\nDemonstration of rendering an [ElevationProfile](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-ElevationProfile.html) widget and elevation related statistics from a GPX route using the [ArcGIS JS API](https://developers.arcgis.com/javascript/latest/)'s [`ElevationProfile`](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-ElevationProfile.html#properties-summary). We also use [`@tmcw/toGeoJson`](https://www.npmjs.com/package/@tmcw/togeojson) to convert data from GPX/XML to GeoJSON data format so that it may be used with ArcGIS JS API.\n\nThere is an [alternative method](#alternativeMethod) demonstrated further below for generating the elevation statistics *without* having to render the Elevation Profile widget / UI.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":265,"value":"{\n if (elevationStatistics !== null) {\n return renderElevationStats(elevationStatistics);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"alternativeMethod = md`## Alternative Method for Elevation Statistics Generation\nWe can use the [\\`ElevationProfileViewModel\\`](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-ElevationProfile-ElevationProfileViewModel.html) (the \\`ElevationProfile\\`'s view model) to generate statistics without having to render the \\`ElevationProfile\\` widget UI (view).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"{\n if (elevationViewModelStatistics !== null) {\n return renderElevationStats(elevationViewModelStatistics);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"mutable debug = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":342,"value":"renderElevationStats = (statsObj) => {\n return htl.html`

Elevation Statistics (imperial units)

${key}: ${value.toLocaleString(\n \"en-US\",\n { maximumFractionDigits: 0 }\n )}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"mutable elevationViewModelStatistics = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"mutable elevationStatistics = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"dataUrl = {\n const blob = new Blob([JSON.stringify(data)], { type: \"application/json\" });\n const url = URL.createObjectURL(blob);\n return url;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"coordinates = data.features[0].geometry.coordinates","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"data = toGeoJson.gpx(dataRaw)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"dataRaw = FileAttachment(\"Luckyduck_Shop_Ride__168__Goldenrod_(copy).gpx\").xml()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"JS_API_VERSION = 4.25","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"JS_API_BASE_URL = `https://js.arcgis.com/${JS_API_VERSION}/@arcgis/core`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"// NOTE: This key will only work for this notebook, please acquire your own at: https://developers.arcgis.com/api-keys\nJS_API_KEY = \"AAPKeaa067e241884f1f8ea72a5593cb8821aRuJV_aPxvhDXViKpdrzEOnB8RKhvKVPogv2Ry0d5AlAMEqq8S66zKkwHWHFBZKg\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"getImport = async (path, ext = \".js\") =>\n await (\n await import(`${JS_API_BASE_URL}${path}${ext}`)\n ).default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"toGeoJson = require(\"@tmcw/togeojson\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"{\n const parser = new DOMParser();\n const doc = parser.parseFromString(\"\", \"application/xml\");\n return toGeoJson.gpx(doc);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"