36 lines
783 B
JavaScript
36 lines
783 B
JavaScript
import leaflet from "https://esm.sh/leaflet@1.9.4";
|
|
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
|
|
|
|
function convertCsvRow(row) {
|
|
return {
|
|
relation_id: +row.relation_id,
|
|
points: JSON.parse(row.points),
|
|
};
|
|
}
|
|
|
|
function getCenter(data) {
|
|
if (!data) {
|
|
return [51.505, -0.09]; // london
|
|
}
|
|
return data[0].points[0];
|
|
}
|
|
|
|
function addRoad(road, map) {
|
|
leaflet.polyline(road.points).addTo(map);
|
|
}
|
|
|
|
function addRoads(roads, map) {
|
|
for (const road of roads) {
|
|
addRoad(road, map);
|
|
}
|
|
}
|
|
|
|
const roads = await d3.csv("./data/montreal.csv", convertCsvRow);
|
|
|
|
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);
|