2e:null 2f:["$","title",null,{"children":"Untitled | Malcolm Meyer | Observable"}] 34:T644, async function updateGridColors (geojson, features, map) { console.log("updating grids") if (!features.length) { console.warn("no features") return; } if (!geojson || !geojson.features.length) { console.warn("no grids") return; } const rbush = await geojsonRbush.default; const fIndex = rbush(); const gridIndex = rbush(); fIndex.load(turf.featureCollection(features)); gridIndex.load(geojson); const counts = []; updateProgress(0, 1); // Or bar.style.display = "none" for (let i = 0; i < geojson.features.length; i++) { // console.log("processing feature", i) const feature = geojson.features[i]; let count = 0; const n = fIndex.search(feature); count = n.features.length n.features.forEach(f => { count = count + (f.properties.point_count > 0 ? f.properties.point_count : 0) }) feature.properties.point_count = count; counts.push(count) updateProgress(i + 1, geojson.features.length); // Update progress await new Promise(resolve => setTimeout(resolve, 10)); } if (!counts.length) return; const values = [Math.min(...counts), Math.max(...counts)]; console.log(values) if (!isFinite(values[0]) || !isFinite(values[1])) return const colorScale = [ "interpolate", ["linear"], ["get", "point_count"], 0, "transparent", values[0] + 1, "#205EA633",//"#4682B433", values[1], "rgb(175, 48, 41)", ]; console.log(geojson) map.getSource("grids").setData(geojson); map.setPaintProperty("grids", "fill-color", colorScale) console.log("grids updated") }35:Ta76,viewof map = { /* No key needed : | */ const map = new maplibre.Map({ container, style:"https://basemaps.cartocdn.com/gl/positron-gl-style/style.json", center: [-90,40], zoom: 8, attributionControl: false }) let debounceTimer; function onSourceLoad(e) { if (e.sourceId === "ms_buildings" && e.isSourceLoaded) { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { map.off("sourcedata", onSourceLoad); console.log("Source ms_buildings is fully loaded."); createGrids({ target: map }); }, 1000); } } function createGrids(e) { const map = e.target; const zoom = map.getZoom(); mutable currentZoom = +zoom.toFixed(2); if (zoom > 12) { return } const features = map.queryRenderedFeatures({layers: ["ms_buildings_fill"]}); console.log(features.slice(0,100)) const gridResolution = getGridIndex(zoom); mutable gridres = gridResolution; if (features.length) { mutable data = features; } const keys = getKeys(e.target.getBounds().toArray().flat(), gridResolution) const geoms = keys.map(key => h3.cellToBoundary(key, true)) const geojson = turf.featureCollection(geoms.map(geom => turf.polygon([geom]))) console.log("h3 grids:", keys.length, "features:", features.length) console.log({zoom, nfeaturesWithCount: features.filter(f => f.properties.point_count).length}) features.forEach(f => f.properties.point_count = f.properties?.point_count === 0 ? 0 : f.properties?.point_count || 1); updateGridColors(geojson, features, map) map.on("sourcedata", onSourceLoad); } map.on("sourcedata", onSourceLoad); map.on("load", () => { map.addSource("ms_buildings", { type: "vector", tiles: ["https://planetarycomputer.microsoft.com/api/data/v1/vector/collections/ms-buildings/tilesets/global-footprints/tiles/{z}/{x}/{y}"], maxzoom: 13 } ) map.addLayer({ "id": "ms_buildings_fill", "type": "fill", "source": "ms_buildings", "source-layer": "bingmlbuildings", "paint": { "fill-color": "steelblue", "fill-opacity": 0.3 } }) map.addSource("grids", { type: "geojson", data: { type: "FeatureCollection", features: [] } }); map.addLayer({ id: "grids", type: "fill", source: "grids", paint: { "fill-color": "steelblue", "fill-opacity": 0.5, "fill-outline-color": "blue" }, filter: ["!=", "point_count", 0], maxzoom: 13 }); map.on("click", "grids", e => { const features = map.queryRenderedFeatures(e.point); console.log(features[0]) }) map.on("moveend", createGrids) }); invalidation.then(() => map.remove()); }36:[] 32:{"id":"c90924dc416c501d","slug":"ms-buildings-h3-grids","title":"","thumbnail":"33de81298916a4ec34d397fda943aed80ccde4b1f09245842f91e47517d6a029","access_level":"public","create_time":"$D2025-06-20T12:26:31.771Z","update_time":"$D2025-06-26T12:42:35.076Z","view_time":null,"first_public_time":"$D2025-06-20T12:26:31.771Z","has_unpublished_edits":null,"fork":{"id":"1cb8bb0cc63d36f4","slug":"turfjs-issue-with-turf-area-and-redundant-points","title":"TurfJS Issue with turf.area() and Redundant Points","owner":{"id":"88c7fe0cd656118d","login":"reyemtm","name":"Malcolm Meyer"}},"stars":0,"starred":false,"owner":{"type":"team","id":"88c7fe0cd656118d","login":"reyemtm","name":"Malcolm Meyer","avatar_url":"https://avatars-next.observableusercontent.com/63d208bab84d375e8528e0cd635061f24b1f6efceb935cfdc883c0f494fc8450","tier":"starter_2024"},"version":401,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9771754028a69c47","login":"reyemtm","name":"Malcolm Meyer","avatar_url":"https://avatars-next.observableusercontent.com/63d208bab84d375e8528e0cd635061f24b1f6efceb935cfdc883c0f494fc8450","tier":null}],"members":[{"type":"team","id":"88c7fe0cd656118d","login":"reyemtm","name":"Malcolm Meyer","avatar_url":"https://avatars-next.observableusercontent.com/63d208bab84d375e8528e0cd635061f24b1f6efceb935cfdc883c0f494fc8450","tier":"starter_2024","role":"editor"},{"type":"individual","id":"9771754028a69c47","login":"reyemtm","name":"Malcolm Meyer","avatar_url":"https://avatars-next.observableusercontent.com/63d208bab84d375e8528e0cd635061f24b1f6efceb935cfdc883c0f494fc8450","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"","cells":[{"id":343,"value":"## Planetary Computer MS Building Footprints Aggregated to h3 Grids\n\nTesting out on-the-fly h3 aggregation of vector tiles, in this case Planetary Computer's Microsoft building footprints. These contain an aggregation `point_count` from zoom levels 8 to 12. Prior to zoom level 8 the h3 aggregation just looks at feature count, and beyond up until zoom 12 it combines a feature count with the `point_count` property inside each feature. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"html`\n

\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"container = html`

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"md`Map Data © OSM | Carto`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":228,"value":"mutable gridres = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"mutable currentZoom = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"viewof dataview = html`

${data.filter(f => Object.keys(f.properties).length > 0).slice(0,4).map(f => `

${JSON.stringify(f.properties, 0, 2)}

`)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"## Create Grids Function","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"function getKeys (bbox, res) {\n const coords = turf.bboxPolygon(bbox).geometry.coordinates[0];\n const keys = h3.polygonToCells(coords, res, true);\n return keys\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"md`## Map, Data and Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"function getGridIndex (z) {\n const zoom = +z.toFixed(0);\n const gridZoomMap = {\n 5: 3,\n 6: 4,\n 7: 4,\n 8: 5,\n 9: 6,\n 10: 7,\n 11: 8,\n 12: 9,\n 13: 10,\n 14: 10,\n };\n const index = zoom <= 5 ? gridZoomMap[5] : gridZoomMap[zoom] || 10;\n console.log(index)\n return index;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"mutable data = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"maplibre = require(\"maplibre-gl\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"turf = require(\"@turf/turf\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"h3 = require('h3-js@4.2.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"geojsonRbush = import('https://cdn.skypack.dev/geojson-rbush')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"function updateProgress(current, total) {\n const bar = document.getElementById(\"progress-bar\");\n if (!bar) return;\n const percent = (current / total) * 100;\n bar.style.width = `${percent}%`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"