fix: laggy map dragging on mobile with dark mode enabled (#42)

Author: fityannugroho

components/map.tsx

@@ -2,7 +2,8 @@
 
 import 'leaflet/dist/leaflet.css'
 import type { PropsWithChildren } from 'react'
-import { MapContainer, type MapContainerProps, TileLayer } from 'react-leaflet'
+import { MapContainer, type MapContainerProps } from 'react-leaflet'
+import TileLayer from './tile-layer'
 
 export type MapProps = MapContainerProps & PropsWithChildren
 
@@ -15,16 +16,13 @@ export default function Map({
 }: MapProps) {
   return (
     <MapContainer
+      {...mapProps}
+      maxZoom={16} // Maximum zoom level provided by Protomaps
       center={center}
       zoom={zoom}
       className={className}
-      {...mapProps}
     >
-      <TileLayer
-        attribution='<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-        className="dark:hue-rotate-180 dark:invert dark:contrast-[.90] dark:brightness-90"
-      />
+      <TileLayer />
       {children}
     </MapContainer>
   )

components/tile-layer.tsx

@@ -0,0 +1,36 @@
+import '@maplibre/maplibre-gl-leaflet'
+import L from 'leaflet'
+import { useTheme } from 'next-themes'
+import { useEffect, useRef } from 'react'
+import { useMap } from 'react-leaflet'
+
+export default function TileLayer() {
+  const map = useMap()
+  const { resolvedTheme } = useTheme()
+  const glRef = useRef<L.MaplibreGL>(
+    L.maplibreGL({
+      style: `/map-styles/${resolvedTheme}.json`,
+    }),
+  )
+
+  useEffect(() => {
+    const maplibreMap = glRef.current.getMaplibreMap()
+
+    if (!maplibreMap) {
+      glRef.current.addTo(map)
+
+      map.attributionControl
+        .addAttribution(
+          '<a href="https://datawan.id">Datawan</a> | <a href="https://github.com/protomaps/basemaps">Protomaps</a> © <a href="https://openstreetmap.org">OpenStreetMap</a>',
+        )
+        .setPrefix('<a href="https://leafletjs.com">Leaflet</a>')
+
+      return
+    }
+
+    // Update the style when the theme changes
+    maplibreMap.setStyle(`/map-styles/${resolvedTheme}.json`)
+  }, [map, resolvedTheme])
+
+  return null
+}

package.json

@@ -29,6 +29,7 @@
     "node": ">=18.17"
   },
   "dependencies": {
+    "@maplibre/maplibre-gl-leaflet": "^0.0.22",
     "@next/env": "^15.0.2",
     "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.2",