fix: show whole trip on map load (#192)

* fix: show whole route on map load

* refactor: always show whole route if mapLegs is defined

* refactor: getMapBounds return type

* refactor: map component prop type

Author: mortennordseth

src/components/map/map.tsx

@@ -7,7 +7,7 @@ import { Button } from '@atb/components/button';
 import { MonoIcon } from '@atb/components/icon';
 import { ComponentText, useTranslation } from '@atb/translations';
 import { FocusScope } from '@react-aria/focus';
-import { ZOOM_LEVEL, defaultPosition } from './utils';
+import { ZOOM_LEVEL, defaultPosition, getMapBounds } from './utils';
 import { useMapInteractions } from './use-map-interactions';
 import { useFullscreenMap } from './use-fullscreen-map';
 import { useMapPin } from './use-map-pin';
@@ -17,25 +17,31 @@ import { MapLegType, Position } from './types';
 import { useMapTariffZones } from './use-map-tariff-zones';
 
 export type MapProps = {
-  position?: Position;
   layer?: string;
   onSelectStopPlace?: (id: string) => void;
-  mapLegs?: MapLegType[];
-  initialZoom?: number;
-};
+} & (
+  | {
+      position: Position;
+      initialZoom: number;
+    }
+  | {
+      mapLegs: MapLegType[];
+    }
+  | {}
+);
 
-export function Map({
-  position = defaultPosition,
-  layer,
-  onSelectStopPlace,
-  mapLegs,
-  initialZoom = ZOOM_LEVEL,
-}: MapProps) {
+export function Map({ layer, onSelectStopPlace, ...props }: MapProps) {
   const mapWrapper = useRef<HTMLDivElement>(null);
   const mapContainer = useRef<HTMLDivElement>(null);
   const map = useRef<mapboxgl.Map>();
   const { t } = useTranslation();
 
+  const mapLegs = hasMapLegs(props) ? props.mapLegs : undefined;
+  const { position, initialZoom } = hasInitialPosition(props)
+    ? props
+    : { position: defaultPosition, initialZoom: ZOOM_LEVEL };
+  const bounds = mapLegs ? getMapBounds(mapLegs) : undefined;
+
   useEffect(() => {
     if (!mapContainer.current) return;
 
@@ -48,6 +54,7 @@ export function Map({
       style: mapboxData.style,
       center: position,
       zoom: initialZoom,
+      bounds, // If bounds is specified, it overrides center and zoom constructor options.
     });
 
     return () => map.current?.remove();
@@ -62,16 +69,6 @@ export function Map({
   useMapLegs(map, mapLegs);
   useMapTariffZones(map);
 
-  useEffect(() => {
-    if (map.current) {
-      map.current.flyTo({
-        center: position,
-        zoom: initialZoom,
-        speed: 2,
-      });
-    }
-  }, [position, initialZoom]);
-
   return (
     <div className={style.map} aria-hidden="true">
       <Button
@@ -122,3 +119,13 @@ export function Map({
     </div>
   );
 }
+
+function hasInitialPosition(
+  a: any,
+): a is { position: Position; initialZoom: number } {
+  return a.position && a.initialZoom;
+}
+
+function hasMapLegs(a: any): a is { mapLegs: MapLegType[] } {
+  return a.mapLegs;
+}

src/components/map/utils.ts

@@ -91,3 +91,35 @@ const findIndex = (
     { index: -1, distance: 100 },
   ).index;
 };
+
+export const getMapBounds = (
+  mapLegs: MapLegType[],
+): [[number, number], [number, number]] => {
+  const lineLongitudes = mapLegs
+    .map((leg) => leg.points.map((point) => point[0]))
+    .flat();
+  const lineLatitudes = mapLegs
+    .map((leg) => leg.points.map((point) => point[1]))
+    .flat();
+
+  const westernMost = Math.min(...lineLongitudes);
+  const easternMost = Math.max(...lineLongitudes);
+  const northernMost = Math.max(...lineLatitudes);
+  const southernMost = Math.min(...lineLatitudes);
+
+  // Dividing by 3 here is arbitrary, seems to work
+  // like a fine value for "padding"
+  const latPadding = (northernMost - southernMost) / 3;
+  const lonPadding = (westernMost - easternMost) / 3;
+
+  const sw: [number, number] = [
+    southernMost - latPadding,
+    westernMost + lonPadding,
+  ];
+  const ne: [number, number] = [
+    northernMost + latPadding,
+    easternMost - lonPadding,
+  ];
+
+  return [sw, ne];
+};

src/page-modules/assistant/details/index.tsx

@@ -47,14 +47,7 @@ export function AssistantDetails({ tripPattern }: AssistantDetailsProps) {
         <DetailsHeader tripPattern={tripPattern} />
       </div>
       <div className={style.mapContainer}>
-        <Map
-          position={{
-            lon: tripPattern.legs[0].fromPlace.longitude,
-            lat: tripPattern.legs[0].fromPlace.latitude,
-          }}
-          initialZoom={13.5}
-          mapLegs={mapLegs}
-        />
+        <Map mapLegs={mapLegs} />
         <div className={style.tripDetails}>
           <div className={style.duration}>
             <MonoIcon icon="time/Duration" />