2e:null 2f:["$","title",null,{"children":"ArcGIS JS API: Custom Elevation Profile Chart | Chris Henrick | Observable"}] 34:T930,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 } }); 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 }); 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; } ); const handlerSamples = ArcGIS.reactiveUtils.watch( () => elevationProfile.profiles.items?.[0]?.samples, (samples) => { mutable elevationSampleData = samples; } ); const handlerEffectiveUnits = ArcGIS.reactiveUtils.watch( () => elevationProfile.effectiveUnits, (value) => { mutable elevationEffectiveUnits = value; } ); invalidation.then(() => { mapView.destroy(); polylineGraphic.destroy(); elevationProfile.destroy(); handlerStats.remove(); handlerSamples.remove(); }); }35: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; }36:[{"id":"dd259c558cc2438118629451246d10365ca7b36adcd410f47a0e01f49099db0e051c318ae19c9c073749d6c06cae8cbc60813a84107d77537690de16f10e5fd5","href":"https://static.observableusercontent.com/files/dd259c558cc2438118629451246d10365ca7b36adcd410f47a0e01f49099db0e051c318ae19c9c073749d6c06cae8cbc60813a84107d77537690de16f10e5fd5","name":"Luckyduck_Shop_Ride__168__Goldenrod_(copy).gpx","type":"application/xml","lastModified":1667840890769.515,"size":257288}] 32:{"id":"a8494aa528f0ac8a","slug":"arcgis-js-api-custom-elev-profile-chart","title":"ArcGIS JS API: Custom Elevation Profile Chart","thumbnail":"fa9ef174cfd4fe4cd93c743f0d452dda5fac72eece4a86371fa44cae29fd0c48","access_level":"public","create_time":"$D2022-11-07T17:08:10.769Z","update_time":"$D2023-04-26T18:48:06.902Z","view_time":null,"first_public_time":"$D2022-11-07T18:05:08.938Z","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":542,"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":2,"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: Custom Elevation Profile Chart","cells":[{"id":0,"value":"# ArcGIS JS API: Custom Elevation Profile Chart\n\nAn example of using the [ElevationProfileLineInput's samples property](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-ElevationProfile-ElevationProfileLineInput.html#samples) and [D3JS](https://observablehq.com/@d3) to render an area chart showing elevation change over route distance. Note that this is a static elevation chart and currently does not handle interactivity such as coordination between a hover interactions on chart and map's GPX route as the ArcGIS JS API's native [ElevationProfile](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-ElevationProfile.html) widget does. What this *does demonstrate* is that any of the ArcGIS JS API [Widget](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Widget.html) subclass's view model may be leveraged to develop custom user interfaces using a JavaScript framework (or lack thereof) of one's choice.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":333,"value":"usingElevationProfileViewModel = md`## Using the ElevationProfile's View Model\nWe can use the [\\`ElevationProfileViewModel\\`](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-ElevationProfile-ElevationProfileViewModel.html) to generate statistics and an elevation area chart without having to render the corresponding [\\`ElevationProfile\\`](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-ElevationProfile.html) widget.`","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 return \"loading stats\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"{\n if (elevationEffectiveUnits !== null) {\n return renderElevationEffectiveUnits(elevationEffectiveUnits);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"dataReady &&\n // AreaChart is a resuable function imported from the notebook @d3/area-chart\n AreaChart(chartData, {\n x: (d) => d.distance,\n y: (d) => d.elevation,\n xType: d3.scaleLinear,\n yLabel: \"Elevation in feet\",\n curve: d3.curveNatural,\n width,\n height: 500,\n color: \"steelblue\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"$34","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":532,"value":"renderElevationEffectiveUnits = (unitsObj) => {\n return htl.html`Distance is shown in ${unitsObj?.distance} and elevation is shown in ${unitsObj?.elevation}.`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"// Note: there are some duplicate values in the elevationSampleData produced by the ElevationProfileViewModel.\n// We remove these to prevent rendering artifacts in the elevation chart\nchartData = {\n if (!dataReady) return;\n let seen = new Set();\n return elevationSampleData.filter((d) => {\n return seen.has(d.distance) ? false : (seen.add(d.distance), true);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"dataReady = Boolean(elevationSampleData) &&\n Boolean(elevationViewModelStatistics)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"isValidNumber = (d) => typeof d === \"number\" && !isNaN(d)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"mutable elevationSampleData = null","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":529,"value":"mutable elevationEffectiveUnits = 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":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"import { AreaChart } from \"@d3/area-chart\"","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":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"