Remove Mapbox-specific code and conditions in favor of MapLibre

frontend/.env.expand

@@ -25,7 +25,6 @@ REACT_APP_IMAGE_UPLOAD_API_URL=$TM_IMAGE_UPLOAD_API_URL
 REACT_APP_HOMEPAGE_VIDEO_URL=$TM_HOMEPAGE_VIDEO_URL
 REACT_APP_HOMEPAGE_IMG_HIGH=$TM_HOMEPAGE_IMG_HIGH
 REACT_APP_HOMEPAGE_IMG_LOW=$TM_HOMEPAGE_IMG_LOW
-REACT_APP_MAPBOX_TOKEN=$TM_MAPBOX_TOKEN
 REACT_APP_ENABLE_SERVICEWORKER=$TM_ENABLE_SERVICEWORKER
 REACT_APP_MAX_FILESIZE=$TM_IMPORT_MAX_FILESIZE
 REACT_APP_MAX_AOI_AREA=$TM_MAX_AOI_AREA

frontend/src/components/basemapMenu.js

@@ -1,13 +1,10 @@
 import { useState } from 'react';
 
-import { MAPBOX_TOKEN, BASEMAP_OPTIONS } from '../config';
+import { BASEMAP_OPTIONS } from '../config';
 
 export const BasemapMenu = ({ map }) => {
   // Remove elements that require mapbox token;
-  let styles = BASEMAP_OPTIONS;
-  if (!MAPBOX_TOKEN) {
-    styles = BASEMAP_OPTIONS.filter((s) => typeof s.value === 'object');
-  }
+  const styles = BASEMAP_OPTIONS.filter((s) => typeof s.value === 'object');
 
   const [basemap, setBasemap] = useState(styles[0].label);
 

frontend/src/components/partnerMapswipeStats/contributionsHeatmap.js

@@ -5,12 +5,10 @@ import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
-import { MAPBOX_TOKEN, MAP_STYLE, CHART_COLOURS } from '../../config';
+import { MAP_STYLE, CHART_COLOURS } from '../../config';
 import messages from './messages';
 import './contributionsHeatmap.css';
 
-maplibregl.accessToken = MAPBOX_TOKEN;
-
 export const ContributionsHeatmap = ({ contributionsByGeo = [] }) => {
   const mapContainer = useRef(null);
   const map = useRef(null);
@@ -171,7 +169,7 @@ export const ContributionsHeatmap = ({ contributionsByGeo = [] }) => {
       const currentZoom = map.current.getZoom();
       const h3ResBasedOnZoom =
         currentZoom >= 1
-          ? zoomToH3ResMapping[parseInt(currentZoom)] ?? Math.floor((currentZoom - 2) * 0.7)
+          ? zoomToH3ResMapping[Number.parseInt(currentZoom)] ?? Math.floor((currentZoom - 2) * 0.7)
           : 1;
 
       map.current.getSource('hexbin').setData({

frontend/src/components/partners/currentProjects.js

@@ -31,7 +31,7 @@ export function CurrentProjects({ currentProjects }) {
 
   const fetchData = async () => {
     try {
-      const projectIds = currentProjects.split(',').map((id) => parseInt(id.trim(), 10));
+      const projectIds = currentProjects.split(',').map((id) => Number.parseInt(id.trim(), 10));
       const promises = projectIds.map(async (id) => {
         const response = await fetch(API_URL + `projects/${id}/tasks/`);
 

frontend/src/components/projectCreate/projectCreationMap.js

@@ -4,14 +4,13 @@ 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 MaplibreGeocoder from '@maplibre/maplibre-gl-geocoder';
 import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css';
 import { useDropzone } from 'react-dropzone';
 
 import { maplibreLayerDefn } from '../projects/projectsMap';
 import useMapboxSupportedLanguage from '../../hooks/UseMapboxSupportedLanguage';
 
-import { MAPBOX_TOKEN, MAP_STYLE, CHART_COLOURS, TASK_COLOURS } from '../../config';
+import { MAP_STYLE, CHART_COLOURS, TASK_COLOURS } from '../../config';
 import { fetchLocalJSONAPI } from '../../network/genericJSONRequest';
 import { useDebouncedCallback } from '../../hooks/UseThrottle';
 import isWebglSupported from '../../utils/isWebglSupported';
@@ -20,8 +19,6 @@ import { BasemapMenu } from '../basemapMenu';
 import { ProjectsAOILayerCheckBox } from './projectsAOILayerCheckBox';
 import WebglUnsupported from '../webglUnsupported';
 
-maplibregl.accessToken = MAPBOX_TOKEN;
-
 const ProjectCreationMap = ({ mapObj, setMapObj, metadata, updateMetadata, step, uploadFile }) => {
   const mapRef = createRef();
   const mapboxSupportedLanguage = useMapboxSupportedLanguage();
@@ -82,18 +79,6 @@ const ProjectCreationMap = ({ mapObj, setMapObj, metadata, updateMetadata, step,
       .addControl(new maplibregl.AttributionControl({ compact: false }))
       .addControl(new MapboxLanguage({ defaultLanguage: mapboxSupportedLanguage }))
       .addControl(new maplibregl.ScaleControl({ unit: 'metric' }));
-    if (MAPBOX_TOKEN) {
-      map.addControl(
-        new MaplibreGeocoder({
-          accessToken: MAPBOX_TOKEN,
-          maplibregl,
-          marker: false,
-          collapsed: true,
-          language: mapboxSupportedLanguage,
-        }),
-        'top-right',
-      );
-    }
 
     setMapObj({ ...mapObj, map: map });
     return () => {
@@ -254,24 +239,6 @@ const ProjectCreationMap = ({ mapObj, setMapObj, metadata, updateMetadata, step,
           setAOICanBeActivated(true);
         }
       });
-
-      mapObj.map.on('style.load', (event) => {
-        if (!MAPBOX_TOKEN) {
-          return;
-        }
-        addMapLayers(mapObj.map);
-        const features = mapObj.draw.getAll();
-        if (features.features.length === 0 && mapObj.map.getSource('aoi') !== undefined) {
-          mapObj.map.getSource('aoi').setData(metadata.geom);
-        }
-
-        if (metadata.taskGrid && step !== 1 && mapObj.map.getSource('grid') !== undefined) {
-          mapObj.map.getSource('grid').setData(metadata.taskGrid);
-        } else {
-          mapObj.map.getSource('grid') &&
-            mapObj.map.getSource('grid').setData(featureCollection([]));
-        }
-      });
     }
   }, [mapObj, metadata, updateMetadata, step]);
 

frontend/src/components/projectDetail/index.js

@@ -323,7 +323,7 @@ export const ProjectDetail = (props) => {
             size={'large'}
             textColor="white"
             users={contributors}
-            maxLength={parseInt(size[0] / 75) > 12 ? 12 : parseInt(size[0] / 75)}
+            maxLength={Number.parseInt(size[0] / 75) > 12 ? 12 : Number.parseInt(size[0] / 75)}
           />
         )}
       </div>

frontend/src/components/projectEdit/priorityAreasForm.js

@@ -13,7 +13,7 @@ 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, CHART_COLOURS } from '../../config';
+import { MAP_STYLE, CHART_COLOURS } from '../../config';
 import { BasemapMenu } from '../basemapMenu';
 import {
   verifyGeometry,
@@ -28,8 +28,6 @@ import { Alert } from '../alert';
 import WebglUnsupported from '../webglUnsupported';
 import useMapboxSupportedLanguage from '../../hooks/UseMapboxSupportedLanguage';
 
-maplibregl.accessToken = MAPBOX_TOKEN;
-
 export const PriorityAreasForm = () => {
   const { projectInfo, setProjectInfo } = useContext(StateContext);
   const mapboxSupportedLanguage = useMapboxSupportedLanguage();

frontend/src/components/projects/projectsMap.js

@@ -6,18 +6,14 @@ import MapboxLanguage from '@mapbox/mapbox-gl-language';
 import WebglUnsupported from '../webglUnsupported';
 import isWebglSupported from '../../utils/isWebglSupported';
 import useSetRTLTextPlugin from '../../utils/useSetRTLTextPlugin';
-import { MAPBOX_TOKEN, MAP_STYLE } from '../../config';
+import { MAP_STYLE } from '../../config';
 import mapMarker from '../../assets/img/mapMarker.png';
 import useMapboxSupportedLanguage from '../../hooks/UseMapboxSupportedLanguage';
 
 let markerIcon = new Image(17, 20);
 markerIcon.src = mapMarker;
 
-maplibregl.accessToken = MAPBOX_TOKEN;
-
-const licensedFonts = MAPBOX_TOKEN
-  ? ['DIN Offc Pro Medium', 'Arial Unicode MS Bold']
-  : ['Open Sans Semibold'];
+const licensedFonts = ['Open Sans Semibold'];
 
 export const maplibreLayerDefn = (map, mapResults, clickOnProjectID, disablePoiClick = false) => {
   map.addImage('mapMarker', markerIcon, { width: 15, height: 15, data: markerIcon });

frontend/src/components/taskSelection/map.js

@@ -10,7 +10,7 @@ import WebglUnsupported from '../webglUnsupported';
 import isWebglSupported from '../../utils/isWebglSupported';
 import useSetRTLTextPlugin from '../../utils/useSetRTLTextPlugin';
 import messages from './messages';
-import { MAPBOX_TOKEN, TASK_COLOURS, MAP_STYLE } from '../../config';
+import { TASK_COLOURS, MAP_STYLE } from '../../config';
 import lock from '../../assets/img/lock.png';
 import redlock from '../../assets/img/red-lock.png';
 import useMapboxSupportedLanguage from '../../hooks/UseMapboxSupportedLanguage';
@@ -21,8 +21,6 @@ lockIcon.src = lock;
 let redlockIcon = new Image(17, 20);
 redlockIcon.src = redlock;
 
-maplibregl.accessToken = MAPBOX_TOKEN;
-
 export const TasksMap = ({
   className,
   mapResults,

frontend/src/components/teamsAndOrgs/orgUsageLevel.js

@@ -15,7 +15,7 @@ import {
 // this component is designed to the FREE organisation type
 export function OrganisationUsageLevel({ completedActions, orgName }) {
   const [currentLevel, nextLevelThreshold] = useOrganisationLevel(completedActions);
-  const percent = parseInt((completedActions / nextLevelThreshold) * 100);
+  const percent = Number.parseInt((completedActions / nextLevelThreshold) * 100);
   const yearPrediction = usePredictYearlyTasks(completedActions, new Date());
   const levelPrediction = usePredictLevel(yearPrediction, 'FREE');
   const currentYear = getYear(new Date());
@@ -110,7 +110,7 @@ export function OrganisationTier({ completedActions, type, subscriptionTier }) {
       ? levels.filter((level) => level.level === selectedTier.level + 1)[0].minActions
       : null;
   const nextLevel = useGetLevel(selectedTierMax);
-  const percent = parseInt((completedActions / selectedTierMax) * 100);
+  const percent = Number.parseInt((completedActions / selectedTierMax) * 100);
   const showDiscountLabel = levelPrediction.tier !== 'free' && type === 'DISCOUNTED';
   const currentYear = getYear(new Date());
 

frontend/src/components/userDetail/countriesMapped.js

@@ -5,16 +5,14 @@ import MapboxLanguage from '@mapbox/mapbox-gl-language';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
-import { MAPBOX_TOKEN, MAP_STYLE } from '../../config';
+import { MAP_STYLE } from '../../config';
 import { maplibreLayerDefn } from '../projects/projectsMap';
 import { BarListChart } from './barListChart';
 import WebglUnsupported from '../webglUnsupported';
 import isWebglSupported from '../../utils/isWebglSupported';
 import useSetRTLTextPlugin from '../../utils/useSetRTLTextPlugin';
 import useMapboxSupportedLanguage from '../../hooks/UseMapboxSupportedLanguage';
 
-maplibregl.accessToken = MAPBOX_TOKEN;
-
 const UserCountriesMap = ({ projects }) => {
   const navigate = useNavigate();
   const mapboxSupportedLanguage = useMapboxSupportedLanguage();

frontend/src/config/index.js

@@ -14,10 +14,9 @@ export const DEFAULT_LOCALE = process.env.REACT_APP_DEFAULT_LOCALE || 'en';
 export const ENVIRONMENT = process.env.REACT_APP_ENVIRONMENT || '';
 export const PROJECTCARD_CONTRIBUTION_SHOWN_THRESHOLD =
   process.env.REACT_APP_PROJECTCARD_CONTRIBUTION_SHOWN_THRESHOLD || 5;
-export const MAPBOX_TOKEN = process.env.REACT_APP_MAPBOX_TOKEN || '';
 export const ENABLE_SERVICEWORKER = process.env.REACT_APP_ENABLE_SERVICEWORKER || 0;
 export const MAX_AOI_AREA = Number(process.env.REACT_APP_MAX_AOI_AREA) || 5000;
-export const MAX_FILESIZE = parseInt(process.env.REACT_APP_MAX_FILESIZE) || 1000000; // bytes
+export const MAX_FILESIZE = Number.parseInt(process.env.REACT_APP_MAX_FILESIZE) || 1000000; // bytes
 
 // ORGANISATIONAL INFORMATION
 export const ORG_NAME = process.env.REACT_APP_ORG_NAME || 'Humanitarian OpenStreetMap Team';

frontend/src/hooks/UseProjectCompletenessCalc.js

@@ -12,9 +12,9 @@ export function useComputeCompleteness(tasks) {
       ).length;
       const validated = getStatusCount(tasks, 'VALIDATED');
       const badImagery = getStatusCount(tasks, 'BADIMAGERY');
-      setPercentMapped(parseInt(((mapped + validated) / (totalTasks - badImagery)) * 100));
-      setPercentValidated(parseInt((validated / (totalTasks - badImagery)) * 100));
-      setPercentBadImagery(parseInt((badImagery / totalTasks) * 100));
+      setPercentMapped(Number.parseInt(((mapped + validated) / (totalTasks - badImagery)) * 100));
+      setPercentValidated(Number.parseInt((validated / (totalTasks - badImagery)) * 100));
+      setPercentBadImagery(Number.parseInt((badImagery / totalTasks) * 100));
     }
   }, [tasks, setPercentMapped, setPercentValidated, setPercentBadImagery]);
   return { percentMapped, percentValidated, percentBadImagery };

frontend/src/utils/taskGrid.js

@@ -56,10 +56,10 @@ export const createTaskGrid = (areaOfInterestExtent, zoomLevel) => {
   const step = AXIS_OFFSET / Math.pow(2, zoomLevel - 1);
 
   // Calculate the min and max task indices at the required zoom level to cover the whole area of interest
-  const xminstep = parseInt(Math.floor((xmin + AXIS_OFFSET) / step));
-  const xmaxstep = parseInt(Math.ceil((xmax + AXIS_OFFSET) / step));
-  const yminstep = parseInt(Math.floor((ymin + AXIS_OFFSET) / step));
-  const ymaxstep = parseInt(Math.ceil((ymax + AXIS_OFFSET) / step));
+  const xminstep = Number.parseInt(Math.floor((xmin + AXIS_OFFSET) / step));
+  const xmaxstep = Number.parseInt(Math.ceil((xmax + AXIS_OFFSET) / step));
+  const yminstep = Number.parseInt(Math.floor((ymin + AXIS_OFFSET) / step));
+  const ymaxstep = Number.parseInt(Math.ceil((ymax + AXIS_OFFSET) / step));
 
   let taskFeatures = [];
   // Generate an array of task features