2c:null 2d:["$","title",null,{"children":"H3 Indexes: Cartesian vs Spherical | Nick Rabinowitz | Observable"}] 32:T5b6,viewof map = { const container = html`

`; yield container; // Give the container dimensions. const map = container.value = new mapboxgl.Map({ container, center: [0, 0], zoom: 0, style: 'mapbox://styles/mapbox/light-v9' }); map.on('load', () => { map.addSource('great-hex-source', { type: 'geojson', data: {type: 'FeatureCollection', features: []} }); map.addSource('hex-source', { type: 'geojson', data: {type: 'FeatureCollection', features: []} }); map.addLayer({ id: 'hex-layer', source: 'hex-source', type: 'line', paint: { 'line-color': 'red', 'line-width': 2 } }); map.addLayer({ id: 'hex-layer-fill', source: 'hex-source', type: 'fill', paint: { 'fill-color': 'red', 'fill-opacity': 0.05 } }); map.addLayer({ id: 'great-hex-layer', source: 'great-hex-source', type: 'line', paint: { 'line-color': 'blue', 'line-width': 2 } }); map.addLayer({ id: 'great-hex-layer-fill', source: 'great-hex-source', type: 'fill', paint: { 'fill-color': 'blue', 'fill-opacity': 0.05 } }); var marker = new mapboxgl.Marker() .setLngLat(point) .addTo(map); }); invalidation.then(() => map.remove()); yield container; }33:T77c,function zoomToHex() { const indexes = validIndexes; // Early exits if (!indexes.length || !map.isStyleLoaded()) { return; } if (h3.h3GetResolution(indexes[0]) > 12) { map.getSource('hex-source').setData({type: 'FeatureCollection', features: []}); return; } const greatFeatures = indexes.map(h3Index => { // Create a Polygon feature from the current hexagon and render on the map const boundary = h3.h3ToGeoBoundary(h3Index, true); const greatBoundary = boundary.reduce((coords, coord, i) => { if (i === boundary.length - 1) coords.push(coord); else { const feature = greatCircle(coord, boundary[i + 1]); coords.push(...feature.geometry.coordinates); } return coords; }, []) const feature = { type: 'Feature', properties: {h3Index}, geometry: { type: 'Polygon', coordinates: [greatBoundary] } }; fixTransmeridian(feature); return feature; }); const features = indexes.map(h3Index => { // Create a Polygon feature from the current hexagon and render on the map const feature = { type: 'Feature', properties: {h3Index}, geometry: { type: 'Polygon', coordinates: [h3.h3ToGeoBoundary(h3Index, true)] } }; fixTransmeridian(feature); return feature; }); const geojson = {type: 'FeatureCollection', features}; map.getSource('hex-source').setData(geojson); const geojson2 = {type: 'FeatureCollection', features: greatFeatures}; map.getSource('great-hex-source').setData(geojson2); console.log(greatFeatures) if (indexes.length === 1) { const h3Index = indexes[0]; map.flyTo({ center: h3.h3ToGeo(h3Index).reverse(), zoom: resZoom[h3.h3GetResolution(h3Index)] }); } else { const bounds = bbox(geojson); map.fitBounds(bounds, { padding: 40 }); } }34:[] 30:{"id":"a06ccb90d523e04c","slug":"h3-indexes-cartesian-vs-spherical","title":"H3 Indexes: Cartesian vs Spherical","thumbnail":"c95b45784c2e37a20fff3d760ecdf05a8e304e6d940cfc8a38c4aed786b1abe4","access_level":"public","create_time":"$D2020-09-11T16:44:21.599Z","update_time":"$D2022-08-01T01:16:05.618Z","view_time":null,"first_public_time":"$D2020-09-11T17:15:07.861Z","has_unpublished_edits":null,"fork":{"id":"de4b3ba9ef3c540d","slug":"h3-index-inspector","title":"H3 Index Inspector","owner":{"id":"121dc539a6e3e282","login":"nrabinowitz","name":"Nick Rabinowitz"}},"stars":0,"starred":false,"owner":{"type":"team","id":"121dc539a6e3e282","login":"nrabinowitz","name":"Nick Rabinowitz","avatar_url":"https://avatars-next.observableusercontent.com/af324aa7e7df8e450fdb6d331ddc6b2d2c5bb804c04b52a174bc6e0db88872e8","tier":"starter_2024"},"version":649,"publish_version":649,"role":null,"authored":false,"authors":[{"type":"individual","id":"8eeacd6e693d83a2","login":"nrabinowitz","name":"Nick Rabinowitz","avatar_url":"https://avatars-next.observableusercontent.com/af324aa7e7df8e450fdb6d331ddc6b2d2c5bb804c04b52a174bc6e0db88872e8","tier":null}],"members":[{"type":"individual","id":"8eeacd6e693d83a2","login":"nrabinowitz","name":"Nick Rabinowitz","avatar_url":"https://avatars-next.observableusercontent.com/af324aa7e7df8e450fdb6d331ddc6b2d2c5bb804c04b52a174bc6e0db88872e8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"ea191cef9af22a51","slug":"h3","title":"H3","owner":{"id":"121dc539a6e3e282","login":"nrabinowitz","name":"Nick Rabinowitz"}},"type":"notebook","body":{"titling":"auto","title":"H3 Indexes: Cartesian vs Spherical","cells":[{"id":0,"value":"md`# H3 Indexes: Cartesian vs Spherical\nThis notebook paints two versions of the index, one using straight Cartesian lines, one using spherical geometry, with each line segment as a great circle arc. When allocating points to a cell, H3 uses spherical geometry, which may lead to visual mismatches near the edges if the cells are painted using Cartesian lines. This is particularly true at coarser resolutions.\n\nIn this example, the red is Cartesian, the blue is spherical. If you zoom way in, you can see that the point is inside the spherical representation but outside the Cartesian one.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof inputText = {\n const defaultIndex = '8218f7fffffffff';\n const fromUrl = decodeURIComponent(window.location.hash.slice(1));\n return html``\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"point = [-15.172, 49.122]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"viewof showIcosa = checkboxInput({\n options: [{ value: true, label: \"Show icosahedron edges\" }],\n value: [true]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"detailsTable(inspect(validIndexes)) ||\n md`*Please enter a valid H3 index (e.g. ${clickableH3Index('85283473fffffff')})*`;\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"validIndexes = inputText.split(/[, \\n]+/).filter(h3.h3IsValid);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"{\n zoomToHex();\n \n // Zoom on load\n function handleStyleLoad() {\n zoomToHex();\n }\n \n function handleClick(evt) {\n const {lng, lat} = evt.lngLat;\n selectPoint(lat, lng, map.getZoom());\n }\n \n // Set event handlers\n map.on('styledata', handleStyleLoad);\n map.on('click', handleClick);\n \n // Clear event handlers on each cell refresh\n invalidation.then(() => {\n map.off('styledata', handleStyleLoad);\n map.off('click', handleClick);\n });\n \n return md`*Set up event handlers*`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"function detailsTable(details) {\n if (!details) return null;\n const asCSV = array => array.join(', ');\n const asLink = url => \n `${url.length < 75 ? url : url.slice(0, 72) + '...'}`;\n const formatters = {\n center: asCSV,\n parent: clickableH3Index,\n children: clickableH3Indexes,\n neighbors: clickableH3Indexes,\n indexes: clickableH3Indexes,\n resolutions: asCSV,\n 'icosahedron faces': asCSV,\n permalink: asLink\n };\n return html`\n \n ${Object.keys(details).map(k => html`\n \n \n \n \n `)}\n

${k}	${\n (formatters[k] \|\| String)(details[k])\n }

\n ` \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function inspect(indexes) {\n if (!indexes.length) {\n return null; \n }\n const permalink = `${document.baseURI}#${encodeURIComponent(inputText)}`;\n if (indexes.length === 1) {\n const h3Index = indexes[0];\n const resolution = h3.h3GetResolution(h3Index);\n return {\n h3Index, \n resolution, \n center: h3.h3ToGeo(h3Index), \n parent: resolution > 0 ? h3.h3ToParent(h3Index, resolution - 1) : null, \n children: resolution < 15 ? h3.h3ToChildren(h3Index, resolution + 1) : null, \n neighbors: h3.getH3UnidirectionalEdgesFromHexagon(h3Index).map(h3.getDestinationH3IndexFromUnidirectionalEdge), \n baseCell: h3.h3GetBaseCell(h3Index), \n 'icosahedron faces': h3.h3GetFaces(h3Index), \n vertices: h3.h3ToGeoBoundary(h3Index).length,\n isPentagon: h3.h3IsPentagon(h3Index),\n permalink\n };\n }\n const resolutions = [...new Set(indexes.map(h3.h3GetResolution))];\n return {indexes, resolutions, permalink};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"function selectPoint(lat, lng, zoom) {\n const res = validIndexes.length > 0 ? \n // Get the resolution we're looking at now\n h3.h3GetResolution(validIndexes[0]) : \n // Otherwise, guess based on map zoom\n Math.floor(Math.max(zoom, 20) * 0.75);\n const h3Index = h3.geoToH3(lat, lng, res);\n const set = new Set(validIndexes);\n if (set.has(h3Index)) set.delete(h3Index);\n else set.add(h3Index);\n selectH3Index([...set].join(','))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"function selectH3Index(index) {\n viewof inputText.value = index;\n viewof inputText.dispatchEvent(new CustomEvent(\"input\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"function clickableH3Index(index, altText) {\n if (!index) {\n return null;\n }\n const el = html`${altText || index}`;\n el.addEventListener(\"click\", () => selectH3Index(index));\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"function clickableH3Indexes(indexes) {\n return indexes && html`\n ${indexes.map((index, i) => html`${i ? ', ' : ''}${clickableH3Index(index)}`)}\n (${clickableH3Index(indexes.join(', '), 'show all')})\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"resZoom = [0, 1, 2, 4, 6, 8, 10, 12, 13, 14, 16, 17, 18];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"{\n const sourceId = 'icosa-source';\n const layerId = 'icosa-layer'\n if (!map.getSource(sourceId)) {\n const icosahedron = await d3Fetch.json('https://gist.githubusercontent.com/nrabinowitz/99642585d87d8b1963f1eef9f9273f0e/raw/77486df9968ae4f46ef86bdc7fa8ff074c65ff48/icosahedron.json');\n map.addSource(sourceId, {\n type: 'geojson',\n data: icosahedron\n });\n map.addLayer({\n id: layerId,\n source: sourceId,\n type: 'line',\n paint: {\n 'line-color': '#DDB27C',\n 'line-opacity': 1,\n 'line-width': 2\n }\n });\n }\n map.setLayoutProperty(layerId, 'visibility', showIcosa === \"true\" ? \"visible\" : \"none\");\n return map.getLayoutProperty(layerId, 'visibility');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"h3 = require('h3-js@3.6.2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@0.43.0');\n mapboxgl.accessToken = mapboxApiToken;\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"import {fixTransmeridian} from '@nrabinowitz/mapbox-utils'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"import {mapboxApiToken} from '@nrabinowitz/mapbox-token'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"d3Fetch = require('d3-fetch')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"import {checkbox as checkboxInput} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"import {params, permalink} from \"@jeffbaumes/permalink\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"bbox = {\n const lib = await require('https://bundle.run/@turf/bbox@6.0.1');\n return lib.default;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"greatCircle = require('https://bundle.run/@turf/great-circle@6.5.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"// CSS import required for the Mapbox map\nhtml``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"