31:T66f,viewof map = { let container = html`

`; // Give the container dimensions. yield container; // Create the "map" object with the mapboxgl.Map constructor, referencing // the container div const mapRef = (container.value = new mapboxgl.Map({ container, center: [9.18184, 48.784577], zoom: 11, style: TgmClient().basemaps.getGLStyleURL("Light"), attributionControl: false })) .addControl(new mapboxgl.NavigationControl()) .addControl( new mapboxgl.AttributionControl({ compact: true, customAttribution: attribution }) ); await new Promise((resolve, reject) => { mapRef.on("load", async () => { mapRef.addSource("iso_elevation", { type: "geojson", data: { type: "FeatureCollection", features: [] } }); mapRef.addLayer({ id: "iso_elevation", type: "fill", source: "iso_elevation", layout: {}, paint: { "fill-opacity": 0.25, "fill-color": "#000" } }); // add layer to map, with visibility defined by statistic group zoom levels mapRef.addSource("iso_flat", { type: "geojson", data: { type: "FeatureCollection", features: [] } }); mapRef.addLayer({ id: "iso_flat", type: "fill", source: "iso_flat", layout: {}, paint: { "fill-opacity": 0.15, "fill-color": "#000" } }); resolve(); }); }); invalidation.then(() => mapRef.remove()); yield container; }32:T803,statsServiceResults = { const srcFormat = [ { y: mapMarker.lat, x: mapMarker.lng, id: 1 } ]; const options = { statisticIds: [0], serviceUrl: "https://api.targomo.com/westcentraleurope", serviceKey: targomoKey(), statisticCollectionId: 100, edgeWeight: "time", travelType: "bike", bikeUphill: 10.0, bikeDownhill: 10.0, maxEdgeWeight: maxTime, sources: srcFormat, elevationEnabled: true, omitIndividualStatistics: true }; const elevation_stats = await fetch( `https://api.targomo.com/statistics/charts/dependent?serviceUrl=${options.serviceUrl}`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(options) } ).then((response) => response.json()); const elevation_values = Object.values( elevation_stats.statistics["0"] ).reduce((acc, cur) => { return (acc += cur); }, 0); const elevation_hexes = Object.values( elevation_stats.reachableTargets ).reduce((acc, cur) => { return (acc += cur); }, 0); const flat_stats = await fetch( `https://api.targomo.com/statistics/charts/dependent?serviceUrl=${options.serviceUrl}`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...options, ...{ elevationEnabled: false } }) } ).then((response) => response.json()); const flat_values = Object.values(flat_stats.statistics["0"]).reduce( (acc, cur) => { return (acc += cur); }, 0 ); const flat_hexes = Object.values(flat_stats.reachableTargets).reduce( (acc, cur) => { return (acc += cur); }, 0 ); return { stats: { elevation: elevation_values, flat: flat_values, diff: Math.round((elevation_values / Math.max(flat_values)) * 1000) / 1000 }, hex: { elevation: elevation_hexes, flat: flat_hexes, diff: Math.round((elevation_hexes / Math.max(flat_hexes)) * 1000) / 1000 } }; }33:T4f8,isochroneResults = { const srcFormat = [ { lat: mapMarker.lat, lng: mapMarker.lng, id: 1, tm: { bike: { uphill: 10, downhill: 10 } } } ]; const options = { travelEdgeWeights: [maxTime], maxEdgeWeight: maxTime, edgeWeight: "time", elevation: true, srid: 4326, simplify: 200, serializer: "geojson", buffer: 0.002, quadrantSegments: 5 }; const iso_elevation_polygons = await TgmClient().polygons.fetch( srcFormat, options ); const iso_flat_polygons = await TgmClient().polygons.fetch(srcFormat, { ...options, ...{ elevation: false } }); // add layer to map, with visibility defined by statistic group zoom levels map.getSource("iso_elevation").setData(iso_elevation_polygons); // add layer to map, with visibility defined by statistic group zoom levels map.getSource("iso_flat").setData(iso_flat_polygons); return { elevation: Math.round(iso_elevation_polygons.features[0].properties.area), flat: Math.round(iso_flat_polygons.features[0].properties.area), diff: Math.round( (iso_elevation_polygons.features[0].properties.area / Math.max(iso_flat_polygons.features[0].properties.area)) * 1000 ) / 1000 }; }34:[] 2f:{"title":"Bike Elevation Testing","cells":[{"id":0,"value":"# Bike Elevation Testing\nTo help classify areas as \"bike friendly\", one aspect we want to explore is \"hillyness\" - will riding in the areas around a location involve lots of hills? We can try to quantify this by comparing how far we are able to travel if we ignore _uphill/downhill penalties_ vs when we _consider the added time to ride up hills_. We are applying a penalty to both uphill **and** downhill travel in this situation, as we are not evaluating _single trip riding_ - if you ride down the hill from your house, you'll _eventually need to ride back up_...","pinned":false,"hidden":false,"mode":"md"},{"id":544,"value":"viewof maxTime = Inputs.select([900, 1800], {\n label: \"Select max time\",\n value: 1800\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1031,"value":"_The closer our ratio is to **1**, the \"flatter\" the reachable area is..._","pinned":false,"hidden":false,"mode":"md"},{"id":723,"value":"md`| metric | flat value | elevation value | ratio |\n| ------ | -------- | --- | --- | --- |\n| area | ${isochroneResults.flat} | ${isochroneResults.elevation}| ${isochroneResults.diff} |\n| population | ${statsServiceResults.stats.flat} | ${statsServiceResults.stats.elevation}| ${statsServiceResults.stats.diff} |\n| hex count | ${statsServiceResults.hex.flat} | ${statsServiceResults.hex.elevation}| ${statsServiceResults.hex.diff} |`","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"value":"

no elevation-penalties

elevation-penalties

","pinned":false,"hidden":false,"mode":"html"},{"id":912,"value":"mapMarker","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":650,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":899,"value":"viewof mapMarker = {\n const inp = Inputs.input(map.getCenter());\n const marker = new mapboxgl.Marker({\n draggable: true\n })\n .setLngLat(map.getCenter())\n .addTo(map);\n\n marker.on(\"dragend\", () => {\n inp.value = marker.getLngLat();\n inp.dispatchEvent(new Event(\"input\", { bubbles: true }));\n });\n return inp;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {\n attribution,\n tgmCoreClient,\n codeStyle,\n tableStyle,\n datatable,\n tgmMultiIntro,\n targomoKey,\n resourcesSpacer\n} from \"@targomo/re-usable-targomo-resources\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"TgmClient = function () {\n return tgmCoreClient(\"westcentraleurope\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1.13.1\");\n const href = await require.resolve(\"mapbox-gl@1.13.1/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"codeStyle","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"tableStyle","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}