Going straight ahead!

static/index-leaflet.js

@@ -0,0 +1,35 @@
+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);