Improve viewpoint hd feature

frontend/src/components/BackToMapButton/BackToMapButton.tsx

@@ -2,33 +2,37 @@ import { useCallback } from 'react';
 import { Map } from 'components/Icons/Map';
 import { FormattedMessage } from 'react-intl';
 import { cn } from 'services/utils/cn';
+import { ViewPoint } from 'components/Icons/ViewPoint';
 
 export const BackToMapButton: React.FC<
   React.ButtonHTMLAttributes<HTMLButtonElement> & {
     displayMap?: () => void;
     setMapId?: (key: string) => void;
+    mapId?: string;
   }
-> = ({ displayMap, setMapId, ...nativeButtonProps }) => {
+> = ({ displayMap, setMapId, mapId = 'default', ...nativeButtonProps }) => {
   const handleClick = useCallback(() => {
     displayMap?.();
-    setMapId?.('default');
-  }, [displayMap, setMapId]);
+    setMapId?.(mapId);
+  }, [displayMap, mapId, setMapId]);
+
+  const isDefaultMap = mapId === 'default';
 
   return (
     <button
       id="backToMapButton"
       type="button"
       className={cn(
-        `flex items-center fixed z-mapButton bottom-6 left-1/2 -translate-x-1/2 
-        py-3 px-4 
+        `flex items-center fixed z-mapButton bottom-6 left-1/2 -translate-x-1/2
+        py-3 px-4 gap-1
         shadow-sm rounded-full text-sm
         text-primary1 bg-white hover:bg-primary2 focus:bg-primary2 transition-all`,
       )}
       {...nativeButtonProps}
       onClick={handleClick}
     >
-      <FormattedMessage id="search.seeMap" />
-      <Map size={24} className="ml-1" />
+      <FormattedMessage id={isDefaultMap ? 'search.seeMap' : 'search.seeViewPoint'} />
+      {isDefaultMap ? <Map size={24} aria-hidden /> : <ViewPoint size={24} aria-hidden />}
     </button>
   );
 };

frontend/src/components/Icons/Map/index.tsx

@@ -1,21 +1,14 @@
-import React from 'react';
 import { GenericIconProps } from '../types';
 
-export const Map: React.FC<GenericIconProps> = ({
-  color = 'currentColor',
-  opacity,
-  className,
-  size,
-}) => {
+export const Map: React.FC<GenericIconProps> = ({ color = 'currentColor', size, ...props }) => {
   return (
     <svg
       width={size}
       height={size}
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      opacity={opacity}
+      {...props}
     >
       <path
         clipRule="evenodd"

frontend/src/components/Map/DetailsMap/DetailsMap.tsx

@@ -160,7 +160,7 @@
     if (visibleSection === 'report' && reportVisibility) {
       props.setMapId?.('default');
     }
   }, [visibleSection, props.setMapId]);
 
   const hasTitle = Boolean(props.title);
 
@@ -329,6 +329,13 @@
                 />
               </div>
             )}
+            {Number(props.viewPoints?.length) > 0 && (
+              <BackToMapButton
+                displayMap={props.displayMap}
+                setMapId={props.setMapId}
+                mapId={props.viewPoints?.[0]?.id}
+              />
+            )}
           </>
         )}
       </MapContainer>

frontend/src/components/Map/components/ViewPointHD/AnnotationItem.tsx

@@ -1,20 +1,46 @@
 import L from 'leaflet';
+import SVG from 'react-inlinesvg';
 import { GeoJsonProperties, Geometry } from 'geojson';
-import { Circle, CircleMarker, Polygon, Polyline, Tooltip, useMap } from 'react-leaflet';
+import { Circle, CircleMarker, Marker, Polygon, Polyline, Tooltip, useMap } from 'react-leaflet';
+import Image from 'next/image';
+import { TrekMarker } from 'components/Map/Markers/TrekMarker';
+import { optimizeAndDefineColor } from 'stylesheet';
 
 type Props = {
   geometry: Geometry;
   properties: GeoJsonProperties;
   id: string;
 };
 
+const Icon = ({ pictogramUri }: { pictogramUri: string }) => {
+  if (!pictogramUri) {
+    return null;
+  }
+  return pictogramUri.endsWith('.svg') ? (
+    <SVG src={pictogramUri} className="size-6" preProcessor={optimizeAndDefineColor()} />
+  ) : (
+    <Image loading="lazy" src={pictogramUri} width={16} height={16} alt="" />
+  );
+};
+
 const MetaData = ({ properties }: { properties: GeoJsonProperties }) => {
   if (properties === null || !properties.name) {
     return null;
   }
+  const pictogramUri = properties?.category?.pictogramUri;
+
   return (
     <Tooltip>
-      <span className="text-base">{properties.name}</span>
+      <span className="flex flex-wrap items-center gap-2">
+        {Boolean(properties.category?.label) && (
+          <>
+            {Boolean(pictogramUri) && <Icon pictogramUri={pictogramUri} />}
+            <span>{properties.category.label}</span>
+          </>
+        )}
+
+        <span>{properties.name}</span>
+      </span>
     </Tooltip>
   );
 };
@@ -39,10 +65,24 @@ export const AnnotationItem = ({ geometry, properties, id }: Props) => {
   if (geometry.type === 'Point' || geometry.type === 'MultiPoint') {
     const coordinatesAsMultiPoint =
       geometry.type === 'Point' ? [geometry.coordinates] : geometry.coordinates;
+
+    const pictogramUri = properties?.category?.pictogramUri;
+
     return (
       <>
         {coordinatesAsMultiPoint.map((coordinates, index) => {
           const [lat, lng] = coordinates;
+          if (pictogramUri) {
+            return (
+              <Marker
+                key={`point-${id}-${index}`}
+                position={[lng, lat]}
+                icon={TrekMarker(pictogramUri as string, 1)}
+              >
+                <MetaData properties={properties} />
+              </Marker>
+            );
+          }
           return (
             <CircleMarker
               className="annotation annotation-point"

frontend/src/modules/details/connector.ts

@@ -53,7 +53,7 @@ export const getDetails = async (
       getAccessibilities(language),
     ]);
 
-    const viewPoints = await adaptViewPoints(rawDetails.properties.view_points ?? []);
+    const viewPoints = await adaptViewPoints(language, rawDetails.properties.view_points ?? []);
 
     const [
       activity,

frontend/src/modules/outdoorSite/connector.ts

@@ -115,7 +115,10 @@ export const getOutdoorSiteDetails = async (
         : [],
     ]);
 
-    const viewPoints = await adaptViewPoints(rawOutdoorSiteDetails.properties.view_points ?? []);
+    const viewPoints = await adaptViewPoints(
+      language,
+      rawOutdoorSiteDetails.properties.view_points ?? [],
+    );
 
     return adaptOutdoorSiteDetails({
       rawOutdoorSiteDetails,

frontend/src/modules/poi/adapter.ts

@@ -7,16 +7,18 @@ import { adaptViewPoints } from 'modules/viewPoint/adapter';
 import { Poi, RawPoi } from './interface';
 
 export const adaptPoi = ({
+  language,
   rawPoisResults,
   poiTypes,
 }: {
+  language: string;
   rawPoisResults: RawPoi[];
   poiTypes: PoiTypeDictionnary;
 }): Promise<Poi[]> =>
   Promise.all(
     rawPoisResults.map(async rawPoi => {
       const viewPoints =
-        rawPoi.view_points?.length > 0 ? await adaptViewPoints(rawPoi.view_points) : [];
+        rawPoi.view_points?.length > 0 ? await adaptViewPoints(language, rawPoi.view_points) : [];
 
       return {
         id: `${rawPoi.id}`,

frontend/src/modules/poi/connector.ts

@@ -10,5 +10,5 @@ export const getPois = async (id: number, language: string, key = 'near_trek'):
     fetchPois({ language, [key]: id, page_size: pageSize }),
     getPoiTypes(language),
   ]);
-  return adaptPoi({ rawPoisResults: rawPois.results, poiTypes });
+  return adaptPoi({ language, rawPoisResults: rawPois.results, poiTypes });
 };

frontend/src/modules/viewPoint/adapter.ts

@@ -1,15 +1,40 @@
-import { getViewPointMetadata } from './connector';
-import { RawViewPoint, ViewPoint } from './interface';
+import { getViewPointCategories, getViewPointMetadata } from './connector';
+import { RawViewPoint, RawViewPointCategories, ViewPoint, ViewPointCategories } from './interface';
 
-export const adaptViewPoints = async (rawViewpoints: RawViewPoint[]): Promise<ViewPoint[]> => {
+export const adaptViewPointsCategories = (
+  viewPointsCategories: RawViewPointCategories[],
+): ViewPointCategories =>
+  Object.fromEntries(
+    viewPointsCategories.map(({ pictogram, ...item }) => [
+      item.id,
+      { ...item, pictogramUri: pictogram },
+    ]),
+  );
+
+export const adaptViewPoints = async (
+  language: string,
+  rawViewpoints: RawViewPoint[],
+): Promise<ViewPoint[]> => {
   if (rawViewpoints.length === 0) {
     return [];
   }
   const viewPoints = await Promise.all(
     rawViewpoints.map(async viewpoint => {
-      const metadata = await getViewPointMetadata(viewpoint.metadata_url);
+      const [metadata, categories] = await Promise.all([
+        getViewPointMetadata(viewpoint.metadata_url),
+        getViewPointCategories(language),
+      ]);
       return {
-        annotations: viewpoint.annotations,
+        annotations: {
+          ...viewpoint.annotations,
+          features: viewpoint.annotations.features.map(feature => ({
+            ...feature,
+            properties: {
+              ...feature.properties,
+              category: categories?.[feature.properties?.category] || null,
+            },
+          })),
+        },
         id: String(viewpoint.id),
         author: viewpoint.author,
         geometry: viewpoint.geometry ?? null,

frontend/src/modules/viewPoint/api.ts

@@ -1,5 +1,6 @@
 import { GeotrekAPI } from 'services/api/client';
-import { ViewPoint } from './interface';
+import { APIQuery, APIResponseForList } from 'services/api/interface';
+import { RawViewPointCategories, ViewPoint } from './interface';
 
 export const fetchViewPointMetadata = (url: string): Promise<ViewPoint['metadata']> => {
   try {
@@ -9,3 +10,10 @@ export const fetchViewPointMetadata = (url: string): Promise<ViewPoint['metadata
     throw e;
   }
 };
+
+export const fetchViewPointCategories = (
+  query: APIQuery,
+): Promise<APIResponseForList<RawViewPointCategories>> =>
+  GeotrekAPI.get('/annotation_category/', {
+    params: { ...query },
+  }).then(r => r.data);

frontend/src/modules/viewPoint/connector.ts

@@ -1,5 +1,6 @@
-import { fetchViewPointMetadata } from './api';
-import { ViewPoint } from './interface';
+import { adaptViewPointsCategories } from './adapter';
+import { fetchViewPointCategories, fetchViewPointMetadata } from './api';
+import { ViewPoint, ViewPointCategories } from './interface';
 
 export const getViewPointMetadata = async (url: string): Promise<ViewPoint['metadata'] | null> => {
   try {
@@ -8,3 +9,14 @@ export const getViewPointMetadata = async (url: string): Promise<ViewPoint['meta
     return null;
   }
 };
+
+export const getViewPointCategories = async (
+  language: string,
+): Promise<ViewPointCategories | null> => {
+  try {
+    const rawViewPointsCategories = await fetchViewPointCategories({ language });
+    return adaptViewPointsCategories(rawViewPointsCategories.results);
+  } catch (e) {
+    return null;
+  }
+};

frontend/src/modules/viewPoint/interface.ts

@@ -14,6 +14,12 @@ export interface RawViewPoint {
   geometry?: RawPointGeometry2D;
 }
 
+export interface RawViewPointCategories {
+  id: string;
+  name: string;
+  pictogram: string;
+}
+
 export interface ViewPoint {
   annotations: FeatureCollection;
   id: string;
@@ -32,3 +38,12 @@ export interface ViewPoint {
   thumbnailUrl: string;
   geometry: RawPointGeometry2D | null;
 }
+
+export interface ViewPointCategory {
+  id: string;
+  name: string;
+  pictogramUri: string;
+}
+export interface ViewPointCategories {
+  [id: string]: ViewPointCategory;
+}

frontend/src/translations/ca.json

@@ -43,7 +43,8 @@
     "resultsFound": "{count, plural, =0 {# resultat trobat} one {# resultat trobat} other {# resultats trobats}}",
     "resultsFoundShort": "{count, plural, =0 {# resultat} one {# resultat} other {# resultats}}",
     "forThe": "Per a",
-    "seeMap": "mostra el mapa",
+    "seeMap": "Mostra el mapa",
+    "seeViewPoint": "Mostra en imatge HD",
     "filter": "Filtrar",
     "closeFilters": "Tanca els filtres",
     "reload": "Tornar a carregar",

frontend/src/translations/de.json

@@ -44,6 +44,7 @@
     "resultsFoundShort": "{count, plural, =0 {# Ergebnis} one {# Ergebnis} other {# Ergebnisse}}",
     "forThe": "Für das",
     "seeMap": "Siehe die Karte",
+    "seeViewPoint": "Ansicht in HD-Bild",
     "filter": "Filter",
     "closeFilters": "Filter schließen",
     "reload": "Neuladen",

frontend/src/translations/en.json

@@ -47,6 +47,7 @@
     "resultsFoundShort": "{count, plural, =0 {# result} one {# result} other {# results}}",
     "forThe": "For the",
     "seeMap": "Display Map",
+    "seeViewPoint": "Display in HD picture",
     "filter": "Filter",
     "closeFilters": "Close filters",
     "reload": "Reload",

frontend/src/translations/es.json

@@ -43,7 +43,8 @@
     "resultsFound": "{count, plural, =0 {# resultado encontrado} one {# resultado encontrado} other {# resultados encontrados}}",
     "resultsFoundShort": "{count, plural, =0 {# resultado} one {# resultado} other {# resultados}}",
     "forThe": "Para",
-    "seeMap": "mostrar el mapa",
+    "seeMap": "Mostrar el mapa",
+    "seeViewPoint": "Mostrar en imagen HD",
     "filter": "Filtrar",
     "closeFilters": "Cerrar filtros",
     "reload": "Volver a cargar",

frontend/src/translations/fr.json

@@ -47,6 +47,7 @@
     "resultsFoundShort": "{count, plural, =0 {# résultat} one {# résultat} other {# résultats}}",
     "forThe": "Pour le",
     "seeMap": "Voir la carte",
+    "seeViewPoint": "Voir en image HD",
     "filter": "Filtrer",
     "closeFilters": "Fermer les filtres",
     "reload": "Recharger",

frontend/src/translations/it.json

@@ -47,6 +47,7 @@
     "resultsFoundShort": "{count, plural, =0 {# Nessun risultato} one {# risultato} other {# risultati}}",
     "forThe": "Per il",
     "seeMap": "Vedere la mappa",
+    "seeViewPoint": "Vedere in immagine HD",
     "filter": "Filtro",
     "closeFilters": "Chiudere i filtri",
     "reload": "Ricaricare",