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

Style map markers to dots
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
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" <link
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" /> 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" <script
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script> src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""
></script>
<div id="map"></div> <div id="map"></div>
@ -12,6 +19,11 @@
padding-bottom: 70%; padding-bottom: 70%;
margin-bottom: 80px; margin-bottom: 80px;
} }
.black-dot {
background-color: black;
border-radius: 50%;
}
</style> </style>
<script> <script>
@ -20,11 +32,21 @@
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' 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 // Create makers layer group
var makers = L.layerGroup(); var makers = L.layerGroup();
{{ with getJSON "https://kios-admin.lumbung.space/api/makers"}} {{ with getJSON "https://kios-admin.lumbung.space/api/makers"}}
{{ range .docs }} {{ range .docs }}
var makerMarker = L.marker(L.GeoJSON.coordsToLatLng({{ .location }})); var makerMarker = L.marker(L.GeoJSON.coordsToLatLng({{ .location }}), {
icon: blackDotIcon
});
makerMarker.bindPopup({{ .name }}) makerMarker.bindPopup({{ .name }})
makers.addLayer(makerMarker); makers.addLayer(makerMarker);
{{ end }} {{ end }}
@ -34,7 +56,9 @@
var retailers = L.layerGroup(); var retailers = L.layerGroup();
{{ with getJSON "https://kios-admin.lumbung.space/api/retailers"}} {{ with getJSON "https://kios-admin.lumbung.space/api/retailers"}}
{{ range .docs }} {{ range .docs }}
var retailerMarker = L.marker(L.GeoJSON.coordsToLatLng({{ .location }})); var retailerMarker = L.marker(L.GeoJSON.coordsToLatLng({{ .location }}), {
icon: blackDotIcon
});
retailerMarker.bindPopup({{ .name }}) retailerMarker.bindPopup({{ .name }})
retailers.addLayer(retailerMarker); retailers.addLayer(retailerMarker);
{{ end }} {{ end }}
@ -45,11 +69,11 @@
{{ with getJSON "https://kios-admin.lumbung.space/api/dispatches"}} {{ with getJSON "https://kios-admin.lumbung.space/api/dispatches"}}
{{ range .docs }} {{ range .docs }}
var start = L.GeoJSON.coordsToLatLng({{ .startingPoint.location }}); var start = L.GeoJSON.coordsToLatLng({{ .startingPoint.location }});
var startMarker = L.marker(start); var startMarker = L.marker(start, {icon: blackDotIcon});
startMarker.bindPopup({{ .startingPoint.name }}); startMarker.bindPopup({{ .startingPoint.name }});
var end = L.GeoJSON.coordsToLatLng({{ .endPoint.location }}); var end = L.GeoJSON.coordsToLatLng({{ .endPoint.location }});
var endMarker = L.marker(end); var endMarker = L.marker(end, {icon: blackDotIcon});
endMarker.bindPopup({{ .endPoint.name }}); endMarker.bindPopup({{ .endPoint.name }});
// Add line to display dispatch route // Add line to display dispatch route