Map interactions enhancements

src/components/details.page.tsx

@@ -1,16 +1,12 @@
-import Image from 'next/image';
 import { Attachement } from '@/api/settings';
 import { LatLngTuple } from 'leaflet';
-import { useTranslations } from 'next-intl';
 
 import { convertAttachementsToImages } from '@/lib/utils';
-import { Badge } from '@/components/ui/badge';
-import { Icons, propsForSVGPresentation } from '@/components/icons';
 
 import ButtonCenterView from './button-center-view';
 import ButtonClose from './button-close';
 import Carousel from './carousel';
-import MeterLength from './length';
+import { MetadataList } from './metadata-list';
 
 type Props = {
   content: {
@@ -35,7 +31,6 @@ type Props = {
 };
 
 export default function DetailsPageUI({ content }: Props) {
-  const t = useTranslations('details');
   return (
     <article>
       {content.attachments.length > 0 && (
@@ -62,67 +57,12 @@ export default function DetailsPageUI({ content }: Props) {
           )}
           <ButtonClose />
         </div>
-        <dl className="flex items-center gap-2 py-2">
-          {content.length !== undefined && (
-            <>
-              <dt>
-                <Icons.chevronsLeftRight
-                  className="text-primary"
-                  {...propsForSVGPresentation}
-                />
-                <span className="sr-only">{t('length')}</span>
-              </dt>
-              <dd className="mr-2">
-                <MeterLength length={content.length} />
-              </dd>
-            </>
-          )}
-          {content.descent !== undefined && (
-            <>
-              <dt>
-                <Icons.arrowDownRight
-                  className="text-primary"
-                  {...propsForSVGPresentation}
-                />
-                <span className="sr-only">{t('descent')}</span>
-              </dt>
-              <dd className="mr-2">
-                <MeterLength length={content.descent} />
-              </dd>
-            </>
-          )}
-          {content.flow && (
-            <>
-              <dt>
-                <Icons.waves
-                  className="text-primary"
-                  {...propsForSVGPresentation}
-                />
-                <span className="sr-only">{t('flow')}</span>
-              </dt>
-              <dd className="mr-2">{content.flow}</dd>
-            </>
-          )}
-          {content.type && (
-            <>
-              <dt>{content.type.category.label} :</dt>
-              <dd>
-                <Badge className="gap-2">
-                  {content.type.pictogram && (
-                    <Image
-                      loading="lazy"
-                      src={content.type.pictogram}
-                      width={24}
-                      height={24}
-                      alt=""
-                    />
-                  )}
-                  <span>{content.type.label}</span>
-                </Badge>
-              </dd>
-            </>
-          )}
-        </dl>
+        <MetadataList
+          length={content.length}
+          descent={content.descent}
+          flow={content.flow}
+          type={content.type}
+        />
       </header>
 
       <div dangerouslySetInnerHTML={{ __html: content.description }} />

src/components/map/geometry-item.tsx

@@ -1,19 +1,15 @@
 import { Fragment } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { Layer } from '@/api/settings';
 import { GeoJsonProperties, Geometry } from 'geojson';
-import { GeoJSONOptions } from 'leaflet';
+import { GeoJSONOptions, PathOptions } from 'leaflet';
 import { renderToStaticMarkup } from 'react-dom/server';
-import {
-  Popup as LeafletPopup,
-  Marker,
-  Polygon,
-  Polyline,
-  Tooltip,
-} from 'react-leaflet';
+import { Marker, Polygon, Polyline } from 'react-leaflet';
 
 import { Icons } from '@/components/icons';
 import { DefaultMarker } from '@/components/map/default-marker';
-import Popup from '@/components/map/popup';
+
+import { GeometryTooltip } from './geometry-tooltip';
 
 type Props = {
   geometry: Geometry;
@@ -23,41 +19,15 @@ type Props = {
   options: GeoJSONOptions;
 };
 
-const MetaData = ({
-  properties,
-  layer,
-}: {
-  properties: GeoJsonProperties;
-  layer: Layer;
-}) => {
-  if (properties === null || (!properties.name && !properties.category)) {
-    return null;
-  }
-  return (
-    <>
-      <Tooltip>{properties.name ?? properties.category}</Tooltip>
-      {layer.type !== undefined && layer.url && properties.id && (
-        <LeafletPopup>
-          <Popup
-            name={properties.name ?? properties.category}
-            description={properties.description}
-            attachments={properties.attachments}
-            type={layer.type}
-            id={properties.id}
-          />
-        </LeafletPopup>
-      )}
-    </>
-  );
-};
-
 export const GeometryItem = ({
   geometry,
   properties,
   id,
   layer,
   options = { style: {} },
 }: Props) => {
+  const params = useSearchParams();
+  const router = useRouter();
   if (geometry.type === 'GeometryCollection') {
     return (
       <>
@@ -75,6 +45,19 @@ export const GeometryItem = ({
     );
   }
 
+  const hasDetails = layer.type !== undefined && layer.url && properties?.id;
+  const pointerClassName = hasDetails ? '' : '!cursor-[unset]';
+
+  const featureEventHandler = {
+    click: () => {
+      if (hasDetails) {
+        router.push(
+          `/map/${layer?.type}/${properties?.id}?${params.toString()}`,
+        );
+      }
+    },
+  };
+
   if (geometry.type === 'Point' || geometry.type === 'MultiPoint') {
     const coordinatesAsMultiPoint =
       geometry.type === 'Point' ? [geometry.coordinates] : geometry.coordinates;
@@ -90,8 +73,9 @@ export const GeometryItem = ({
               key={`point-${id}-${index}`}
               position={[lng, lat]}
               icon={DefaultMarker(icon, 1)}
+              eventHandlers={featureEventHandler}
             >
-              <MetaData properties={properties} layer={layer} />
+              <GeometryTooltip properties={properties} layer={layer} />
             </Marker>
           );
         })}
@@ -129,9 +113,14 @@ export const GeometryItem = ({
                     weight: 10,
                     opacity: 0,
                   }}
-                  className={layer.type}
+                  eventHandlers={{
+                    mouseover: e => e.target.setStyle({ opacity: 0.5 }),
+                    mouseout: e => e.target.setStyle({ opacity: 0 }),
+                    ...featureEventHandler,
+                  }}
+                  className={`streams-hover ${pointerClassName}`}
                 >
-                  <MetaData properties={properties} layer={layer} />
+                  <GeometryTooltip properties={properties} layer={layer} />
                 </Polyline>
               </Fragment>
             );
@@ -140,9 +129,10 @@ export const GeometryItem = ({
             <Polyline
               positions={group.map(([lat, lng]) => [lng, lat])}
               pathOptions={options.style as GeoJSONOptions}
-              className={layer.type}
+              className={`${layer.type} ${pointerClassName}`}
+              eventHandlers={featureEventHandler}
             >
-              <MetaData properties={properties} layer={layer} />
+              <GeometryTooltip properties={properties} layer={layer} />
             </Polyline>
           );
         })}
@@ -164,9 +154,19 @@ export const GeometryItem = ({
               line.map<[number, number]>(([lat, lng]) => [lng, lat]),
             )}
             pathOptions={options.style as GeoJSONOptions}
+            eventHandlers={{
+              mouseover: e => e.target.setStyle({ fillOpacity: 0.8 }),
+              mouseout: e =>
+                e.target.setStyle({
+                  fillOpacity:
+                    (options.style as PathOptions)?.fillOpacity ?? 0.2,
+                }),
+              ...featureEventHandler,
+            }}
+            className={`transition-[fill-opacity] ${pointerClassName}`}
             pane="tilePane"
           >
-            <MetaData properties={properties} layer={layer} />
+            <GeometryTooltip properties={properties} layer={layer} />
           </Polygon>
         ))}
       </>

src/components/map/geometry-tooltip.tsx

@@ -0,0 +1,58 @@
+import Image from 'next/image';
+import { Layer } from '@/api/settings';
+import { GeoJsonProperties } from 'geojson';
+import { Tooltip } from 'react-leaflet';
+
+import { MetadataList } from '../metadata-list';
+
+export const GeometryTooltip = ({
+  properties,
+  layer,
+}: {
+  properties: GeoJsonProperties;
+  layer: Layer;
+}) => {
+  if (properties === null || (!properties.name && !properties.category)) {
+    return null;
+  }
+  if (layer.type === undefined || !layer.url || !properties.id) {
+    return <Tooltip>{properties.name ?? properties.category}</Tooltip>;
+  }
+  return (
+    <Tooltip
+      sticky
+      className="w-64 !overflow-hidden !whitespace-normal !rounded-xl !border-0 !p-0"
+    >
+      <div className="flex flex-col">
+        {properties.attachments?.[0]?.thumbnail && (
+          <Image
+            loading="lazy"
+            className="aspect-[4/3] h-auto w-auto object-cover transition-all group-hover:scale-105"
+            src={properties.attachments[0].thumbnail}
+            alt=""
+            width="400"
+            height="300"
+          />
+        )}
+        <div className="p-4">
+          <h3 className="line-clamp-2 text-lg font-bold">
+            {properties.name ?? properties.category}
+          </h3>
+          <MetadataList
+            descent={properties.descent}
+            flow={properties.flow}
+            length={properties.length}
+            type={properties.type}
+            small
+          />
+          {properties.description && (
+            <span
+              className="mb-1 line-clamp-2"
+              dangerouslySetInnerHTML={{ __html: properties.description }}
+            ></span>
+          )}
+        </div>
+      </div>
+    </Tooltip>
+  );
+};