diff --git a/app/src/components/domain/ActiveOperationMap/index.tsx b/app/src/components/domain/ActiveOperationMap/index.tsx
index f9713e9c98..088e8c9394 100644
--- 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
index 9748576da4..ec4a793584 100644
--- 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
index 7df3025afb..8c0da45d11 100644
--- 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,28 +163,6 @@ 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"
@@ -229,6 +170,7 @@ function GlobalMap(props: Props) {
                             onClick={onClick ? handleClick : undefined}
                         />
                     )}
+                    {baseLayers}
                 </>
             )}
         />
diff --git a/app/src/components/domain/RiskImminentEventMap/index.tsx b/app/src/components/domain/RiskImminentEventMap/index.tsx
index 9622417d65..88d0a532e5 100644
--- 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}
diff --git a/app/src/components/domain/RiskSeasonalMap/index.tsx b/app/src/components/domain/RiskSeasonalMap/index.tsx
index 8f84e3dc97..3e4bf36fd4 100644
--- a/app/src/components/domain/RiskSeasonalMap/index.tsx
+++ b/app/src/components/domain/RiskSeasonalMap/index.tsx
@@ -29,16 +29,14 @@ import {
     mapToList,
     unique,
 } from '@togglecorp/fujs';
+import { MapBounds } from '@togglecorp/re-map';
 import {
-    MapBounds,
-    MapLayer,
-} from '@togglecorp/re-map';
-import {
-    type FillLayer,
+    type FillPaint,
     type LngLatBoundsLike,
+    type LngLatLike,
 } from 'mapbox-gl';
 
-import BaseMap from '#components/domain/BaseMap';
+import GlobalMap, { type AdminZeroFeatureProperties } from '#components/domain/GlobalMap';
 import Link from '#components/Link';
 import MapContainerWithDisclaimer from '#components/MapContainerWithDisclaimer';
 import MapPopup from '#components/MapPopup';
@@ -172,21 +170,8 @@ const RISK_LOW_COLOR = '#c7d3e0';
 const RISK_HIGH_COLOR = '#f5333f';
 
 interface ClickedPoint {
-    feature: GeoJSON.Feature<GeoJSON.Point, GeoJsonProps>;
-    lngLat: mapboxgl.LngLatLike;
-}
-
-interface GeoJsonProps {
-    country_id: number;
-    disputed: boolean;
-    fdrs: string;
-    independent: boolean;
-    is_deprecated: boolean;
-    iso: string;
-    iso3: string;
-    name: string;
-    record_type: number;
-    region_id: number;
+    properties: AdminZeroFeatureProperties;
+    lngLat: LngLatLike;
 }
 
 type BaseProps = {
@@ -813,55 +798,49 @@ function RiskSeasonalMap(props: Props) {
     // NOTE: we need to generate the layerOptions because we cannot use MapState
     // The id in the vector tile does not match the id in GO
     // We also cannot use promoteId as it is a non-managed mapbox source
-    const layerOptions = useMemo<Omit<FillLayer, 'id'>>(
+    const paintOptions = useMemo<FillPaint>(
         () => {
             if (isNotDefined(filteredData) || filteredData.length === 0) {
                 return {
-                    type: 'fill',
-                    paint: {
-                        'fill-color': COLOR_LIGHT_GREY,
-                    },
+                    'fill-color': COLOR_LIGHT_GREY,
                 };
             }
 
             return {
-                type: 'fill',
-                paint: {
-                    'fill-color': [
-                        'match',
-                        ['get', 'iso3'],
-                        ...filteredData.flatMap(
-                            (item) => [
-                                item.country_details.iso3.toUpperCase(),
-                                [
-                                    'interpolate',
-                                    ['linear'],
-                                    ['number', item.riskCategory],
-                                    CATEGORY_RISK_VERY_LOW,
-                                    COLOR_LIGHT_BLUE,
-                                    CATEGORY_RISK_VERY_HIGH,
-                                    COLOR_PRIMARY_RED,
-                                ],
+                'fill-color': [
+                    'match',
+                    ['get', 'iso3'],
+                    ...filteredData.flatMap(
+                        (item) => [
+                            item.country_details.iso3.toUpperCase(),
+                            [
+                                'interpolate',
+                                ['linear'],
+                                ['number', item.riskCategory],
+                                CATEGORY_RISK_VERY_LOW,
+                                COLOR_LIGHT_BLUE,
+                                CATEGORY_RISK_VERY_HIGH,
+                                COLOR_PRIMARY_RED,
                             ],
-                        ),
-                        COLOR_LIGHT_GREY,
-                    ],
-                    'fill-outline-color': [
-                        'case',
-                        ['boolean', ['feature-state', 'hovered'], false],
-                        COLOR_DARK_GREY,
-                        'transparent',
-                    ],
-                },
+                        ],
+                    ),
+                    COLOR_LIGHT_GREY,
+                ],
+                'fill-outline-color': [
+                    'case',
+                    ['boolean', ['feature-state', 'hovered'], false],
+                    COLOR_DARK_GREY,
+                    'transparent',
+                ],
             };
         },
         [filteredData],
     );
 
     const handleCountryClick = useCallback(
-        (feature: mapboxgl.MapboxGeoJSONFeature, lngLat: mapboxgl.LngLat) => {
+        (properties: AdminZeroFeatureProperties, lngLat: LngLatLike) => {
             setClickedPointProperties({
-                feature: feature as unknown as ClickedPoint['feature'],
+                properties,
                 lngLat,
             });
             return true;
@@ -879,7 +858,7 @@ function RiskSeasonalMap(props: Props) {
     const riskPopupValue = useMemo(() => (
         filteredData?.find(
             (filter) => filter.iso3 === clickedPointProperties
-                ?.feature.properties.iso3.toLowerCase(),
+                ?.properties.iso3.toLowerCase(),
         )
     ), [filteredData, clickedPointProperties]);
 
@@ -952,15 +931,9 @@ function RiskSeasonalMap(props: Props) {
                 </div>
             )}
         >
-            <BaseMap
-                baseLayers={(
-                    <MapLayer
-                        layerKey="admin-0"
-                        hoverable
-                        layerOptions={layerOptions}
-                        onClick={handleCountryClick}
-                    />
-                )}
+            <GlobalMap
+                onAdminZeroFillClick={handleCountryClick}
+                adminZeroFillPaint={paintOptions}
             >
                 <MapContainerWithDisclaimer
                     className={styles.mapContainer}
@@ -978,11 +951,11 @@ function RiskSeasonalMap(props: Props) {
                             <Link
                                 to="countriesLayout"
                                 urlParams={{
-                                    countryId: clickedPointProperties.feature.properties.country_id,
+                                    countryId: clickedPointProperties.properties.country_id,
                                 }}
                                 withUnderline
                             >
-                                {clickedPointProperties.feature.properties.name}
+                                {clickedPointProperties.properties.name}
                             </Link>
                         )}
                         contentViewType="vertical"
@@ -994,7 +967,7 @@ function RiskSeasonalMap(props: Props) {
                         />
                     </MapPopup>
                 )}
-            </BaseMap>
+            </GlobalMap>
             <Container
                 className={styles.countryList}
                 childrenContainerClassName={styles.content}
diff --git a/app/src/views/CountryNsOverviewActivities/Map/index.tsx b/app/src/views/CountryNsOverviewActivities/Map/index.tsx
index 798a946ec4..81041c24d2 100644
--- a/app/src/views/CountryNsOverviewActivities/Map/index.tsx
+++ b/app/src/views/CountryNsOverviewActivities/Map/index.tsx
@@ -35,7 +35,7 @@ import {
     type SymbolPaint,
 } from 'mapbox-gl';
 
-import BaseMap from '#components/domain/BaseMap';
+import GlobalMap, { type AdminZeroFeatureProperties } from '#components/domain/GlobalMap';
 import Link from '#components/Link';
 import MapContainerWithDisclaimer from '#components/MapContainerWithDisclaimer';
 import MapPopup from '#components/MapPopup';
@@ -49,7 +49,6 @@ import {
     DURATION_MAP_ZOOM,
 } from '#utils/constants';
 import {
-    adminFillLayerOptions,
     getPointCircleHaloPaint,
     getPointCirclePaint,
 } from '#utils/map';
@@ -304,10 +303,10 @@ function CountryThreeWNationalSocietyProjectsMap(props: Props) {
     );
 
     const handleCountryClick = useCallback(
-        (feature: mapboxgl.MapboxGeoJSONFeature, lngLat: mapboxgl.LngLat) => {
+        (properties: AdminZeroFeatureProperties, lngLat: mapboxgl.LngLatLike) => {
             setClickedPointProperties({
-                countryId: feature.properties?.country_id,
-                countryName: feature.properties?.name,
+                countryId: properties?.country_id,
+                countryName: properties?.name,
                 lngLat,
             });
             return true;
@@ -337,15 +336,8 @@ function CountryThreeWNationalSocietyProjectsMap(props: Props) {
     return (
         <div className={_cs(styles.map, className)}>
             <div className={styles.mapWithLegend}>
-                <BaseMap
-                    baseLayers={(
-                        <MapLayer
-                            layerKey="admin-0"
-                            hoverable
-                            layerOptions={adminFillLayerOptions}
-                            onClick={handleCountryClick}
-                        />
-                    )}
+                <GlobalMap
+                    onAdminZeroFillClick={handleCountryClick}
                 >
                     <MapContainerWithDisclaimer
                         className={styles.mapContainer}
@@ -479,7 +471,7 @@ function CountryThreeWNationalSocietyProjectsMap(props: Props) {
                             padding={DEFAULT_MAP_PADDING}
                         />
                     )}
-                </BaseMap>
+                </GlobalMap>
             </div>
             {sidebarContent && (
                 <div className={styles.sidebar}>
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx
index 3cc1dfe02c..572cc4ccaa 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx
@@ -368,8 +368,8 @@ function LocalUnitsMap(props: Props) {
         >
             <div className={styles.mapContainerWithContactDetails}>
                 <BaseMap
-                    withoutLabel
                     mapStyle={localUnitMapStyle}
+                    // FIXME: this might fail
                     baseLayers={(
                         <ActiveCountryBaseMapLayer
                             activeCountryIso3={countryResponse?.iso3}
diff --git a/app/src/views/CountryOngoingActivitiesEmergencies/index.tsx b/app/src/views/CountryOngoingActivitiesEmergencies/index.tsx
index bdd3c83cae..a04d799d76 100644
--- a/app/src/views/CountryOngoingActivitiesEmergencies/index.tsx
+++ b/app/src/views/CountryOngoingActivitiesEmergencies/index.tsx
@@ -60,7 +60,7 @@ import {
     outerCircleLayerOptionsForPeopleTargeted,
     type ScaleOption,
 } from '#components/domain/ActiveOperationMap/utils';
-import BaseMap from '#components/domain/BaseMap';
+import GlobalMap, { type AdminZeroFeatureProperties } from '#components/domain/GlobalMap';
 import HighlightedOperations from '#components/domain/HighlightedOperations';
 import Link from '#components/Link';
 import MapContainerWithDisclaimer from '#components/MapContainerWithDisclaimer';
@@ -77,7 +77,6 @@ import {
     DURATION_MAP_ZOOM,
 } from '#utils/constants';
 import { createLinkColumn } from '#utils/domain/tableHelpers';
-import { adminFillLayerOptions } from '#utils/map';
 import { type CountryOutletContext } from '#utils/outletContext';
 import { resolveUrl } from '#utils/resolveUrl';
 import type {
@@ -111,24 +110,8 @@ type BaseProps = {
     onPresentationModeButtonClick?: () => void;
 }
 
-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>;
+    properties: AdminZeroFeatureProperties;
     lngLat: mapboxgl.LngLatLike;
 }
 
@@ -403,11 +386,11 @@ export function Component(props: BaseProps) {
     ]);
 
     const handleCountryClick = useCallback((
-        feature: mapboxgl.MapboxGeoJSONFeature,
+        properties: AdminZeroFeatureProperties,
         lngLat: mapboxgl.LngLatLike,
     ) => {
         setClickedPointProperties({
-            feature: feature as unknown as ClickedPoint['feature'],
+            properties,
             lngLat,
         });
         return false;
@@ -457,7 +440,7 @@ export function Component(props: BaseProps) {
     ]);
 
     const popupDetails = clickedPointProperties
-        ? countryGroupedAppeal[clickedPointProperties.feature.properties.iso3]
+        ? countryGroupedAppeal[clickedPointProperties.properties.iso3]
         : undefined;
 
     return (
@@ -535,15 +518,8 @@ export function Component(props: BaseProps) {
                     )}
                     contentViewType="vertical"
                 >
-                    <BaseMap
-                        baseLayers={(
-                            <MapLayer
-                                layerKey="admin-0"
-                                hoverable
-                                layerOptions={adminFillLayerOptions}
-                                onClick={handleCountryClick}
-                            />
-                        )}
+                    <GlobalMap
+                        onAdminZeroFillClick={handleCountryClick}
                     >
                         <MapContainerWithDisclaimer
                             className={styles.mapContainer}
@@ -600,11 +576,10 @@ export function Component(props: BaseProps) {
                                     <Link
                                         to="countriesLayout"
                                         urlParams={{
-                                            // eslint-disable-next-line max-len
-                                            countryId: clickedPointProperties.feature.properties.country_id,
+                                            countryId: clickedPointProperties.properties.country_id,
                                         }}
                                     >
-                                        {clickedPointProperties.feature.properties.name}
+                                        {clickedPointProperties.properties.name}
                                     </Link>
                                 )}
                                 childrenContainerClassName={styles.popupContent}
@@ -650,7 +625,7 @@ export function Component(props: BaseProps) {
                                 padding={DEFAULT_MAP_PADDING}
                             />
                         )}
-                    </BaseMap>
+                    </GlobalMap>
                     {onPresentationModeButtonClick && !presentationMode && (
                         <Button
                             className={styles.presentationModeButton}
diff --git a/app/src/views/CountryProfileOverview/PopulationMap/index.tsx b/app/src/views/CountryProfileOverview/PopulationMap/index.tsx
index e23976c402..f6c7547a3c 100644
--- a/app/src/views/CountryProfileOverview/PopulationMap/index.tsx
+++ b/app/src/views/CountryProfileOverview/PopulationMap/index.tsx
@@ -327,7 +327,6 @@ function PopulatioMap(props: Props) {
             )}
         >
             <BaseMap
-                withoutLabel
                 baseLayers={(
                     <>
                         <MapLayer
diff --git a/app/src/views/Emergencies/Map/index.tsx b/app/src/views/Emergencies/Map/index.tsx
index ebef7e2436..19234dfb87 100644
--- a/app/src/views/Emergencies/Map/index.tsx
+++ b/app/src/views/Emergencies/Map/index.tsx
@@ -28,7 +28,7 @@ import {
     MapSource,
 } from '@togglecorp/re-map';
 
-import BaseMap from '#components/domain/BaseMap';
+import GlobalMap, { type AdminZeroFeatureProperties } from '#components/domain/GlobalMap';
 import Link from '#components/Link';
 import MapContainerWithDisclaimer from '#components/MapContainerWithDisclaimer';
 import MapPopup from '#components/MapPopup';
@@ -38,7 +38,6 @@ import { getNumAffected } from '#utils/domain/emergency';
 import type { GoApiResponse } from '#utils/restRequest';
 
 import {
-    adminFillLayerOptions,
     basePointLayerOptions,
     COLOR_MIXED_RESPONSE,
     COLOR_WITH_IFRC_RESPONSE,
@@ -63,25 +62,8 @@ const sourceOptions: mapboxgl.GeoJSONSourceRaw = {
 type EventResponse = GoApiResponse<'/api/v2/event/'>;
 type EventListItem = NonNullable<EventResponse['results']>[number];
 
-// NOTE: we can get this information from mapbox studio
-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>;
+    properties: AdminZeroFeatureProperties;
     lngLat: mapboxgl.LngLatLike;
 }
 
@@ -237,11 +219,11 @@ function EmergenciesMap(props: Props) {
     );
 
     const handleCountryClick = useCallback((
-        feature: mapboxgl.MapboxGeoJSONFeature,
+        properties: AdminZeroFeatureProperties,
         lngLat: mapboxgl.LngLatLike,
     ) => {
         setClickedPointProperties({
-            feature: feature as unknown as ClickedPoint['feature'],
+            properties,
             lngLat,
         });
         return false;
@@ -255,7 +237,7 @@ function EmergenciesMap(props: Props) {
     );
 
     const popupDetails = clickedPointProperties
-        ? countryGroupedEvents[clickedPointProperties.feature.properties.iso3]
+        ? countryGroupedEvents[clickedPointProperties.properties.iso3]
         : undefined;
 
     return (
@@ -273,15 +255,8 @@ function EmergenciesMap(props: Props) {
                 </Link>
             )}
         >
-            <BaseMap
-                baseLayers={(
-                    <MapLayer
-                        layerKey="admin-0"
-                        hoverable
-                        layerOptions={adminFillLayerOptions}
-                        onClick={handleCountryClick}
-                    />
-                )}
+            <GlobalMap
+                onAdminZeroFillClick={handleCountryClick}
             >
                 <MapContainerWithDisclaimer
                     className={styles.mapContainer}
@@ -343,10 +318,10 @@ function EmergenciesMap(props: Props) {
                             <Link
                                 to="countriesLayout"
                                 urlParams={{
-                                    countryId: clickedPointProperties.feature.properties.country_id,
+                                    countryId: clickedPointProperties.properties.country_id,
                                 }}
                             >
-                                {clickedPointProperties.feature.properties.name}
+                                {clickedPointProperties.properties.name}
                             </Link>
                         )}
                         childrenContainerClassName={styles.popupContent}
@@ -375,7 +350,7 @@ function EmergenciesMap(props: Props) {
                         )}
                     </MapPopup>
                 )}
-            </BaseMap>
+            </GlobalMap>
         </Container>
     );
 }
diff --git a/app/src/views/GlobalThreeW/Map/index.tsx b/app/src/views/GlobalThreeW/Map/index.tsx
index b558baca8f..ca55aa9265 100644
--- a/app/src/views/GlobalThreeW/Map/index.tsx
+++ b/app/src/views/GlobalThreeW/Map/index.tsx
@@ -22,7 +22,7 @@ import {
     MapSource,
 } from '@togglecorp/re-map';
 
-import BaseMap from '#components/domain/BaseMap';
+import GlobalMap, { type AdminZeroFeatureProperties } from '#components/domain/GlobalMap';
 import Link from '#components/Link';
 import MapContainerWithDisclaimer from '#components/MapContainerWithDisclaimer';
 import MapPopup from '#components/MapPopup';
@@ -37,7 +37,6 @@ import {
     OPERATION_TYPE_PROGRAMME,
 } from '#utils/constants';
 import {
-    adminFillLayerOptions,
     getPointCircleHaloPaint,
     getPointCirclePaint,
     pointColorMap,
@@ -71,7 +70,7 @@ interface GeoJsonProps {
 }
 
 interface ClickedPoint {
-    feature: GeoJSON.Feature<GeoJSON.Point, GeoJsonProps>;
+    properties: AdminZeroFeatureProperties;
     countryId: number;
     lngLat: mapboxgl.LngLatLike;
 }
@@ -242,10 +241,10 @@ function GlobalThreeWMap(props: Props) {
     );
 
     const handleCountryClick = useCallback(
-        (feature: mapboxgl.MapboxGeoJSONFeature, lngLat: mapboxgl.LngLat) => {
+        (properties: AdminZeroFeatureProperties, lngLat: mapboxgl.LngLatLike) => {
             setClickedPointProperties({
-                feature: feature as unknown as ClickedPoint['feature'],
-                countryId: feature.properties?.country_id,
+                properties,
+                countryId: properties.country_id,
                 lngLat,
             });
             return true;
@@ -256,7 +255,7 @@ function GlobalThreeWMap(props: Props) {
     const handlePointClick = useCallback(
         (feature: mapboxgl.MapboxGeoJSONFeature, lngLat: mapboxgl.LngLat) => {
             setClickedPointProperties({
-                feature: feature as unknown as ClickedPoint['feature'],
+                properties: feature as unknown as ClickedPoint['properties'],
                 countryId: feature.properties?.countryId,
                 lngLat,
             });
@@ -273,15 +272,8 @@ function GlobalThreeWMap(props: Props) {
     );
 
     return (
-        <BaseMap
-            baseLayers={(
-                <MapLayer
-                    layerKey="admin-0"
-                    hoverable
-                    layerOptions={adminFillLayerOptions}
-                    onClick={handleCountryClick}
-                />
-            )}
+        <GlobalMap
+            onAdminZeroFillClick={handleCountryClick}
         >
             <MapContainerWithDisclaimer
                 className={_cs(styles.mapContainer, className)}
@@ -413,7 +405,7 @@ function GlobalThreeWMap(props: Props) {
                     </Container>
                 </MapPopup>
             )}
-        </BaseMap>
+        </GlobalMap>
     );
 }
 
diff --git a/app/src/views/RegionThreeW/MovementActivitiesMap/index.tsx b/app/src/views/RegionThreeW/MovementActivitiesMap/index.tsx
index 0d318e1e7d..c7fe27f889 100644
--- a/app/src/views/RegionThreeW/MovementActivitiesMap/index.tsx
+++ b/app/src/views/RegionThreeW/MovementActivitiesMap/index.tsx
@@ -23,7 +23,7 @@ import {
 } from '@togglecorp/re-map';
 import getBbox from '@turf/bbox';
 
-import BaseMap from '#components/domain/BaseMap';
+import GlobalMap, { type AdminZeroFeatureProperties } from '#components/domain/GlobalMap';
 import Link from '#components/Link';
 import MapContainerWithDisclaimer from '#components/MapContainerWithDisclaimer';
 import MapPopup from '#components/MapPopup';
@@ -34,7 +34,6 @@ import {
     DURATION_MAP_ZOOM,
 } from '#utils/constants';
 import {
-    adminFillLayerOptions,
     getPointCircleHaloPaint,
     getPointCirclePaint,
 } from '#utils/map';
@@ -152,12 +151,12 @@ function MovementActivitiesMap(props: Props) {
     );
 
     const handleCountryClick = useCallback((
-        feature: mapboxgl.MapboxGeoJSONFeature,
+        properties: AdminZeroFeatureProperties,
         lngLat: mapboxgl.LngLatLike,
     ) => {
         setClickedPointProperties({
-            countryId: feature.properties?.country_id,
-            countryName: feature.properties?.name,
+            countryId: properties.country_id,
+            countryName: properties.name,
             lngLat,
         });
         return false;
@@ -209,15 +208,8 @@ function MovementActivitiesMap(props: Props) {
     return (
         <div className={_cs(styles.map, className)}>
             <div className={styles.mapWithLegend}>
-                <BaseMap
-                    baseLayers={(
-                        <MapLayer
-                            layerKey="admin-0"
-                            hoverable
-                            layerOptions={adminFillLayerOptions}
-                            onClick={handleCountryClick}
-                        />
-                    )}
+                <GlobalMap
+                    onAdminZeroFillClick={handleCountryClick}
                 >
                     <MapContainerWithDisclaimer className={styles.mapContainer} />
                     {activitiesGeoJson && (
@@ -313,7 +305,7 @@ function MovementActivitiesMap(props: Props) {
                             </div>
                         </MapPopup>
                     )}
-                </BaseMap>
+                </GlobalMap>
             </div>
             {
                 sidebarContent && (
diff --git a/patches/@togglecorp__re-map@0.3.0.patch b/patches/@togglecorp__re-map@0.3.0.patch
index a2584f659e..79e12c4b7d 100644
--- a/patches/@togglecorp__re-map@0.3.0.patch
+++ b/patches/@togglecorp__re-map@0.3.0.patch
@@ -23,4 +23,17 @@ index cb8fa497e2873bda36fcfd3c4f9600fb14cc2838..6638e250a389f5d5240239eed4f36669
 +        }
          map.addImage(initialName, loadedImage, initialImageOptions);
          if (onLoad) {
-           onLoad(true, initialName);
\ No newline at end of file
+           onLoad(true, initialName);
+diff --git a/build/esm/MapSource/MapLayer.js b/build/esm/MapSource/MapLayer.js
+index b25072adf1ee041149be1a2ad8d2040d87806a2a..977d8632e411915a63c45cb05606b50e99857056 100644
+--- a/build/esm/MapSource/MapLayer.js
++++ b/build/esm/MapSource/MapLayer.js
+@@ -130,7 +130,7 @@ function MapLayer(props) {
+   // Handle filter change
+   // TODO: don't call in first render
+   useEffect(() => {
+-    if (!map || !sourceKey || !layerKey) {
++    if (!map || !sourceKey || !layerKey || !filter) {
+       return;
+     }
+     const id = getLayerName(sourceKey, layerKey, initialManaged);
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1f138f7ee1..b0b8138ba5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,7 +6,7 @@ settings:
 
 patchedDependencies:
   '@togglecorp/re-map@0.3.0':
-    hash: wwl62qrbjaqz37xbxuqg4ecwfa
+    hash: oifgbrbpal3uyeo2ioflq37r6q
     path: patches/@togglecorp__re-map@0.3.0.patch
   '@turf/bbox@6.5.0':
     hash: xk3vqr4ybwpgzxhosz73ljzolq
@@ -51,7 +51,7 @@ importers:
         version: 2.1.1
       '@togglecorp/re-map':
         specifier: ^0.3.0
-        version: 0.3.0(patch_hash=wwl62qrbjaqz37xbxuqg4ecwfa)(mapbox-gl@1.13.0)(react-dom@18.2.0)(react@18.2.0)
+        version: 0.3.0(patch_hash=oifgbrbpal3uyeo2ioflq37r6q)(mapbox-gl@1.13.0)(react-dom@18.2.0)(react@18.2.0)
       '@togglecorp/toggle-form':
         specifier: ^2.0.4
         version: 2.0.4(react-dom@18.2.0)(react@18.2.0)
@@ -4710,7 +4710,7 @@ packages:
       '@babel/runtime-corejs3': 7.26.0
     dev: false
 
-  /@togglecorp/re-map@0.3.0(patch_hash=wwl62qrbjaqz37xbxuqg4ecwfa)(mapbox-gl@1.13.0)(react-dom@18.2.0)(react@18.2.0):
+  /@togglecorp/re-map@0.3.0(patch_hash=oifgbrbpal3uyeo2ioflq37r6q)(mapbox-gl@1.13.0)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-tCohiZxUt5tkuAmzTz8qZu2foliPkj1ZyNnS3Z4He9ZDKOuGrZy0mwRe8QDDDTF+lIULD4gQMaQIENaWRls/Uw==}
     peerDependencies:
       mapbox-gl: ^1.13.0