31: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(); }); }32: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; }33:[{"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}] 2f:{"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"},{"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"},{"id":347,"value":"{\n if (elevationViewModelStatistics !== null) {\n return renderElevationStats(elevationViewModelStatistics);\n }\n return \"loading stats\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"{\n if (elevationEffectiveUnits !== null) {\n return renderElevationEffectiveUnits(elevationEffectiveUnits);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":310,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"id":456,"value":"dataReady = Boolean(elevationSampleData) &&\n Boolean(elevationViewModelStatistics)","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"isValidNumber = (d) => typeof d === \"number\" && !isNaN(d)","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"mutable elevationSampleData = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"mutable elevationViewModelStatistics = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":529,"value":"mutable elevationEffectiveUnits = null","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":279,"value":"coordinates = data.features[0].geometry.coordinates","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"data = toGeoJson.gpx(dataRaw)","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"dataRaw = FileAttachment(\"Luckyduck_Shop_Ride__168__Goldenrod_(copy).gpx\").xml()","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"JS_API_VERSION = 4.25","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"JS_API_BASE_URL = `https://js.arcgis.com/${JS_API_VERSION}/@arcgis/core`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":55,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"import { AreaChart } from \"@d3/area-chart\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"toGeoJson = require(\"@tmcw/togeojson\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}