SKY30-469/SKY30-471 - Display new layer popups

frontend/src/containers/map/content/map/index.tsx

@@ -315,10 +315,6 @@ const MainMap: FCWithMessages = () => {
 
   const disableMouseMove = popup.type === 'click' && popup.features?.length;
 
-  // ? the popup won't show up when the user is hovering a layer that is not EEZ
-  const hidePopup =
-    popup?.type === 'mousemove' && !popup.features?.some((f) => f.source === 'ezz-source');
-
   return (
     <div className="absolute left-0 h-full w-full border-b border-r border-black">
       <Map
@@ -333,7 +329,7 @@ const MainMap: FCWithMessages = () => {
         cursor={cursor}
       >
         <>
-          {!hidePopup && <Popup />}
+          <Popup />
           <LabelsManager />
           <LayersToolbox />
           <ZoomControls />

frontend/src/containers/map/content/map/popup/constants.ts

@@ -0,0 +1,33 @@
+import { IconProps } from '@/components/ui/icon';
+import Mountain from '@/styles/icons/mountain.svg';
+import Wave from '@/styles/icons/wave.svg';
+
+export const HOVER_POPUP_PROPERTIES_BY_SOURCE = {
+  'ezz-source': {
+    en: 'GEONAME',
+    es: 'GEONAME_ES',
+    fr: 'GEONAME_FR',
+  },
+  'regions-source': {
+    en: 'name',
+    es: 'name_es',
+    fr: 'name_fr',
+  },
+  'gadm-countries': {
+    en: 'COUNTRY',
+    es: 'name_es',
+    fr: 'name_fr',
+  },
+  'gadm-regions': {
+    en: 'name',
+    es: 'name_es',
+    fr: 'name_fr',
+  },
+};
+
+export const HOVER_POPUP_ICON_BY_SOURCE = {
+  'ezz-source': Wave as IconProps['icon'],
+  'regions-source': Wave as IconProps['icon'],
+  'gadm-countries': Mountain as IconProps['icon'],
+  'gadm-regions': Mountain as IconProps['icon'],
+};

frontend/src/containers/map/content/map/popup/index.tsx

@@ -23,6 +23,8 @@ import { useGetLayers } from '@/types/generated/layer';
 
 import { useSyncMapLayers } from '../sync-settings';
 
+import { HOVER_POPUP_ICON_BY_SOURCE, HOVER_POPUP_PROPERTIES_BY_SOURCE } from './constants';
+
 const PopupContainer: FCWithMessages = () => {
   const locale = useLocale();
 
@@ -34,7 +36,10 @@ const PopupContainer: FCWithMessages = () => {
 
   const setPopup = useSetAtom(popupAtom);
 
-  const availableSources = Array.from(new Set(popup?.features?.map(({ source }) => source)));
+  const availableSources = useMemo(
+    () => Array.from(new Set(popup?.features?.map(({ source }) => source))),
+    [popup]
+  );
 
   const { data: layersInteractiveData } = useGetLayers(
     {
@@ -72,23 +77,20 @@ const PopupContainer: FCWithMessages = () => {
   );
 
   const hoverTooltipContent = useMemo(() => {
-    const properties = popup?.features?.find(({ source }) => source === 'ezz-source')?.properties;
-
-    let content = null;
+    const { properties, source } = popup?.features?.[0] ?? {};
 
     if (!properties) {
-      return content;
-    }
-
-    if (locale === 'es') {
-      content = properties.GEONAME_ES;
-    }
-
-    if (locale === 'fr') {
-      content = properties.GEONAME_FR;
+      return null;
     }
 
-    return content ?? properties.GEONAME;
+    return (
+      <div>
+        {HOVER_POPUP_ICON_BY_SOURCE[source] ? (
+          <Icon icon={HOVER_POPUP_ICON_BY_SOURCE[source]} className="mr-2 inline-block w-[14px]" />
+        ) : null}
+        {properties[HOVER_POPUP_PROPERTIES_BY_SOURCE[source]?.[locale]] ?? null}
+      </div>
+    );
   }, [locale, popup]);
 
   const closePopup = useCallback(() => {
@@ -157,7 +159,7 @@ const PopupContainer: FCWithMessages = () => {
           </Select>
         )}
         {isHoveredTooltip && (
-          <div className="font-mono text-sm text-gray-500">{hoverTooltipContent}</div>
+          <div className="font-mono text-sm text-black">{hoverTooltipContent}</div>
         )}
         {isClickedTooltip && selectedLayerId && <PopupItem id={selectedLayerId} />}
       </div>