website: show children/parent in hierarchy example

Author: felixpalmer

examples/website/hierarchy/app.tsx

@@ -3,7 +3,7 @@ import {createRoot} from 'react-dom/client';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import {Map} from 'react-map-gl/maplibre';
 import {ScatterplotLayer, ArcLayer, LineLayer} from '@deck.gl/layers';
-import {lonLatToCell, cellToBoundary} from 'a5';
+import {lonLatToCell, cellToBoundary, cellToChildren, cellToParent} from 'a5';
 import DeckGL from '@deck.gl/react';
 import {MapView} from '@deck.gl/core';
 
@@ -19,6 +19,8 @@ const A5GREEN_DARK = [0, 128, 64] as [number, number, number];
 const App: React.FC<{showCellId?: boolean}> = ({showCellId = true}) => {
   const [viewState, setViewState] = useState(INITIAL_VIEW_STATE);
   const [cellLocation, setCellLocation] = useState([INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude]);
+  const [showChildren, setShowChildren] = useState(false);
+  const [showParent, setShowParent] = useState(false);
 
   const onViewStateChange = useCallback(({viewState}) => {
     const [longitude, latitude] = cellLocation;
@@ -38,8 +40,10 @@ const App: React.FC<{showCellId?: boolean}> = ({showCellId = true}) => {
   // Memoize the entire cells calculation
   const data = useMemo(() => {
     const cellId = lonLatToCell(cellLocation, resolution);
-    return {cellId, children: [cellId]};
-  }, [resolution, cellLocation]);
+    const children = showChildren ? cellToChildren(cellId) : [];
+    const parent = showParent ? cellToParent(cellId) : null;
+    return {cellId, children: [cellId, ...children, ...(parent ? [parent] : [])]};
+  }, [resolution, cellLocation, showChildren, showParent]);
 
   // Convert cell boundaries to great circle arcs
   const arcs = useMemo(() => {
@@ -54,14 +58,18 @@ const App: React.FC<{showCellId?: boolean}> = ({showCellId = true}) => {
     }).flat();
   }, [data.children]);
 
+  const getColor = (_, info) => {
+    return info.index < 5 ? A5GREEN : [160, 160, 160, 255];
+  }
+
   const polygonProps: any = {
     data: arcs,
     getSourcePosition: d => d.source,
     getTargetPosition: d => d.target,
-    getSourceColor: A5GREEN,
-    getTargetColor: A5GREEN,
-    getColor: A5GREEN,
-    getWidth: 2,
+    getSourceColor: getColor,
+    getTargetColor: getColor,
+    getColor: getColor,
+    getWidth: (_, info) => info.index < 5 ? 2 : 1,
     getHeight: 0,
     greatCircle: true,
     widthUnits: 'pixels'
@@ -154,6 +162,24 @@ const App: React.FC<{showCellId?: boolean}> = ({showCellId = true}) => {
           <div>Cell ID (Hex): {`0x${data.cellId.toString(16).padStart(16, '0')}`}</div>
           <div>Resolution: {resolution}</div>
           <div>Location: [{cellLocation[0].toFixed(4)}, {cellLocation[1].toFixed(4)}]</div>
+          <div style={{ marginTop: '10px' }}>
+            <label style={{ marginRight: '15px' }}>
+              <input
+                type="checkbox"
+                checked={showChildren}
+                onChange={(e) => setShowChildren(e.target.checked)}
+              />
+              Show children
+            </label>
+            <label>
+              <input
+                type="checkbox"
+                checked={showParent}
+                onChange={(e) => setShowParent(e.target.checked)}
+              />
+              Show parent
+            </label>
+          </div>
         </div>
       )}
     </>

website/src/examples/hierarchy.js

@@ -14,10 +14,10 @@ class HierarchyDemo extends Component {
   static renderInfo(meta) {
     return (
       <div>
-        <p>A visualization of the A5 pentagon hierarchy on a globe.</p>
-        <p>Zooming in/out on the page will change the resolution level of the pentagon at the center of the map.</p>
-        <p>Click any location on the globe to see the pentagon hierarchy at that location.</p>
-        <p>Notice how cells at similar locations have similar cell ids.</p>
+        <p>A5 cells for a given location on the globe.</p>
+        <p>Zoom in/out to change the resolution level of the A5 pentagon at the center of the map.</p>
+        <p>Click to see the pentagon hierarchy at that location. Notice how cells at similar locations have similar cell ids.</p>
+        <p>Parent cells do not exactly cover children cells, but are guaranteed to be close.</p>
       </div>
     );
   }