27:null 28:["$","title",null,{"children":"ArcGIS JS API: GPX multiple routes overlay with Elevation Profile | Chris Henrick | Observable"}] 2d:Tb7f,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: [0, 0, 0], // rgb width: 1.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(); }); }2e:T959,map2 = { 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 } }); /* 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: [0, 0, 0], width: 1.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(); }); }2f: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; }30:[{"id":"1a7d07d7dbb20831e4348e07ff28e2b4205638e9c062c2faa1b7da71dd61053772f4b14a3c6cff6c35f34270c5b25199629b06f58e440e38b03a08bd80e20076","href":"https://static.observableusercontent.com/files/1a7d07d7dbb20831e4348e07ff28e2b4205638e9c062c2faa1b7da71dd61053772f4b14a3c6cff6c35f34270c5b25199629b06f58e440e38b03a08bd80e20076","name":"Lime_Mesa.gpx","type":"application/xml","lastModified":1680717762891.409,"size":5329365},{"id":"dd259c558cc2438118629451246d10365ca7b36adcd410f47a0e01f49099db0e051c318ae19c9c073749d6c06cae8cbc60813a84107d77537690de16f10e5fd5","href":"https://static.observableusercontent.com/files/dd259c558cc2438118629451246d10365ca7b36adcd410f47a0e01f49099db0e051c318ae19c9c073749d6c06cae8cbc60813a84107d77537690de16f10e5fd5","name":"Luckyduck_Shop_Ride__168__Goldenrod_(copy).gpx","type":"application/xml","lastModified":1680717421247.323,"size":257288},{"id":"56a31a6f08f6bd78e1989d5c442de893eacfff94dd3ef63acde789f99d300381e42d6ff9828bc608c689ff47ea8db430604a0c40e0b5317319dcea8096fbcd16","href":"https://static.observableusercontent.com/files/56a31a6f08f6bd78e1989d5c442de893eacfff94dd3ef63acde789f99d300381e42d6ff9828bc608c689ff47ea8db430604a0c40e0b5317319dcea8096fbcd16","name":"lime_mesa_tracks.json","type":"application/json","lastModified":1680731696302.638,"size":1587797}] 2b:{"id":"c52c01d06cca3f1f","slug":null,"title":"ArcGIS JS API: GPX multiple routes overlay with Elevation Profile","thumbnail":"299e57a7125b580fbd08c19026008b2a6a7002b21e6f570c311e979fba461c97","access_level":"public","create_time":"$D2023-04-05T17:57:01.247Z","update_time":"$D2023-04-05T22:05:15.509Z","view_time":null,"first_public_time":"$D2023-04-05T17:57:01.247Z","has_unpublished_edits":null,"fork":{"id":"ec47c3ed01a9700f","slug":"arcgis-js-api-gpx-route-with-elevation-profile","title":"ArcGIS JS API: GPX route overlay with Elevation Profile","owner":{"id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick"}},"stars":0,"starred":false,"owner":{"type":"team","id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":"starter_2024"},"version":492,"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":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"ArcGIS JS API: GPX multiple routes overlay with Elevation Profile","cells":[{"id":0,"value":"# ArcGIS JS API: GPX multiple routes 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":469,"value":"viewof selectedData = Inputs.radio(\n [\"Multiple LineString Features\", \"Single MultiLineString Feature\"],\n { label: \"Select one\", value: \"Multiple LineString Features\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$2d","pinned":false,"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":"$2e","pinned":false,"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 { maximumSignificantDigits: 3 }\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(geojson)], {\n type: \"application/json\"\n });\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 = {\n // data.features[0].geometry.coordinates\n return features.reduce((acc, cur) => {\n const coords =\n selectedData === \"Multiple LineString Features\"\n ? cur.geometry.coordinates\n : cur.geometry.coordinates[0];\n acc.push(coords);\n return acc;\n }, []);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"features = {\n if (selectedData === \"Multiple LineString Features\") {\n return geojson.features.filter(\n (feature) => feature.geometry.type === \"LineString\"\n );\n }\n return geojson.features;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"// data = toGeoJson.gpx(lime_mesa)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"geojson = {\n const dataRaw = datasetsMap.get(selectedData);\n\n if (selectedData === \"Multiple LineString Features\") {\n return toGeoJson.gpx(dataRaw);\n }\n\n return dataRaw;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"datasetsMap = new Map([\n [\"Multiple LineString Features\", lime_mesa],\n [\"Single MultiLineString Feature\", lime_mesa_tracks]\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"lime_mesa_tracks = FileAttachment(\"lime_mesa_tracks.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"lime_mesa = FileAttachment(\"Lime_Mesa.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":"$2f","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"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2c:"$2b:body"