feat(leaflet map) adds map

.vscode/settings.json

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

content/contributors.md

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

data/geojsonContributors.json

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

themes/lumbung-theme/layouts/shortcodes/map.html

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