From 99bea6ae6cea1604a429e0c96467a2d5b9b9d2ac Mon Sep 17 00:00:00 2001
From: desmukh <desmukh@users.noreply.github.com>
Date: Tue, 31 Jan 2023 16:24:39 +0500
Subject: [PATCH] map: display popup on clicking marker or route

---
 .../layouts/shortcodes/publishers_map.html      | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/themes/lumbung-theme/layouts/shortcodes/publishers_map.html b/themes/lumbung-theme/layouts/shortcodes/publishers_map.html
index 76f1cd2..5264866 100644
--- a/themes/lumbung-theme/layouts/shortcodes/publishers_map.html
+++ b/themes/lumbung-theme/layouts/shortcodes/publishers_map.html
@@ -32,8 +32,23 @@
       var end = L.GeoJSON.coordsToLatLng({{ .endPoint.location }});
       
       var startMarker = L.marker(start).addTo(map);
+      startMarker.bindPopup({{ .startingPoint.name }});
+      
       var endMarker = L.marker(end).addTo(map);
-      var route = L.polyline([start, end], {color: 'red'}).addTo(map);
+      endMarker.bindPopup({{ .endPoint.name }});
+      
+      var route = L.polyline([start, end], {color: '#000'}).addTo(map);
+
+      var productsString = "";
+      var productsList = {{ .products }};
+      productsList.forEach((product, i) => productsString = productsString + product.productTitle + (i + 1 < productsList.length ? ', ' : ""));
+
+      route.bindPopup(
+         '<p>Origin: <strong>' + {{ .startingPoint.name }} + '</strong><br />' + 
+         'Destination: <strong>' + {{ .endPoint.name }} + '</strong><br />' + 
+         'Courier: <strong>' + {{ .courier.name }} + '</strong><br />' + 
+         'Products: <strong>' + productsString + '</strong><br />' +
+         'Status: <strong>' + {{ .status }} + '</strong></p>');
 
       {{ end }}
    {{ end }}