Use GlobalMap in-place of BaseMap

- Remove withoutLabel prop on BaseMap - Move label translation feature from GlobalMap to BaseMap - Add adminZeroFillPaint on BaseMap - Rename handlers - Fix issue with mapboxgl filter on re-map
IFRCGo · Dec 26, 2024 · 1c8f71f · 1c8f71f
1 parent 9f63f03
commit 1c8f71f
Show file tree

Hide file tree

Showing 14 changed files with 158 additions and 341 deletions.
diff --git a/app/src/components/domain/ActiveOperationMap/index.tsx b/app/src/components/domain/ActiveOperationMap/index.tsx
@@ -432,7 +432,7 @@ function ActiveOperationMap(props: Props) {
             )}
         >
             <GlobalMap
-                onClick={handleCountryClick}
+                onAdminZeroFillClick={handleCountryClick}
             >
                 <MapContainerWithDisclaimer
                     className={styles.mapContainer}

diff --git a/app/src/components/domain/BaseMap/index.tsx b/app/src/components/domain/BaseMap/index.tsx
@@ -1,17 +1,15 @@
-import { useMemo } from 'react';
-import { ErrorBoundary } from '@sentry/react';
 import {
-    isDefined,
-    isFalsyString,
-    isNotDefined,
-} from '@togglecorp/fujs';
+    useContext,
+    useMemo,
+} from 'react';
+import { LanguageContext } from '@ifrc-go/ui/contexts';
+import { ErrorBoundary } from '@sentry/react';
 import Map, {
     MapLayer,
     MapSource,
 } from '@togglecorp/re-map';
 import { type SymbolLayer } from 'mapbox-gl';
 
-import useCountry from '#hooks/domain/useCountry';
 import {
     defaultMapOptions,
     defaultMapStyle,
@@ -28,39 +26,8 @@ type overrides = 'mapStyle' | 'mapOptions' | 'navControlShown' | 'navControlPosi
 export type Props = Omit<MapProps, overrides> & {
     baseLayers?: React.ReactNode;
     withDisclaimer?: boolean;
-    // NOTE: Labels with be added from the country information instead of the
-    // mapbox layers
-    withoutLabel?: boolean;
 } & Partial<Pick<MapProps, overrides>>;
 
-const sourceOptions: mapboxgl.GeoJSONSourceRaw = {
-    type: 'geojson',
-};
-
-const adminLabelOverrideOptions: Omit<SymbolLayer, 'id'> = {
-    type: 'symbol',
-    layout: {
-        'text-field': ['get', 'name'],
-        'text-font': ['Poppins Regular', 'Arial Unicode MS Regular'],
-        'text-letter-spacing': 0.15,
-        'text-line-height': 1.2,
-        'text-max-width': 8,
-        'text-justify': 'center',
-        'text-anchor': 'top',
-        'text-padding': 2,
-        'text-size': [
-            'interpolate', ['linear', 1], ['zoom'],
-            0, 6,
-            6, 16,
-        ],
-    },
-    paint: {
-        'text-color': '#000000',
-        'text-halo-color': '#555555',
-        'text-halo-width': 0.2,
-    },
-};
-
 function BaseMap(props: Props) {
     const {
         baseLayers,
@@ -71,36 +38,33 @@ function BaseMap(props: Props) {
         navControlOptions,
         scaleControlShown,
         children,
-        withoutLabel = false,
         ...otherProps
     } = props;
 
-    const countries = useCountry();
+    const { currentLanguage } = useContext(LanguageContext);
 
-    // FIXME: We should check for special cases like ICRC, IFRC, etc.
-    const countryCentroidGeoJson = useMemo(
-        (): GeoJSON.FeatureCollection<GeoJSON.Geometry> => ({
-            type: 'FeatureCollection' as const,
-            features: countries
-                ?.map((country) => {
-                    if (isFalsyString(country.name) || isNotDefined(country.centroid)) {
-                        return undefined;
-                    }
+    const adminLabelLayerOptions : Omit<SymbolLayer, 'id'> = useMemo(
+        () => {
+            // ar, es, fr
+            let label: string;
+            if (currentLanguage === 'es') {
+                label = 'name_es';
+            } else if (currentLanguage === 'ar') {
+                label = 'name_ar';
+            } else if (currentLanguage === 'fr') {
+                label = 'name_fr';
+            } else {
+                label = 'name';
+            }
 
-                    return {
-                        type: 'Feature' as const,
-                        geometry: country.centroid as {
-                            type: 'Point',
-                            coordinates: [number, number],
-                        },
-                        properties: {
-                            id: country.id,
-                            name: country.name,
-                        },
-                    };
-                }).filter(isDefined) ?? [],
-        }),
-        [countries],
+            return {
+                type: 'symbol',
+                layout: {
+                    'text-field': ['get', label],
+                },
+            };
+        },
+        [currentLanguage],
     );
 
     return (
@@ -118,20 +82,20 @@ function BaseMap(props: Props) {
                 sourceKey="composite"
                 managed={false}
             >
+                <MapLayer
+                    layerKey="admin-0-label"
+                    layerOptions={adminLabelLayerOptions}
+                />
+                <MapLayer
+                    layerKey="admin-0-label-non-independent"
+                    layerOptions={adminLabelLayerOptions}
+                />
+                <MapLayer
+                    layerKey="admin-0-label-priority"
+                    layerOptions={adminLabelLayerOptions}
+                />
                 {baseLayers}
             </MapSource>
-            {!withoutLabel && (
-                <MapSource
-                    sourceKey="override-labels"
-                    sourceOptions={sourceOptions}
-                    geoJson={countryCentroidGeoJson}
-                >
-                    <MapLayer
-                        layerKey="symbol-label"
-                        layerOptions={adminLabelOverrideOptions}
-                    />
-                </MapSource>
-            )}
             {children}
         </Map>
     );

diff --git a/app/src/components/domain/GlobalMap/index.tsx b/app/src/components/domain/GlobalMap/index.tsx
@@ -1,18 +1,14 @@
 import {
-    useContext,
     useMemo,
     useState,
 } from 'react';
-import { LanguageContext } from '@ifrc-go/ui/contexts';
 import { MapLayer } from '@togglecorp/re-map';
 import {
     type Expression,
     type FillLayer,
     type FillPaint,
-    type LineLayer,
     type LngLatLike,
     type MapboxGeoJSONFeature,
-    type SymbolLayer,
 } from 'mapbox-gl';
 
 import BaseMap, { type Props as BaseMapProps } from '#components/domain/BaseMap';
@@ -62,19 +58,23 @@ const adminZeroHighlightPaint: FillPaint = {
     ],
 };
 
-interface Props extends Omit<BaseMapProps, 'baseLayers'> {
-    onHover?: (hoveredFeatureProperties: AdminZeroFeatureProperties | undefined) => void;
-    onClick?: (
+interface Props extends BaseMapProps {
+    adminZeroFillPaint?: mapboxgl.FillPaint,
+    onAdminZeroFillHover?: (
+        hoveredFeatureProperties: AdminZeroFeatureProperties | undefined
+    ) => void;
+    onAdminZeroFillClick?: (
         clickedFeatureProperties: AdminZeroFeatureProperties,
         lngLat: LngLatLike,
     ) => void;
-    activeCountryIso3?: string | undefined | null;
 }
 
 function GlobalMap(props: Props) {
     const {
-        onHover,
-        onClick,
+        onAdminZeroFillHover: onHover,
+        onAdminZeroFillClick: onClick,
+        adminZeroFillPaint,
+        baseLayers,
         ...baseMapProps
     } = props;
 
@@ -146,52 +146,15 @@ function GlobalMap(props: Props) {
                 visibility: 'visible',
                 'fill-sort-key': fillSortKey,
             },
+            paint: adminZeroFillPaint,
         }),
-        [fillSortKey],
-    );
-
-    const adminZeroLineLayerOptions = useMemo<Omit<LineLayer, 'id'>>(
-        () => ({
-            type: 'line',
-            layout: {
-                visibility: 'visible',
-            },
-        }),
-        [],
-    );
-
-    const { currentLanguage } = useContext(LanguageContext);
-
-    const adminLabelLayerOptions : Omit<SymbolLayer, 'id'> = useMemo(
-        () => {
-            // ar, es, fr
-            let label: string;
-            if (currentLanguage === 'es') {
-                label = 'name_es';
-            } else if (currentLanguage === 'ar') {
-                label = 'name_ar';
-            } else if (currentLanguage === 'fr') {
-                label = 'name_fr';
-            } else {
-                label = 'name';
-            }
-
-            return {
-                type: 'symbol',
-                layout: {
-                    'text-field': ['get', label],
-                    visibility: 'visible',
-                },
-            };
-        },
-        [currentLanguage],
+        [fillSortKey, adminZeroFillPaint],
     );
 
     return (
         <BaseMap
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...baseMapProps}
-            withoutLabel
             baseLayers={(
                 <>
                     <MapLayer
@@ -200,35 +163,14 @@ function GlobalMap(props: Props) {
                         onMouseEnter={handleFeatureMouseEnter}
                         onMouseLeave={handleFeatureMouseLeave}
                     />
-                    <MapLayer
-                        layerKey="admin-0-label"
-                        layerOptions={adminLabelLayerOptions}
-                    />
-                    <MapLayer
-                        layerKey="admin-0-label-non-independent"
-                        layerOptions={adminLabelLayerOptions}
-                    />
-                    <MapLayer
-                        layerKey="admin-0-label-priority"
-                        layerOptions={adminLabelLayerOptions}
-                    />
-                    {/*
-                    <MapLayer
-                        layerKey="admin-0-boundary"
-                        layerOptions={adminZeroLineLayerOptions}
-                    />
-                    */}
-                    <MapLayer
-                        layerKey="admin-0-boundary-disputed"
-                        layerOptions={adminZeroLineLayerOptions}
-                    />
                     {(onHover || onClick) && (
                         <MapLayer
                             layerKey="admin-0-highlight"
                             layerOptions={adminZeroHighlightLayerOptions}
                             onClick={onClick ? handleClick : undefined}
                         />
                     )}
+                    {baseLayers}
                 </>
             )}
         />

diff --git a/app/src/components/domain/RiskImminentEventMap/index.tsx b/app/src/components/domain/RiskImminentEventMap/index.tsx
@@ -29,7 +29,7 @@ import type {
     SymbolLayer,
 } from 'mapbox-gl';
 
-import BaseMap from '#components/domain/BaseMap';
+import GlobalMap from '#components/domain/GlobalMap';
 import MapContainerWithDisclaimer from '#components/MapContainerWithDisclaimer';
 import { type components } from '#generated/riskTypes';
 import useDebouncedValue from '#hooks/useDebouncedValue';
@@ -347,7 +347,7 @@ function RiskImminentEventMap<
 
     return (
         <div className={styles.riskImminentEventMap}>
-            <BaseMap
+            <GlobalMap
                 mapOptions={{ bounds }}
             >
                 <MapContainerWithDisclaimer
@@ -469,7 +469,7 @@ function RiskImminentEventMap<
                         padding={DEFAULT_MAP_PADDING}
                     />
                 )}
-            </BaseMap>
+            </GlobalMap>
             <Container
                 heading={sidePanelHeading}
                 className={styles.sidePanel}