Forgotten to commit

YongeStreet/wwwroot/js/quebec-province-map.js

@@ -0,0 +1,67 @@
+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)])
+