lumbung.space/themes/lumbung-theme/layouts/shortcodes/publishers_map.html

<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);
      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 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 }}
</script>