Add comments on why z-index was changed

- Revert back usage of GlobalMap on RiskImminentEventMap

Author: tnagorra

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>

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

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