forked from ruangrupa/lumbung.space
118 lines
3.6 KiB
HTML
118 lines
3.6 KiB
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;
|
|
}
|
|
|
|
.black-dot {
|
|
background-color: black;
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© <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 }}), {
|
|
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 }}), {
|
|
icon: blackDotIcon
|
|
});
|
|
retailerMarker.bindPopup({{ .name }})
|
|
retailers.addLayer(retailerMarker);
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
// 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 startMarker = L.marker(start, {icon: blackDotIcon});
|
|
startMarker.bindPopup({{ .startingPoint.name }});
|
|
|
|
var end = L.GeoJSON.coordsToLatLng({{ .endPoint.location }});
|
|
var endMarker = L.marker(end, {icon: blackDotIcon});
|
|
endMarker.bindPopup({{ .endPoint.name }});
|
|
|
|
// Add line to display dispatch route
|
|
var myDashArray = {{ .status }} === "routeRequested" ? "20, 10" : {{ .status }} === "completed" ? "1, 5" : "0, 0"; // Dashed line based on status
|
|
var route = L.polyline([start, end], {color: '#000', dashArray: myDashArray });
|
|
|
|
// 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 ? ', ' : ""));
|
|
|
|
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>');
|
|
|
|
dispatches.addLayer(route);
|
|
dispatches.addLayer(startMarker);
|
|
dispatches.addLayer(endMarker);
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
var map = L.map('map', {
|
|
center: [-6.1815, 106.8228],
|
|
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>
|