31:T4bd,tileToIndexes = (tile, dem) => { const {minLat, maxLat, minLng, maxLng} = tileBounds(tile); const height = maxLat - minLat; const width = maxLng - minLng; const rowCount = dem.length; const colCount = dem[0].length; const px2coord = (row, col) => ({ lat: maxLat - (row / rowCount) * height, lng: (col / colCount) * width + minLng }); const indexes = {}; for (let r = 0; r < rowCount; r++) { for (let c = 0; c < colCount; c++) { const {lat, lng} = px2coord(r, c); const h3Index = h3.geoToH3(lat, lng, zoomToResolution(tile.z)); // We don't want dupe indexes between tiles, so filter out // indexes based on their center point const [centerLat, centerLng] = h3.h3ToGeo(h3Index); if (centerLat < minLat || centerLat >= maxLat || centerLng < minLng || centerLng >= maxLng ) continue; if (!indexes[h3Index]) { indexes[h3Index] = {sum: 0, count: 0}; } indexes[h3Index].sum += dem[r][c]; indexes[h3Index].count++; } } return Object.keys(indexes).map(h3Index => { const {sum, count} = indexes[h3Index]; return {h3Index, elevation: sum / count}; }) }32:[] 2f:{"title":"H3 Continuous Elevation","cells":[{"id":0,"value":"md`# H3 Continuous Elevation\nExperimenting with converting a continuous surface of DEM tiles to H3\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"viewof mapView = {\n const container = html`

`;\n yield container; // Give the container dimensions.\n \n const map = container.value = new mapboxgl.Map({\n container,\n center: [initialViewport.lng, initialViewport.lat],\n zoom: initialViewport.zoom,\n style: 'mapbox://styles/mapbox/light-v9',\n interactive: true,\n });\n \n // Set up view values on load\n map.on('load', () => {\n container.value = map;\n container.dispatchEvent(new CustomEvent(\"input\"));\n });\n \n map.on('moveend', () => {\n container.value = map;\n container.dispatchEvent(new CustomEvent(\"input\"));\n });\n \n invalidation.then(() => map.remove());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"md`*zoom:* ${mapView.getZoom().toFixed(2)} *h3 res:* ${zoomToResolution(mapView.getZoom())}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"viewof h3Resolution = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"{\n const map = mapView;\n const {min, max} = elevationDomain;\n \n renderMapLayer({\n map,\n id: 'grid',\n data: h3Features,\n type: 'fill',\n paint: {\n 'fill-color': {\n \"property\": \"elevation\",\n \"stops\": [\n [min, 'blue'],\n [max, 'red']\n ]\n },\n 'fill-outline-color': 'rgba(0,0,0,0)',\n 'fill-opacity': 0.5\n }\n });\n \n renderMapLayer({\n map,\n id: 'tile-bounds',\n data: tileFeatures,\n type: 'line',\n paint: {\n 'line-color': 'grey',\n 'line-opacity': 0.5\n }\n })\n return md`*{map rendering logic}*`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"md`## Config`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"initialViewport = ({lng: 139.1501213568747, lat: 35.44211643730455, zoom: 13})","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"elevationDomain = ({min: 0, max: 2000})","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"md`## Core Logic`","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"md`Determine the current tiles and fetch the DEM for each using [Fetch elevation tile](https://observablehq.com/@sw1227/fetch-elevation-tile).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"tiles = { \n const mapBounds = mapView.getBounds();\n const zoom = Math.floor(mapView.getZoom());\n return getTiles(mapBounds, zoom);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"demTiles = Promise.all(tiles.map(fetchTile))","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"md`Convert the tiles into sets of H3 indexes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"h3Indexes = {\n const sets = tiles.map((tile, i) => tileToIndexes(tile, demTiles[i]));\n return [].concat(...sets);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"md`Create the GeoJSON features`","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"h3Features = h3ToFeatures(h3Indexes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"tileFeatures = tilesToFeatures(tiles)","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"md`## Tile Utils`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"getTiles = (mapBounds, zoom) => {\n const {lng: minLng, lat: minLat} = mapBounds.getSouthWest();\n const {lng: maxLng, lat: maxLat} = mapBounds.getNorthEast();\n const {x: minX, y: minY} = getTile(minLng, maxLat, zoom);\n const {x: maxX, y: maxY} = getTile(maxLng, minLat, zoom);\n const tiles = [];\n for (let x = minX; x <= maxX; x++) {\n for (let y = minY; y <= maxY; y++) {\n tiles.push({x, y, z: zoom});\n }\n }\n return tiles;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"getTile = (lng, lat, zoom) => ({x: long2tile(lng, zoom), y: lat2tile(lat, zoom), z: zoom})","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"tileBounds = (tile) => ({\n minLat: tile2lat(tile.y + 1, tile.z),\n maxLat: tile2lat(tile.y, tile.z),\n minLng: tile2long(tile.x, tile.z),\n maxLng: tile2long(tile.x + 1, tile.z),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`Assign each pixel in the tile to an H3 index and average the elevation values.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"getDomain = (h3Indexes) => {\n let min = Infinity;\n let max = -Infinity;\n h3Indexes.forEach(({elevation}) => {\n if (elevation > max) {\n max = elevation;\n }\n if (elevation < min) {\n min = elevation;\n }\n });\n return {min, max};\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"zoomToResolution = (zoom) => {\n const res = [0, 1, 2, 3, 4, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12];\n return zoom >= res.length ? res[res.length - 1] : res[Math.floor(zoom)];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"md`## GeoJson Generators\nConvert h3 indexes to GeoJSON for rendering.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"h3ToFeatures = (h3Indexes) => ({\n type: 'FeatureCollection',\n features: h3Indexes.map(({h3Index, elevation}) => ({\n type: 'Feature',\n id: h3Index,\n properties: {h3Index, elevation},\n geometry: {\n type: 'Polygon',\n coordinates: [h3.h3ToGeoBoundary(h3Index, true)]\n }\n }))\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"tilesToFeatures = (tiles) => ({\n type: 'FeatureCollection',\n features: tiles.map(tile => {\n const {minLat, maxLat, minLng, maxLng} = tileBounds(tile);\n return {\n type: 'Feature', \n geometry: {\n type: 'Polygon', \n coordinates: [[\n [minLng, minLat],\n [maxLng, minLat],\n [maxLng, maxLat],\n [minLng, maxLat],\n [minLng, minLat],\n ]]\n }\n };\n })\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"md`Tile/coordinated conversion functions from the [OSM wiki](https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_.28JavaScript.2FActionScript.2C_etc..29).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"function long2tile(lon,zoom) { return (Math.floor((lon+180)/360*Math.pow(2,zoom))); }","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"function lat2tile(lat,zoom) { return (Math.floor((1-Math.log(Math.tan(lat*Math.PI/180) + 1/Math.cos(lat*Math.PI/180))/Math.PI)/2 *Math.pow(2,zoom))); }","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"function tile2long(x,z) { return (x/Math.pow(2,z)*360-180); }","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"function tile2lat(y,z) {\n var n=Math.PI-2*Math.PI*y/Math.pow(2,z);\n return (180/Math.PI*Math.atan(0.5*(Math.exp(n)-Math.exp(-n))));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"h3 = require('h3-js@3.7.2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {mapboxApiToken} from '@nrabinowitz/mapbox-token'","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@0.43.0');\n mapboxgl.accessToken = mapboxApiToken;\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"import {fetchTile} from \"@sw1227/fetch-elevation-tile\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"import {renderMapLayer, fixTransmeridian} from '@nrabinowitz/mapbox-utils'","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"// CSS import required for the Mapbox map\nhtml``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}