29:null 2a:["$","title",null,{"children":"Display shapes with h3 on MapBox | Claude Ducharme | Observable"}] 2f:T81b,## 1. Paste or write the shape's json then click Load button Example... ~~~ { "id": "b54b8bbf-4cdb-4d44-8501-f9845b40c060", "name": "NAME", "polygon": [ [45.70595006108803, -73.46978144968874], [45.439093636064456, -73.97380724968878], [45.415299946198104, -73.59183254027172], [45.70595006108803, -73.46978144968874] ], "filter": { "h3r0": ["802bfffffffffff"], "h3r1": ["812bbffffffffff"], "h3r2": ["822b87fffffffff","822baffffffffff"], "h3r3": ["832b81fffffffff","832baafffffffff"], "h3r4": ["842b81bffffffff","842baa5ffffffff","842baa7ffffffff"], "h3r5": ["852b81b7fffffff","852baa43fffffff","852baa47fffffff","852baa4ffffffff","852baa57fffffff", "852baa73fffffff","852baa7bfffffff"], "h3r6": ["862b81b67ffffff","862b81b77ffffff","862baa40fffffff","862baa42fffffff","862baa44fffffff", "862baa467ffffff","862baa46fffffff","862baa4c7ffffff","862baa4dfffffff","862baa4e7ffffff", "862baa547ffffff","862baa717ffffff","862baa7a7ffffff","862baa7b7ffffff"] }, "shape": { "h3r6": ["862baa447ffffff","862baa457ffffff","862baa45fffffff","862baa477ffffff","862baa4cfffffff", "862baa4efffffff","862baa55fffffff"], "h3r7": ["872b81b64ffffff","872b81b66ffffff","872b81b75ffffff","872baa409ffffff","872baa429ffffff", "872baa448ffffff","872baa44affffff","872baa44bffffff","872baa44cffffff","872baa44effffff", "872baa460ffffff","872baa462ffffff","872baa463ffffff","872baa464ffffff","872baa466ffffff", "872baa46affffff","872baa4c1ffffff","872baa4c3ffffff","872baa4c5ffffff","872baa4d9ffffff", "872baa4dbffffff","872baa4ddffffff","872baa4e1ffffff","872baa4e5ffffff","872baa540ffffff", "872baa542ffffff","872baa543ffffff","872baa544ffffff","872baa546ffffff","872baa716ffffff", "872baa7a0ffffff","872baa7a2ffffff","872baa7a4ffffff","872baa7a5ffffff","872baa7a6ffffff", "872baa7b0ffffff","872baa7b1ffffff","872baa7b2ffffff","872baa7b4ffffff","872baa7b5ffffff", "872baa7b6ffffff"] } } ~~~ ### Map will zoom in, display in red, centered, adjust the zoom 30:Tb09,{ apply; // Listens to the Apply button being clicked so it does not fire all the time var sj = JSON.parse(shapeJson); var polygon = sj["polygon"]; if (polygon === undefined) { throw "polygon element is missing"; } var filter = sj["filter"]; if (filter === undefined) { throw "filter element is missing"; } var shape = sj["shape"]; if (shape === undefined) { throw "shape element is missing"; } var west = 180; var east = -180; var north = -90; var south = 90; for (var i=0; i < polygon.length; i++) { var lat = polygon[i][0]; var long = polygon[i][1]; if (lat < -90 || lat > 90) { throw "Error latitude -> Range is -90 to 90"; } if (long < -180 || long > 180) { throw "Error longitude -> Range is -180 to 180"; } if (lat < south) { south = lat; } if (lat > north) { north = lat; } if (long < west) { west = long; } if (long > east) { east = long; } } console.log("north: " + north); console.log("south: " + south); console.log("west: " + west); console.log("east: " + east); var midLat = (north + south) / 2; var midLon = (east + west) / 2; var lastFilterRes = 0; var fkeys = Object.keys(filter); for (var i=0; i < fkeys.length; i++) { var rstr = fkeys[i].replace("h3r", ""); var rval = parseInt(rstr); lastFilterRes = rval; } console.log("lastFilterRes: " + lastFilterRes); var firstShapeRes = -1; var lastShapeRes = -1; var skeys = Object.keys(shape); for (var i=0; i < skeys.length; i++) { var rstr = skeys[i].replace("h3r", ""); var rval = parseInt(rstr); if (firstShapeRes == -1) { firstShapeRes = rval; } lastShapeRes = rval; } var diff = lastShapeRes - firstShapeRes; console.log("firstShapeRes: " + firstShapeRes); console.log("lastShapeRes: " + lastShapeRes); var zoom = 0; var firstShape = shape["h3r" + firstShapeRes][0]; var h3res = h3.h3GetResolution(firstShape); mutable h3resolution = h3res; var inTheZoom = false; for (var i=22; i >= 0; i=i-0.1) { var r = getResolution(i); if (r == firstShapeRes) { inTheZoom = true; zoom = i; } else if (inTheZoom) { break; } } if (zoom < 0 || zoom > 22) { throw "Error zoom -> Range is 0 to 22"; } if (diff < 0 || diff > 2) { throw "Error H3 res diff -> Range is 0 to 2"; } if (config.zoom == zoom && config.latitude == midLat && config.longitude == midLon && config.h3ResDiff == diff) { console.log("Identical values, skipping"); } else { mutable config = ({ latitude: midLat, longitude: midLon, zoom: zoom, h3ResDiff: diff }); console.log("New config ready " + JSON.stringify(config)); } yield JSON.stringify(config); } 31:T956,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); mutable h3resolution = h3res; const cc = getCoordinates(map); let coordinates = []; const cUL = cc[0]; const cLR = cc[2]; 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; 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); 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] ]]); lowerX += xIncrement; } } var shapes = [].concat(...coordinates.map(e => { return h3.polyfill(e, h3res); })); var hexBoundaries = []; 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); } hexBoundaries.push(h); } setSourceAndLayer(map, hexBoundaries, hexSourceName, borderLayerName, 'blue'); //renderPolyfill(map); mutable map2 = map; } 32:[] 2d:{"id":"1af4d2a51462e56a","slug":"display-shapes-with-h3-on-mapbox","title":"Display shapes with h3 on MapBox","thumbnail":"a107ed7ea1b54f1fcc695754e5acaa69cf6f36c610b31021033a858cbe45e246","access_level":"public","create_time":"$D2022-07-30T17:15:56.678Z","update_time":"$D2022-10-02T22:12:38.134Z","view_time":null,"first_public_time":"$D2022-07-30T17:17:39.516Z","has_unpublished_edits":null,"fork":true,"stars":0,"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":1159,"publish_version":1159,"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":1,"collection":{"id":"18695b6ce9d11973","slug":"iot-project-lafleet","title":"IoT project - LaFleet","owner":{"id":"224be840b192ae87","login":"claude-ducharme","name":"Claude Ducharme"}},"type":"notebook","body":{"title":"Display shapes with h3 on MapBox","cells":[{"id":181,"value":"# Display shapes with h3 on MapBox","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":396,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":615,"value":"viewof shapeJson = Inputs.textarea({label: \"shapeJson\", placeholder: \"\", width: 800, rows: 12, resize: true, monospace: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"viewof apply = Inputs.button(\"Apply\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"{\n config;\n\n let mapContainer1 = html`

`;\n yield mapContainer1;\n\n var map1 = new mapboxgl.Map({\n container: mapContainer1,\n center: [ mutable config.longitude, mutable config.latitude ],\n zoom: mutable config.zoom,\n style: 'mapbox://styles/mapbox/streets-v11',\n });\n\n map1.on('load', () => {renderHexes(map1); renderPolyfill(map1);});\n map1.on('zoomend', () => {renderHexes(map1); renderPolyfill(map1);});\n map1.on('dragend', () => {renderHexes(map1); renderPolyfill(map1);});\n map1.on('resize', () => {renderHexes(map1); renderPolyfill(map1);});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"## Supporting functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1011,"value":"### Imports (require)","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":869,"value":"uuidv4 = require('uuid@8.3.2/dist/umd/uuidv4.min.js');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"MapboxDraw = require('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.js')","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 document.head.appendChild(html``);\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":1016,"value":"### Declarations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":499,"value":"// Paris\ndefaultCongig = ({\n latitude: 48.864716,\n longitude: 2.349014,\n zoom: 10,\n h3ResDiff: 1\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"mutable config = defaultCongig;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"### Core handlers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":206,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"function renderPolyfill(map) {\n const polyfillLayerName = 'polyfill-layer';\n const pfSourceName = 'pf-source';\n\n var currentZoom = map.getZoom();\n var h3res = getResolution(currentZoom);\n\n if (shapeJson === undefined || shapeJson === \"\") {\n return;\n }\n \n var sj = JSON.parse(shapeJson);\n var shape = sj[\"shape\"];\n if (shape === undefined) {\n throw \"shape element is missing\";\n }\n\n var hexBoundaries = [];\n var skeys = Object.keys(shape);\n for (var i=0; i < skeys.length; i++) {\n var shapes = shape[skeys[i]];\n for (var j=0; j < shapes.length; j++) {\n let h = h3.h3ToGeoBoundary(shapes[j], true);\n if (h.find((e) => e[0] < -128) !== undefined) {\n h = h.map((e) => e[0]>0 ? [e[0]-360,e[1]] : e);\n }\n \n hexBoundaries.push(h);\n }\n }\n \n setSourceAndLayer(map, hexBoundaries, pfSourceName, polyfillLayerName, 'red');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"### Utils","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":996,"value":"function setSourceAndLayer(map, hexBoundaries, sourceName, layerName, color) {\n var featureCollection = {\n \"type\": \"FeatureCollection\",\n \"features\": [{\n \"type\": \"Feature\",\n \"properties\": {'color': color},\n \"geometry\": {\n \"type\": \"Polygon\",\n \"coordinates\": hexBoundaries\n }\n }]\n };\n\n const hexSource = map.getSource(sourceName);\n if (hexSource !== undefined) {\n (hexSource).setData(featureCollection);\n } else {\n var hexGeoJson = {\n type: 'geojson',\n data: featureCollection,\n };\n map.addSource(sourceName, hexGeoJson);\n map.addLayer({\n 'id': layerName,\n 'source': sourceName,\n 'type': 'line',\n 'layout': {},\n 'paint': {\n 'line-color': ['get', 'color'],\n 'line-width': 2\n }\n });\n }\n}","pinned":false,"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":203,"value":"function getCoordinates(map) {\n const w = window.innerWidth;\n const h = window.innerHeight;\n const cUL = map.unproject([0, 0]).toArray();\n const cUR = map.unproject([w, 0]).toArray();\n const cLR = map.unproject([w, h]).toArray();\n const cLL = map.unproject([0, h]).toArray();\n const coordinates = [cUL, cUR, cLR, cLL];\n return coordinates;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"### Mutable variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":797,"value":"mutable logs = \"\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"mutable polygonDic = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"mutable h3resolution = 0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1137,"value":"mutable map2 = null;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"