Style map markers to dots

themes/lumbung-theme/layouts/shortcodes/kios_map.html

@@ -1,8 +1,15 @@
-<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
-  integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
+<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>
+<script
+  src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
+  integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
+  crossorigin=""
+></script>
 
 <div id="map"></div>
 
@@ -12,6 +19,11 @@
     padding-bottom: 70%;
     margin-bottom: 80px;
   }
+
+  .black-dot {
+    background-color: black;
+    border-radius: 50%;
+  }
 </style>
 
 <script>
@@ -20,21 +32,33 @@
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
   });
 
+
+  var blackDotIcon = L.divIcon({
+    className: 'black-dot',
+    iconSize: [20, 20],
+    iconAnchor: [10, 10]
+  });
+
+
   // 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 }}));
+    var makerMarker = L.marker(L.GeoJSON.coordsToLatLng({{ .location }}), {
+      icon: blackDotIcon  
+    });
       makerMarker.bindPopup({{ .name }})
       makers.addLayer(makerMarker);
     {{ end }}
   {{ end }}
-  
+
   // 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 }}));
+      var retailerMarker = L.marker(L.GeoJSON.coordsToLatLng({{ .location }}), {
+        icon: blackDotIcon  
+      });
       retailerMarker.bindPopup({{ .name }})
       retailers.addLayer(retailerMarker);
     {{ end }}
@@ -45,11 +69,11 @@
   {{ with getJSON "https://kios-admin.lumbung.space/api/dispatches"}}
     {{ range .docs }}
       var start = L.GeoJSON.coordsToLatLng({{ .startingPoint.location }});
-      var startMarker = L.marker(start);
+      var startMarker = L.marker(start, {icon: blackDotIcon});
       startMarker.bindPopup({{ .startingPoint.name }});
 
       var end = L.GeoJSON.coordsToLatLng({{ .endPoint.location }});
-      var endMarker = L.marker(end);
+      var endMarker = L.marker(end, {icon: blackDotIcon});
       endMarker.bindPopup({{ .endPoint.name }});
 
       // Add line to display dispatch route
@@ -62,9 +86,9 @@
       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 />' + 
+         '<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>');
 
@@ -79,15 +103,15 @@
     zoom: 3,
     layers: [osm, dispatches]
   });
-  
+
   var overlayMaps = {
     "Dispatches": dispatches,
     "Makers": makers,
     "Retailers": retailers
   };
-  
+
   var layerControl = L.control.layers(overlayMaps, null, {collapsed: false, position: "topleft"}).addTo(map);
   window.addEventListener('load', (event) => {
     map.invalidateSize();
   });
-</script>
+</script>