feature/leaflet-map #61

Merged
aadil merged 16 commits from feature/leaflet-map into main 2022-12-19 07:49:52 +00:00
4 changed files with 192 additions and 0 deletions
Showing only changes of commit 83ad9d7c76 - Show all commits

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"languageTool.enabled": true
}

View File

@ -5,6 +5,8 @@ draft: false
hidden: true hidden: true
--- ---
{{< map geoJson="data/geojsonContributors.json">}}
## Lumbung members ## Lumbung members
- **The Question of Funding** - **The Question of Funding**
- Adele Jarrar - Adele Jarrar

View File

@ -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"
]
}
}
]
}

View File

@ -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 }}