feat(leaflet map) adds map
This commit is contained in:
the-digital-anarchist
parent
658a4ddfac
commit
83ad9d7c76
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"languageTool.enabled": true
|
||||
}
|
||||
|
|
@ -5,6 +5,8 @@ draft: false
|
|||
hidden: true
|
||||
---
|
||||
|
||||
{{< map geoJson="data/geojsonContributors.json">}}
|
||||
|
||||
## Lumbung members
|
||||
- **The Question of Funding**
|
||||
- Adele Jarrar
|
||||
|
|
|
|||
|
|
@ -0,0 +1,105 @@
|
|||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [-163.84239965043153, -35.395420121207046]
|
||||
},
|
||||
"properties": {
|
||||
"groupName": "The Question of Funding",
|
||||
"listOfNames": [
|
||||
"Adele Jarrar",
|
||||
"Amany Khalifa",
|
||||
"Dena Matter",
|
||||
"Fayrouz Sharqawi",
|
||||
"Martin Heller",
|
||||
"Mohammad Hawajri",
|
||||
"Mohammad Abu Sal",
|
||||
"Noor Abed",
|
||||
"Raed Issa",
|
||||
"Raoof Alajouri",
|
||||
"Rayya Badran",
|
||||
"Siwar Kraitm",
|
||||
"Yazan Khalili"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [44.33431006730271, -50.20912785456733]
|
||||
},
|
||||
"properties": {
|
||||
"groupName": "The Question of Funding",
|
||||
"listOfNames": [
|
||||
"Adele Jarrar",
|
||||
"Amany Khalifa",
|
||||
"Dena Matter",
|
||||
"Fayrouz Sharqawi",
|
||||
"Martin Heller",
|
||||
"Mohammad Hawajri",
|
||||
"Mohammad Abu Sal",
|
||||
"Noor Abed",
|
||||
"Raed Issa",
|
||||
"Raoof Alajouri",
|
||||
"Rayya Badran",
|
||||
"Siwar Kraitm",
|
||||
"Yazan Khalili"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [156.98134366371633, -20.842390202069744]
|
||||
},
|
||||
"properties": {
|
||||
"groupName": "The Question of Funding",
|
||||
"listOfNames": [
|
||||
"Adele Jarrar",
|
||||
"Amany Khalifa",
|
||||
"Dena Matter",
|
||||
"Fayrouz Sharqawi",
|
||||
"Martin Heller",
|
||||
"Mohammad Hawajri",
|
||||
"Mohammad Abu Sal",
|
||||
"Noor Abed",
|
||||
"Raed Issa",
|
||||
"Raoof Alajouri",
|
||||
"Rayya Badran",
|
||||
"Siwar Kraitm",
|
||||
"Yazan Khalili"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [-174.13057315088798, -25.3268003637054]
|
||||
},
|
||||
"properties": {
|
||||
"groupName": "The Question of Funding",
|
||||
"listOfNames": [
|
||||
"Adele Jarrar",
|
||||
"Amany Khalifa",
|
||||
"Dena Matter",
|
||||
"Fayrouz Sharqawi",
|
||||
"Martin Heller",
|
||||
"Mohammad Hawajri",
|
||||
"Mohammad Abu Sal",
|
||||
"Noor Abed",
|
||||
"Raed Issa",
|
||||
"Raoof Alajouri",
|
||||
"Rayya Badran",
|
||||
"Siwar Kraitm",
|
||||
"Yazan Khalili"
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
{{ 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 }}
|
||||
Loading…
Reference in New Issue