Merge pull request #953 from cartesapp/motis-v2

Motis v2

Author: laem

.env

@@ -1,5 +1,5 @@
 NEXT_PUBLIC_GTFS_SERVER_URL = "https://serveur.cartes.app/gtfs"
 NEXT_PUBLIC_PMTILES_SERVER_URL = "https://serveur.cartes.app/pmtiles"
-NEXT_PUBLIC_MOTIS_SERVER_URL = "https://serveur.cartes.app"
+NEXT_PUBLIC_MOTIS_SERVER_URL = "https://serveur.cartes.app/motis2"
 NEXT_PUBLIC_PHOTON_SERVER_URL = "https://serveur.cartes.app/photon"
 NEXT_PUBLIC_BASE_DOMAIN = "cartes.app"

app/Content.tsx

@@ -406,7 +406,7 @@ export default function Content(props) {
 					searchParams,
 					setSnap,
 					close: () => {
-						setSearchParams({ allez: undefined, mode: undefined })
+						itinerary.reset()
 						itinerary.setIsItineraryMode(false)
 					},
 					state,

app/Map.tsx

@@ -14,9 +14,7 @@ import useHoverOnMapFeatures from './useHoverOnMapFeatures'
 import useTerrainControl from './useTerrainControl'
 
 import useMapContent from '@/components/map/useMapContent'
-import getBbox from '@turf/bbox'
 import { styled } from 'next-yak'
-import { useLocalStorage } from 'usehooks-ts'
 import CenteredCross from './CenteredCross'
 import MapComponents from './MapComponents'
 import MapCompassArrow from './boussole/MapCompassArrow'
@@ -37,6 +35,7 @@ import useDrawItinerary from './itinerary/useDrawItinerary'
 import { polylineObjectToLineString } from './transport/decodeTransportsData'
 import { addDefaultColor } from './transport/enrichTransportsData'
 import { computeCenterFromBbox } from './utils'
+import useCenterMapOnState from './effects/useCenterMapOnState'
 
 if (process.env.NEXT_PUBLIC_MAPTILER == null) {
 	throw new Error('You have to configure env NEXT_PUBLIC_MAPTILER, see README')
@@ -92,15 +91,6 @@ export default function Map(props) {
 
 	const mapContainerRef = useRef(null)
 	const stepsLength = state.filter((step) => step?.allezValue).length
-	const [autoPitchPreference, setAutoPitchPreference] = useLocalStorage(
-		'autoPitchPreference',
-		null,
-		{
-			initializeWithValue: false,
-		}
-	)
-
-	const autoPitchPreferenceIsNo = autoPitchPreference === 'no'
 
 	const style = useMemo(() => getStyle(styleKey), [styleKey]),
 		styleUrl = style.url
@@ -323,57 +313,7 @@ export default function Map(props) {
 
 	useHoverOnMapFeatures(map)
 
-	/*
-	 *
-	 * Fly to hook
-	 *
-	 * */
-	useEffect(() => {
-		if (!map || !vers) return
-		if (!(vers.geojson || vers.center)) return
-		if (stepsLength > 1) return
-
-		const tailoredZoom = //TODO should be defined by the feature's polygon if any
-			/* ['city'].includes(vers.choice.type)
-			? 12
-			: */
-			Math.max(15, zoom)
-		console.log(
-			'blue',
-			'will fly to in after OSM download from vers marker',
-			vers,
-			tailoredZoom
-		)
-		if (vers.geojson) {
-			const bbox = getBbox(vers.geojson)
-			map.fitBounds(bbox, {
-				maxZoom: 17.5, // We don't want to zoom at door level for a place, just at street level
-			})
-		} else {
-			if (!autoPitchPreferenceIsNo)
-				setAutoPitchPreference(Math.round(new Date().getTime() / 1000))
-			const auto3d = !autoPitchPreferenceIsNo
-
-			const center = vers.center.geometry.coordinates
-			map.flyTo({
-				center,
-				zoom: tailoredZoom,
-				pitch: autoPitchPreferenceIsNo ? 0 : 40, // pitch in degrees
-				bearing: autoPitchPreferenceIsNo ? 0 : 15, // bearing in degrees
-				// speed and maxDuration could let us zoom less quickly between shops,
-				// but then the animation from town to town wouldn't take place anymore.
-				// This animation lets the user understand the direction of the move.
-				padding,
-			})
-		}
-	}, [
-		map,
-		vers,
-		stepsLength,
-		autoPitchPreferenceIsNo,
-		setAutoPitchPreference,
-		paddingHash,
-	])
+	useCenterMapOnState(map, zoom, vers, stepsLength, state, paddingHash, padding)
 
 	/* TODO Transform this to handle the last itinery point if alone (just a POI url),
 	 * but also to add markers to all the steps of the itinerary */

app/effects/useAddMap.ts

@@ -11,6 +11,7 @@ import { useLocalStorage, useMediaQuery } from 'usehooks-ts'
 import { styles } from '../styles/styles'
 import useGeolocation from './useGeolocation'
 import useMapIcons from './useMapIcons'
+import { stamp } from '../itinerary/transit/utils'
 
 /*
  *
@@ -131,7 +132,7 @@ export default function useAddMap(
 				typeof autoPitchPreference === 'number'
 			if (
 				autoPitchPreferenceIsWaiting &&
-				new Date().getTime() / 1000 - autoPitchPreference < 15 // If the user resets the pitch in less than 15 seconds, we consider it a definitive choice
+				stamp() - autoPitchPreference < 15 // If the user resets the pitch in less than 15 seconds, we consider it a definitive choice
 			)
 				setAutoPitchPreference('no')
 		}

app/effects/useCenterMapOnState.ts

@@ -0,0 +1,97 @@
+import getBbox from '@turf/bbox'
+import { useEffect } from 'react'
+import { useLocalStorage } from 'usehooks-ts'
+import { stamp } from '../itinerary/transit/utils'
+import { expandBbox } from '@/components/mapUtils'
+
+export default function useCenterMapOnState(
+	map,
+	zoom,
+	vers,
+	stepsLength,
+	state,
+	paddingHash,
+	padding
+) {
+	const [autoPitchPreference, setAutoPitchPreference] = useLocalStorage(
+		'autoPitchPreference',
+		null,
+		{
+			initializeWithValue: false,
+		}
+	)
+
+	const autoPitchPreferenceIsNo = autoPitchPreference === 'no'
+	/*
+	 *
+	 * Fly to hook
+	 *
+	 * */
+	useEffect(() => {
+		if (!map || !vers) return
+		if (!(vers.geojson || vers.center)) return
+		if (stepsLength > 1) {
+			const coordinates = state
+				.filter((step) => step.center)
+				.map((step) => step.center.geometry.coordinates.map((el) => +el))
+
+			if (coordinates.length < 2) return
+
+			const lineString = {
+				type: 'Feature',
+				geometry: {
+					type: 'LineString',
+					coordinates,
+				},
+				properties: {},
+			}
+
+			console.log('indigo yaya', lineString)
+			const bbox = getBbox(lineString)
+			map.fitBounds(expandBbox(bbox), { padding })
+
+			return
+		}
+
+		const tailoredZoom = //TODO should be defined by the feature's polygon if any
+			/* ['city'].includes(vers.choice.type)
+			? 12
+			: */
+			Math.max(15, zoom)
+		console.log(
+			'blue',
+			'will fly to in after OSM download from vers marker',
+			vers,
+			tailoredZoom
+		)
+		if (vers.geojson) {
+			const bbox = getBbox(vers.geojson)
+			map.fitBounds(bbox, {
+				maxZoom: 17.5, // We don't want to zoom at door level for a place, just at street level
+			})
+		} else {
+			if (!autoPitchPreferenceIsNo) setAutoPitchPreference(stamp())
+			const auto3d = !autoPitchPreferenceIsNo
+
+			const center = vers.center.geometry.coordinates
+			map.flyTo({
+				center,
+				zoom: tailoredZoom,
+				pitch: autoPitchPreferenceIsNo ? 0 : 40, // pitch in degrees
+				bearing: autoPitchPreferenceIsNo ? 0 : 15, // bearing in degrees
+				// speed and maxDuration could let us zoom less quickly between shops,
+				// but then the animation from town to town wouldn't take place anymore.
+				// This animation lets the user understand the direction of the move.
+				padding,
+			})
+		}
+	}, [
+		map,
+		vers,
+		stepsLength,
+		autoPitchPreferenceIsNo,
+		setAutoPitchPreference,
+		paddingHash,
+		state,
+	])
+}

app/effects/useDrawTransit.ts

@@ -1,55 +1,64 @@
 import { useEffect } from 'react'
-import { handleColor } from '@/app/itinerary/transit/motisRequest'
+import { handleColor } from '@/app/itinerary/transit/colors'
 import { findContrastedTextColor } from '@/components/utils/colors'
 import { safeRemove } from './utils'
 import { filterNextConnections } from '../itinerary/transit/utils'
 import bezierSpline from '@turf/bezier-spline'
 import { lineString } from '@turf/turf'
+import mapboxPolyline from '@mapbox/polyline'
+import { notTransitType } from '../itinerary/transit/motisRequest'
 
 export default function useDrawTransit(map, transit, selectedConnection, date) {
+	console.log('useDrawTransit', transit)
 	const connections =
 		transit &&
-		transit.connections &&
-		filterNextConnections(transit.connections, date)
+		transit.itineraries &&
+		filterNextConnections(transit.itineraries, date)
 
 	const connection = connections && connections[selectedConnection || 0]
 
 	useEffect(() => {
 		if (!map || !connection) return
 
-		const { transports, stops } = connection
+		const { legs } = connection
 
 		const featureCollection = {
 			type: 'FeatureCollection',
-			features: transports
+			features: legs
 				.reduce((memo, next) => {
-					const route_text_color = handleColor(next.route_text_color, '#000000')
+					const routeTextColor = handleColor(next.routeTextColor, '#000000')
 					console.log('next', next)
 
+					const geometry = mapboxPolyline.toGeoJSON(next.legGeometry.points, 6)
+					window.mapboxPolyline = mapboxPolyline
+
 					return [
 						...memo,
 						{
+							geometry,
 							type: 'Feature',
 							properties: {
-								name: next.route_short_name || '',
-								move_type: next.move_type,
-								route_color: next.route_color || '#d3b2ee',
-								route_color_darker: next.route_color_darker || '',
-								route_text_color,
-								inverse_color: findContrastedTextColor(route_text_color, true),
-							},
-							geometry: {
-								type: 'LineString',
-								coordinates: stops
-									.slice(next.move.range.from, next.move.range.to + 1)
-									.map((stop) => [stop.station.pos.lng, stop.station.pos.lat]),
+								name: next.routeShortName || '',
+								mode: next.mode,
+								isTransit: !notTransitType.includes(next.mode) ? 'Yes' : 'No',
+								route_color: handleColor(next.routeColor) || '#d3b2ee',
+								route_color_darker: next.routeColorDarker || '',
+								route_text_color: routeTextColor,
+								inverse_color: findContrastedTextColor(routeTextColor, true),
+								stopsCount:
+									next.intermediateStops && next.intermediateStops.length + 2,
 							},
 						},
 					]
 				}, [])
 				.map((feature) => {
 					const coordinates = feature.geometry.coordinates
-					if (coordinates.length <= 2) return feature
+					if (
+						coordinates.length <= 2 ||
+						!feature.properties.stopsCount ||
+						coordinates.length > feature.properties.stopsCount * 1.5 // testing here if the polyline is a GTFS real route or not
+					)
+						return feature
 
 					var curved = bezierSpline(lineString(coordinates), {
 						sharpness: 0.6,
@@ -87,7 +96,7 @@ export default function useDrawTransit(map, transit, selectedConnection, date) {
 			source: id,
 			type: 'line',
 			id: id + '-lines-contour',
-			filter: ['==', ['get', 'move_type'], 'Transport'],
+			filter: ['==', ['get', 'isTransit'], 'Yes'],
 			layout: {
 				'line-join': 'round',
 				'line-cap': 'round',
@@ -111,7 +120,7 @@ export default function useDrawTransit(map, transit, selectedConnection, date) {
 			source: id,
 			type: 'line',
 			id: id + '-lines',
-			filter: ['==', ['get', 'move_type'], 'Transport'],
+			filter: ['==', ['get', 'isTransit'], 'Yes'],
 
 			layout: {
 				'line-join': 'round',
@@ -151,12 +160,14 @@ export default function useDrawTransit(map, transit, selectedConnection, date) {
 				'text-halo-width': 1,
 			},
 		})
+		// TODO shared line style for non-transit (walk, bike, car)
+		// could be better, reusing the same styles as the other itineraries
 		map.addLayer(
 			{
 				source: id,
 				type: 'line',
 				id: id + '-lines-walking-background',
-				filter: ['==', ['get', 'move_type'], 'Walk'],
+				filter: ['==', ['get', 'isTransit'], 'No'],
 				layout: {
 					'line-join': 'round',
 					'line-cap': 'round',
@@ -173,7 +184,7 @@ export default function useDrawTransit(map, transit, selectedConnection, date) {
 				source: id,
 				type: 'line',
 				id: id + '-lines-walking',
-				filter: ['==', ['get', 'move_type'], 'Walk'],
+				filter: ['==', ['get', 'isTransit'], 'No'],
 				layout: {
 					'line-join': 'round',
 					'line-cap': 'round',

app/itineraire/api/route.ts

@@ -1,7 +1,7 @@
 import splitAllez from '@/components/itinerary/splitAllez'
 import {
 	computeMotisTrip,
-	isNotTransitConnection,
+	isNotTransitItinerary,
 } from '@/app/itinerary/transit/motisRequest'
 import { initialDate } from '@/app/itinerary/transit/utils'
 import { stepOsmRequest } from '@/app/stepOsmRequest'
@@ -28,16 +28,17 @@ export async function GET(request: { url: string | URL }) {
 			{ lng: lngB, lat: latB },
 			date
 		)
-		if (json.state === 'error' || !json.content) {
+
+		if (json.state === 'error' || !json.itineraries) {
 			console.log(json)
 			return new Response(`Motis error`, { status: 500 })
 		}
-		const { connections } = json.content
-		const transitConnections = connections.filter(
-			(connection) => !isNotTransitConnection(connection)
+		const { itineraries } = json
+		const transitItineraries = itineraries.filter(
+			(connection) => !isNotTransitItinerary(connection)
 		)
 
-		if (!transitConnections.length) {
+		if (!transitItineraries.length) {
 			return new Response(
 				`Itinerary API call error : no transit itinerary available at this date`,
 				{