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

40
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,11 +32,21 @@
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 }}
@ -34,7 +56,9 @@
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