From 87e75a60b9201a8db2a71ea3267e1c374b9065ba Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Thu, 17 Oct 2024 14:16:52 +0545
Subject: [PATCH 1/4] Create a GlobalMap component

- Use GlobalMap in the ActiveOperationMap
---
 .../domain/ActiveOperationMap/index.tsx       |  65 ++---
 .../ActiveOperationMap/styles.module.css      |   3 +-
 app/src/components/domain/BaseMap/index.tsx   |  25 +-
 app/src/components/domain/GlobalMap/index.tsx | 238 ++++++++++++++++++
 .../domain/RiskImminentEventMap/index.tsx     |   6 +-
 app/src/utils/constants.ts                    |   2 +-
 6 files changed, 270 insertions(+), 69 deletions(-)
 create mode 100644 app/src/components/domain/GlobalMap/index.tsx

diff --git a/app/src/components/domain/ActiveOperationMap/index.tsx b/app/src/components/domain/ActiveOperationMap/index.tsx
index 15903383b..7a19fc5ee 100644
--- a/app/src/components/domain/ActiveOperationMap/index.tsx
+++ b/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, { 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}
diff --git a/app/src/components/domain/ActiveOperationMap/styles.module.css b/app/src/components/domain/ActiveOperationMap/styles.module.css
index be42392ee..94f2daa98 100644
--- a/app/src/components/domain/ActiveOperationMap/styles.module.css
+++ b/app/src/components/domain/ActiveOperationMap/styles.module.css
@@ -10,7 +10,8 @@
     }
 
     .map-container {
-        height: 40rem;
+        height: min(50rem, 70vh);
+        min-height: 20rem;
     }
 
     .footer {
diff --git a/app/src/components/domain/BaseMap/index.tsx b/app/src/components/domain/BaseMap/index.tsx
index 5d77d8f89..df806b522 100644
--- a/app/src/components/domain/BaseMap/index.tsx
+++ b/app/src/components/domain/BaseMap/index.tsx
@@ -1,8 +1,5 @@
-import {
-    useContext,
-    useMemo,
-} from 'react';
-import { LanguageContext } from '@ifrc-go/ui/contexts';
+import { useMemo } from 'react';
+// import { LanguageContext } from '@ifrc-go/ui/contexts';
 import { ErrorBoundary } from '@sentry/react';
 import {
     isDefined,
@@ -104,10 +101,9 @@ function BaseMap(props: Props) {
         [countries],
     );
 
-    const {
-        currentLanguage,
-    } = useContext(LanguageContext);
+    // const { currentLanguage } = useContext(LanguageContext);
 
+    /*
     const adminLabelLayerOptions : Omit<SymbolLayer, 'id'> = useMemo(
         () => {
             // ar, es, fr
@@ -131,6 +127,7 @@ function BaseMap(props: Props) {
         },
         [currentLanguage],
     );
+    */
 
     return (
         <Map
@@ -147,18 +144,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 && (
diff --git a/app/src/components/domain/GlobalMap/index.tsx b/app/src/components/domain/GlobalMap/index.tsx
new file mode 100644
index 000000000..bb13a0bf3
--- /dev/null
+++ b/app/src/components/domain/GlobalMap/index.tsx
@@ -0,0 +1,238 @@
+import {
+    useContext,
+    useMemo,
+    useState,
+} from 'react';
+import { LanguageContext } from '@ifrc-go/ui/contexts';
+import { MapLayer } from '@togglecorp/re-map';
+import {
+    Expression,
+    FillLayer,
+    FillPaint,
+    LineLayer,
+    LngLatLike,
+    MapboxGeoJSONFeature,
+    SymbolLayer,
+} from 'mapbox-gl';
+
+import BaseMap, { type Props as BaseMapProps } from '#components/domain/BaseMap';
+import {
+    COLOR_BLACK,
+    CountryRecordTypeEnum,
+} from '#utils/constants';
+
+export interface AdminZeroFeatureProperties {
+    country_id: number;
+    disputed: boolean;
+    independent: boolean;
+    is_deprecated: boolean;
+    name: string;
+    name_ar: string;
+    name_es: string;
+    name_fr: string;
+    record_type: CountryRecordTypeEnum;
+
+    // NOTE: we check for undefined iso3 before triggering
+    // onClick and onHover
+    iso3: string;
+
+    fdrs?: string;
+    iso?: string;
+    region_id?: number;
+}
+
+const KOSOVO_ISO3 = 'XKX';
+const WESTERN_SAHARA_ISO3 = 'ESH';
+
+const overlappedDisputedCountriesIso3 = [
+    KOSOVO_ISO3,
+    WESTERN_SAHARA_ISO3,
+];
+
+const adminZeroHighlightPaint: FillPaint = {
+    'fill-color': COLOR_BLACK,
+    'fill-opacity': [
+        'case',
+        ['all',
+            ['==', ['feature-state', 'hovered'], true],
+            ['!=', ['get', 'iso3'], null],
+        ],
+        0.2,
+        0,
+    ],
+};
+
+interface Props extends Omit<BaseMapProps, 'baseLayers'> {
+    onHover?: (hoveredFeatureProperties: AdminZeroFeatureProperties | undefined) => void;
+    onClick?: (
+        clickedFeatureProperties: AdminZeroFeatureProperties,
+        lngLat: LngLatLike,
+    ) => void;
+    activeCountryIso3?: string | undefined | null;
+}
+
+function GlobalMap(props: Props) {
+    const {
+        onHover,
+        onClick,
+        ...baseMapProps
+    } = props;
+
+    const [hoveredCountryIso3, setHoverdCountryIso3] = useState<string | undefined>();
+
+    const handleFeatureMouseEnter = (feature: MapboxGeoJSONFeature) => {
+        const hoveredFeatureProperties = feature.properties as (
+            AdminZeroFeatureProperties | undefined
+        );
+
+        setHoverdCountryIso3(hoveredFeatureProperties?.iso3);
+
+        if (onHover) {
+            onHover(hoveredFeatureProperties);
+        }
+    };
+
+    const handleFeatureMouseLeave = () => {
+        setHoverdCountryIso3(undefined);
+
+        if (onHover) {
+            onHover(undefined);
+        }
+    };
+
+    const handleClick = (feature: MapboxGeoJSONFeature, lngLat: LngLatLike) => {
+        if (onClick) {
+            onClick(
+                feature.properties as AdminZeroFeatureProperties,
+                lngLat,
+            );
+        }
+
+        return true;
+    };
+
+    const fillSortKey = useMemo<number | Expression>(() => [
+        'match',
+        ['get', 'iso3'],
+        hoveredCountryIso3 ?? '???',
+        2,
+        ...(overlappedDisputedCountriesIso3.filter(
+            (iso3) => !(iso3 === hoveredCountryIso3),
+        ).flatMap((iso3) => [iso3, 1])),
+        0,
+    ], [hoveredCountryIso3]);
+
+    const adminZeroHighlightLayerOptions = useMemo<Omit<FillLayer, 'id'>>(
+        () => ({
+            type: 'fill',
+            layout: {
+                visibility: 'visible',
+                'fill-sort-key': fillSortKey,
+            },
+            paint: adminZeroHighlightPaint,
+            filter: ['!=', ['get', 'iso3'], null],
+        }),
+        [fillSortKey],
+    );
+
+    const adminZeroBaseLayerOptions = useMemo<Omit<FillLayer, 'id'>>(
+        () => ({
+            type: 'fill',
+            layout: {
+                visibility: 'visible',
+                'fill-sort-key': fillSortKey,
+            },
+        }),
+        [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],
+    );
+
+    return (
+        <BaseMap
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...baseMapProps}
+            withoutLabel
+            baseLayers={(
+                <>
+                    <MapLayer
+                        layerKey="admin-0"
+                        layerOptions={adminZeroBaseLayerOptions}
+                        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-mask"
+                        layerOptions={adminZeroLineLayerOptions}
+                    />
+                    <MapLayer
+                        layerKey="admin-0-boundary-disputed"
+                        layerOptions={adminZeroLineLayerOptions}
+                    />
+                    {(onHover || onClick) && (
+                        <MapLayer
+                            layerKey="admin-0-highlight"
+                            layerOptions={adminZeroHighlightLayerOptions}
+                            onClick={onClick ? handleClick : undefined}
+                        />
+                    )}
+                    {/*
+                    <MapLayer
+                        layerKey="admin-0-boundary"
+                        layerOptions={adminZeroLineLayerOptions}
+                    />
+                    */}
+                </>
+            )}
+        />
+    );
+}
+
+export default GlobalMap;
diff --git a/app/src/components/domain/RiskImminentEventMap/index.tsx b/app/src/components/domain/RiskImminentEventMap/index.tsx
index 9622417d6..1a3bfa0ea 100644
--- a/app/src/components/domain/RiskImminentEventMap/index.tsx
+++ b/app/src/components/domain/RiskImminentEventMap/index.tsx
@@ -29,7 +29,6 @@ import type {
     SymbolLayer,
 } from 'mapbox-gl';
 
-import BaseMap from '#components/domain/BaseMap';
 import MapContainerWithDisclaimer from '#components/MapContainerWithDisclaimer';
 import { type components } from '#generated/riskTypes';
 import useDebouncedValue from '#hooks/useDebouncedValue';
@@ -39,6 +38,7 @@ import {
     DURATION_MAP_ZOOM,
 } from '#utils/constants';
 
+import GlobalMap from '../GlobalMap';
 import LayerOptions, { type LayerOptionsValue } from './LayerOptions';
 import {
     activeHazardPointLayer,
@@ -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}
diff --git a/app/src/utils/constants.ts b/app/src/utils/constants.ts
index 70ae6e757..1c17fe85b 100644
--- a/app/src/utils/constants.ts
+++ b/app/src/utils/constants.ts
@@ -175,7 +175,7 @@ export const REGION_ASIA = 2 satisfies Region;
 export const REGION_EUROPE = 3 satisfies Region;
 export const REGION_MENA = 4 satisfies Region;
 
-type CountryRecordTypeEnum = components<'read'>['schemas']['ApiCountryTypeEnumKey'];
+export type CountryRecordTypeEnum = components<'read'>['schemas']['ApiCountryTypeEnumKey'];
 // const COUNTRY_RECORD_TYPE_COUNTRY = 1 satisfies CountryRecordTypeEnum;
 // const COUNTRY_RECORD_TYPE_CLUSTER = 2 satisfies CountryRecordTypeEnum;
 export const COUNTRY_RECORD_TYPE_REGION = 3 satisfies CountryRecordTypeEnum;

From 2bd4414416e9736b06f9c2590539150db3478a51 Mon Sep 17 00:00:00 2001
From: tnagorra <weathermist@gmail.com>
Date: Tue, 24 Dec 2024 14:42:12 +0545
Subject: [PATCH 2/4] Fix lint issues regarding type import

---
 .../domain/ActiveOperationMap/index.tsx          |  2 +-
 app/src/components/domain/GlobalMap/index.tsx    | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/src/components/domain/ActiveOperationMap/index.tsx b/app/src/components/domain/ActiveOperationMap/index.tsx
index 7a19fc5ee..f9713e9c9 100644
--- a/app/src/components/domain/ActiveOperationMap/index.tsx
+++ b/app/src/components/domain/ActiveOperationMap/index.tsx
@@ -53,7 +53,7 @@ import type {
 } from '#utils/restRequest';
 import { useRequest } from '#utils/restRequest';
 
-import GlobalMap, { AdminZeroFeatureProperties } from '../GlobalMap';
+import GlobalMap, { type AdminZeroFeatureProperties } from '../GlobalMap';
 import {
     APPEAL_TYPE_DREF,
     APPEAL_TYPE_EAP,
diff --git a/app/src/components/domain/GlobalMap/index.tsx b/app/src/components/domain/GlobalMap/index.tsx
index bb13a0bf3..781f91f66 100644
--- a/app/src/components/domain/GlobalMap/index.tsx
+++ b/app/src/components/domain/GlobalMap/index.tsx
@@ -6,19 +6,19 @@ import {
 import { LanguageContext } from '@ifrc-go/ui/contexts';
 import { MapLayer } from '@togglecorp/re-map';
 import {
-    Expression,
-    FillLayer,
-    FillPaint,
-    LineLayer,
-    LngLatLike,
-    MapboxGeoJSONFeature,
-    SymbolLayer,
+    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';
 import {
     COLOR_BLACK,
-    CountryRecordTypeEnum,
+    type CountryRecordTypeEnum,
 } from '#utils/constants';
 
 export interface AdminZeroFeatureProperties {

From bcbd66022527c5b7ca84cc6a1d2ea9208ba54cab Mon Sep 17 00:00:00 2001
From: tnagorra <weathermist@gmail.com>
Date: Tue, 24 Dec 2024 15:37:24 +0545
Subject: [PATCH 3/4] Add comments on why z-index was changed

- Revert back usage of GlobalMap on RiskImminentEventMap
---
 app/src/components/domain/BaseMap/index.tsx   | 34 +++----------------
 app/src/components/domain/GlobalMap/index.tsx |  4 +++
 .../domain/RiskImminentEventMap/index.tsx     |  4 +--
 3 files changed, 10 insertions(+), 32 deletions(-)

diff --git a/app/src/components/domain/BaseMap/index.tsx b/app/src/components/domain/BaseMap/index.tsx
index df806b522..9748576da 100644
--- a/app/src/components/domain/BaseMap/index.tsx
+++ b/app/src/components/domain/BaseMap/index.tsx
@@ -1,5 +1,4 @@
 import { useMemo } from 'react';
-// import { LanguageContext } from '@ifrc-go/ui/contexts';
 import { ErrorBoundary } from '@sentry/react';
 import {
     isDefined,
@@ -29,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>>;
 
@@ -76,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,
@@ -101,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}
@@ -153,7 +127,7 @@ function BaseMap(props: Props) {
                     geoJson={countryCentroidGeoJson}
                 >
                     <MapLayer
-                        layerKey="point-circle"
+                        layerKey="symbol-label"
                         layerOptions={adminLabelOverrideOptions}
                     />
                 </MapSource>
diff --git a/app/src/components/domain/GlobalMap/index.tsx b/app/src/components/domain/GlobalMap/index.tsx
index 781f91f66..688535d55 100644
--- a/app/src/components/domain/GlobalMap/index.tsx
+++ b/app/src/components/domain/GlobalMap/index.tsx
@@ -114,11 +114,15 @@ function GlobalMap(props: Props) {
     const fillSortKey = useMemo<number | Expression>(() => [
         'match',
         ['get', 'iso3'],
+        // NOTE: Hovered geoarea should be at the top
         hoveredCountryIso3 ?? '???',
         2,
+        // NOTE: After that, we should have geoarea that is 100%
+        // included in another geoarea
         ...(overlappedDisputedCountriesIso3.filter(
             (iso3) => !(iso3 === hoveredCountryIso3),
         ).flatMap((iso3) => [iso3, 1])),
+        // NOTE: Everything else should be after that
         0,
     ], [hoveredCountryIso3]);
 
diff --git a/app/src/components/domain/RiskImminentEventMap/index.tsx b/app/src/components/domain/RiskImminentEventMap/index.tsx
index 1a3bfa0ea..b500d70e5 100644
--- a/app/src/components/domain/RiskImminentEventMap/index.tsx
+++ b/app/src/components/domain/RiskImminentEventMap/index.tsx
@@ -29,6 +29,7 @@ import type {
     SymbolLayer,
 } from 'mapbox-gl';
 
+import BaseMap from '#components/domain/BaseMap';
 import MapContainerWithDisclaimer from '#components/MapContainerWithDisclaimer';
 import { type components } from '#generated/riskTypes';
 import useDebouncedValue from '#hooks/useDebouncedValue';
@@ -38,7 +39,6 @@ import {
     DURATION_MAP_ZOOM,
 } from '#utils/constants';
 
-import GlobalMap from '../GlobalMap';
 import LayerOptions, { type LayerOptionsValue } from './LayerOptions';
 import {
     activeHazardPointLayer,
@@ -347,7 +347,7 @@ function RiskImminentEventMap<
 
     return (
         <div className={styles.riskImminentEventMap}>
-            <GlobalMap
+            <BaseMap
                 mapOptions={{ bounds }}
             >
                 <MapContainerWithDisclaimer

From 3a3fb4a2005b619ebaa4cb0545498a515801bad0 Mon Sep 17 00:00:00 2001
From: tnagorra <weathermist@gmail.com>
Date: Tue, 24 Dec 2024 16:09:45 +0545
Subject: [PATCH 4/4] Remove setting layout for boundary-mask layout

- We should not override layout for admin-0-boundary
---
 app/src/components/domain/GlobalMap/index.tsx          | 10 +++-------
 .../components/domain/RiskImminentEventMap/index.tsx   |  2 +-
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/app/src/components/domain/GlobalMap/index.tsx b/app/src/components/domain/GlobalMap/index.tsx
index 688535d55..7df3025af 100644
--- a/app/src/components/domain/GlobalMap/index.tsx
+++ b/app/src/components/domain/GlobalMap/index.tsx
@@ -212,10 +212,12 @@ function GlobalMap(props: Props) {
                         layerKey="admin-0-label-priority"
                         layerOptions={adminLabelLayerOptions}
                     />
+                    {/*
                     <MapLayer
-                        layerKey="admin-0-boundary-mask"
+                        layerKey="admin-0-boundary"
                         layerOptions={adminZeroLineLayerOptions}
                     />
+                    */}
                     <MapLayer
                         layerKey="admin-0-boundary-disputed"
                         layerOptions={adminZeroLineLayerOptions}
@@ -227,12 +229,6 @@ function GlobalMap(props: Props) {
                             onClick={onClick ? handleClick : undefined}
                         />
                     )}
-                    {/*
-                    <MapLayer
-                        layerKey="admin-0-boundary"
-                        layerOptions={adminZeroLineLayerOptions}
-                    />
-                    */}
                 </>
             )}
         />
diff --git a/app/src/components/domain/RiskImminentEventMap/index.tsx b/app/src/components/domain/RiskImminentEventMap/index.tsx
index b500d70e5..9622417d6 100644
--- a/app/src/components/domain/RiskImminentEventMap/index.tsx
+++ b/app/src/components/domain/RiskImminentEventMap/index.tsx
@@ -469,7 +469,7 @@ function RiskImminentEventMap<
                         padding={DEFAULT_MAP_PADDING}
                     />
                 )}
-            </GlobalMap>
+            </BaseMap>
             <Container
                 heading={sidePanelHeading}
                 className={styles.sidePanel}