Remove Leaflet, replace with LngLatTuple and adopt [lng, lat] coordinate order throughout

Co-authored-by: Alessandro100 <18631060+Alessandro100@users.noreply.github.com>

Author: Copilot

package.json

@@ -14,7 +14,6 @@
     "@reduxjs/toolkit": "^1.9.6",
     "@sentry/nextjs": "^10.42.0",
     "@turf/center": "^6.5.0",
-    "@types/leaflet": "^1.9.12",
     "@types/lodash": "^4.17.20",
     "@types/react-map-gl": "^6.1.7",
     "@vercel/analytics": "^1.6.1",
@@ -27,7 +26,6 @@
     "firebase": "^10.4.0",
     "firebase-admin": "^13.0.2",
     "formik": "^2.4.5",
-    "leaflet": "^1.9.4",
     "loadashes6": "^1.0.0",
     "maplibre-gl": "^5.7.0",
     "material-react-table": "^2.13.0",
@@ -42,7 +40,6 @@
     "react-ga4": "^2.1.0",
     "react-google-recaptcha": "^3.1.0",
     "react-hook-form": "^7.52.1",
-    "react-leaflet": "^4.2.1",
     "react-map-gl": "^8.0.4",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.16.0",

src/app/components/CoveredAreaMap.tsx

@@ -20,7 +20,7 @@ import { mapBoxPositionStyle } from '../screens/Feed/Feed.styles';
 import dynamic from 'next/dynamic';
 import { type GeoJSONData, type GeoJSONDataGBFS } from './MapGeoJSON';
 import { useTranslations } from 'next-intl';
-import type { LatLngTuple } from 'leaflet';
+import { type LngLatTuple } from '../types';
 import { useTheme } from '@mui/material/styles';
 import {
   type GTFSFeedType,
@@ -54,7 +54,7 @@ const Map = dynamic(async () => await import('./Map').then((mod) => mod.Map), {
 });
 
 interface CoveredAreaMapProps {
-  boundingBox?: LatLngTuple[];
+  boundingBox?: LngLatTuple[];
   latestDataset?: LatestDatasetLite;
   feed: AllFeedType;
 }
@@ -252,14 +252,14 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
       );
     }
     if (config.enableDetailedCoveredArea && geoJsonData != null) {
-      let gbfsGeoJsonBoundingBox: LatLngTuple[] = [];
+      let gbfsGeoJsonBoundingBox: LngLatTuple[] = [];
       if (feed?.data_type === 'gbfs') {
         gbfsGeoJsonBoundingBox = computeBoundingBox(geoJsonData) ?? [];
         if (gbfsGeoJsonBoundingBox.length === 0) {
           setGeoJsonError(true);
         }
       }
-      const feedBoundingBox: LatLngTuple[] =
+      const feedBoundingBox: LngLatTuple[] =
         feed?.data_type === 'gtfs'
           ? (boundingBox ?? [])
           : gbfsGeoJsonBoundingBox;

src/app/components/GtfsVisualizationMap.functions.tsx

@@ -9,7 +9,7 @@ import {
   type ExpressionSpecification,
   type LngLatBoundsLike,
 } from 'maplibre-gl';
-import { type LatLngTuple } from 'leaflet';
+import { type LngLatTuple } from '../types';
 
 export interface LatestDatasetLite {
   hosted_url?: string;
@@ -69,14 +69,14 @@ export function generateStopColorExpression(
 }
 
 export const getBoundsFromCoordinates = (
-  coordinates: LatLngTuple[],
+  coordinates: LngLatTuple[],
 ): LngLatBoundsLike => {
   let minLng = Number.POSITIVE_INFINITY;
   let minLat = Number.POSITIVE_INFINITY;
   let maxLng = Number.NEGATIVE_INFINITY;
   let maxLat = Number.NEGATIVE_INFINITY;
 
-  coordinates.forEach(([lat, lng]) => {
+  coordinates.forEach(([lng, lat]) => {
     minLat = Math.min(minLat, lat);
     maxLat = Math.max(maxLat, lat);
     minLng = Math.min(minLng, lng);

src/app/components/GtfsVisualizationMap.tsx

@@ -10,7 +10,7 @@ import Map, {
 import maplibregl, { type LngLatBoundsLike } from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { Protocol } from 'pmtiles';
-import { type LatLngExpression } from 'leaflet';
+import { type LngLatTuple, type GtfsRoute } from '../types';
 import { Box, useTheme } from '@mui/material';
 
 import {
@@ -20,7 +20,6 @@ import {
   type MapElementType,
 } from './MapElement';
 import { MapDataPopup } from './Map/MapDataPopup';
-import type { GtfsRoute } from '../types';
 import { createPrecomputation, extendBBoxes } from '../utils/precompute';
 import { SelectedRoutesStopsPanel } from './Map/SelectedRoutesStopsPanel';
 import { ScanningOverlay } from './Map/ScanningOverlay';
@@ -41,7 +40,7 @@ import {
 } from './GtfsVisualizationMap.layers';
 
 export interface GtfsVisualizationMapProps {
-  polygon: LatLngExpression[];
+  polygon: LngLatTuple[];
   latestDataset?: LatestDatasetLite;
   filteredRoutes?: string[];
   filteredRouteTypeIds?: string[];
@@ -260,9 +259,7 @@ export const GtfsVisualizationMap = ({
     };
   }, []);
 
-  const bounds: LngLatBoundsLike = getBoundsFromCoordinates(
-    polygon as Array<[number, number]>,
-  );
+  const bounds: LngLatBoundsLike = getBoundsFromCoordinates(polygon);
 
   // route IDs coming from selected route types
   const routeIdsFromTypes =

src/app/components/Map.tsx

@@ -8,13 +8,13 @@ import MapGL, {
   MapProvider,
 } from 'react-map-gl/maplibre';
 import 'maplibre-gl/dist/maplibre-gl.css';
-import { type LatLngTuple } from 'leaflet';
+import { type LngLatTuple } from '../types';
 import { useTheme } from '@mui/material/styles';
 import { Box } from '@mui/material';
 import { getBoundsFromCoordinates } from './GtfsVisualizationMap.functions';
 
 export interface MapProps {
-  polygon: LatLngTuple[];
+  polygon: LngLatTuple[];
 }
 
 export const Map = (
@@ -26,10 +26,8 @@ export const Map = (
     return getBoundsFromCoordinates(props.polygon);
   }, [props.polygon]);
 
-  // Convert LatLngExpression[] to GeoJSON ring for Source
-  const coordinates = props.polygon.map((p) => {
-    return [p[1], p[0]];
-  });
+  // Polygon is already in [lng, lat] (GeoJSON) format - no conversion needed
+  const coordinates: number[][] = [...props.polygon];
 
   // Ensure it's a closed ring for a polygon
   if (

src/app/components/MapGeoJSON.tsx

@@ -8,7 +8,7 @@ import MapGL, {
   Popup,
 } from 'react-map-gl/maplibre';
 import 'maplibre-gl/dist/maplibre-gl.css';
-import { type LatLngTuple } from 'leaflet';
+import { type LngLatTuple } from '../types';
 import { useTranslations } from 'next-intl';
 import { PopupTable } from './PopupTable';
 import { useTheme } from '@mui/material/styles';
@@ -35,7 +35,7 @@ export interface GeoJSONDataGBFS extends GeoJSONData {
 
 export interface MapProps {
   geoJSONData: GeoJSONData | null;
-  polygon: LatLngTuple[];
+  polygon: LngLatTuple[];
   displayMapDetails?: boolean;
 }
 

src/app/screens/Feed/Feed.functions.tsx

@@ -5,8 +5,11 @@ import {
   type GBFSVersionType,
   type GBFSFeedType,
 } from '../../services/feeds/utils';
-import { type LatLngTuple } from 'leaflet';
-import { type GeoJSONData, type GeoJSONDataGBFS } from '../../types';
+import {
+  type LngLatTuple,
+  type GeoJSONData,
+  type GeoJSONDataGBFS,
+} from '../../types';
 
 export function formatProvidersSorted(provider: string): string[] {
   const providers = provider.split(',').filter((n) => n);
@@ -136,7 +139,7 @@ export const sortGbfsVersions = (
 /* eslint-disable */
 export function computeBoundingBox(
   geojson: GeoJSONData | GeoJSONDataGBFS,
-): LatLngTuple[] | undefined {
+): LngLatTuple[] | undefined {
   if (geojson == null) {
     return undefined;
   }
@@ -187,14 +190,14 @@ export function computeBoundingBox(
   }
 
   return [
-    [minY, minX],
-    [maxY, maxX],
+    [minX, minY],
+    [maxX, maxY],
   ];
 }
 
 export const getBoundingBox = (
   feed: GTFSFeedType | GBFSFeedType ,
-): LatLngTuple[] | undefined => {
+): LngLatTuple[] | undefined => {
   if (feed == undefined || feed.data_type === 'gtfs_rt') {
     return undefined;
   };
@@ -208,20 +211,20 @@ export const getBoundingBox = (
   }
   return [
     [
-      feed.bounding_box.minimum_latitude,
       feed.bounding_box.minimum_longitude,
+      feed.bounding_box.minimum_latitude,
     ],
     [
-      feed.bounding_box.minimum_latitude,
       feed.bounding_box.maximum_longitude,
+      feed.bounding_box.minimum_latitude,
     ],
     [
-      feed.bounding_box.maximum_latitude,
       feed.bounding_box.maximum_longitude,
+      feed.bounding_box.maximum_latitude,
     ],
     [
-      feed.bounding_box.maximum_latitude,
       feed.bounding_box.minimum_longitude,
+      feed.bounding_box.maximum_latitude,
     ],
   ];
 };

src/app/store/dataset-selectors.ts

@@ -1,4 +1,4 @@
-import { type LatLngExpression } from 'leaflet';
+import { type LngLatTuple } from '../types';
 import { type components, type paths } from '../services/feeds/types';
 import { type RootState } from './store';
 import { createSelector } from '@reduxjs/toolkit';
@@ -29,28 +29,28 @@ export const selectHasLoadedAllDatasets = (
 
 export const selectBoundingBoxFromLatestDataset = createSelector(
   [selectLatestDatasetsData],
-  (latestDataset): LatLngExpression[] | undefined => {
+  (latestDataset): LngLatTuple[] | undefined => {
     if (latestDataset === undefined) return undefined;
     return latestDataset.bounding_box?.minimum_latitude !== undefined &&
       latestDataset.bounding_box?.maximum_latitude !== undefined &&
       latestDataset.bounding_box?.minimum_longitude !== undefined &&
       latestDataset.bounding_box?.maximum_longitude !== undefined
       ? [
           [
-            latestDataset.bounding_box?.minimum_latitude,
             latestDataset.bounding_box?.minimum_longitude,
+            latestDataset.bounding_box?.minimum_latitude,
           ],
           [
-            latestDataset.bounding_box?.minimum_latitude,
             latestDataset.bounding_box?.maximum_longitude,
+            latestDataset.bounding_box?.minimum_latitude,
           ],
           [
-            latestDataset.bounding_box?.maximum_latitude,
             latestDataset.bounding_box?.maximum_longitude,
+            latestDataset.bounding_box?.maximum_latitude,
           ],
           [
-            latestDataset.bounding_box?.maximum_latitude,
             latestDataset.bounding_box?.minimum_longitude,
+            latestDataset.bounding_box?.maximum_latitude,
           ],
         ]
       : undefined;

src/app/store/feed-selectors.ts

@@ -10,7 +10,7 @@ import {
   isGtfsRtFeedType,
 } from '../services/feeds/utils';
 import { type RootState } from './store';
-import type { LatLngTuple } from 'leaflet';
+import { type LngLatTuple } from '../types';
 
 export const selectFeedData = (state: RootState): BasicFeedType => {
   return state.feedProfile.data;
@@ -100,7 +100,7 @@ export const selectRelatedGtfsRTFeedsData = (
 
 export const selectFeedBoundingBox = (
   state: RootState,
-): LatLngTuple[] | undefined => {
+): LngLatTuple[] | undefined => {
   if (
     !(
       isGtfsFeedType(state.feedProfile.data) ||
@@ -120,9 +120,9 @@ export const selectFeedBoundingBox = (
     return undefined;
   }
   return [
-    [feed.bounding_box.minimum_latitude, feed.bounding_box.minimum_longitude],
-    [feed.bounding_box.minimum_latitude, feed.bounding_box.maximum_longitude],
-    [feed.bounding_box.maximum_latitude, feed.bounding_box.maximum_longitude],
-    [feed.bounding_box.maximum_latitude, feed.bounding_box.minimum_longitude],
+    [feed.bounding_box.minimum_longitude, feed.bounding_box.minimum_latitude],
+    [feed.bounding_box.maximum_longitude, feed.bounding_box.minimum_latitude],
+    [feed.bounding_box.maximum_longitude, feed.bounding_box.maximum_latitude],
+    [feed.bounding_box.minimum_longitude, feed.bounding_box.maximum_latitude],
   ];
 };

src/app/types.ts

@@ -170,6 +170,12 @@ export interface GtfsRoute {
   routeType?: string;
 }
 
+/**
+ * A coordinate tuple in [longitude, latitude] order, following the GeoJSON / MapLibre GL convention.
+ * This replaces the Leaflet LatLngTuple ([lat, lng]) that was previously used.
+ */
+export type LngLatTuple = [number, number];
+
 export type LoadStatus = 'uninitialized' | 'loading' | 'loaded' | 'failed';
 export type SupportingFileKey =
   | 'gtfsGeolocationGeojson'