From 5506d3cfa2fa0fa806059c8c708bd9a3411ab5c5 Mon Sep 17 00:00:00 2001
From: desmukh <desmukh@users.noreply.github.com>
Date: Tue, 7 Feb 2023 15:34:56 +0500
Subject: [PATCH] map: add layer groups and layer controld for makers,
 retailers, dispatches

---
 .../layouts/shortcodes/publishers_map.html    | 93 +++++++++++++------
 1 file changed, 65 insertions(+), 28 deletions(-)

diff --git a/themes/lumbung-theme/layouts/shortcodes/publishers_map.html b/themes/lumbung-theme/layouts/shortcodes/publishers_map.html
index 5264866..945725a 100644
--- a/themes/lumbung-theme/layouts/shortcodes/publishers_map.html
+++ b/themes/lumbung-theme/layouts/shortcodes/publishers_map.html
@@ -1,44 +1,61 @@
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
-   integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
+  integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
 
 <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
-   integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
+  integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
 
 <div id="map"></div>
 
 <style>
-   #map {
-      width: 100%;
-      padding-bottom: 70%;
-      margin-bottom: 80px;
-   }
+  #map {
+    width: 100%;
+    padding-bottom: 70%;
+    margin-bottom: 80px;
+  }
 </style>
 
 <script>
-   var map = L.map('map').setView([51.505, -0.09], 3);
-   window.addEventListener('load', (event) => {
-      map.invalidateSize();
-   });
+  var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+  });
+
+  // Create makers layer group
+  var makers = L.layerGroup();
+  {{ with getJSON "https://kios-admin.lumbung.space/api/makers"}}
+    {{ range .docs }}
+      var makerMarker = L.marker(L.GeoJSON.coordsToLatLng({{ .location }}));
+      makerMarker.bindPopup({{ .name }})
+      makers.addLayer(makerMarker);
+    {{ end }}
+  {{ end }}
   
-   L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-      maxZoom: 19,
-      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-   }).addTo(map);
+  // Create retailers layer group
+  var retailers = L.layerGroup();
+  {{ with getJSON "https://kios-admin.lumbung.space/api/retailers"}}
+    {{ range .docs }}
+      var retailerMarker = L.marker(L.GeoJSON.coordsToLatLng({{ .location }}));
+      retailerMarker.bindPopup({{ .name }})
+      retailers.addLayer(retailerMarker);
+    {{ end }}
+  {{ end }}
 
-   
-{{ with getJSON "https://kios-admin.lumbung.space/api/dispatches"}}
-   {{ range .docs }}
+  // Create dispatches layer group
+  var dispatches = L.layerGroup();
+  {{ with getJSON "https://kios-admin.lumbung.space/api/dispatches"}}
+    {{ range .docs }}
       var start = L.GeoJSON.coordsToLatLng({{ .startingPoint.location }});
-      var end = L.GeoJSON.coordsToLatLng({{ .endPoint.location }});
-      
-      var startMarker = L.marker(start).addTo(map);
+      var startMarker = L.marker(start);
       startMarker.bindPopup({{ .startingPoint.name }});
-      
-      var endMarker = L.marker(end).addTo(map);
-      endMarker.bindPopup({{ .endPoint.name }});
-      
-      var route = L.polyline([start, end], {color: '#000'}).addTo(map);
 
+      var end = L.GeoJSON.coordsToLatLng({{ .endPoint.location }});
+      var endMarker = L.marker(end);
+      endMarker.bindPopup({{ .endPoint.name }});
+
+      // Add line to display dispatch route
+      var route = L.polyline([start, end], {color: '#000'})
+
+      // Generate string to display list of products in popup
       var productsString = "";
       var productsList = {{ .products }};
       productsList.forEach((product, i) => productsString = productsString + product.productTitle + (i + 1 < productsList.length ? ', ' : ""));
@@ -50,6 +67,26 @@
          'Products: <strong>' + productsString + '</strong><br />' +
          'Status: <strong>' + {{ .status }} + '</strong></p>');
 
-      {{ end }}
-   {{ end }}
+      dispatches.addLayer(route);
+      dispatches.addLayer(startMarker);
+      dispatches.addLayer(endMarker);
+    {{ end }}
+  {{ end }}
+
+  var map = L.map('map', {
+    center: [0, 0],
+    zoom: 2,
+    layers: [osm, makers]
+  });
+  
+  var overlayMaps = {
+    "Makers": makers,
+    "Retailers": retailers,
+    "Dispatches": dispatches
+  };
+  
+  var layerControl = L.control.layers(overlayMaps, null, {collapsed: false, position: "topleft"}).addTo(map);
+  window.addEventListener('load', (event) => {
+    map.invalidateSize();
+  });
 </script>
\ No newline at end of file