lumbung.space/themes/lumbung-theme/layouts/shortcodes/map.html
2022-09-23 14:23:45 +02:00

95 lines
3.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) {
// 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 objectOrder = {
...feature.properties,
"AgroupName": feature.properties.groupName,
"BlistOfNames": feature.properties.listOfNames,
}
if (objectOrder?.groupName) { delete objectOrder.groupName }
if (objectOrder?.listOfNames) { delete objectOrder.listOfNames }
const newObjectOrder = Object.keys(objectOrder).sort()
const textOutput = newObjectOrder.map(function (key, index) {
console.log(key, objectOrder[key])
if (!objectOrder[key]) return
if (key === 'AgroupName') {
return '<h1>' + objectOrder[key] + '</h1>'
} else if (key === 'BlistOfNames') {
return '<div style="padding-bottom: 12px"><span><strong>Members:</strong></span><br>' + objectOrder[key].map(function (item) { return '• <span>' + item + '</span><br>' }).join('') + '</div>'
} else if (key === 'iframe') {
return '<iframe src="' + objectOrder[key] + '" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" style="width: 100%; margin-top: 12px; margin-bottom: 12px;" frameborder="0"></iframe>'
} else if (key === 'video') {
return '<video width="320" controls style="padding-bottom: 12px; width: 100%;"><source src="' + objectOrder[key] + '"></video>'
} else if (key === 'audio') {
return '<audio controls style="padding-bottom: 12px; width: 100%;"><source src="' + objectOrder[key] + '"></audio>'
} else {
return '<p>' + objectOrder[key] + '</p>'
}
});
layer.bindPopup(textOutput.join(''), { maxHeight: 500, innerWidth: 400 })
}
var map = L.map('map').setView([-7.2344, 108.3211], 3);
window.addEventListener('load', (event) => {
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 }}