ruangrupa/lumbung.space
ruangrupa
/
lumbung.space
1
0
Fork 1
Code Issues 11 Pull Requests Projects Releases Wiki Activity

Style map markers to dots
continuous-integration/drone/push Build is passing Details

This commit is contained in:
toqvist 2024-02-20 09:47:08 +01:00
parent 5b5db0654e
commit a15379a028
1 changed files with 39 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
themes/lumbung-theme/layouts/shortcodes/kios_map.html
View File

@ -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>