📅🎯 Checkpoint

./public/index.js:1954897/34010

public/index.js

@@ -45,32 +45,44 @@ L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_toke
 
 
 for (const [id, building] of Object.entries(buildings)) {
-    console.log(id, building)
+    // console.log(id, building)
     const poly = L.polygon(building.bounds)
 
     poly.on('click', ev => {
-        console.log(ev)
+        // console.log(ev)
         map.panTo(poly.getCenter())
         displayCard(id)
     }).addTo(map)
 
-    if (id === "MC") {
-        poly.setStyle({
-            color: "#00e676",
-            opacity: .5
-        })
-    } else if (id === "SU"){
-        poly.setStyle({
-            color: "yellow",
-            opacity: .5
-        })
-    }
+    poly.setStyle({
+        color: '#727272',
+        opacity: .5
+    })
+
+    buildings[id].poly = poly
+
+    // if (id === "MC") {
+    //     poly.setStyle({
+    //         color: "#00e676",
+    //         opacity: .5
+    //     })
+    // } else if (id === "SU"){
+    //     poly.setStyle({
+    //         color: "yellow",
+    //         opacity: .5
+    //     })
+    // }
 
     // const label = new L.marker(poly.getCenter(), { opacity: 0.00 }) //opacity may be set to zero
     // label.bindTooltip(id, {permanent: true, className: "my-label", offset: [0, 0] });
     // label.addTo(map)
 }
 
+fetch('/db.csv').then(res => res.text()).then(text => {
+    const data = text.trim().split('\n').map(line => line.split(','))
+    console.log(data)
+})
+
 async function displayCard(id) {
     const card = document.getElementById("card")
     await card.animate([
@@ -136,14 +148,3 @@ function updateChart() {
         }
     })
 }
-
-
-const mediaQuery = window.matchMedia("(min-width: 720px)")
-mediaQuery.addEventListener("change", updateSize)
-requestAnimationFrame(updateSize)
-
-function updateSize() {
-    map.invalidateSize(true)
-    console.log("updatesize!")
-}
-// map.invalidateSize()