[*] Added code
This commit is contained in:
commit
8a05d72528
GPG key ID:
5294B3B26FA19584
5 changed files with 327 additions and 0 deletions
1
.env.example
Normal file
1
.env.example
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
CTS_TOKEN=
|
||||||
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
.env
|
||||||
|
data/
|
||||||
46
download_data.py
Executable file
46
download_data.py
Executable file
|
|
@ -0,0 +1,46 @@
|
||||||
|
#!/bin/env python3
|
||||||
|
|
||||||
|
from dotenv import load_dotenv
|
||||||
|
import requests
|
||||||
|
import os
|
||||||
|
import json
|
||||||
|
import pathlib
|
||||||
|
|
||||||
|
import requests.auth
|
||||||
|
|
||||||
|
TO_DOWNLOAD = [
|
||||||
|
('https://data.strasbourg.eu/api/explore/v2.1/catalog/datasets/lignes_tram/records', 'lines_tram.json', 'LINES_TRAM'),
|
||||||
|
('https://data.strasbourg.eu/api/explore/v2.1/catalog/datasets/lignes_de_bus/records?refine=type_ligne%3A%22BHNS%22 ', 'lines_bhns.json', 'LINES_BHNS'),
|
||||||
|
]
|
||||||
|
|
||||||
|
TO_DOWNLOAD_CTS = [
|
||||||
|
('https://api.cts-strasbourg.eu/v1/siri/2.0/stoppoints-discovery?includeLinesDestinations=true', 'stoppoints.json', 'STOPPOINTS'),
|
||||||
|
('https://api.cts-strasbourg.eu/v1/siri/2.0/lines-discovery', 'lines.json', 'LINES'),
|
||||||
|
('https://api.cts-strasbourg.eu/v1/siri/2.0/estimated-timetable?LineRef=A&LineRef=B&LineRef=C&LineRef=D&LineRef=E&LineRef=F&GetStopIdInsteadOfStopCode=true', 'timetable.json', 'TIMETABLE')
|
||||||
|
]
|
||||||
|
|
||||||
|
load_dotenv()
|
||||||
|
|
||||||
|
CTS_TOKEN = os.getenv('CTS_TOKEN')
|
||||||
|
|
||||||
|
OUT = "data"
|
||||||
|
js_data = ""
|
||||||
|
|
||||||
|
os.makedirs(pathlib.Path(OUT), exist_ok=True)
|
||||||
|
|
||||||
|
for url, file, var in TO_DOWNLOAD:
|
||||||
|
rep = requests.get(url)
|
||||||
|
d = rep.json()
|
||||||
|
with open(pathlib.Path(OUT) / file, 'w') as f:
|
||||||
|
json.dump(d, f, indent=2)
|
||||||
|
js_data += 'const ' + var + ' = ' + json.dumps(d) + '\n'
|
||||||
|
|
||||||
|
for url, file, var in TO_DOWNLOAD_CTS:
|
||||||
|
rep = requests.get(url, auth=requests.auth.HTTPBasicAuth(CTS_TOKEN, ''))
|
||||||
|
d = rep.json()
|
||||||
|
with open(pathlib.Path(OUT) / file, 'w') as f:
|
||||||
|
json.dump(d, f, indent=2)
|
||||||
|
js_data += 'const ' + var + ' = ' + json.dumps(d) + '\n'
|
||||||
|
|
||||||
|
with open(pathlib.Path(OUT) / "data.js", 'w') as f:
|
||||||
|
f.write(js_data)
|
||||||
39
index.html
Normal file
39
index.html
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Test</title>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||||
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||||||
|
crossorigin=""
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#map {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #090909;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="map"></div>
|
||||||
|
|
||||||
|
<script
|
||||||
|
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||||
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
||||||
|
crossorigin=""
|
||||||
|
></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@7/turf.min.js"></script>
|
||||||
|
<script src="data/data.js"></script>
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
239
main.js
Normal file
239
main.js
Normal file
|
|
@ -0,0 +1,239 @@
|
||||||
|
// LINES_TRAM
|
||||||
|
// LINES_BHNS
|
||||||
|
// LINES
|
||||||
|
// STOPPOINTS
|
||||||
|
|
||||||
|
const LINES_OVERRIDE = {
|
||||||
|
'Place d\'Islande': ['F'],
|
||||||
|
'Gare Centrale': ['C', 'A'],
|
||||||
|
'Homme de Fer': ['C', 'A']
|
||||||
|
}
|
||||||
|
|
||||||
|
const map = L.map('map');
|
||||||
|
// https://cartodb-basemaps-a.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png
|
||||||
|
// https://tile.openstreetmap.org/{z}/{x}/{y}.png
|
||||||
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
|
maxZoom: 19,
|
||||||
|
attribution: '© carto.com'
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
const lignes = {};
|
||||||
|
|
||||||
|
// Dessigner les lignes de tram
|
||||||
|
LINES_TRAM.results.forEach(line => {
|
||||||
|
// Récupération des points de la ligne
|
||||||
|
const points = line.geo_shape.geometry.coordinates;
|
||||||
|
// Récupération de la couleur
|
||||||
|
const color = LINES.LinesDelivery.AnnotatedLineRef.filter(d => d.LineRef === line.ligne)[0].Extension.RouteColor;
|
||||||
|
|
||||||
|
// Ligne extérieur
|
||||||
|
const polyline = L.polyline(L.GeoJSON.coordsToLatLngs(points), {
|
||||||
|
color: '#' + color,
|
||||||
|
weight: 6,
|
||||||
|
}).addTo(map);
|
||||||
|
// Ligne blanche centrale
|
||||||
|
const polyline_white = L.polyline(L.GeoJSON.coordsToLatLngs(points), {
|
||||||
|
color: '#ffffff',
|
||||||
|
weight: 2,
|
||||||
|
opacity: 0.5
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
// Stockage des points pour traitement ultérieur
|
||||||
|
lignes[line.ligne] = points;
|
||||||
|
});
|
||||||
|
|
||||||
|
const stops = {}
|
||||||
|
const stations = {}
|
||||||
|
|
||||||
|
// Pre-parsing des arrêts pour dessin
|
||||||
|
// (en gros on AVG les coordéonnes)
|
||||||
|
STOPPOINTS.StopPointsDelivery.AnnotatedStopPointRef.filter(stop => stop.Lines.filter(line => line.Extension.RouteType === "tram").length > 0).forEach(stop => {
|
||||||
|
stations[stop.StopPointRef] = [
|
||||||
|
stop.Location.Longitude,
|
||||||
|
stop.Location.Latitude
|
||||||
|
];
|
||||||
|
|
||||||
|
if (!(stop.StopName in stops)) {
|
||||||
|
stops[stop.StopName] = {
|
||||||
|
name: stop.StopName,
|
||||||
|
lines: new Set(stop.Lines.map(l => l.LineRef)),
|
||||||
|
lat: stop.Location.Latitude,
|
||||||
|
lng: stop.Location.Longitude,
|
||||||
|
cnt: 1
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
stops[stop.StopName].lat += stop.Location.Latitude;
|
||||||
|
stops[stop.StopName].lng += stop.Location.Longitude;
|
||||||
|
stops[stop.StopName].cnt += 1;
|
||||||
|
stop.Lines.map(l => l.LineRef).forEach(stops[stop.StopName].lines.add, stops[stop.StopName].lines);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/// Dessin des coordonnées
|
||||||
|
for (const name in stops) {
|
||||||
|
const stop = stops[name];
|
||||||
|
let line_name;
|
||||||
|
|
||||||
|
// On trouve sur quel ligne l'arrêt se trouve, pour snap sur la ligne
|
||||||
|
if (name in LINES_OVERRIDE) {
|
||||||
|
line_name = LINES_OVERRIDE[name]
|
||||||
|
} else {
|
||||||
|
for (const line of stop.lines) {
|
||||||
|
if (line in lignes) {
|
||||||
|
line_name = [line];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stop.lat /= stop.cnt;
|
||||||
|
stop.lng /= stop.cnt;
|
||||||
|
|
||||||
|
// On place l'arrêt
|
||||||
|
if (line_name !== undefined) {
|
||||||
|
for(the_name of line_name) {
|
||||||
|
const tramline = turf.lineString(lignes[the_name]);
|
||||||
|
const pt = turf.point([stop.lng, stop.lat]);
|
||||||
|
// Snap l'arrêt sur la ligne
|
||||||
|
const snapped = turf.nearestPointOnLine(tramline, pt);
|
||||||
|
|
||||||
|
const marker = L.circleMarker(L.latLng(snapped.geometry.coordinates[1], snapped.geometry.coordinates[0]), {
|
||||||
|
radius: 6,
|
||||||
|
color: "#1d1d1d",
|
||||||
|
fillColor: "#ffffff",
|
||||||
|
weight: 3,
|
||||||
|
fillOpacity: 1
|
||||||
|
}).addTo(map);
|
||||||
|
marker.bindPopup(stop.name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Trams en cours de circulation
|
||||||
|
let trams = {};
|
||||||
|
// Cache des segments de lignes
|
||||||
|
// (parce que c'est lour à calculer donc autant le faire qu'une fois pôour chaque segment)
|
||||||
|
const segments_cache = {}
|
||||||
|
|
||||||
|
// Mise à jour périodique
|
||||||
|
setInterval(() => {
|
||||||
|
const current_date = new Date();
|
||||||
|
const current_trams = new Set();
|
||||||
|
// On parcours la delivery
|
||||||
|
for (const delivery of TIMETABLE.ServiceDelivery.EstimatedTimetableDelivery) {
|
||||||
|
const cycle_name = delivery.ShortestPossibleCycle;
|
||||||
|
// Les timeframes
|
||||||
|
for (const frame of delivery.EstimatedJourneyVersionFrame) {
|
||||||
|
// Et les journeys
|
||||||
|
for (const journey of frame.EstimatedVehicleJourney) {
|
||||||
|
let previous = undefined;
|
||||||
|
const tram_unique_id = cycle_name + ";;" + journey.LineRef + ";;" + journey.FramedVehicleJourneyRef.DatedVehicleJourneySAERef
|
||||||
|
// console.log(tram_unique_id)
|
||||||
|
// On parcours les différentes stations sur le chemin
|
||||||
|
for (const call of journey.EstimatedCalls) {
|
||||||
|
if (previous === undefined) {
|
||||||
|
previous = call;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// On récupère l'heure de départ de la stations précédente, l'heure d'arrivée à la stations actuelle
|
||||||
|
const previous_dep = new Date(previous.ExpectedDepartureTime);
|
||||||
|
const call_arrival = new Date(call.ExpectedArrivalTime);
|
||||||
|
const call_departure = new Date(call.ExpectedDepartureTime);
|
||||||
|
|
||||||
|
// Si l'heure actuelle est entre le départ de la station précédente et l'arrivée
|
||||||
|
// de la station actuelle on sait que le tram est sur ce tronçon
|
||||||
|
if (previous_dep.getTime() <= current_date.getTime() && current_date.getTime() <= call_arrival.getTime()) {
|
||||||
|
// On calcul le pourcentage d'avancement sur le tronçon
|
||||||
|
// (interpolation linéaire à la con)
|
||||||
|
const percent = (current_date.getTime() - previous_dep.getTime()) / (call_arrival.getTime() - previous_dep.getTime());
|
||||||
|
|
||||||
|
// On place le tram
|
||||||
|
if (previous.StopPointRef in stations && call.StopPointRef in stations && journey.LineRef in lignes) {
|
||||||
|
let seg;
|
||||||
|
const segments_cache_id = journey.LineRef + ';;' + previous.StopPointRef + ';;' + call.StopPointRef;
|
||||||
|
if (segments_cache_id in segments_cache) {
|
||||||
|
seg = segments_cache[segments_cache_id];
|
||||||
|
} else {
|
||||||
|
seg = turf.lineSlice(stations[previous.StopPointRef], stations[call.StopPointRef], turf.lineString(lignes[journey.LineRef]));
|
||||||
|
segments_cache[segments_cache_id] = seg;
|
||||||
|
}
|
||||||
|
const len = turf.length(seg);
|
||||||
|
const position = turf.along(seg, len * percent);
|
||||||
|
|
||||||
|
if (tram_unique_id in trams) {
|
||||||
|
const last_position = map.project(trams[tram_unique_id].getLatLng(), 5)
|
||||||
|
const current_position = map.project(L.latLng(position.geometry.coordinates[1], position.geometry.coordinates[0]), 5)
|
||||||
|
const x = current_position.x - last_position.x;
|
||||||
|
const y = current_position.y - last_position.y;
|
||||||
|
const angle = Math.atan2(y, x);
|
||||||
|
|
||||||
|
const elem = document.getElementById(`tram;;${tram_unique_id}`)
|
||||||
|
if (elem !== null) {
|
||||||
|
elem.style.transform = `rotate(${angle}rad)`;
|
||||||
|
}
|
||||||
|
|
||||||
|
trams[tram_unique_id].setLatLng(L.latLng(position.geometry.coordinates[1], position.geometry.coordinates[0]));
|
||||||
|
} else {
|
||||||
|
const color = LINES.LinesDelivery.AnnotatedLineRef.filter(d => d.LineRef === journey.LineRef)[0].Extension.RouteColor;
|
||||||
|
/*const marker = L.circleMarker(L.latLng(position.geometry.coordinates[1], position.geometry.coordinates[0]), {
|
||||||
|
radius: 4,
|
||||||
|
color: "#1d1d1d",
|
||||||
|
fillColor: "#" + color,
|
||||||
|
weight: 2,
|
||||||
|
fillOpacity: 1
|
||||||
|
}).addTo(map);*/
|
||||||
|
const content = `
|
||||||
|
<svg viewBox="-10 -10 20 20" width="15" height="15" xmlns="http://www.w3.org/2000/svg" id="tram;;${tram_unique_id}">
|
||||||
|
<polygon points="-7.5, 5 2.5, 5 7.5, 0 2.5, -5 -7.5, -5" fill="#${color}" stroke="#1d1d1b" stroke-width="2" class="tram"></polygon>
|
||||||
|
</svg>
|
||||||
|
`
|
||||||
|
const myIcon = L.divIcon({className: 'tram-icon', html: content});
|
||||||
|
const marker = L.marker(L.latLng(position.geometry.coordinates[1], position.geometry.coordinates[0]), {icon: myIcon}).addTo(map);
|
||||||
|
marker.bindPopup(tram_unique_id);
|
||||||
|
trams[tram_unique_id] = marker;
|
||||||
|
console.log("Added " + tram_unique_id);
|
||||||
|
}
|
||||||
|
current_trams.add(tram_unique_id);
|
||||||
|
}
|
||||||
|
// Si l'heure actuelle et entre l'heure d'arrivée et de départ à une station on place le tram sur cette station.
|
||||||
|
} else if (call_arrival.getTime() <= current_date.getTime() && current_date.getTime() <= call_departure.getTime()) {
|
||||||
|
if (tram_unique_id in trams) {
|
||||||
|
trams[tram_unique_id].setLatLng(L.latLng([stations[call.StopPointRef][1], stations[call.StopPointRef][0]]));
|
||||||
|
} else {
|
||||||
|
const color = LINES.LinesDelivery.AnnotatedLineRef.filter(d => d.LineRef === journey.LineRef)[0].Extension.RouteColor;
|
||||||
|
const content = `
|
||||||
|
<svg viewBox="-10 -10 20 20" width="15" height="15" xmlns="http://www.w3.org/2000/svg" id="tram;;${tram_unique_id}">
|
||||||
|
<polygon points="-7.5, 5 2.5, 5 7.5, 0 2.5, -5 -7.5, -5" fill="#${color}" stroke="#1d1d1b" stroke-width="2" class="tram"></polygon>
|
||||||
|
</svg>
|
||||||
|
`
|
||||||
|
const myIcon = L.divIcon({className: 'tram-icon', html: content});
|
||||||
|
const marker = L.marker(L.latLng([stations[call.StopPointRef][1], stations[call.StopPointRef][0]]), {icon: myIcon}).addTo(map);
|
||||||
|
marker.bindPopup(tram_unique_id);
|
||||||
|
trams[tram_unique_id] = marker;
|
||||||
|
console.log("Added " + tram_unique_id);
|
||||||
|
}
|
||||||
|
current_trams.add(tram_unique_id);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
previous = call;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// On vire les anciens trams
|
||||||
|
for(const key of Object.keys(trams)) {
|
||||||
|
if (!current_trams.has(key)) {
|
||||||
|
console.log("Removed " + key);
|
||||||
|
trams[key].remove();
|
||||||
|
delete trams[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}, 200);
|
||||||
|
|
||||||
|
var latLngBounds = L.latLngBounds([[48.52343058579338, 7.681799380771575], [48.62985324979267, 7.820267901766859]]);
|
||||||
|
map.fitBounds(latLngBounds);
|
||||||
|
|
||||||
|
//
|
||||||
Loading…
Add table
Reference in a new issue