fix: react-map-gl init issue (#1117)

* fix: remove scale control
* refactor: migrate recent contrib map to maplibre

package.json

@@ -47,7 +47,7 @@
     "immer": "^10.0.2",
     "lexical": "^0.7.5",
     "mapbox-gl": "^2.7.0",
-    "maplibre-gl": "^4.0.2",
+    "maplibre-gl": "^4.1.1",
     "nanoid": "^4.0.0",
     "nanoid-dictionary": "^4.3.0",
     "next": "^13.5.6",

src/app/(default)/components/recent/MapboxLayers.tsx

@@ -15,10 +15,10 @@ export const labelLayer: LayerProps = {
     'icon-image': 'circle'
   },
   paint: {
-    'text-halo-blur': 4,
-    'text-halo-width': 1,
-    'text-color': '#ffffff',
-    'text-halo-color': '#262626'
+    'text-halo-blur': 1,
+    'text-halo-width': 2,
+    'text-color': '#000000',
+    'text-halo-color': '#ebeced'
   }
 }
 
@@ -28,7 +28,7 @@ export const clusterLayer: LayerProps = {
   source: 'areas',
   filter: ['has', 'point_count'],
   paint: {
-    'circle-color': ['step', ['get', 'point_count'], '#51bbd6', 5, '#f1f075', 50, '#f28cb1'],
+    'circle-color': '#51bbd6',
     'circle-radius': ['step', ['get', 'point_count'], 20, 100, 30, 750, 40]
   }
 }

src/app/(default)/components/recent/RecentContributionsMap.tsx

@@ -1,14 +1,12 @@
 'use client'
 import { useRef, useState } from 'react'
-import { Map, NavigationControl, FullscreenControl, MapRef, GeoJSONSource, LngLat, Marker } from 'react-map-gl'
-import 'mapbox-gl/dist/mapbox-gl.css'
+import { Map, NavigationControl, FullscreenControl, MapRef, GeoJSONSource, LngLat, Marker } from 'react-map-gl/maplibre'
 import { point, featureCollection } from '@turf/helpers'
 import bboxFn from '@turf/bbox'
 import { BBox2d, Point, Feature } from '@turf/helpers/dist/js/lib/geojson'
-import mapboxgl from 'mapbox-gl'
 
 import { ChangesetType, ClimbType, AreaType } from '@/js/types'
-import { MAP_STYLES } from '@/components/maps/BaseMap'
+import { MAP_STYLES } from '@/components/maps/MapSelector'
 import { RecentEditsLayer, clusterLayer, UnclusteredSource, labelLayer } from './MapboxLayers'
 import { ChangesetCard } from '@/components/edit/RecentChangeHistory'
 
@@ -54,7 +52,7 @@ export const RecentContributionsMap: React.FC<{ history: ChangesetType[] }> = ({
   /**
    * On click handler.  Zoom in on cluster or show popup.
    */
-  const onClick = (event: mapboxgl.MapLayerMouseEvent): void => {
+  const onClick = async (event: maplibregl.MapLayerMouseEvent): Promise<void> => {
     if (mapRef.current == null) return
     const feature = event?.features?.[0]
 
@@ -73,16 +71,12 @@ export const RecentContributionsMap: React.FC<{ history: ChangesetType[] }> = ({
 
     const mapboxSource = mapRef?.current?.getSource('areas') as GeoJSONSource
 
-    mapboxSource.getClusterExpansionZoom(clusterId, (err, zoom) => {
-      if (err != null) {
-        return
-      }
+    const zoom = await mapboxSource.getClusterExpansionZoom(clusterId)
 
-      mapRef?.current?.flyTo({
-        center: (feature.geometry as Point).coordinates as [number, number],
-        zoom,
-        duration: 2000
-      })
+    mapRef?.current?.easeTo({
+      center: (feature.geometry as Point).coordinates as [number, number],
+      zoom,
+      duration: 800
     })
   }
 
@@ -93,12 +87,11 @@ export const RecentContributionsMap: React.FC<{ history: ChangesetType[] }> = ({
     <div className='relative w-full h-full'>
       <Map
         reuseMaps
-        mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_API_KEY}
-        mapStyle={MAP_STYLES.dark}
+        mapStyle={MAP_STYLES.dataviz}
         cooperativeGestures
         {...clickableLayer1 != null && clickableLayer2 != null &&
         { interactiveLayerIds: [clickableLayer2, clickableLayer1] }}
-        onClick={onClick}
+        onClick={(e) => { void onClick(e) }}
         ref={mapRef}
         initialViewState={{
           bounds: bbox,

src/app/(default)/layout.tsx

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

src/components/maps/AreaMap.tsx

@@ -3,7 +3,6 @@ import { Source, Layer, LineLayer } from 'react-map-gl'
 import dynamic from 'next/dynamic'
 import { lineString } from '@turf/helpers'
 import lineToPolygon from '@turf/line-to-polygon'
-import 'maplibre-gl/dist/maplibre-gl.css'
 
 import { AreaMetadataType, AreaType } from '../../js/types'
 import { GlobalMap } from './GlobalMap'

src/components/maps/GlobalMap.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { useCallback, useState } from 'react'
-import { Map, ScaleControl, FullscreenControl, NavigationControl, MapLayerMouseEvent, MapInstance } from 'react-map-gl/maplibre'
+import { Map, FullscreenControl, ScaleControl, NavigationControl, MapLayerMouseEvent, MapInstance } from 'react-map-gl/maplibre'
 import maplibregl, { MapLibreEvent } from 'maplibre-gl'
 import { Point, Polygon } from '@turf/helpers'
 import dynamic from 'next/dynamic'
@@ -50,6 +50,7 @@ export const GlobalMap: React.FC<GlobalMapProps> = ({
   const [cursor, setCursor] = useState<string>('default')
 
   const onLoad = useCallback((e: MapLibreEvent) => {
+    if (e.target == null) return
     setMapInstance(e.target)
     if (initialCenter != null) {
       e.target.jumpTo({ center: initialCenter, zoom: 6 })
@@ -108,7 +109,6 @@ export const GlobalMap: React.FC<GlobalMapProps> = ({
   return (
     <div className='relative w-full h-full'>
       <Map
-        mapLib={maplibregl}
         id='global-map'
         onLoad={onLoad}
         onDragStart={() => {
@@ -123,14 +123,15 @@ export const GlobalMap: React.FC<GlobalMapProps> = ({
           setCursor('default')
         }}
         onClick={onClick}
-        reuseMaps
         mapStyle={MAP_STYLES.dataviz}
         cursor={cursor}
         cooperativeGestures={showFullscreenControl}
         interactiveLayerIds={['crags', 'crag-group-boundaries']}
       >
+        <ScaleControl unit='imperial' style={{ marginBottom: 10 }} position='bottom-left' />
+        <ScaleControl unit='metric' style={{ marginBottom: 0 }} position='bottom-left' />
+
         <OBCustomLayers />
-        <ScaleControl />
         {showFullscreenControl && <FullscreenControl />}
         <NavigationControl showCompass={false} position='bottom-right' />
         {selected != null &&

yarn.lock

@@ -6786,10 +6786,10 @@ mapbox-gl@^2.7.0:
     tinyqueue "^2.0.3"
     vt-pbf "^3.1.3"
 
-maplibre-gl@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/maplibre-gl/-/maplibre-gl-4.0.2.tgz#6d19f4ffbd47753e2807f74bc79e00cd58824aa5"
-  integrity sha512-1HlJJyfPIbAwK1OlNzKDyuNf1NKlEwsjZZhPYpazX4yoP6ud1aC7DNct62fMSkn+hd6mRekIqzYEzIfOCC31QQ==
+maplibre-gl@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/maplibre-gl/-/maplibre-gl-4.1.1.tgz#8ca1d7d97e640817d91d52c721ef79dd32a05715"
+  integrity sha512-DmHru9FTHCOngNHzIx9W2+MlUziYPfPxd2qjyeWwczBYNx2SDpmH394MkuCvSgnfUm5Zvs4NaYCqMu44jUga1Q==
   dependencies:
     "@mapbox/geojson-rewind" "^0.5.2"
     "@mapbox/jsonlint-lines-primitives" "^2.0.2"