feat(maps): use our own self-hosted tiles

OpenBeta · Feb 26, 2024 · dc49346 · dc49346
1 parent 70b7e39
commit dc49346
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 15 deletions.
diff --git a/src/components/maps/AreaInfoHover.tsx b/src/components/maps/AreaInfoHover.tsx
@@ -8,16 +8,18 @@ import { SelectedPolygon } from './AreaActiveMarker'
  * Area info panel
  */
 export const AreaInfoHover: React.FC<HoverInfo> = ({ data, geometry, mapInstance }) => {
-  const parent = data?.parent == null ? null : JSON.parse(data.parent)
-  const parentName = parent?.name ?? 'Unknown'
-  const parentId = parent?.id ?? null
+  const ancestors = data?.ancestors == null ? null : JSON.parse(data.ancestors)
+  const pathTokens = data?.pathTokens == null ? null : JSON.parse(data.pathTokens)
 
   let screenXY
   if (geometry.type === 'Point') {
     screenXY = mapInstance.project(geometry.coordinates)
   } else {
     return <SelectedPolygon geometry={geometry} />
   }
+
+  const parentId = ancestors?.[ancestors.length - 2] ?? null
+  const parentName = pathTokens?.[pathTokens.length - 2] ?? 'Unknown'
   return (
     <Popover.Root defaultOpen>
       <Popover.Anchor style={{ position: 'absolute', left: screenXY.x, top: screenXY.y }} />
@@ -34,10 +36,10 @@ export const Content: React.FC<MapAreaFeatureProperties & { parentName: string,
     ? parentName
     : (
       <a
-        href={getAreaPageFriendlyUrl(parentId, name)}
+        href={getAreaPageFriendlyUrl(parentId, parentName)}
         className='inline-flex items-center gap-1.5'
       >
-        <EntityIcon type='area' size={16} /><span className='text-secondary font-medium hover:underline '>{parentName}</span>
+        <EntityIcon type='crag' size={16} /><span className='text-secondary font-medium hover:underline '>{parentName}</span>
       </a>
       )
   return (

diff --git a/src/components/maps/GlobalMap.tsx b/src/components/maps/GlobalMap.tsx
@@ -96,13 +96,13 @@ export const GlobalMap: React.FC<GlobalMapProps> = ({ showFullscreenControl = tr
     }
   }, [mapInstance])
 
-  useEffect(() => {
-    const protocol = new Protocol()
-    maplibregl.addProtocol('pmtiles', protocol.tile)
-    return () => {
-      maplibregl.removeProtocol('pmtiles')
-    }
-  }, [])
+  // useEffect(() => {
+  //   const protocol = new Protocol()
+  //   maplibregl.addProtocol('pmtiles', protocol.tile)
+  //   return () => {
+  //     maplibregl.removeProtocol('pmtiles')
+  //   }
+  // }, [])
 
   return (
     <div className='relative w-full h-full'>

diff --git a/src/components/maps/OBCustomLayers.tsx b/src/components/maps/OBCustomLayers.tsx
@@ -27,9 +27,9 @@ export const OBCustomLayers: React.FC = () => {
           'text-size': 12,
           'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
           'icon-image': 'circle',
-          'icon-size': ['interpolate', ['linear'], ['zoom'], 8, 0.25, 16, 1],
-          'text-variable-anchor': ['bottom', 'left', 'right'],
-          'text-radial-offset': 0.5
+          'icon-size': ['interpolate', ['linear'], ['zoom'], 8, 0.25, 18, 1],
+          'text-variable-anchor': ['bottom', 'top', 'left', 'right'],
+          'text-radial-offset': ['interpolate', ['linear'], ['zoom'], 6, 0.25, 16, 1]
         }}
         paint={{
           'icon-color': '#111827',