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

map: add layer groups and layer controld for makers, retailers, dispatches

Browse Source
This commit is contained in:
desmukh 2023-02-07 15:34:56 +05:00
parent 99bea6ae6c
commit 5506d3cfa2
1 changed files with 65 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
themes/lumbung-theme/layouts/shortcodes/publishers_map.html
View File

@ -1,44 +1,61 @@
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" /> integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script> integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<div id="map"></div> <div id="map"></div>
<style> <style>
#map { #map {
width: 100%; width: 100%;
padding-bottom: 70%; padding-bottom: 70%;
margin-bottom: 80px; margin-bottom: 80px;
} }
</style> </style>
<script> <script>
var map = L.map('map').setView([51.505, -0.09], 3); var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
window.addEventListener('load', (event) => { maxZoom: 19,
map.invalidateSize(); attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}); });
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { // Create makers layer group
maxZoom: 19, var makers = L.layerGroup();
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' {{ with getJSON "https://kios-admin.lumbung.space/api/makers"}}
}).addTo(map); {{ range .docs }}
var makerMarker = L.marker(L.GeoJSON.coordsToLatLng({{ .location }}));
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 }}));
retailerMarker.bindPopup({{ .name }})
retailers.addLayer(retailerMarker);
{{ end }}
{{ end }}
{{ with getJSON "https://kios-admin.lumbung.space/api/dispatches"}} // Create dispatches layer group
{{ range .docs }} var dispatches = L.layerGroup();
{{ with getJSON "https://kios-admin.lumbung.space/api/dispatches"}}
{{ range .docs }}
var start = L.GeoJSON.coordsToLatLng({{ .startingPoint.location }}); var start = L.GeoJSON.coordsToLatLng({{ .startingPoint.location }});
var end = L.GeoJSON.coordsToLatLng({{ .endPoint.location }}); var startMarker = L.marker(start);
var startMarker = L.marker(start).addTo(map);
startMarker.bindPopup({{ .startingPoint.name }}); startMarker.bindPopup({{ .startingPoint.name }});
var endMarker = L.marker(end).addTo(map); var end = L.GeoJSON.coordsToLatLng({{ .endPoint.location }});
var endMarker = L.marker(end);
endMarker.bindPopup({{ .endPoint.name }}); endMarker.bindPopup({{ .endPoint.name }});
var route = L.polyline([start, end], {color: '#000'}).addTo(map); // Add line to display dispatch route
var route = L.polyline([start, end], {color: '#000'})
// Generate string to display list of products in popup
var productsString = ""; var productsString = "";
var productsList = {{ .products }}; var productsList = {{ .products }};
productsList.forEach((product, i) => productsString = productsString + product.productTitle + (i + 1 < productsList.length ? ', ' : "")); productsList.forEach((product, i) => productsString = productsString + product.productTitle + (i + 1 < productsList.length ? ', ' : ""));
@ -50,6 +67,26 @@
'Products: <strong>' + productsString + '</strong><br />' + 'Products: <strong>' + productsString + '</strong><br />' +
'Status: <strong>' + {{ .status }} + '</strong></p>'); 'Status: <strong>' + {{ .status }} + '</strong></p>');
{{ end }} dispatches.addLayer(route);
{{ end }} dispatches.addLayer(startMarker);
dispatches.addLayer(endMarker);
{{ end }}
{{ end }}
var map = L.map('map', {
center: [0, 0],
zoom: 2,
layers: [osm, makers]
});
var overlayMaps = {
"Makers": makers,
"Retailers": retailers,
"Dispatches": dispatches
};
var layerControl = L.control.layers(overlayMaps, null, {collapsed: false, position: "topleft"}).addTo(map);
window.addEventListener('load', (event) => {
map.invalidateSize();
});
</script> </script>