Démo Citiz

app/voyage/GareInfo.tsx

@@ -53,6 +53,7 @@ export default function GareInfo({ clickedGare }) {
 					2
 				)}?date=${date}`}
 			/>
+			<p>Identifiant UIC : {clickedGare.uic}</p>
 		</div>
 	)
 }

app/voyage/Map.tsx

@@ -18,22 +18,23 @@ import ModalSwitch from './ModalSwitch'
 import { disambiguateWayRelation } from './osmRequest'
 import { styles } from './styles/styles'
 import { MapContainer, MapHeader } from './UI'
+import useCars from './useCars'
 import useHoverOnMapFeatures from './useHoverOnMapFeatures'
 import useTerrainControl from './useTerrainControl'
-import { encodePlace } from './utils'
 import { useZoneImages } from './ZoneImages'
 
 import CenteredCross from './CenteredCross'
 import { clickableClasses } from './clickableLayers'
 import useDrawSearchResults from './effects/useDrawSearchResults'
 import useDrawTransport from './effects/useDrawTransport'
+import useDrawTransportsMap from './effects/useDrawTransportsMap'
 import useOsmRequest from './effects/useOsmRequest'
+import useOverpassRequest from './effects/useOverpassRequest'
 import useRightClick from './effects/useRightClick'
 import useSearchLocalTransit from './effects/useSearchLocalTransit'
 import useSetTargetMarkerAndZoom from './effects/useSetTargetMarkerAndZoom'
 import useTransportStopData from './transport/useTransportStopData'
-import useDrawTransportsMap from './effects/useDrawTransportsMap'
-import useOverpassRequest from './effects/useOverpassRequest'
+import { encodePlace } from './utils'
 
 export const defaultState = {
 	depuis: { inputValue: null, choice: false },
@@ -178,6 +179,7 @@ export default function Map({ searchParams }) {
 		date,
 	}
 	console.log('itinerary', itinerary)
+	const cars = useCars(map, clickedGare)
 
 	const simpleArrayBbox = useMemo(() => {
 		if (!map) return

app/voyage/garesCitiz.yaml

@@ -0,0 +1,11 @@
+# Citiz provider id : list of train close train stations
+0087471003:
+  provider: 19
+  cityId: 313
+  website:
+    https://rennesmetropole.citiz.coop
+
+    #Nantes
+#0087481002:
+#provider: 15
+#cityid: ?

app/voyage/useCars.tsx

@@ -0,0 +1,101 @@
+import maplibregl from 'maplibre-gl'
+import { useEffect, useState } from 'react'
+import garesCitiz from './garesCitiz.yaml'
+
+export default function useCars(map, clickedGare) {
+	const [cars, setCars] = useState([])
+
+	useEffect(() => {
+		if (!map || !clickedGare) return
+
+		const fetchCars = async () => {
+			const { provider, cityId, website } = garesCitiz[+clickedGare.uic]
+			console.log('citiz provider', provider, clickedGare, garesCitiz)
+			if (!provider) return
+
+			const url = `https://service.citiz.fr/citiz/api/provider/${provider}/reservation/schedule`
+			console.log('will fetch citiz', url)
+			const data = {
+				from: '2023-12-01T00:00:00',
+				until: '2023-12-02T00:00:00',
+				where: { citiesIds: [cityId], stationsIds: [] },
+			}
+			const request = await fetch(url, {
+				method: 'POST',
+				body: JSON.stringify(data),
+				headers: {
+					'Content-Type': 'application/json',
+				},
+			})
+
+			const json = await request.json()
+
+			const city = json?.citiz?.find((el) => el.cityId === cityId),
+				cars =
+					city &&
+					city.stations
+						?.map((s) => {
+							const { vehicles, ...rest } = s
+
+							return vehicles?.map((v) => ({ ...v, station: rest, website }))
+						})
+						.filter(Boolean)
+						.flat()
+
+			if (cars) setCars(cars)
+		}
+
+		fetchCars()
+	}, [map, clickedGare, setCars])
+
+	console.log('CARS', cars)
+
+	const geojson = {
+		type: 'FeatureCollection',
+		features: cars.map((car) => ({
+			type: 'Feature',
+			properties: {
+				description: `${car.station.stationName} \n ${
+					car.vehicleName
+				} \n autonomie ${car.autonomy} \n ⚡️ : ${
+					car.electricEngine ? 'électrique' : 'thermique'
+				} \n ${car.website}`,
+				vehicleId: car.vehicleId,
+			},
+			geometry: {
+				type: 'Point',
+				coordinates: [car.station.gpsLongitude, car.station.gpsLatitude],
+			},
+		})),
+	}
+	useEffect(() => {
+		if (!map) return
+		// add markers to map
+		const markers = geojson.features.map((marker) => {
+			// create a DOM element for the marker
+			const el = document.createElement('img')
+			el.className = 'marker'
+			el.src = `https://service.citiz.fr/citiz/api/vehicule/${marker.properties.vehicleId}/photo`
+			el.style.width = `60px`
+			el.style.height = `60px`
+			el.style.borderRadius = `60px`
+			el.style.border = '4px solid var(--darkerColor)'
+			el.style.objectFit = 'cover'
+
+			el.addEventListener('click', () => {
+				window.alert(marker.properties.description)
+			})
+
+			// add marker to map
+			const mapMarker = new maplibregl.Marker({ element: el }).setLngLat(
+				marker.geometry.coordinates
+			)
+
+			mapMarker.addTo(map)
+			return mapMarker
+		})
+		return () => {
+			markers.map((marker) => marker.remove())
+		}
+	}, [map, geojson])
+}