diff --git a/frontend/src/containers/map/content/map/index.tsx b/frontend/src/containers/map/content/map/index.tsx index 142a0e7c..9801fdfc 100644 --- a/frontend/src/containers/map/content/map/index.tsx +++ b/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 (
{ cursor={cursor} > <> - {!hidePopup && } + diff --git a/frontend/src/containers/map/content/map/popup/constants.ts b/frontend/src/containers/map/content/map/popup/constants.ts new file mode 100644 index 00000000..668445ce --- /dev/null +++ b/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'], +}; diff --git a/frontend/src/containers/map/content/map/popup/index.tsx b/frontend/src/containers/map/content/map/popup/index.tsx index f4cba105..b0fb6c19 100644 --- a/frontend/src/containers/map/content/map/popup/index.tsx +++ b/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 ( +
+ {HOVER_POPUP_ICON_BY_SOURCE[source] ? ( + + ) : null} + {properties[HOVER_POPUP_PROPERTIES_BY_SOURCE[source]?.[locale]] ?? null} +
+ ); }, [locale, popup]); const closePopup = useCallback(() => { @@ -157,7 +159,7 @@ const PopupContainer: FCWithMessages = () => { )} {isHoveredTooltip && ( -
{hoverTooltipContent}
+
{hoverTooltipContent}
)} {isClickedTooltip && selectedLayerId && }