82 lines
2.7 KiB
HTML
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 }}
|