refactor(wip): migrate to our self-hosted map tiles

package.json

@@ -46,13 +46,15 @@
     "immer": "^10.0.2",
     "lexical": "^0.7.5",
     "mapbox-gl": "^2.7.0",
+    "maplibre-gl": "^4.0.2",
     "nanoid": "^4.0.0",
     "nanoid-dictionary": "^4.3.0",
     "next": "^13.5.6",
     "next-auth": "^4.22.1",
     "nprogress": "^0.2.0",
     "paper": "^0.12.17",
     "paperjs-offset": "^1.0.8",
+    "pmtiles": "^3.0.3",
     "rc-slider": "^10.0.0-alpha.5",
     "react": "^18.2.0",
     "react-content-loader": "^6.2.0",
@@ -61,7 +63,7 @@
     "react-hook-form": "^7.34.2",
     "react-hotkeys-hook": "^3.4.7",
     "react-infinite-scroll-component": "^6.1.0",
-    "react-map-gl": "^7.0.10",
+    "react-map-gl": "^7.1.7",
     "react-markdown": "^9.0.1",
     "react-paginate": "^8.1.3",
     "react-responsive": "^9.0.0-beta.6",

src/app/(maps)/layout.tsx

@@ -1,4 +1,4 @@
-import 'mapbox-gl/dist/mapbox-gl.css'
+import 'maplibre-gl/dist/maplibre-gl.css'
 import { Metadata } from 'next'
 import '@/public/fonts/fonts.css'
 import './../global.css'

src/components/maps/BaseMap.tsx

@@ -17,7 +17,9 @@ export const DEFAULT_INITIAL_VIEWSTATE: XViewStateType = {
 
 export const MAP_STYLES = {
   light: 'mapbox://styles/mappandas/ckf8bb0qv18be19npofybx7yq',
-  dark: 'mapbox://styles/mappandas/cl0u44wo8008415pedsbgtml7'
+  dark: 'mapbox://styles/mappandas/cl0u44wo8008415pedsbgtml7',
+  outdoor: 'https://api.maptiler.com/maps/outdoor-v2/style.json?key=IJlqluHVT3Au1mC0w78q',
+  dataviz: 'https://api.maptiler.com/maps/dataviz/style.json?key=IJlqluHVT3Au1mC0w78q'
 }
 interface BaseMapProps {
   height: number

src/components/maps/GlobalMap.tsx

@@ -1,13 +1,15 @@
 'use client'
 import { useCallback, useEffect, useState } from 'react'
-import mapboxgl from 'mapbox-gl'
-import { Map, ScaleControl, FullscreenControl, NavigationControl, MapLayerMouseEvent, MapInstance } from 'react-map-gl'
+import { Map, ScaleControl, FullscreenControl, NavigationControl, MapLayerMouseEvent, MapInstance } from 'react-map-gl/maplibre'
+import maplibregl, { MapLibreEvent } from 'maplibre-gl'
+import { Protocol } from 'pmtiles'
 import { Point, Polygon } from '@turf/helpers'
 
 import { MAP_STYLES } from './BaseMap'
 import { AreaInfoDrawer } from './AreaInfoDrawer'
 import { AreaInfoHover } from './AreaInfoHover'
 import { SelectedFeature } from './AreaActiveMarker'
+import { OBCustomLayers } from './OBCustomLayers'
 
 export interface MapAreaFeatureProperties {
   id: string
@@ -54,10 +56,10 @@ export const GlobalMap: React.FC<GlobalMapProps> = ({ showFullscreenControl = tr
     })
   }, [])
 
-  const onLoad = useCallback((e: mapboxgl.MapboxEvent) => {
+  const onLoad = useCallback((e: MapLibreEvent) => {
     setMapInstance(e.target)
     if (initialCenter != null) {
-      e.target.jumpTo({ center: initialCenter })
+      e.target.jumpTo({ center: initialCenter, zoom: 6 })
     }
   }, [initialCenter])
 
@@ -94,9 +96,18 @@ export const GlobalMap: React.FC<GlobalMapProps> = ({ showFullscreenControl = tr
     }
   }, [mapInstance])
 
+  useEffect(() => {
+    const protocol = new Protocol()
+    maplibregl.addProtocol('pmtiles', protocol.tile)
+    return () => {
+      maplibregl.removeProtocol('pmtiles')
+    }
+  }, [])
+
   return (
     <div className='relative w-full h-full'>
       <Map
+        mapLib={maplibregl}
         id='global-map'
         onLoad={onLoad}
         onDragStart={() => {
@@ -113,11 +124,12 @@ export const GlobalMap: React.FC<GlobalMapProps> = ({ showFullscreenControl = tr
         onClick={onClick}
         reuseMaps
         mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_API_KEY}
-        mapStyle={MAP_STYLES.light}
+        mapStyle={MAP_STYLES.dataviz}
         cursor={cursor}
         cooperativeGestures={showFullscreenControl}
         interactiveLayerIds={['crags', 'crag-group-boundaries']}
       >
+        <OBCustomLayers />
         <ScaleControl />
         {showFullscreenControl && <FullscreenControl />}
         <NavigationControl showCompass={false} position='bottom-right' />

src/components/maps/OBCustomLayers.tsx

@@ -0,0 +1,44 @@
+import { Source, Layer } from 'react-map-gl'
+
+/**
+ * OpenBeta custom map tiles
+ * @returns
+ */
+export const OBCustomLayers: React.FC = () => {
+  return (
+    <Source
+      id='crags-source' // can be any unique id
+      type='vector'
+      tiles={[
+        'https://maptiles.openbeta.io/crags/{z}/{x}/{y}.pbf'
+      ]}
+      attribution='© OpenBeta contributors'
+    >
+      <Layer
+        /**
+         * Can be any unique id.  In order for the mouse to interact with the layer,
+         * the id must be specified in ReactMapGL's interactiveLayerIds prop
+         */
+        id='crags'
+        type='symbol'
+        source-layer='crags' // source-layer is the layer name in the vector tileset
+        layout={{
+          'text-field': ['get', 'name'],
+          '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
+        }}
+        paint={{
+          'icon-color': '#111827',
+          'text-halo-blur': 1,
+          'text-halo-width': 1,
+          'text-color': '#111827',
+          'text-halo-color': '#f8fafc'
+        }}
+      />
+    </Source>
+  )
+}