28:null 29:["$","title",null,{"children":"H3 hexagons on MapBox | Claude Ducharme | Observable"}] 2e:Tf08,function renderHexes(map) { const latitudeMax = 90; const latitudeMin = -latitudeMax; const longitudeMax = 180; const longitudeMin = -longitudeMax; const extraFillArea = 0.5; const blueColor = '#0080ff'; const borderLayerName = 'hex-layer-border'; const hexSourceName = 'hex-source'; var currentZoom = map.getZoom(); var h3res = getResolution(currentZoom); console.log("Resolution: " + JSON.stringify(h3res)); const iw = window.innerWidth; const ih = window.innerHeight; const cUL = map.unproject([0, 0]).toArray(); // Upper left const cLR = map.unproject([iw, ih]).toArray(); // Lower right const x1 = Math.min(cUL[0], cLR[0]); const x2 = Math.max(cUL[0], cLR[0]); const y1 = Math.min(cUL[1], cLR[1]); const y2 = Math.max(cUL[1], cLR[1]); const dh = x2 - x1; const dv = y2 - y1; console.log(`REAL Coordinates x1:${x1} x2:${x2} y1:${y1} y2:${y2} dh:${dh} dv:${dv}`); let x1withBuffer = x1 - dh * extraFillArea; let x2withBuffer = x2 + dh * extraFillArea; let y1withBuffer = y1 - dv * extraFillArea; let y2withBuffer = y2 + dv * extraFillArea; let fullX = x1withBuffer < longitudeMin || x2withBuffer > longitudeMax; x1withBuffer = Math.max(x1withBuffer, longitudeMin); x2withBuffer = Math.min(x2withBuffer, longitudeMax); y1withBuffer = Math.max(y1withBuffer, latitudeMin); y2withBuffer = Math.min(y2withBuffer, latitudeMax); console.log(`BUFF Coordinates x1:${x1withBuffer} x2:${x2withBuffer} y1:${y1withBuffer} y2:${y2withBuffer} fullView:${fullX}`); let coordinates = []; if (fullX) { coordinates.push([ [latitudeMin, longitudeMin], [latitudeMin, 0], [latitudeMax, 0], [latitudeMax, longitudeMin] ]); coordinates.push([ [latitudeMin, 0], [latitudeMin, longitudeMax], [latitudeMax, longitudeMax], [latitudeMax, 0] ]); } else { const xIncrement = 180; let lowerX = x1withBuffer; while (lowerX < longitudeMax && lowerX < x2withBuffer) { let upperX = Math.min(lowerX + xIncrement, x2withBuffer, 180); coordinates.push([[ [y2withBuffer, lowerX], [y2withBuffer, upperX], [y1withBuffer, upperX], [y1withBuffer, lowerX] ]]); console.log(`PUSH Coordinates x1:${lowerX} x2:${upperX} y1:${y1withBuffer} y2:${y2withBuffer}`); lowerX += xIncrement; } } var shapes = [].concat(...coordinates.map(e => { return h3.polyfill(e, h3res); })); var hexBoundaries = []; var pentaBoundaries = []; for (var i=0; i < shapes.length; i++) { let h = h3.h3ToGeoBoundary(shapes[i], true); if (h.find((e) => e[0] < -128) !== undefined) { h = h.map((e) => e[0]>0 ? [e[0]-360,e[1]] : e); } if (h3.h3IsPentagon(shapes[i])) { pentaBoundaries.push(h); } else { hexBoundaries.push(h); } } console.log(`currentZoom: ${currentZoom}, resolution: ${h3res}, shapes: ${hexBoundaries.length}`); var featureCollection = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": {'color': 'blue'}, "geometry": { "type": "Polygon", "coordinates": hexBoundaries } }, { "type": "Feature", "properties": {'color': 'red'}, "geometry": { "type": "Polygon", "coordinates": pentaBoundaries } }] }; const hexSource = map.getSource(hexSourceName); if (hexSource !== undefined) { (hexSource).setData(featureCollection); } else { var hexGeoJson = { type: 'geojson', data: featureCollection, }; map.addSource(hexSourceName, hexGeoJson); map.addLayer({ 'id': borderLayerName, 'source': hexSourceName, 'type': 'line', 'layout': {}, 'paint': { 'line-color': ['get', 'color'], 'line-width': 2 } }); } } 2f:[] 2c:{"id":"9f7be33077e632cc","slug":"h3-map","title":"H3 hexagons on MapBox","thumbnail":"d4593ee9f2581aba13318b4a7603b51c10049b5460ef0fed35393b53b0fcdfbe","access_level":"public","create_time":"$D2022-06-23T14:25:47.323Z","update_time":"$D2022-09-29T18:30:23.351Z","view_time":null,"first_public_time":"$D2022-06-26T22:58:22.528Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"224be840b192ae87","login":"claude-ducharme","name":"Claude Ducharme","avatar_url":"https://avatars-next.observableusercontent.com/7aa55673efd3a37712cfa4080bf91aba6507eef66da0aab94d8df041cd842e51","tier":"starter_2024"},"version":317,"publish_version":317,"role":null,"authored":false,"authors":[{"type":"individual","id":"c51d396b9ef1ceac","login":"claude-ducharme","name":"Claude Ducharme","avatar_url":"https://avatars-next.observableusercontent.com/7aa55673efd3a37712cfa4080bf91aba6507eef66da0aab94d8df041cd842e51","tier":null}],"members":[{"type":"individual","id":"c51d396b9ef1ceac","login":"claude-ducharme","name":"Claude Ducharme","avatar_url":"https://avatars-next.observableusercontent.com/7aa55673efd3a37712cfa4080bf91aba6507eef66da0aab94d8df041cd842e51","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":20,"collection":{"id":"18695b6ce9d11973","slug":"iot-project-lafleet","title":"IoT project - LaFleet","owner":{"id":"224be840b192ae87","login":"claude-ducharme","name":"Claude Ducharme"}},"type":"notebook","body":{"title":"H3 hexagons on MapBox","cells":[{"id":181,"value":"# H3 hexagons on MapBox \nZoom in or drag to see hexagons being redrawn depending on the zoom
level (0 to 15). Observe how the shapes disformation appears at zoom 0 and 1
and why 12 pentagons (in red) are needed for every resolution.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":208,"value":"## Mercator projection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"{\n let mapContainer1 = html`

`;\n yield mapContainer1;\n \n let map1 = new mapboxgl.Map({\n container: mapContainer1,\n center: [config.lng, config.lat],\n zoom: config.zoom,\n style: 'mapbox://styles/mapbox/light-v10',\n });\n \n map1.on('load', () => renderHexes(map1));\n map1.on('zoomend', () => renderHexes(map1));\n map1.on('dragend', () => renderHexes(map1));\n map1.on('resize', () => renderHexes(map1));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"## Globe projection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":220,"value":"{\n let mapContainer2 = html`

`;\n yield mapContainer2;\n \n let map2 = new mapboxgl.Map({\n container: mapContainer2,\n center: [config.lng, config.lat],\n zoom: (config.zoom + 2),\n style: 'mapbox://styles/mapbox/light-v10',\n projection: {name: 'globe'}\n });\n \n map2.on('load', () => renderHexes(map2));\n map2.on('zoomend', () => renderHexes(map2));\n map2.on('dragend', () => renderHexes(map2));\n map2.on('resize', () => renderHexes(map2));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"## Boilerplate & Common functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":238,"value":"h3 = require('h3-js@3.7.2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"mapboxgl = {\n const mapboxgl = await require('mapbox-gl@2.9.1');\n if (!mapboxgl.accessToken) {\n mapboxgl.accessToken = 'pk.eyJ1IjoiZmxlZXQ4MjMiLCJhIjoiY2tyNTM0cTlyMzF0czJvcGE1eXo2MHlxZCJ9.Uaq6EkRr4ZhHTsOuz-ZXIA';\n document.head.appendChild(html``);\n }\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"// GPS of Montreal, Quebec, Canada\nconfig = ({\n lng: -73.58781,\n lat: 45.50884,\n zoom: 0\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"function getResolution (zoom) {\n\n if (zoom <= 3.0)\n return 0;\n if (zoom <= 4.4) // 1.1\n return 1;\n if (zoom <= 5.7) // 1.3\n return 2;\n if (zoom <= 7.1) // 1.4\n return 3;\n if (zoom <= 8.4) // 1.3\n return 4;\n if (zoom <= 9.8) // 1.4\n return 5;\n if (zoom <= 11.4) // 1.6\n return 6;\n if (zoom <= 12.7) // 1.3\n return 7;\n if (zoom <= 14.1) // 1.4\n return 8;\n if (zoom <= 15.5) // 1.4\n return 9;\n if (zoom <= 16.8) // 1.3\n return 10;\n if (zoom <= 18.2) // 1.6\n return 11;\n if (zoom <= 19.5) // 1.3\n return 12;\n if (zoom <= 21.1) // 1.6\n return 13;\n if (zoom <= 21.9) // 0.8\n return 14;\n return 15;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"