29:null 2a:["$","title",null,{"children":"Merging shapes with h3 on MapBox | Claude Ducharme | Observable"}] 2f:T1c31,montrealIsland = ({ "shapeId": "47db1f7b-5c0f-4f85-88d7-2bc3f83eaaf4", "name": "Montreal City", "type": "LIMIT", "status": "ACTIVE", "createdAt": "2022-07-21T02:20:54.910Z", "modifiedAt": "", "deletedAt": "", "shapeVersion": "0.0.1", "schemaVersion": "0.0.1", "polygon": [ [45.703090820337195, -73.47753036109698], [45.676649818375324, -73.48587994093192], [45.65622354456548, -73.4803135543754], [45.646010407660555, -73.48365338630907], [45.633072686492426, -73.48921977286517], [45.58907210478259, -73.49756935269951], [45.54230810885909, -73.52484464682614], [45.508379824879654, -73.54377036111725], [45.46154862266769, -73.53319422666051], [45.44143650646062, -73.55045002498467], [45.43304059608309, -73.57549876448803], [45.411161659565124, -73.61502010903804], [45.4318687251353, -73.71076195780708], [45.4353326674821, -73.79277166571167], [45.41911828490386, -73.85010544724189], [45.409056989462435, -73.88266880859592], [45.405248165458005, -73.91634544726153], [45.401730748783166, -73.95419687584489], [45.438848037508365, -73.98982174980526], [45.45290371840625, -73.98147216997059], [45.4659844965942, -73.96421637164602], [45.46969532731862, -73.94584729600994], [45.47555051037122, -73.9263649430631], [45.463058717824026, -73.90855250608291], [45.49389281154069, -73.85622847245382], [45.516519759495424, -73.8495488085861], [45.51261921041174, -73.75547687578405], [45.5364046994987, -73.71929536316793], [45.55317170635087, -73.67754746399557], [45.61744980559982, -73.63691284213468], [45.65442496011991, -73.58570208581588], [45.67737629716697, -73.5372745227764], [45.69954062605095, -73.51834880848533], [45.703090820337195, -73.47753036109698] ], "filter": { "h3r0": ["802bfffffffffff"], "h3r1": ["812bbffffffffff"], "h3r2": ["822b87fffffffff","822baffffffffff"], "h3r3": ["832b81fffffffff","832baafffffffff"], "h3r4": ["842b81bffffffff","842baa5ffffffff","842baa7ffffffff"], "h3r5": ["852b81b7fffffff","852baa43fffffff","852baa47fffffff","852baa4ffffffff","852baa57fffffff", "852baa73fffffff","852baa7bfffffff"], "h3r6": ["862b81b47ffffff","862b81b67ffffff","862b81b77ffffff","862baa42fffffff","862baa457ffffff", "862baa467ffffff","862baa46fffffff","862baa477ffffff","862baa4c7ffffff","862baa4dfffffff", "862baa4efffffff","862baa547ffffff","862baa54fffffff","862baa557ffffff","862baa577ffffff", "862baa717ffffff","862baa737ffffff","862baa797ffffff","862baa7a7ffffff","862baa7b7ffffff"], "h3r7": ["872b81b44ffffff","872b81b63ffffff","872b81b65ffffff","872b81b76ffffff","872baa429ffffff", "872baa42dffffff","872baa450ffffff","872baa452ffffff","872baa454ffffff","872baa461ffffff", "872baa465ffffff","872baa46bffffff","872baa46effffff","872baa472ffffff","872baa476ffffff", "872baa4c0ffffff","872baa4c3ffffff","872baa4c5ffffff","872baa4daffffff","872baa4ddffffff", "872baa4ecffffff","872baa4eeffffff","872baa541ffffff","872baa544ffffff","872baa54bffffff", "872baa54effffff","872baa551ffffff","872baa555ffffff","872baa571ffffff","872baa573ffffff", "872baa716ffffff","872baa732ffffff","872baa736ffffff","872baa796ffffff","872baa7a0ffffff", "872baa7a2ffffff","872baa7b2ffffff"], "h3r8": ["UNDEFINED"], "h3r9": ["UNDEFINED"], "h3r10": ["UNDEFINED"], "h3r11": ["UNDEFINED"], "h3r12": ["UNDEFINED"], "h3r13": ["UNDEFINED"], "h3r14": ["UNDEFINED"], "h3r15": ["UNDEFINED"] }, "shape": { "h3r0": ["UNDEFINED"], "h3r1": ["UNDEFINED"], "h3r2": ["UNDEFINED"], "h3r3": ["UNDEFINED"], "h3r4": ["UNDEFINED"], "h3r5": ["UNDEFINED"], "h3r6": ["862baa447ffffff","862baa44fffffff","862baa45fffffff","862baa4cfffffff","862baa55fffffff"], "h3r7": ["872b81b60ffffff","872b81b62ffffff","872b81b64ffffff","872b81b66ffffff","872b81b70ffffff", "872b81b71ffffff","872b81b74ffffff","872b81b75ffffff","872baa451ffffff","872baa453ffffff", "872baa455ffffff","872baa460ffffff","872baa462ffffff","872baa463ffffff","872baa464ffffff", "872baa466ffffff","872baa46affffff","872baa470ffffff","872baa471ffffff","872baa473ffffff", "872baa474ffffff","872baa475ffffff","872baa4c1ffffff","872baa4d9ffffff","872baa4dbffffff", "872baa4e8ffffff","872baa4e9ffffff","872baa4eaffffff","872baa4ebffffff","872baa4edffffff", "872baa540ffffff","872baa542ffffff","872baa543ffffff","872baa546ffffff","872baa54affffff", "872baa7a4ffffff","872baa7a5ffffff","872baa7a6ffffff","872baa7b0ffffff","872baa7b4ffffff", "872baa7b5ffffff","872baa7b6ffffff"], "h3r8": ["882b81b449fffff","882b81b44dfffff","882b81b63dfffff","882b81b651fffff","882b81b655fffff", "882b81b659fffff","882b81b65dfffff","882b81b76bfffff","882baa4291fffff","882baa4293fffff", "882baa4297fffff","882baa4299fffff","882baa429bfffff","882baa42d3fffff","882baa42dbfffff", "882baa4501fffff","882baa4503fffff","882baa4507fffff","882baa4509fffff","882baa450bfffff", "882baa4523fffff","882baa452bfffff","882baa4543fffff","882baa4549fffff","882baa454bfffff", "882baa4611fffff","882baa4615fffff","882baa4617fffff","882baa461dfffff","882baa4655fffff", "882baa4657fffff","882baa465dfffff","882baa46b1fffff","882baa46b3fffff","882baa46b5fffff", "882baa46b7fffff","882baa46bdfffff","882baa46e1fffff","882baa46e5fffff","882baa46e7fffff", "882baa46e9fffff","882baa46edfffff","882baa4721fffff","882baa4723fffff","882baa4729fffff", "882baa472bfffff","882baa4761fffff","882baa4763fffff","882baa4769fffff","882baa476bfffff", "882baa4c03fffff","882baa4c07fffff","882baa4c0bfffff","882baa4c33fffff","882baa4c39fffff", "882baa4c3bfffff","882baa4c53fffff","882baa4c57fffff","882baa4da3fffff","882baa4dabfffff", "882baa4dd1fffff","882baa4dd3fffff","882baa4dd7fffff","882baa4dd9fffff","882baa4ddbfffff", "882baa4ec1fffff","882baa4ec3fffff","882baa4ec7fffff","882baa4ec9fffff","882baa4ecbfffff", "882baa4ee3fffff","882baa5415fffff","882baa5417fffff","882baa5445fffff","882baa5447fffff", "882baa544dfffff","882baa54b5fffff","882baa54e1fffff","882baa54e5fffff","882baa54e7fffff", "882baa54edfffff","882baa5511fffff","882baa5513fffff","882baa5517fffff","882baa5519fffff", "882baa551bfffff","882baa5553fffff","882baa555bfffff","882baa5711fffff","882baa5713fffff", "882baa5717fffff","882baa571bfffff","882baa573bfffff","882baa7161fffff","882baa7165fffff", "882baa7169fffff","882baa716dfffff","882baa7325fffff","882baa732dfffff","882baa7365fffff", "882baa796dfffff","882baa7a01fffff","882baa7a05fffff","882baa7a09fffff","882baa7a0bfffff", "882baa7a0dfffff","882baa7a29fffff","882baa7a2dfffff","882baa7b21fffff","882baa7b25fffff", "882baa7b27fffff","882baa7b29fffff","882baa7b2bfffff","882baa7b2dfffff"], "h3r9": ["UNDEFINED"], "h3r10": ["UNDEFINED"], "h3r11": ["UNDEFINED"], "h3r12": ["UNDEFINED"], "h3r13": ["UNDEFINED"], "h3r14": ["UNDEFINED"], "h3r15": ["UNDEFINED"] } })30:T942,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', 0.3); mutable map2 = map; } 31:Td9e,function renderPolyfill3(map) { const polyfillLayerName = 'polyfill2-layer'; const pfSourceName = 'pf2-source'; var currentZoom = map.getZoom(); var h3res = getResolution(currentZoom); if (shapeJson === undefined || shapeJson === "") { return; } var shape = shapeJson["shape"]; if (shape === undefined) { throw "shape element is missing"; } var hexBoundaries = []; var turfPolygons = []; var resolution = Object.keys(shape); var unionPolygons = []; for (var i=0; i < resolution.length; i++) { var resolutionKey = resolution[i]; var h3indexList = shape[resolutionKey]; if (h3indexList.length == 1 && h3indexList[0] == "UNDEFINED") continue; var isGeoJson = false; var mergedPolygons = h3.h3SetToMultiPolygon(h3indexList, false); for (var c=0; c < mergedPolygons.length; c++) { var mp = mergedPolygons[c]; for (var d=0; d < mp.length; d++) { var mpl = mp[d]; if (!isGeoJson) { // Need to close the polygon var latB = mpl[0][0]; var lonB = mpl[0][1]; var latE = mpl[mpl.length-1][0]; var lonE = mpl[mpl.length-1][1]; if (latB != latE || lonB != lonE) { mpl.push([latB,lonB]); } } } unionPolygons.push(mp); } } var singlePolygon = null; if (unionPolygons.length > 1) { var turfPolygons = []; for (var h=0; h < unionPolygons.length; h++) { var tp = turf.polygon(unionPolygons[h], { name: 'poly' + h }); turfPolygons.push(tp); } var sp = turfPolygons[0]; turfPolygons.shift(); var counter = 0; while (turfPolygons.length > 0) { counter = counter + 1; for (var e=0; e < turfPolygons.length; e++) { var p2 = turfPolygons[e]; var isct = turf.intersect(sp, p2); if (isct !== null) { var u = turf.union(sp, p2); if (u === undefined || u === null || u.geometry === undefined || u.geometry === null) continue; sp = u.geometry; turfPolygons.splice(e, 1); break; } } } singlePolygon = turf.polygon(sp.coordinates, { name: 'singlePolygon' }); } else { singlePolygon = turf.polygon(unionPolygons[0]); // as Position[][] } if (singlePolygon !== undefined && singlePolygon !== null) { var coordinates = singlePolygon.geometry.coordinates; if (coordinates !== undefined && coordinates !== null) { if (singlePolygon.geometry.type == "Polygon") { var ee = []; for (var c=0; c < coordinates.length; c++) { singlePolygon[c] = []; for (var f=0; f < coordinates[c].length; f++) { var lng1 = coordinates[c][f][0].valueOf(); var lat1 = coordinates[c][f][1].valueOf(); singlePolygon[c][f] = [lat1, lng1]; } } hexBoundaries.push(singlePolygon[0]); } else { // MultiPolygon for (var d=0; d < coordinates.length; d++) { for (var c=0; c < coordinates[d].length; c++) { var ee = []; for (var f=0; f < coordinates[d][c].length; f++) { var lng1 = coordinates[d][c][f][0].valueOf(); var lat1 = coordinates[d][c][f][1].valueOf(); ee.push([lat1, lng1]); } hexBoundaries.push(ee); } } } } } setSourceAndLayer(map, hexBoundaries, pfSourceName, polyfillLayerName, 'red', 1.0); }32:[] 2d:{"id":"93aa2c2efacaedcb","slug":"merging-shapes-with-h3-on-mapbox","title":"Merging shapes with h3 on MapBox","thumbnail":"9f8adebb43aaa9aaf0e45f02a050b2a57c3e1fbc5965d355081b0cde9e3edc8b","access_level":"public","create_time":"$D2022-10-03T14:38:52.521Z","update_time":"$D2022-10-03T17:23:37.315Z","view_time":null,"first_public_time":"$D2022-10-03T17:26:26.820Z","has_unpublished_edits":null,"fork":{"id":"1af4d2a51462e56a","slug":"display-shapes-with-h3-on-mapbox","title":"Display shapes with h3 on MapBox","owner":{"id":"224be840b192ae87","login":"claude-ducharme","name":"Claude Ducharme"}},"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":1328,"publish_version":1328,"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":0,"collection":{"id":"18695b6ce9d11973","slug":"iot-project-lafleet","title":"IoT project - LaFleet","owner":{"id":"224be840b192ae87","login":"claude-ducharme","name":"Claude Ducharme"}},"type":"notebook","body":{"title":"Merging shapes with h3 on MapBox","cells":[{"id":181,"value":"# Merging shapes with h3 on MapBox","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":396,"value":"## Shape's json is hardcoded for the demonstration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1167,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"shapeJson = montrealIsland;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1319,"value":"### All polygons are displayed","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1202,"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); renderPolyfill1(map1);});\n map1.on('zoomend', () => {renderHexes(map1); renderPolyfill1(map1);});\n map1.on('dragend', () => {renderHexes(map1); renderPolyfill1(map1);});\n map1.on('resize', () => {renderHexes(map1); renderPolyfill1(map1);});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1321,"value":"### All polygons having the same resolution are merged","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1233,"value":"{\n config;\n\n let mapContainer2 = html`

`;\n yield mapContainer2;\n\n var map2 = new mapboxgl.Map({\n container: mapContainer2,\n center: [ mutable config.longitude, mutable config.latitude ],\n zoom: mutable config.zoom,\n style: 'mapbox://styles/mapbox/streets-v11',\n });\n\n map2.on('load', () => {renderHexes(map2); renderPolyfill2(map2);});\n map2.on('zoomend', () => {renderHexes(map2); renderPolyfill2(map2);});\n map2.on('dragend', () => {renderHexes(map2); renderPolyfill2(map2);});\n map2.on('resize', () => {renderHexes(map2); renderPolyfill2(map2);});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1323,"value":"### All polygons merged are unioned","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1253,"value":"{\n config;\n\n let mapContainer3 = html`

`;\n yield mapContainer3;\n\n var map3 = new mapboxgl.Map({\n container: mapContainer3,\n center: [ mutable config.longitude, mutable config.latitude ],\n zoom: mutable config.zoom,\n style: 'mapbox://styles/mapbox/streets-v11',\n });\n\n map3.on('load', () => {renderHexes(map3); renderPolyfill3(map3);});\n map3.on('zoomend', () => {renderHexes(map3); renderPolyfill3(map3);});\n map3.on('dragend', () => {renderHexes(map3); renderPolyfill3(map3);});\n map3.on('resize', () => {renderHexes(map3); renderPolyfill3(map3);});\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":1270,"value":"turf = require(\"@turf/turf@6.5.0\")","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":"// GPS of Montreal, Quebec, Canada\ndefaultCongig = ({\n latitude: 45.55,\n longitude: -73.70,\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":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"function renderPolyfill1(map) {\n const polyfillLayerName = 'polyfill-layer';\n const pfSourceName = 'pf-source';\n\n\n var currentZoom = map.getZoom();\n var h3res = getResolution(currentZoom);\n\n if (shapeJson === undefined || shapeJson === \"\") {\n return;\n }\n\n var shape = shapeJson[\"shape\"];\n if (shape === undefined) {\n throw \"shape element is missing\";\n }\n\n var hexBoundaries = [];\n var resolution = Object.keys(shape);\n for (var i=0; i < resolution.length; i++) {\n var resolutionKey = resolution[i];\n var h3indexList = shape[resolutionKey];\n if (h3indexList.length == 1 && h3indexList[0] == \"UNDEFINED\")\n continue;\n \n for (var j=0; j < h3indexList.length; j++) {\n let h = h3.h3ToGeoBoundary(h3indexList[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', 1.0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1235,"value":"function renderPolyfill2(map) {\n const polyfillLayerName = 'polyfill2-layer';\n const pfSourceName = 'pf2-source';\n\n var currentZoom = map.getZoom();\n var h3res = getResolution(currentZoom);\n\n if (shapeJson === undefined || shapeJson === \"\") {\n return;\n }\n\n var shape = shapeJson[\"shape\"];\n if (shape === undefined) {\n throw \"shape element is missing\";\n }\n\n var hexBoundaries = [];\n var resolution = Object.keys(shape);\n for (var i=0; i < resolution.length; i++) {\n var resolutionKey = resolution[i];\n var h3indexList = shape[resolutionKey];\n if (h3indexList.length == 1 && h3indexList[0] == \"UNDEFINED\")\n continue;\n\n var mergedPolygons = h3.h3SetToMultiPolygon(h3indexList, true);\n for (var c=0; c < mergedPolygons.length; c++) {\n var mp = mergedPolygons[c];\n for (var d=0; d < mp.length; d++) {\n var mpl = mp[d];\n hexBoundaries.push(mpl);\n }\n }\n }\n \n setSourceAndLayer(map, hexBoundaries, pfSourceName, polyfillLayerName, 'red', 1.0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1248,"value":"$31","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, opacity) {\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 'line-opacity': opacity\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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"