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);