From 8f7b53be73cbb24e3e8d1240dc0a77672e98611a Mon Sep 17 00:00:00 2001
From: desmukh <desmukh@users.noreply.github.com>
Date: Tue, 31 Jan 2023 12:20:45 +0500
Subject: [PATCH] display dispatches from api on map

---
 content/publishers/_index.html                |  4 +-
 .../layouts/shortcodes/publishers_map.html    | 40 +++++++++++++++++++
 2 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 themes/lumbung-theme/layouts/shortcodes/publishers_map.html

diff --git a/content/publishers/_index.html b/content/publishers/_index.html
index e5c74ae..01d6718 100644
--- a/content/publishers/_index.html
+++ b/content/publishers/_index.html
@@ -3,6 +3,4 @@ draft: false
 ---
 <h1>Lumbung of Publishers</h1>
 
-<article class="map">
-  {{< map geoJson="data/geojsonContributors.json">}}
-</article>
\ No newline at end of file
+{{< publishers_map >}}
\ No newline at end of file
diff --git a/themes/lumbung-theme/layouts/shortcodes/publishers_map.html b/themes/lumbung-theme/layouts/shortcodes/publishers_map.html
new file mode 100644
index 0000000..76f1cd2
--- /dev/null
+++ b/themes/lumbung-theme/layouts/shortcodes/publishers_map.html
@@ -0,0 +1,40 @@
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
+   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>
+
+<div id="map"></div>
+
+<style>
+   #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();
+   });
+  
+   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);
+
+   
+{{ 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 endMarker = L.marker(end).addTo(map);
+      var route = L.polyline([start, end], {color: 'red'}).addTo(map);
+
+      {{ end }}
+   {{ end }}
+</script>
\ No newline at end of file