feat: add steps circle layers on trip map

antoine-giret · Mar 10, 2024 · aefdd72 · aefdd72
1 parent b29e14d
commit aefdd72
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 11 deletions.
diff --git a/src/components/map.tsx b/src/components/map.tsx
@@ -1,4 +1,4 @@
-import { Box, Text } from '@chakra-ui/react';
+import { Box, Text, useMediaQuery } from '@chakra-ui/react';
 import { Map as MaplibreMap, NavigationControl } from 'maplibre-gl';
 import React, { useEffect, useState } from 'react';
 
@@ -8,6 +8,7 @@ const mapId = 'trips-map';
 
 export function TripsMap(): JSX.Element {
   const [initialized, setInitialized] = useState(false);
+  const [isDisplayingInBrowser] = useMediaQuery('(display-mode: browser)');
 
   useEffect(() => {
     setInitialized(true);
@@ -25,7 +26,7 @@ export function TripsMap(): JSX.Element {
         bounds,
         fitBoundsOptions: { padding: 50 },
         scrollZoom: false,
-        dragPan: false,
+        dragPan: isDisplayingInBrowser,
         pitchWithRotate: false,
       });
 

diff --git a/src/templates/trip/map.tsx b/src/templates/trip/map.tsx
@@ -1,4 +1,4 @@
-import { Box, Text } from '@chakra-ui/react';
+import { Box, Text, useMediaQuery } from '@chakra-ui/react';
 import { Map as MaplibreMap, NavigationControl } from 'maplibre-gl';
 import React, { useEffect, useState } from 'react';
 
@@ -8,6 +8,7 @@ const mapId = 'trip-map';
 
 function TripMap({ trip: { color, bounds, title, steps } }: { trip: Trip }): JSX.Element {
   const [initialized, setInitialized] = useState(false);
+  const [isDisplayingInBrowser] = useMediaQuery('(display-mode: browser)');
 
   useEffect(() => {
     setInitialized(true);
@@ -21,14 +22,51 @@ function TripMap({ trip: { color, bounds, title, steps } }: { trip: Trip }): JSX
         bounds,
         fitBoundsOptions: { padding: 50 },
         scrollZoom: false,
-        dragPan: false,
+        dragPan: isDisplayingInBrowser,
         pitchWithRotate: false,
       });
 
       map.addControl(new NavigationControl({ showZoom: true }));
 
       map.on('load', () => {
-        map.addSource('trips', {
+        map.addSource('trip-steps', {
+          type: 'geojson',
+          data: {
+            type: 'FeatureCollection',
+            features:
+              steps.length > 0
+                ? steps.reduce<GeoJSON.Feature<GeoJSON.Point>[]>(
+                    (res, { simplifiedGeometry }) => {
+                      res.push({
+                        type: 'Feature',
+                        geometry: {
+                          type: 'Point',
+                          coordinates:
+                            simplifiedGeometry.coordinates[
+                              simplifiedGeometry.coordinates.length - 1
+                            ],
+                        },
+                        properties: { color },
+                      });
+
+                      return res;
+                    },
+                    [
+                      {
+                        type: 'Feature',
+                        geometry: {
+                          type: 'Point',
+                          coordinates: steps[0].simplifiedGeometry.coordinates[0],
+                        },
+                        properties: { color },
+                      },
+                    ],
+                  )
+                : [],
+          },
+        });
+
+        map.addSource('trip', {
           type: 'geojson',
           data: {
             type: 'FeatureCollection',
@@ -42,28 +80,43 @@ function TripMap({ trip: { color, bounds, title, steps } }: { trip: Trip }): JSX
 
         map.addLayer(
           {
-            id: 'trips',
+            id: 'trip-steps',
+            type: 'circle',
+            source: 'trip-steps',
+            paint: {
+              'circle-color': ['get', 'color'],
+              'circle-radius': 5,
+              'circle-stroke-width': 2,
+              'circle-stroke-color': '#fff',
+            },
+          },
+          'Ocean labels',
+        );
+
+        map.addLayer(
+          {
+            id: 'trip',
             type: 'line',
-            source: 'trips',
+            source: 'trip',
             paint: {
               'line-color': ['get', 'color'],
               'line-width': 5,
             },
           },
-          'Ocean labels',
+          'trip-steps',
         );
 
         map.addLayer(
           {
-            id: 'trips-border',
+            id: 'trip-border',
             type: 'line',
-            source: 'trips',
+            source: 'trip',
             paint: {
               'line-color': '#fff',
               'line-width': 9,
             },
           },
-          'trips',
+          'trip',
         );
       });
     }