Merge branch 'feat/6719-migrate-mapboxgl-to-maplibre' into deployment/naxa

Author: royallsilwallz

frontend/package.json

@@ -7,8 +7,8 @@
     "@hotosm/id": "^2.34.0",
     "@hotosm/iso-countries-languages": "^1.1.2",
     "@mapbox/mapbox-gl-draw": "^1.4.3",
-    "@mapbox/mapbox-gl-geocoder": "^5.0.2",
     "@mapbox/mapbox-gl-language": "^0.10.1",
+    "@maplibre/maplibre-gl-geocoder": "^1.9.0",
     "@placemarkio/geo-viewport": "^1.0.2",
     "@rapideditor/rapid": "^2.5.2",
     "@sentry/react": "^7.102.0",
@@ -36,8 +36,8 @@
     "fromentries": "^1.3.2",
     "h3-js": "^4.1.0",
     "humanize-duration": "^3.31.0",
-    "mapbox-gl": "^1.13.3",
     "mapbox-gl-draw-rectangle-mode": "^1.0.4",
+    "maplibre-gl": "^5.6.0",
     "marked": "^4.3.0",
     "osmtogeojson": "^3.0.0-beta.5",
     "prop-types": "^15.8.1",

frontend/src/assets/styles/_extra.scss

@@ -295,12 +295,6 @@ div.messageBodyLinks {
   width: calc(100% - 4rem);
 }
 
-.mapbox-improve-map,
-a[href="https://www.mapbox.com/map-feedback/"]
-{
-  display: none;
-}
-
 .object-fit-cover {
   object-fit: cover;
 }
@@ -366,7 +360,7 @@ a[href="https://www.mapbox.com/map-feedback/"]
 
 #project-creation-map,
 #priority-area-map {
-  .mapboxgl-ctrl-top-right {
+  .maplibregl-ctrl-top-right {
     top: 2.5rem;
   }
 }

frontend/src/components/partnerMapswipeStats/contributionsHeatmap.js

@@ -1,15 +1,15 @@
 import React, { useEffect, useRef } from 'react';
-import mapboxgl from 'mapbox-gl';
+import maplibregl from 'maplibre-gl';
 import { latLngToCell, cellToBoundary } from 'h3-js';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
-import 'mapbox-gl/dist/mapbox-gl.css';
+import 'maplibre-gl/dist/maplibre-gl.css';
 
 import { MAPBOX_TOKEN, MAP_STYLE, CHART_COLOURS } from '../../config';
 import messages from './messages';
 import './contributionsHeatmap.css';
 
-mapboxgl.accessToken = MAPBOX_TOKEN;
+maplibregl.accessToken = MAPBOX_TOKEN;
 
 export const ContributionsHeatmap = ({ contributionsByGeo = [] }) => {
   const mapContainer = useRef(null);
@@ -18,15 +18,15 @@ export const ContributionsHeatmap = ({ contributionsByGeo = [] }) => {
   useEffect(() => {
     if (map.current) return; // initialize map only once
 
-    map.current = new mapboxgl.Map({
+    map.current = new maplibregl.Map({
       container: mapContainer.current,
       style: MAP_STYLE,
       center: [0, 0],
       zoom: 1.25,
     });
 
     map.current.scrollZoom.disable();
-    map.current.addControl(new mapboxgl.NavigationControl());
+    map.current.addControl(new maplibregl.NavigationControl());
 
     const getStyle = (row) => {
       const styles = [

frontend/src/components/projectCreate/index.js

@@ -4,7 +4,6 @@ import { useNavigate } from 'react-router-dom';
 import { useQueryParam, NumberParam } from 'use-query-params';
 import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl';
 import ReactPlaceholder from 'react-placeholder';
-import { supported } from 'mapbox-gl';
 import area from '@turf/area';
 import bbox from '@turf/bbox';
 import { featureCollection } from '@turf/helpers';
@@ -25,6 +24,7 @@ import NavButtons from './navButtons';
 import Review from './review';
 import { Alert } from '../alert';
 import { makeGrid } from '../../utils/taskGrid';
+import isWebglSupported from '../../utils/isWebglSupported';
 import { MAX_AOI_AREA } from '../../config';
 import {
   verifyGeometry,
@@ -303,7 +303,7 @@ const ProjectCreate = () => {
             showProjectsAOILayer={showProjectsAOILayer}
           />
         </Suspense>
-        {supported() && (
+        {isWebglSupported() && (
           <>
             <div className="cf absolute bg-white o-90 top-1 left-1 pa3 mw6">
               {cloneFromId && (

frontend/src/components/projectCreate/projectCreationMap.js

@@ -1,35 +1,26 @@
 import { useLayoutEffect, useEffect, useCallback, useState, createRef } from 'react';
 import { useSelector } from 'react-redux';
-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 { featureCollection } from '@turf/helpers';
 import MapboxLanguage from '@mapbox/mapbox-gl-language';
-import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
-import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
+import MaplibreGeocoder from '@maplibre/maplibre-gl-geocoder';
+import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css';
 import { useDropzone } from 'react-dropzone';
 
-import { mapboxLayerDefn } from '../projects/projectsMap';
+import { maplibreLayerDefn } from '../projects/projectsMap';
 import useMapboxSupportedLanguage from '../../hooks/UseMapboxSupportedLanguage';
 
-import {
-  MAPBOX_TOKEN,
-  MAP_STYLE,
-  CHART_COLOURS,
-  MAPBOX_RTL_PLUGIN_URL,
-  TASK_COLOURS,
-} from '../../config';
+import { MAPBOX_TOKEN, MAP_STYLE, CHART_COLOURS, TASK_COLOURS } from '../../config';
 import { fetchLocalJSONAPI } from '../../network/genericJSONRequest';
 import { useDebouncedCallback } from '../../hooks/UseThrottle';
+import isWebglSupported from '../../utils/isWebglSupported';
+import useSetRTLTextPlugin from '../../utils/useSetRTLTextPlugin';
 import { BasemapMenu } from '../basemapMenu';
 import { ProjectsAOILayerCheckBox } from './projectsAOILayerCheckBox';
 import WebglUnsupported from '../webglUnsupported';
 
-mapboxgl.accessToken = MAPBOX_TOKEN;
-try {
-  mapboxgl.setRTLTextPlugin(MAPBOX_RTL_PLUGIN_URL);
-} catch {
-  console.log('RTLTextPlugin is loaded');
-}
+maplibregl.accessToken = MAPBOX_TOKEN;
 
 const ProjectCreationMap = ({ mapObj, setMapObj, metadata, updateMetadata, step, uploadFile }) => {
   const mapRef = createRef();
@@ -47,6 +38,8 @@ const ProjectCreationMap = ({ mapObj, setMapObj, metadata, updateMetadata, step,
   });
   const minZoomLevelToAOIVisualization = 9;
 
+  useSetRTLTextPlugin();
+
   useEffect(() => {
     fetchLocalJSONAPI('projects/').then((res) => setExistingProjectsList(res.mapResults));
   }, []);
@@ -78,22 +71,22 @@ const ProjectCreationMap = ({ mapObj, setMapObj, metadata, updateMetadata, step,
   }, [showProjectsAOILayer, debouncedGetProjectsAOI, clearProjectsAOI, step]);
 
   useLayoutEffect(() => {
-    if (!mapboxgl.supported()) return;
-    const map = new mapboxgl.Map({
+    if (!isWebglSupported()) return;
+    const map = new maplibregl.Map({
       container: mapRef.current,
       style: MAP_STYLE,
       center: [0, 0],
       zoom: 1.3,
       attributionControl: false,
     })
-      .addControl(new mapboxgl.AttributionControl({ compact: false }))
+      .addControl(new maplibregl.AttributionControl({ compact: false }))
       .addControl(new MapboxLanguage({ defaultLanguage: mapboxSupportedLanguage }))
-      .addControl(new mapboxgl.ScaleControl({ unit: 'metric' }));
+      .addControl(new maplibregl.ScaleControl({ unit: 'metric' }));
     if (MAPBOX_TOKEN) {
       map.addControl(
-        new MapboxGeocoder({
+        new MaplibreGeocoder({
           accessToken: MAPBOX_TOKEN,
-          mapboxgl: mapboxgl,
+          maplibregl,
           marker: false,
           collapsed: true,
           language: mapboxSupportedLanguage,
@@ -222,9 +215,9 @@ const ProjectCreationMap = ({ mapObj, setMapObj, metadata, updateMetadata, step,
 
     /* set up style/sources for the map, either immediately or on base load */
     if (mapReadyProjectsReady) {
-      mapboxLayerDefn(map, existingProjectsList, noop, true);
+      maplibreLayerDefn(map, existingProjectsList, noop, true);
     } else if (projectsReadyMapLoading) {
-      map.on('load', () => mapboxLayerDefn(map, existingProjectsList, noop, true));
+      map.on('load', () => maplibreLayerDefn(map, existingProjectsList, noop, true));
     }
 
     /* refill the source on existingProjectsList changes */
@@ -234,17 +227,17 @@ const ProjectCreationMap = ({ mapObj, setMapObj, metadata, updateMetadata, step,
   }, [mapObj, existingProjectsList]);
 
   useLayoutEffect(() => {
-    if (mapObj.map !== null && mapboxgl.supported()) {
+    if (mapObj.map !== null && isWebglSupported()) {
       mapObj.map.on('moveend', (event) => {
         debouncedGetProjectsAOI();
       });
     }
   });
 
   useLayoutEffect(() => {
-    if (mapObj.map !== null && mapboxgl.supported()) {
+    if (mapObj.map !== null && isWebglSupported()) {
       mapObj.map.on('load', () => {
-        mapObj.map.addControl(new mapboxgl.NavigationControl());
+        mapObj.map.addControl(new maplibregl.NavigationControl());
         mapObj.map.addControl(mapObj.draw);
         addMapLayers(mapObj.map);
       });
@@ -282,7 +275,7 @@ const ProjectCreationMap = ({ mapObj, setMapObj, metadata, updateMetadata, step,
     }
   }, [mapObj, metadata, updateMetadata, step]);
 
-  if (!mapboxgl.supported()) {
+  if (!isWebglSupported()) {
     return <WebglUnsupported className="vh-50 h-100-l w-100" />;
   } else {
     return (

frontend/src/components/projectCreate/tests/setTaskSizes.test.js

@@ -1,12 +1,12 @@
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import mapboxgl from 'mapbox-gl';
+import maplibregl from 'maplibre-gl';
 
 import SetTaskSizes from '../setTaskSizes';
 import { projectMetadata } from '../../../utils/tests/snippets/projectMetadata';
 import { IntlProviders } from '../../../utils/testWithIntl';
 
-jest.mock('mapbox-gl/dist/mapbox-gl', () => ({
+jest.mock('maplibre-gl/dist/maplibre-gl', () => ({
   GeolocateControl: jest.fn(),
   Map: jest.fn(() => ({
     addControl: jest.fn(),
@@ -20,7 +20,7 @@ jest.mock('mapbox-gl/dist/mapbox-gl', () => ({
   NavigationControl: jest.fn(),
 }));
 
-const map = new mapboxgl.Map({
+const map = new maplibregl.Map({
   container: '',
   style: {},
   center: [0, 0],

frontend/src/components/projectDetail/index.js

@@ -3,7 +3,6 @@ import { Link, useParams } from 'react-router-dom';
 import ReactPlaceholder from 'react-placeholder';
 import centroid from '@turf/centroid';
 import { FormattedMessage } from 'react-intl';
-import { supported } from 'mapbox-gl';
 import PropTypes from 'prop-types';
 
 import messages from './messages';
@@ -29,6 +28,7 @@ import './styles.scss';
 import { useWindowSize } from '../../hooks/UseWindowSize';
 import { DownloadOsmData } from './downloadOsmData.js';
 import { ENABLE_EXPORT_TOOL } from '../../config/index.js';
+import isWebglSupported from '../../utils/isWebglSupported';
 
 /* lazy imports must be last import */
 const ProjectTimeline = lazy(() => import('./timeline' /* webpackChunkName: "timeline" */));
@@ -77,7 +77,7 @@ export const ProjectDetailMap = (props) => {
         loading={props.projectLoading}
         className="w-100 vh-75 h-100-l"
       />
-      {taskBordersOnly && supported() && (
+      {taskBordersOnly && isWebglSupported() && (
         <div
           className="cf left-1 top-1 absolute zoom-to-task"
           style={{

frontend/src/components/projectEdit/priorityAreasForm.js

@@ -1,6 +1,6 @@
 import { useState, useContext, useLayoutEffect, createRef } 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 '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import DrawRectangle from 'mapbox-gl-draw-rectangle-mode';
@@ -13,32 +13,31 @@ import messages from './messages';
 import { StateContext, styleClasses } from '../../views/projectEdit';
 import { CustomButton } from '../button';
 import { MappedIcon, WasteIcon, MappedSquareIcon, FileImportIcon } from '../svgIcons';
-import { MAPBOX_TOKEN, MAP_STYLE, MAPBOX_RTL_PLUGIN_URL, CHART_COLOURS } from '../../config';
+import { MAPBOX_TOKEN, MAP_STYLE, CHART_COLOURS } from '../../config';
 import { BasemapMenu } from '../basemapMenu';
 import {
   verifyGeometry,
   readGeoFile,
   verifyFileFormat,
   verifyFileSize,
 } from '../../utils/geoFileFunctions';
+import isWebglSupported from '../../utils/isWebglSupported';
+import useSetRTLTextPlugin from '../../utils/useSetRTLTextPlugin';
 import { getErrorMsg } from '../projectCreate/fileUploadErrors';
 import { Alert } from '../alert';
 import WebglUnsupported from '../webglUnsupported';
 import useMapboxSupportedLanguage from '../../hooks/UseMapboxSupportedLanguage';
 
-mapboxgl.accessToken = MAPBOX_TOKEN;
-try {
-  mapboxgl.setRTLTextPlugin(MAPBOX_RTL_PLUGIN_URL);
-} catch {
-  console.log('RTLTextPlugin is loaded');
-}
+maplibregl.accessToken = MAPBOX_TOKEN;
 
 export const PriorityAreasForm = () => {
   const { projectInfo, setProjectInfo } = useContext(StateContext);
   const mapboxSupportedLanguage = useMapboxSupportedLanguage();
   const mapRef = createRef();
   const [error, setError] = useState({ error: false, message: null });
 
+  useSetRTLTextPlugin();
+
   const modes = MapboxDraw.modes;
   modes.draw_rectangle = DrawRectangle;
   const drawOptions = {
@@ -120,17 +119,17 @@ export const PriorityAreasForm = () => {
 
   useLayoutEffect(() => {
     const map =
-      mapboxgl.supported() &&
-      new mapboxgl.Map({
+      isWebglSupported() &&
+      new maplibregl.Map({
         container: mapRef.current,
         style: MAP_STYLE,
         center: [0, 0],
         zoom: 1,
         attributionControl: false,
       })
-        .addControl(new mapboxgl.AttributionControl({ compact: false }))
+        .addControl(new maplibregl.AttributionControl({ compact: false }))
         .addControl(new MapboxLanguage({ defaultLanguage: mapboxSupportedLanguage }))
-        .addControl(new mapboxgl.NavigationControl());
+        .addControl(new maplibregl.NavigationControl());
 
     setMapObj({ ...mapObj, map: map });
 
@@ -227,7 +226,7 @@ export const PriorityAreasForm = () => {
   };
 
   useLayoutEffect(() => {
-    if (mapObj.map !== null && mapboxgl.supported()) {
+    if (mapObj.map !== null && isWebglSupported()) {
       mapObj.map.on('load', () => {
         mapObj.map.addControl(mapObj.draw);
         addMapLayers(mapObj.map);
@@ -254,7 +253,7 @@ export const PriorityAreasForm = () => {
     setProjectInfo({ ...projectInfo, priorityAreas: [] });
   };
 
-  if (!mapboxgl.supported()) {
+  if (!isWebglSupported()) {
     return <WebglUnsupported className="vh-75 w-100 bg-white" />;
   } else {
     return (