lumbung.space/themes/lumbung-theme/layouts/shortcodes/map.html
2022-09-15 11:33:18 +02:00

82 lines
2.7 KiB
HTML

{{ with .Get "geoJson" }}
{{ $geoJson := . }}
{{ $data := getJSON $geoJson }}
<div>
<!-- Leaflet's CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin="" />
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<div id="map"></div>
<style>
#map {
width: 100%;
padding-bottom: 70%;
/* height: 500px; */
}
.fa-icon-marker {
text-align: center;
width: 100%;
}
.download-track {
background-color: #e1e1e1;
text-align: center;
margin-bottom: 25px;
border-radius: 0 0 10px 10px;
cursor: pointer;
}
</style>
<script>
// Utils
function properties(feature, layer) {
console.log(JSON.stringify(feature.properties))
// Iterate over the properties keys
// NOTE: there is no way for javascipt to preserve the order of de declaration of object values.
// JS will just print in alfabetical order (so if you wanna order it name the keys in alfabetical order like 'a', 'b', 'c')
const textOutput = Object.keys(feature.properties).map(function (key, index) {
console.log(key)
if (key === 'groupName') {
return '<h1>' + feature.properties[key] + '</h1>'
} else if (key === 'listOfNames') {
return '<span><strong>Members:</strong></span><br>' + feature.properties[key].map(function (item) { return '• <span>' + item + '</span><br>' }).join('')
} else {
return '<p>' + feature.properties[key] + '</p>'
}
});
layer.bindPopup(textOutput.join(''))
}
var map = L.map('map').setView([-7.2344, 108.3211], 3);
window.addEventListener('load', (event) => {
// TODO: find way to make this smoother, now the map first shows partly gray
map.invalidateSize();
});
// Init map
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
// Add markers
L.geoJSON({{ $data }}, {
onEachFeature: properties
}).addTo(map);
</script>
</div>
{{ end }}