31:T5d0,function getEdgeChildren(parent, res) { const parentRes = h3.getResolution(parent); const resDiff = res - parentRes; if (!resDiff) return [parent]; const leftNeighborHex = [0, 5, 3, 1, 6, 4, 2]; const rightNeighborHex = [0, 3, 6, 2, 5, 1, 4]; const out = []; function getEdges(parent, direction, skipNeighbor) { const parentRes = h3.getResolution(parent); const childRes = parentRes + 1 const children = h3.cellToChildren(parent, childRes); const cell = children[direction]; if (childRes === res) { out.push(cell); } else { getEdges(cell, direction); } if (!skipNeighbor) { const neighbors = childRes % 2 ? rightNeighborHex : leftNeighborHex; const neighborDir = neighbors[direction]; const neighbor = children[neighborDir]; if (childRes === res) { out.push(neighbor); } else { getEdges(neighbor, neighborDir); } } } function getPentagonEdges(parent, direction) { const parentRes = h3.getResolution(parent); const childRes = parentRes + 1; const children = h3.cellToChildren(parent, childRes); const cell = children[direction]; if (childRes === res) { out.push(cell); } else { getEdges(cell, direction + 1); } } if (h3.isPentagon(parent)) { for (let i = 1; i < 6; i++) { getPentagonEdges(parent, i); } } else { for (let i = 1; i < 7; i++) { getEdges(parent, i, true); } } return out; }32:T51f,function getTestPolygon(parent, res) { const boundary = h3.cellToBoundary(parent, true); const [centerLat, centerLng] = h3.cellToLatLng(parent); const earthRadiusKm = 6371.007180918475; const resDiff = res - h3.getResolution(parent); const offset = h3.radsToDegs(h3.getHexagonEdgeLengthAvg(res, h3.UNITS.km) / earthRadiusKm) * resDiff; const coordinates = []; function applyOffset([lng, lat]) { lat += offset * (lat < centerLat ? -1 : 1); lng += offset * (lng < centerLng ? -1 : 1) * 2; return [lng, lat]; } if (resDiff > 2) { const candidates = getEdgeChildrenSimple(parent, res); const childOrderCCWHex = [5, 1, 2, 0, 4, 3]; const childOrderCCWPent = [4, 0, 1, 3, 2]; const order = h3.isPentagon(parent) ? childOrderCCWPent : childOrderCCWHex; for (let i = 0; i < candidates.length; i++) { const [lat, lng] = h3.cellToLatLng(candidates[order[i]]); coordinates.push(applyOffset(boundary[i]), applyOffset([lng, lat])); } coordinates.push(coordinates[0]); } else if (resDiff > 0) { for (let i = 0; i < boundary.length; i++) { coordinates.push(applyOffset(boundary[i])); } } return { type: 'Feature', properties: {}, geometry: { type: 'Polygon', coordinates: [coordinates] } }; }33:T9fd,function getTestPolygon2(parent) { const positions = [ // Hex [ // Res offset 2 [ // Class II [48, 44, 16, 17, 24, 22, 8, 12, 40, 39, 32, 34], // Class III [46, 48, 20, 16, 23, 24, 10, 8, 36, 40, 33, 32] ], // Res offset 4 [ // Class II [2400, 2200, 800, 850, 1200, 1100, 400, 600, 2000, 1950, 1600, 1700], // Class III [2300, 2400, 1000, 800, 1150, 1200, 500, 400, 1800, 2000, 1650, 1600] ] ], // Pentagon [ // Res offset 2 [ // Class II [40, 36, 8, 9, 16, 14, 32, 31, 24, 26], // Class III [38, 40, 12, 8, 15, 16, 28, 32, 25, 24] ], // Res offset 4 [ // Class II [2000, 1800, 400, 450, 800, 700, 1600, 1550, 1200, 1300], // Class III [1900, 2000, 600, 400, 750, 800, 1400, 1600, 1250, 1200] ] ] ]; const earthRadiusKm = 6371.007180918475; const parentRes = h3.getResolution(parent); const edgeRes = Math.min(parentRes + 4, 15); let resDiff = edgeRes - parentRes; resDiff = resDiff < 2 ? resDiff : resDiff < 4 ? 2 : 4; const [centerLat, centerLng] = h3.cellToLatLng(parent); const offset = h3.radsToDegs(h3.getHexagonEdgeLengthAvg(parentRes + resDiff, h3.UNITS.km) / earthRadiusKm) * resDiff; function applyOffset([lng, lat]) { lat += offset * (lat < centerLat ? -1 : 1) * 1.5; lng += offset * (lng < centerLng ? -1 : 1) * 1.5; return [lng, lat]; } function applyOffset2([lng, lat]) { const dist = Math.sqrt(Math.pow(centerLat - lat, 2) + Math.pow(centerLng - lng, 2)); lat = lat + (lat - centerLat) / dist * offset * 3; lng = lng + (lng - centerLng) / dist * offset * 3; return [lng, lat]; } const coordinates = []; if (resDiff < 2) { const boundary = h3.cellToBoundary(parent, true); for (let i = 0; i < boundary.length; i++) { coordinates.push(applyOffset(boundary[i])); } } else { const pos = positions[h3.isPentagon(parent) ? 1 : 0][resDiff < 4 ? 0 : 1][parentRes % 2]; const children = h3.cellToChildren(parent, parentRes + resDiff); const candidates = pos.map(p => children[p]); for (let i = 0; i < candidates.length; i++) { const [lat, lng] = h3.cellToLatLng(candidates[i]); coordinates.push(applyOffset([lng, lat])); } coordinates.push(coordinates[0]); } return { type: 'Feature', properties: {}, geometry: { type: 'Polygon', coordinates: [coordinates] } }; }34:T404,{ const childOrderCCWHex = [10,11, 2, 3, 4,5, 0, 1, 8, 9, 6, 7]; const childOrderCCWPent = [8, 9, 0, 1, 2, 3, 6,7, 4, 5]; function resort(pos, order) { const out = []; for (let i = 0; i < pos.length; i++) { out.push(pos[order[i]]); } return out } return {hex: [ // class II [8, 10, 16, 20, 24, 23, 32, 33, 40, 36, 48, 46], // class III [8, 12, 16, 17, 24, 22, 32, 34, 40, 39, 48, 44], // odd res [400, 500, 800, 1000, 1200, 1150, 1600, 1650, 2000, 1800, 2400, 2300], // even res [400, 600, 800, 850, 1200, 1100, 1600, 1700, 2000, 1950, 2400, 2200] ].map(pos => resort(pos, childOrderCCWHex)), pent: [ // class III [8, 12, 16, 15, 24, 25, 32, 28, 40, 38], // class II [8, 9, 16, 14, 24, 26, 32, 31, 40, 36], // odd res [400, 600, 800, 750, 1200, 1250, 1600, 1400, 2000, 1900], // even res [400, 450, 800, 700, 1200, 1300, 1600, 1550, 2000, 1800], ].map(pos => resort(pos, childOrderCCWPent)) } }35:[] 2f:{"title":"H3 Convex Hull","cells":[{"id":0,"value":"md`# H3 Convex Hull\n\nExperimenting with child convex hulls for H3 cells. The goal here is to quickly calculate a minimal polygon that covers all cell children at any resolution.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"viewof childDepth = slider({\n min: 0, \n max: 5, \n step: 1, \n value: 3, \n title: \"Child Depth\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"viewof parentRes = slider({\n min: 0, \n max: 14, \n step: 1, \n value: 3, \n title: \"Parent Res\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"viewof map = {\n const container = html`

`;\n yield container; // Give the container dimensions.\n \n const map = container.value = new mapboxgl.Map({\n container,\n center: [config.lng, config.lat],\n zoom: config.zoom,\n style: 'mapbox://styles/mapbox/light-v9'\n });\n \n map.on('load', () => {\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":204,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"h3Resolution = parentRes + childDepth","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"parent = h3.latLngToCell(config.lat, config.lng, parentRes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"hexagons = {\n return h3.cellToChildren(parent, h3Resolution);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"config = ({\n lat: \t64.41806049888446, \n lng: -20.91748504118956,\n zoom: 6,\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"{\n renderH3IndexesToMap(map, 'hexes', hexagons, {'fill-color': 'steelblue'}, true);\n renderH3IndexesToMap(map, 'parent', [parent], {'fill-color': 'red'}, true);\n\n renderH3IndexesToMap(map, 'edge-children', [], {'fill-color': 'green'}, true);\n renderH3IndexesToMap(map, 'bad-children', badChildren, {'fill-color': 'red', 'fill-opacity': 1}, true);\n // renderH3IndexesToMap(map, 'edge-children2', edgeChildren2, {'fill-color': 'black', 'fill-opacity': 1});\n \n renderMapLayer({\n map,\n id: 'hull',\n data: hull,\n type: 'line',\n paint: {\n 'line-color': 'black',\n 'line-width': 2\n }\n });\n \n return md`*{map rendering logic}*`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"testHull = ({\n type: 'Feature',\n properties: {},\n geometry: {\n type: 'Polygon',\n coordinates: [[\n [83.236170244, -11.878236624],[83.789142665, -37.336889849],[78.337085641, -70.178726021],[74.973370110, -68.835747847],[60.791849077, -60.103975791],[58.783716940, -53.984522566],[55.043628385, -38.479355392],[55.515684515, -27.149106353],[58.261350008, -11.600942879],[60.492378337, -7.990497334],[73.020683297, 2.438747422],[76.040254248, 2.393050047],[83.236170244, -11.878236624]\n ].map(c => c.reverse())]\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":335,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":254,"value":"function getEdgeChildPos(parent, res) {\n const parentRes = h3.getResolution(parent);\n const resDiff = res - parentRes;\n if (!resDiff) return [];\n \n const out = [];\n\n if (h3.isPentagon(parent)) {\n for (let i = 0; i < 5; i++) {\n let offset = 1 + 5 * (7 ** (resDiff - 1) - 1) / 6;\n for (let d = resDiff - 1; d >= 0; d--) {\n offset += (d < resDiff - 1 ? i + 2 : i) * 7 ** d;\n }\n out.push(offset);\n }\n } else {\n // hexagons - simple powers of 7\n for (let i = 1; i < 7; i++) {\n let offset = 0;\n for (let d = resDiff - 1; d >= 0; d--) {\n offset += i * 7 ** d;\n }\n out.push(offset);\n }\n }\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":450,"value":"function getEdgeChildrenSimple(parent, res) {\n const posIndexes = getEdgeChildPos(parent, res);\n const children = h3.cellToChildren(parent, res);\n return posIndexes.map(offset => {\n const cell = children[offset];\n if (!cell) throw new Error(`No cell for index ${offset}`);\n return cell;\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"function getCircle(parent, res) {\n const candidates = getEdgeChildrenSimple(parent, res);\n candidates.push(parent);\n const [lat, lng] = h3.cellToLatLng(parent);\n let max = 0;\n let pLat = lat;\n let pLng = lng;\n for (const cell of candidates) {\n const boundary = h3.cellToBoundary(cell);\n for (const [blat, blng] of boundary) {\n const dlat = lat - blat;\n const dlng = lng - blng;\n const sqDist = dlat * dlat + dlng * dlng\n if (sqDist > max) {\n max = sqDist;\n pLat = blat;\n pLng = blng;\n }\n }\n }\n const radius = Math.sqrt(max);\n const feature = {\n type: 'Feature',\n properties: {},\n geometry: {\n type: 'Polygon',\n coordinates: [[]]\n }\n };\n const steps = 360;\n for (let i = 0; i <= steps; i++) {\n const theta = Math.PI * 2 * i / steps;\n feature.geometry.coordinates[0].push([\n lng + radius * Math.cos(theta),\n lat + radius * Math.sin(theta)\n ])\n }\n return feature;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"badChildren = hexagons.filter(h3Index => {\n const feature = geojson2h3.h3ToFeature(h3Index);\n return !contains(hull, feature);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"edgeChildren2 = {\n return edgeChildren.filter((_, i) => !(i % 8) || !((i + 1) % 8)) //.map(cell => hexagons.indexOf(cell));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":315,"value":"edgeChildren = getEdgeChildren(parent, h3Resolution)","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"hull = {\n return getTestPolygon2(parent, h3Resolution);\n const children = geojson2h3.h3SetToMultiPolygonFeature(edgeChildren);\n return fixTransmeridian(convexHull(children));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"h3 = require('h3-js@4.0.1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"import {mapboxApiToken} from '@nrabinowitz/mapbox-token'","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"import {renderH3IndexesToMap, renderMapLayer, h3ToGeoJSON, fixTransmeridian} from '@nrabinowitz/mapbox-utils'","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl');\n mapboxgl.accessToken = mapboxApiToken;\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"geojson2h3 = require('https://bundle.run/geojson2h3@1.2.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"convexHull = {\n const m = await import('https://cdn.skypack.dev/@turf/convex@6.5.0?min');\n return m.default;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"greatCircle = require('https://bundle.run/@turf/great-circle@6.5.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"contains = {\n const m = await import('https://unpkg.com/@turf/boolean-contains@6.5.0/dist/es/index.js?module');\n return m.default;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"// CSS import required for the Mapbox map\nhtml``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}