Remove Mapbox-specific code and fallback conditions

Eliminates checks for Mapbox tokens.

Eliminates checks for Mapbox tokens and render Mapbox-only style.

Author: suzit-10

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);

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/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/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,7 +14,6 @@ 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