97 lines
3.9 KiB
HTML
97 lines
3.9 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 if (key === 'website') {
|
|
return '<p><strong>website: </strong><a href="'+ objectOrder[key] + '">' + objectOrder[key] + '</a></p>'
|
|
} 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 }} |