Viewpoints HD to Trek and OutdoorSite detail page

frontend/cache.js

@@ -37,6 +37,7 @@ module.exports = [
         && !url.host.includes('stamen-tiles')
         && !url.host.includes('wxs.ign.fr')
         && !url.host.includes('data.geopf.fr')
+        && !url.pathname.startsWith('/api/hdviewpoint/drf/hdviewpoints/')
         && request.destination === 'image'
     },
     handler: 'NetworkFirst',

frontend/config/details.json

@@ -7,6 +7,12 @@
         "anchor": true,
         "order": 10
       },
+      {
+        "name": "medias",
+        "display": true,
+        "anchor": false,
+        "order": 15
+      },
       { 
         "name": "itinerancySteps",
         "display": true,
@@ -170,6 +176,12 @@
         "anchor": true,
         "order": 10
       },
+      {
+        "name": "medias",
+        "display": true,
+        "anchor": false,
+        "order": 15
+      },
       { 
         "name": "poi",
         "display": true,

frontend/package.json

@@ -54,6 +54,7 @@
     "html-react-parser": "^2.0.0",
     "leaflet": "^1.7.1",
     "leaflet-boundary-canvas": "^1.0.0",
+    "leaflet-rastercoords": "^1.0.5",
     "leaflet.locatecontrol": "0.74.0",
     "leaflet.offline": "^3.0.1",
     "next": "^13.1.6",

frontend/src/components/BackToMapButton/BackToMapButton.tsx

@@ -0,0 +1,34 @@
+import { useCallback } from 'react';
+import { Map } from 'components/Icons/Map';
+import { FormattedMessage } from 'react-intl';
+import { cn } from 'services/utils/cn';
+
+export const BackToMapButton: React.FC<
+  React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    displayMap?: () => void;
+    setMapId?: (key: string) => void;
+  }
+> = ({ displayMap, setMapId, ...nativeButtonProps }) => {
+  const handleClick = useCallback(() => {
+    displayMap?.();
+    setMapId?.('default');
+  }, [displayMap, setMapId]);
+
+  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 
+        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" />
+    </button>
+  );
+};

frontend/src/components/BackToMapButton/index.ts

@@ -0,0 +1 @@
+export { BackToMapButton } from './BackToMapButton';

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { GenericIconProps } from '../types';
+
+export const ViewPoint: React.FC<GenericIconProps> = ({
+  color = 'currentColor',
+  opacity,
+  className,
+  size = 24,
+}) => {
+  return (
+    <svg
+      width={size}
+      className={className}
+      opacity={opacity}
+      viewBox="0 0 32 40"
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill={color}
+        d="M22.915 31.041H3.362a2.406 2.406 0 0 1-2.404-2.403V9.084a2.406 2.406 0 0 1 2.404-2.403h14.159V2.484A1.521 1.521 0 0 1 19.034.958h10.482a1.528 1.528 0 0 1 1.525 1.526v10.482a1.521 1.521 0 0 1-1.525 1.513h-4.198v14.159a2.406 2.406 0 0 1-2.403 2.403zm-6.2-11.737c.132 0 .26.053.353.147l4.989 4.987V14.48c-.863-.013-2.079.044-2.83 0a1.543 1.543 0 0 1-1.706-1.725c-.043-.748.012-1.95 0-2.811H4.22V22.01l4.345-4.346a.5.5 0 0 1 .708.001l4.424 4.45 2.663-2.663a.498.498 0 0 1 .354-.147zm5.844-5.825h6.957a.52.52 0 0 0 .525-.513V2.484a.526.526 0 0 0-.525-.526H19.034a.52.52 0 0 0-.513.526c-.007.871.007 7.455 0 8.155.055.376-.163 2.564.207 2.736a1.4 1.4 0 0 0 .521.104c.884-.01 2.416.003 3.31 0zm-8.862 3.94c-2.313 0-2.313-3.47 0-3.47s2.313 3.47 0 3.47zm9-6.062H21.14a.49.49 0 0 1-.184-.036h-.001a.508.508 0 0 1-.275-.273.521.521 0 0 1-.037-.186V9.304c.012-.654.987-.654 1 0v.346l4.57-4.57h-.347c-.654-.012-.654-.987 0-1l1.57.001a.501.501 0 0 1 .484.494v1.559c-.013.654-.988.654-1 0v-.346l-4.57 4.57h.346c.654.012.654.987 0 1z"
+      />
+    </svg>
+  );
+};