SKY30-404 - Add a GFW layer

frontend/.env.default

@@ -3,6 +3,7 @@ NEXT_PUBLIC_GOOGLE_ANALYTICS=
 
 NEXT_PUBLIC_MAPBOX_API_TOKEN=
 HUBSPOT_TOKEN=
+NEXT_PUBLIC_GLOBAL_FISHING_WATCH_TOKEN=
 
 LOCALAZY_CDN=
 

frontend/src/components/map/index.tsx

@@ -135,6 +135,33 @@ export const Map: FC<CustomMapProps> = ({
         mapStyle="mapbox://styles/skytruth/clnud2d3100nr01pl3b4icpyw"
         dragRotate={false}
         touchZoomRotate={false}
+        transformRequest={(url) => {
+          // Global Fishing Watch tilers require authorization token and we're also passing the past
+          // 12 months as a parameter
+          if (url.startsWith('https://gateway.api.globalfishingwatch.org/')) {
+            const endDate = new Date();
+            const startDate = new Date(endDate);
+            startDate.setMonth(endDate.getMonth() - 12);
+
+            const formatDate = (date: Date): string => {
+              return date.toISOString().split('T')[0];
+            };
+
+            const newURL = url.replace(
+              '{{LAST_YEAR}}',
+              `${formatDate(startDate)},${formatDate(endDate)}`
+            );
+
+            return {
+              url: newURL,
+              headers: {
+                Authorization: `Bearer ${process.env.NEXT_PUBLIC_GLOBAL_FISHING_WATCH_TOKEN}`,
+              },
+            };
+          }
+
+          return null;
+        }}
         {...mapboxProps}
         {...localViewState}
       >