Automatically pan to correct world envelope

client-next/src/components/MapView/MapView.tsx

@@ -1,4 +1,12 @@
-import { LngLat, Map, MapGeoJSONFeature, MapMouseEvent, NavigationControl } from 'react-map-gl/maplibre';
+import {
+  LngLat,
+  Map,
+  MapEvent,
+  MapGeoJSONFeature,
+  MapMouseEvent,
+  NavigationControl,
+  VectorTileSource,
+} from 'react-map-gl/maplibre';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { TripPattern, TripQuery, TripQueryVariables } from '../../gql/graphql.ts';
 import { NavigationMarkers } from './NavigationMarkers.tsx';
@@ -9,13 +17,6 @@ import { ContextMenuPopup } from './ContextMenuPopup.tsx';
 import { GeometryPropertyPopup } from './GeometryPropertyPopup.tsx';
 import DebugLayerControl from './LayerControl.tsx';
 
-// TODO: this should be configurable
-const initialViewState = {
-  latitude: 60.7554885,
-  longitude: 10.2332855,
-  zoom: 4,
-};
-
 const styleUrl = import.meta.env.VITE_DEBUG_STYLE_URL;
 
 type PopupData = { coordinates: LngLat; feature: MapGeoJSONFeature };
@@ -49,6 +50,17 @@ export function MapView({
       setShowPropsPopup({ coordinates: e.lngLat, feature: feature });
     }
   };
+  const panToWorldEnvelopeIfRequired = (e: MapEvent) => {
+    const map = e.target;
+    // if we are really far zoomed out and show the entire world it means that we are not starting
+    // in a location selected from the URL hash.
+    // in such a case we pan to the area that is specified in the stop's tile bounds, which is
+    // provided by the WorldEnvelopeService
+    if (map.getZoom() < 2) {
+      const source = map.getSource('stops') as VectorTileSource;
+      map.fitBounds(source.bounds, { maxDuration: 50, linear: true });
+    }
+  };
 
   return (
     <div className="map-container below-content">
@@ -57,7 +69,6 @@ export function MapView({
         mapLib={import('maplibre-gl')}
         // @ts-ignore
         mapStyle={styleUrl}
-        initialViewState={initialViewState}
         onDblClick={onMapDoubleClick}
         onContextMenu={(e) => {
           setShowContextPopup(e.lngLat);
@@ -69,6 +80,7 @@ export function MapView({
         // disable pitching and rotating the map
         touchPitch={false}
         dragRotate={false}
+        onLoad={panToWorldEnvelopeIfRequired}
       >
         <NavigationControl position="top-left" />
         <NavigationMarkers