Merge pull request #1564 from IFRCGo/fix/disputed-boundary-map-styling

Fix disputed boundary map styling

Author: samshara

app/src/components/domain/ActiveOperationMap/index.tsx

@@ -32,9 +32,8 @@ import {
     MapLayer,
     MapSource,
 } from '@togglecorp/re-map';
-import type { LngLatBoundsLike } from 'mapbox-gl';
+import { type LngLatBoundsLike } from 'mapbox-gl';
 
-import BaseMap from '#components/domain/BaseMap';
 import DisasterTypeSelectInput from '#components/domain/DisasterTypeSelectInput';
 import DistrictSearchMultiSelectInput, { type DistrictItem } from '#components/domain/DistrictSearchMultiSelectInput';
 import Link from '#components/Link';
@@ -48,13 +47,13 @@ import {
     DEFAULT_MAP_PADDING,
     DURATION_MAP_ZOOM,
 } from '#utils/constants';
-import { adminFillLayerOptions } from '#utils/map';
 import type {
     GoApiResponse,
     GoApiUrlQuery,
 } from '#utils/restRequest';
 import { useRequest } from '#utils/restRequest';
 
+import GlobalMap, { type AdminZeroFeatureProperties } from '../GlobalMap';
 import {
     APPEAL_TYPE_DREF,
     APPEAL_TYPE_EAP,
@@ -87,24 +86,8 @@ const sourceOptions: mapboxgl.GeoJSONSourceRaw = {
     type: 'geojson',
 };
 
-interface CountryProperties {
-    country_id: number;
-    disputed: boolean;
-    fdrs: string;
-    independent: boolean;
-    is_deprecated: boolean;
-    iso: string;
-    iso3: string;
-    name: string;
-    name_ar: string;
-    name_es: string;
-    name_fr: string;
-    record_type: number;
-    region_id: number;
-}
-
 interface ClickedPoint {
-    feature: GeoJSON.Feature<GeoJSON.Point, CountryProperties>;
+    featureProperties: AdminZeroFeatureProperties;
     lngLat: mapboxgl.LngLatLike;
 }
 
@@ -188,8 +171,8 @@ function ActiveOperationMap(props: Props) {
     );
 
     const [
-        clickedPointProperties,
-        setClickedPointProperties,
+        clickedPoint,
+        setClickedPoint,
     ] = useState<ClickedPoint| undefined>();
 
     const [scaleBy, setScaleBy] = useInputState<ScaleOption['value']>('peopleTargeted');
@@ -348,29 +331,30 @@ function ActiveOperationMap(props: Props) {
     );
 
     const handleCountryClick = useCallback((
-        feature: mapboxgl.MapboxGeoJSONFeature,
+        featureProperties: AdminZeroFeatureProperties,
         lngLat: mapboxgl.LngLatLike,
     ) => {
-        setClickedPointProperties({
-            feature: feature as unknown as ClickedPoint['feature'],
+        setClickedPoint({
+            featureProperties,
             lngLat,
         });
-        return false;
+
+        return true;
     }, []);
 
     const handlePointClose = useCallback(
         () => {
-            setClickedPointProperties(undefined);
+            setClickedPoint(undefined);
         },
-        [setClickedPointProperties],
+        [setClickedPoint],
     );
 
     const handleClearFiltersButtonclick = useCallback(() => {
         setFilter({});
     }, [setFilter]);
 
-    const popupDetails = clickedPointProperties
-        ? countryGroupedAppeal[clickedPointProperties.feature.properties.iso3]
+    const popupDetails = clickedPoint
+        ? countryGroupedAppeal[clickedPoint.featureProperties.iso3]
         : undefined;
 
     const [districtOptions, setDistrictOptions] = useState<DistrictItem[] | null | undefined>();
@@ -447,15 +431,8 @@ function ActiveOperationMap(props: Props) {
                 </Link>
             )}
         >
-            <BaseMap
-                baseLayers={(
-                    <MapLayer
-                        layerKey="admin-0"
-                        hoverable
-                        layerOptions={adminFillLayerOptions}
-                        onClick={handleCountryClick}
-                    />
-                )}
+            <GlobalMap
+                onClick={handleCountryClick}
             >
                 <MapContainerWithDisclaimer
                     className={styles.mapContainer}
@@ -503,18 +480,18 @@ function ActiveOperationMap(props: Props) {
                         }
                     />
                 </MapSource>
-                {clickedPointProperties?.lngLat && (
+                {clickedPoint?.lngLat && (
                     <MapPopup
                         onCloseButtonClick={handlePointClose}
-                        coordinates={clickedPointProperties.lngLat}
+                        coordinates={clickedPoint.lngLat}
                         heading={(
                             <Link
                                 to="countriesLayout"
                                 urlParams={{
-                                    countryId: clickedPointProperties.feature.properties.country_id,
+                                    countryId: clickedPoint.featureProperties.country_id,
                                 }}
                             >
-                                {clickedPointProperties.feature.properties.name}
+                                {clickedPoint.featureProperties.name}
                             </Link>
                         )}
                         childrenContainerClassName={styles.popupContent}
@@ -560,7 +537,7 @@ function ActiveOperationMap(props: Props) {
                         padding={DEFAULT_MAP_PADDING}
                     />
                 )}
-            </BaseMap>
+            </GlobalMap>
             {onPresentationModeButtonClick && !presentationMode && (
                 <Button
                     className={styles.presentationModeButton}

app/src/components/domain/ActiveOperationMap/styles.module.css

@@ -10,7 +10,8 @@
     }
 
     .map-container {
-        height: 40rem;
+        height: min(50rem, 70vh);
+        min-height: 20rem;
     }
 
     .footer {

app/src/components/domain/BaseMap/index.tsx

@@ -1,8 +1,4 @@
-import {
-    useContext,
-    useMemo,
-} from 'react';
-import { LanguageContext } from '@ifrc-go/ui/contexts';
+import { useMemo } from 'react';
 import { ErrorBoundary } from '@sentry/react';
 import {
     isDefined,
@@ -32,6 +28,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>>;
 
@@ -79,6 +77,7 @@ function BaseMap(props: Props) {
 
     const countries = useCountry();
 
+    // FIXME: We should check for special cases like ICRC, IFRC, etc.
     const countryCentroidGeoJson = useMemo(
         (): GeoJSON.FeatureCollection<GeoJSON.Geometry> => ({
             type: 'FeatureCollection' as const,
@@ -104,34 +103,6 @@ function BaseMap(props: Props) {
         [countries],
     );
 
-    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],
-                },
-            };
-        },
-        [currentLanguage],
-    );
-
     return (
         <Map
             mapStyle={mapStyle ?? defaultMapStyle}
@@ -147,18 +118,6 @@ 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 && (
@@ -168,7 +127,7 @@ function BaseMap(props: Props) {
                     geoJson={countryCentroidGeoJson}
                 >
                     <MapLayer
-                        layerKey="point-circle"
+                        layerKey="symbol-label"
                         layerOptions={adminLabelOverrideOptions}
                     />
                 </MapSource>