29:null 2a:["$","title",null,{"children":"Drawing shapes with H3 on MapBox | Claude Ducharme | Observable"}] 2f:T4c1,## 1. Selecting a location Type the zoom and GPS coordinates you would like to display on the map and click Apply button. You can also enter the H3 polyfill zoom difference if you want to define polygons (blue polygons are the reference level). Information about the GPS coordinate and polygons will be displayed under the map.

## 2. Playing with polygons
### 2.1 Drawing a shape You can start drawing when the cursor is a cross shape. Left-click to make the first node and a vertex will appear between nodes. To stop drawing, press ENTER to confirm the shape. To go back to drawing click the square icon on the upper right corner of the map. ### 2.2 Editing a shape To modify an existing shape, select it so its color is orange and click again so you see smaller nodes in the middle of its vertices. You can then either drag a node or a smller node in the middle of a vertex (mouse cursor will be a hand). ### 2.3 Moving a shape To move an existing shape, select it so its color is orange then drag it from its inside (mouse cursor will be a cross with arrow ends). ### 2.4 Deleting a shape To delete a shape, select it so its color is orange then click the garbage bin icon or press DELETE.30:T45c,setCoordinates = { apply; // Listens to the Apply button benig clicked so it does not fire all the time const zoom = parseFloat(document.getElementById('zoom').value); const lat = parseFloat(document.getElementById('latitude').value); const long = parseFloat(document.getElementById('longitude').value); const diff = parseFloat(document.getElementById('h3ResDiff').value); 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 (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 (config.zoom == zoom && config.latitude == lat && config.longitude == long && config.h3ResDiff == diff) { console.log("Identical values, skipping"); } else { mutable config = ({ latitude: lat, longitude: long, zoom: zoom, h3ResDiff: diff }); console.log("New config ready " + JSON.stringify(config)); } yield JSON.stringify(config); } 31:T471,{ //config; setCoordinates; let mapContainer1 = html`

`; yield mapContainer1; var map1 = new mapboxgl.Map({ container: mapContainer1, center: [ mutable config.longitude, mutable config.latitude ], zoom: mutable config.zoom, style: 'mapbox://styles/mapbox/streets-v11', }); const draw = new MapboxDraw({ displayControlsDefault: false, // Select which mapbox-gl-draw control buttons to add to the map. controls: { polygon: true, trash: true }, // Set mapbox-gl-draw to draw by default. // The user does not have to click the polygon control button first. defaultMode: 'draw_polygon' }); map1.addControl(draw); map1.on('draw.create', () => renderPolyfill(map1, draw, "create")); map1.on('draw.delete', () => renderPolyfill(map1, draw, "delete")); map1.on('draw.update', () => renderPolyfill(map1, draw, "update")); map1.on('load', () => renderHexes(map1)); map1.on('zoomend', () => renderHexes(map1)); map1.on('dragend', () => renderHexes(map1)); map1.on('resize', () => renderHexes(map1)); }32:T6f1,{ config; var json = { "h3r0": h3.geoToH3(config.latitude, config.longitude, 0), "h3r1": h3.geoToH3(config.latitude, config.longitude, 1), "h3r2": h3.geoToH3(config.latitude, config.longitude, 2), "h3r3": h3.geoToH3(config.latitude, config.longitude, 3), "h3r4": h3.geoToH3(config.latitude, config.longitude, 4), "h3r5": h3.geoToH3(config.latitude, config.longitude, 5), "h3r6": h3.geoToH3(config.latitude, config.longitude, 6), "h3r7": h3.geoToH3(config.latitude, config.longitude, 7), "h3r8": h3.geoToH3(config.latitude, config.longitude, 8), "h3r9": h3.geoToH3(config.latitude, config.longitude, 9), "h3r10": h3.geoToH3(config.latitude, config.longitude, 10), "h3r11": h3.geoToH3(config.latitude, config.longitude, 11), "h3r12": h3.geoToH3(config.latitude, config.longitude, 12), "h3r13": h3.geoToH3(config.latitude, config.longitude, 13), "h3r14": h3.geoToH3(config.latitude, config.longitude, 14), "h3r15": h3.geoToH3(config.latitude, config.longitude, 15), }; var str = `Latitude: ${config.latitude}
` str += `Longitude: ${config.longitude}
` str += "JSON
{
" for (var i=0; i < 16; i++) { var index = "h3r" + i; var line = ` "${index}": "${json[index]}",
`; if (i == 15) { line = line.replace(",", ""); } str += line; } str += "}"; var tlogs = `Resolution: ${h3resolution}, `; tlogs += `Polyfill diff: ${config.h3ResDiff}, `; tlogs += `Polyfill res: ${h3resolution + config.h3ResDiff}

`; tlogs += logs; const table = html`

GPS coordinates	H3 information (logs)
${str}	${tlogs}

` yield table; }33:T927,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'); } 34:T6ca,function renderPolyfill(map, draw, event) { const polyfillLayerName = 'polyfill-layer'; const pfSourceName = 'pf-source'; var currentZoom = map.getZoom(); var h3res = getResolution(currentZoom); var polygons = []; const data = draw.getAll(); var logCoordinatesDic = {}; for (var i=0; i < data.features.length; i++) { var id = `Polygon${i}`; var coordinates = data.features[i].geometry.coordinates; var newc = []; for (var j=0; j < coordinates.length; j++) { var c1 = coordinates[j]; for (var k=0; k < c1.length; k++) { var c2 = c1[k]; newc.push([c2[1], c2[0]]); } } polygons.push(newc); logCoordinatesDic[id] = getCoordinatesAsStr(newc); } var hexBoundaries = []; mutable polygonDic = ({}); mutable logs = `There are ${polygons.length} polygons drawn
`; for (var i=0; i < polygons.length; i++) { var id = `Polygon${i}`; var polyfill = h3.polyfill(polygons[i], h3res+config.h3ResDiff); var compact = h3.compact(polyfill); for (var j=0; j < compact.length; j++) { let h = h3.h3ToGeoBoundary(compact[j], 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); } //console.log(`RP >> polygon #${i}, polyfill count: ${polyfill.length}, compact count: ${compact.length}`); mutable logs += `Polygon #${i}, polyfill count: ${polyfill.length}, compact count: ${compact.length}
`; mutable logs += logCoordinatesDic[id] + "
"; mutable polygonDic[id] = getPolygonAsStr(compact , logCoordinatesDic[id]); } setSourceAndLayer(map, hexBoundaries, pfSourceName, polyfillLayerName, 'red'); }35:[] 2d:{"id":"d40d4547fbba001b","slug":"h3-drawing-on-mapbox","title":"Drawing shapes with H3 on MapBox","thumbnail":"6cadf7363adc419b340435f3fad369e6b13e759e026672b8e781742a8ce7b9ca","access_level":"public","create_time":"$D2022-07-11T19:13:27.979Z","update_time":"$D2022-09-29T18:28:18.770Z","view_time":null,"first_public_time":"$D2022-07-11T19:22:07.584Z","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":1064,"publish_version":1064,"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":"Drawing shapes with H3 on MapBox","cells":[{"id":181,"value":"# Drawing 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":"{\n const form = html`\n

MapBox zoom: between 0 and 22 (furtest-closest)

Latitude: between 90 and -90 (north-south)

Longitude: between 180 and -180 (east-west)

H3 polyfill resolution diff: between 0 and 2 (incl)

\n \n

\n`;\n return html`${form}`;\n}","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":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"### Select the polygon to display","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1039,"value":"viewof comboSelection = Inputs.select(Object.keys(polygonDic), {value: \"\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"{\n var polygon = comboSelection in polygonDic ? polygonDic[comboSelection] : \"\";\n yield html`

${comboSelection}
${polygon}

`\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":"defaultCongig = ({\n latitude: 45.50884,\n longitude: -73.58781,\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":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"$34","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":966,"value":"function dicToStr(dic) {\n var str = \"{
\";\n for (var x=0; x < 16; x++) {\n var arr = dic[\"h3r\" + x];\n if (arr.length == 0)\n continue;\n\n let uniq = [...new Set(arr)].sort();\n var items = \"\";\n for (var y=0; y < uniq.length; y++) {\n items += `\"${uniq[y]}\"` + ((y < uniq.length-1) ? \",\" : \"\");\n if ((y+1) % 5 == 0 && y < uniq.length-1) { // Wrap line\n items += \"
      \";\n }\n }\n\n if (str.length > 10) {\n str += \",
\";\n }\n var line = `    \"h3r${x}\": [${items}]`;\n str += line;\n }\n str += \"
    }\";\n return str\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"function getCoordinatesAsStr(newc) {\n var logCoordinates = \"[
\";\n for (var j=0; j < newc.length; j++) {\n logCoordinates += `  [${newc[j][0]}, ${newc[j][1]}]` + ((j < newc.length - 1) ? \",
\" : \"
\");\n }\n logCoordinates += \"]\";\n return logCoordinates;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":985,"value":"function getPolygonAsStr(compact, coordinatesAsStr) {\n var uuid = uuidv4();\n var filterDic = {};\n var shapeDic = {};\n for (var x=0; x < 16; x++) {\n shapeDic[\"h3r\" + x] = [];\n filterDic[\"h3r\" + x] = [];\n }\n\n for (var j=0; j < compact.length; j++) {\n var polygon = compact[j];\n var res = h3.h3GetResolution(polygon);\n shapeDic[\"h3r\" + res].push(polygon);\n for (var k=res-1; k >=0 ; k--) {\n var parent = h3.h3ToParent(polygon, k);\n if (!(parent in filterDic[\"h3r\" + k]))\n filterDic[\"h3r\" + k].push(parent);\n }\n }\n\n var pg = coordinatesAsStr.replaceAll(\"  \", \"    \");\n var str = \"{
\";\n str += `  \"id\": \"${uuid}\",
`;\n str += `  \"name\": \"NAME\",
`;\n str += `  \"polygon\": ${pg},
`;\n str += `  \"filter\": ${dicToStr(filterDic)},
`;\n str += `  \"shape\": ${dicToStr(shapeDic)}
`;\n str += `}
`;\n return str;\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"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2e:"$2d:body"