added search

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

@@ -1,17 +1,14 @@
 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){
+function findBaryCenter(points) {
   let lat = 0;
   let lon = 0;
-  for (const point of points){
+  for (const point of points) {
     lat += point[0];
-    lon += point[1];    
+    lon += point[1];
   }
   return [lat / points.length, lon / points.length]
 }
@@ -19,7 +16,7 @@ function findBaryCenter(points){
 function getCenter(data) {
   if (!data) {
     return centerOfTheWorld;
-  }  
+  }
   // good enough estimation
   return findBaryCenter(data.map(road => findBaryCenter(road.points)));
 }
@@ -34,34 +31,37 @@ function addRoads(roads, map) {
   }
 }
 
-function getActiveCity(){
+function getActiveCity() {
   const elm = document.getElementById("leaflet-map");
   return elm.getAttribute('data-city');
-  
 }
 
-function getUrl(city){
-   const params = {city: city}
+function getActiveDate() {
+  const elm = document.getElementById("leaflet-map");
+  return elm.getAttribute('data-date') ?? "";
+}
+
+function getUrl(city, date) {
+  const params = {city: city}
+  if (date.trim() !== "") {
+    params.date = date;
+  }
   return `/api/roads?${new URLSearchParams(params).toString()}`
 }
 
-
-
-
-async function renderLeafletMap(city){
-  const resp = await fetch(getUrl(city));
+async function renderLeafletMap(city, date) {
+  const resp = await fetch(getUrl(city, date));
   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 })
+  .tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {maxZoom: 19})
   .addTo(map);
   addRoads(roads, map);
 }
 
-
-
 const activeCity = getActiveCity();
-await Promise.all([renderLeafletMap(activeCity)])
+const activeDate = getActiveDate();
+await Promise.all([renderLeafletMap(activeCity, activeDate)])