68 lines
1.4 KiB
JavaScript
68 lines
1.4 KiB
JavaScript
import leaflet from "https://esm.sh/leaflet@1.9.4";
|
|
import * as chartjs from "https://esm.sh/chart.js@4.4.7";
|
|
|
|
|
|
|
|
const london = [51.505, -0.09];
|
|
const centerOfTheWorld = london;
|
|
|
|
function findBaryCenter(points){
|
|
let lat = 0;
|
|
let lon = 0;
|
|
for (const point of points){
|
|
lat += point[0];
|
|
lon += point[1];
|
|
}
|
|
return [lat / points.length, lon / points.length]
|
|
}
|
|
|
|
function getCenter(data) {
|
|
if (!data) {
|
|
return centerOfTheWorld;
|
|
}
|
|
// good enough estimation
|
|
return findBaryCenter(data.map(road => findBaryCenter(road.points)));
|
|
}
|
|
|
|
function addRoad(road, map) {
|
|
leaflet.polyline(road.points).addTo(map);
|
|
}
|
|
|
|
function addRoads(roads, map) {
|
|
for (const road of roads) {
|
|
addRoad(road, map);
|
|
}
|
|
}
|
|
|
|
function getActiveCity(){
|
|
const elm = document.getElementById("leaflet-map");
|
|
return elm.getAttribute('data-city');
|
|
|
|
}
|
|
|
|
function getUrl(city){
|
|
const params = {city: city}
|
|
return `/api/roads?${new URLSearchParams(params).toString()}`
|
|
}
|
|
|
|
|
|
|
|
|
|
async function renderLeafletMap(city){
|
|
const resp = await fetch(getUrl(city));
|
|
const roads = await resp.json();
|
|
|
|
const map = leaflet.map("leaflet-map").setView(getCenter(roads), 13);
|
|
|
|
leaflet
|
|
.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 19 })
|
|
.addTo(map);
|
|
addRoads(roads, map);
|
|
}
|
|
|
|
|
|
|
|
const activeCity = getActiveCity();
|
|
await Promise.all([renderLeafletMap(activeCity)])
|
|
|