Merge pull request #223 from WISE-Developers/MapLibre

migrate: Mapbox GL to MapLibre GL with TerraDraw

Author: spydmobile

frontend/package.json

@@ -31,23 +31,22 @@
     "bump": "npm version patch --no-git-tag-version"
   },
   "dependencies": {
-    "@mapbox/mapbox-gl-draw": "^1.5.1",
     "@turf/turf": "^7.3.1",
     "better-auth": "^1.5.5",
     "html2canvas": "^1.4.1",
     "jspdf": "^4.2.0",
-    "mapbox-gl": "^3.16.0",
+    "maplibre-gl": "^5.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-rnd": "^10.5.2"
+    "react-rnd": "^10.5.2",
+    "terra-draw": "^1.26.0",
+    "terra-draw-maplibre-gl-adapter": "^1.3.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.58.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
-    "@types/mapbox__mapbox-gl-draw": "^1.4.9",
-    "@types/mapbox-gl": "^3.4.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^8.13.0",

frontend/src/features/Map/components/MapCapture.tsx

@@ -72,7 +72,7 @@ export function MapCapture() {
       backgroundColor: null,
       ignoreElements: (el) => {
         if (el.tagName === 'CANVAS') return true;
-        if (el.classList?.contains('mapboxgl-ctrl')) return true;
+        if (el.classList?.contains('maplibregl-ctrl')) return true;
         if (el.classList?.contains('drawing-toolbar')) return true;
         if (el.classList?.contains('layer-panel')) return true;
         if (el.classList?.contains('layer-panel-toggle')) return true;

frontend/src/features/Map/components/MapContainer.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, ReactNode } from 'react';
-import mapboxgl from 'mapbox-gl';
-import 'mapbox-gl/dist/mapbox-gl.css';
+import maplibregl from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
 import { useMapInternal } from '../context/MapContext';
 import { DrawProvider } from '../context/DrawContext';
 import { MapOptions, DEFAULT_MAP_OPTIONS, BASEMAP_STYLES, BasemapStyle } from '../types';
@@ -59,22 +59,12 @@ export function MapContainer({
   style,
 }: MapContainerProps) {
   const containerRef = useRef<HTMLDivElement>(null);
-  const mapRef = useRef<mapboxgl.Map | null>(null);
+  const mapRef = useRef<maplibregl.Map | null>(null);
   const { setMap, setIsLoaded, setIsLoading, setError } = useMapInternal();
 
   useEffect(() => {
     if (!containerRef.current) return;
 
-    // Get access token from environment
-    const accessToken = import.meta.env.VITE_MAPBOX_TOKEN;
-    if (!accessToken) {
-      setError(new Error('VITE_MAPBOX_TOKEN environment variable is not set'));
-      setIsLoading(false);
-      return;
-    }
-
-    mapboxgl.accessToken = accessToken;
-
     // Merge options with defaults
     const mergedOptions = { ...DEFAULT_MAP_OPTIONS, ...options };
 
@@ -107,15 +97,15 @@ export function MapContainer({
       setIsLoading(true);
       setError(null);
 
-      const map = new mapboxgl.Map({
+      const map = new maplibregl.Map({
         container: containerRef.current,
         style: initialStyle,
         center: initialCenter,
         zoom: initialZoom,
         pitch: initialPitch,
         bearing: initialBearing,
-        attributionControl: true,
-        preserveDrawingBuffer: true, // Needed for export/screenshots
+        attributionControl: { compact: true },
+        canvasContextAttributes: { preserveDrawingBuffer: true }, // Required for useRasterHover (gl.readPixels)
       });
 
       mapRef.current = map;
@@ -125,23 +115,26 @@ export function MapContainer({
         setIsLoaded(true);
         setIsLoading(false);
 
-        // Add terrain if enabled
-        if (mergedOptions.terrain) {
-          map.addSource('mapbox-dem', {
-            type: 'raster-dem',
-            url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
-            tileSize: 512,
-            maxzoom: 14,
-          });
-          map.setTerrain({
-            source: 'mapbox-dem',
-            exaggeration: mergedOptions.terrainExaggeration,
-          });
-        }
+        // Terrain disabled - requires DEM source configuration
+        // Mapbox DEM is not compatible with MapLibre
+        // To enable, configure a compatible DEM source (e.g., MapTiler, self-hosted)
+        // See useTerrain.ts for details
+        // if (mergedOptions.terrain) {
+        //   map.addSource('terrain-dem', {
+        //     type: 'raster-dem',
+        //     url: 'YOUR_DEM_SOURCE_URL',
+        //     tileSize: 512,
+        //     maxzoom: 14,
+        //   });
+        //   map.setTerrain({
+        //     source: 'terrain-dem',
+        //     exaggeration: mergedOptions.terrainExaggeration,
+        //   });
+        // }
 
         // Add navigation controls
-        map.addControl(new mapboxgl.NavigationControl(), 'top-right');
-        map.addControl(new mapboxgl.ScaleControl({ unit: 'metric' }), 'bottom-left');
+        map.addControl(new maplibregl.NavigationControl(), 'top-right');
+        map.addControl(new maplibregl.ScaleControl({ unit: 'metric' }), 'bottom-left');
       });
 
       // Save map view position on move end

frontend/src/features/Map/components/MapContextMenu.tsx

@@ -7,6 +7,7 @@
  */
 
 import { useState, useEffect, useCallback, useRef } from 'react';
+import type { MapMouseEvent, MapTouchEvent } from 'maplibre-gl';
 import { useMap } from '../context/MapContext';
 
 interface ContextMenuState {
@@ -58,7 +59,7 @@ export function MapContextMenu() {
 
   // Handle context menu (right-click)
   const handleContextMenu = useCallback(
-    (e: mapboxgl.MapMouseEvent & { originalEvent: MouseEvent }) => {
+    (e: MapMouseEvent & { originalEvent: MouseEvent }) => {
       e.originalEvent.preventDefault();
 
       if (!map) return;
@@ -79,7 +80,7 @@ export function MapContextMenu() {
 
   // Handle touch start (for long press)
   const handleTouchStart = useCallback(
-    (e: mapboxgl.MapTouchEvent) => {
+    (e: MapTouchEvent) => {
       if (!map) return;
 
       const touch = e.originalEvent.touches[0];

frontend/src/features/Map/components/MapInfoControl.tsx

@@ -6,6 +6,7 @@
  */
 
 import { useState, useEffect } from 'react';
+import type { MapMouseEvent } from 'maplibre-gl';
 import { useMap } from '../context/MapContext';
 
 /**
@@ -28,7 +29,7 @@ export function MapInfoControl() {
     setPitch(map.getPitch());
 
     // Track cursor position
-    const handleMouseMove = (e: mapboxgl.MapMouseEvent) => {
+    const handleMouseMove = (e: MapMouseEvent) => {
       setCursorLat(e.lngLat.lat);
       setCursorLng(e.lngLat.lng);
     };