index.html and data file

mak4lab · Mar 13, 2024 · 0853ff0 · 0853ff0
1 parent 6d86a16
commit 0853ff0
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 0 deletions.
diff --git a/data/herp-countries.geojson b/data/herp-countries.geojson
diff --git a/index.html b/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+    crossorigin=""/>
+
+     <!-- Make sure you put this AFTER Leaflet's CSS -->
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+    crossorigin=""></script>
+    <style>
+      #map {
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map" style="background: rgb(187, 212, 220)"></div>
+    <script type="module">
+      var map = L.map('map', {
+        maxBounds: [[-90,-180],[90,180]],
+        maxBoundsViscosity: 1
+      }).setView([0, 0], 3);
+      map.setMinZoom(2);
+
+      const response = await fetch("./data/herp-countries.geojson");
+      const geojson = await response.json();
+      const lyr = L.geoJSON(geojson, {
+        onEachFeature: (feat, lyr) => {
+          console.log(feat.properties.orgs)
+          if (feat.properties.orgs) {
+            const color = feat.properties.color ;
+            lyr.bindPopup(`
+              <h1>${feat.properties.SOVEREIGNT}</h1>
+              ${feat.properties.orgs.map(org => org.comm_name).sort().join("<br/>")}
+            `)
+          }
+        },
+        style: feat => {
+          if (feat.properties.orgs) {
+            return { color: "#EEE", fillColor: "#1471b0", fillOpacity: 1, weight: 1 };
+          } else {
+            return { color: "#EEE", fillColor: " rgb(11, 11, 29)", fillOpacity: 1, weight: 1 };
+          }
+        }
+      });
+      lyr.addTo(map);
+    </script>
+  </body>
+</html>