use Leaflet for community map

Author: tomkralidis

docs/community/index.md

@@ -2,9 +2,52 @@
 title: Community
 ---
 
+<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
+<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+<style>
+  #map {
+    width: 600px;
+    height: 200px;
+  }
+  .leaflet-marker-icon {
+    background: transparent !important;
+    box-shadow: none;
+  }
+</style>
+
 # Community
 
-<script src="https://embed.github.com/view/geojson/geopython/pygeoapi.io/gh-pages/community/live-deployments.geojson"> </script>
+<div id="map"></div>
+
+<script>
+  const map = L.map('map', {
+    attributionControl: false
+  }).setView([20, 0], 1);
+
+  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; OpenStreetMap contributors'
+  }).addTo(map);
+
+  const icon = L.icon({
+    iconUrl: 'marker.png',
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+    shadowUrl: null
+  });
+
+  fetch('https://raw.githubusercontent.com/geopython/pygeoapi.io/gh-pages/community/live-deployments.geojson')
+    .then(r => r.json())
+    .then(data => {
+      const layer = L.geoJSON(data, {
+        pointToLayer: (feature, latlng) => {
+          return L.marker(latlng);
+        }
+      }).addTo(map);
+
+      map.fitBounds(layer.getBounds());
+    });
+</script>
+
 
 <div class="pygeoapi-powered">
   <a href="https://www.ga.gov.au"><img alt="Geoscience Australia" src="/img/org-logos/aus-ga.png"/></a>