show all stores, and their respective polygons

1 files changed, 46 insertions, 4 deletions

diff --git a/src/static/main.js b/src/static/main.js
index 24d0edf..405f455 100644
--- a/src/static/main.js
+++ b/src/static/main.js
@@ -4,15 +4,46 @@ L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
 }).addTo(map);
 
+let known_store_chains;
+let icons = {};
+
+async function fetchChains() {
+    const response = await fetch("chains");
+    known_store_chains = await response.json();
+
+    icons["Unknown"] = L.icon({
+        iconUrl: 'icons/Unknown.png',
+        iconSize: [10, 16],
+        iconAnchor: [16, 16],
+    });
+
+    for (let known_store_chain of known_store_chains) {
+        icons[known_store_chain] = L.icon({
+            iconUrl: `icons/${known_store_chain}.png`,
+            iconAnchor: [8, 8],
+        });
+    }
+
+    fetchShops();
+}
 
 function addMarker(shop) {
-    L.marker([shop.lat, shop.long], {title: shop.name, }).addTo(map);
+    let icon;
+
+    if (known_store_chains.includes(shop.brand)){
+        icon = icons[shop.brand];
+    } else {
+        icon = icons["Unknown"];
+    }
+
+    L.marker([shop.lat, shop.long], {
+        title: shop.name,
+        icon: icon,
+    }).addTo(map);
 }
 
 function addPolygon(polygon) {
     L.polygon(polygon, {color: 'red'}).addTo(map);
-
-    console.log(polygon.coordinates)
 }
 
 
@@ -22,11 +53,22 @@ async function fetchShops() {
   shops.forEach((shop) => addMarker(shop));
 }
 
-fetchShops()
 
 async function fetch_voronoi_polygons() {
   const response = await fetch("voronoi_polygons.json");
   const voronoi_polygons = await response.json();
   voronoi_polygons.forEach((polygon) => addPolygon(polygon));
 }
+
+function update(){
+    if (map.getZoom() >= 14){
+        //console.log('update')
+    }
+}
+
+map.on('moveend', function() {
+    update()
+});
+
+fetchChains()
 fetch_voronoi_polygons()
\ No newline at end of file