Merge pull request #83 from BonfaceKilz/feature/display-content-sequences

Feature/display fasta count on a map

2 files changed, 38 insertions, 13 deletions

diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css
index cadb9a5..5a9f231 100644
--- a/bh20simplewebuploader/static/main.css
+++ b/bh20simplewebuploader/static/main.css
@@ -47,6 +47,11 @@ h2 > svg {
     float: right;
 }
 
+#map {
+    width: 800px;
+    height: 440px;
+    border: 1px solid #AAA;
+}
 /* ---- start menu ---- */
 
 /* Add a black background color to the top navigation */
@@ -227,17 +232,6 @@ a {
     column-width: 250px;
 }
 
-pre code {
-    background-color: #eee;
-    display: flex;
-    width: max-content;
-    margin: 0 auto;
-    overflow-y: scroll;
-    max-height: 300px;
-    padding: 10px;
-    border: solid 1px black;
-}
-
 .record, .record .field-group, .record .field-group .field {
     display: flex;
     flex-direction: column;
@@ -261,12 +255,15 @@ pre code {
 .search-section {
     display: flex;
     justify-content: space-between;
+    width: max-content;
 }
 
+.filter-options {
+    width: 100%;
+}
 .search-section .filter-options {
     display: flex;
     flex-direction: column;
-    width: max-content;
     padding: 20px;
 }
 
diff --git a/bh20simplewebuploader/static/main.js b/bh20simplewebuploader/static/main.js
index efefe70..f2e5d99 100644
--- a/bh20simplewebuploader/static/main.js
+++ b/bh20simplewebuploader/static/main.js
@@ -13,15 +13,43 @@ function myFunction() {
     }
 }
 
+let map = L.map( 'map', {
+  center: [37.0902, -95.7129],  // Default to U.S.A
+  minZoom: 3,
+  zoom: 0
+});
+L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+  subdomains: ['a','b','c']
+}).addTo( map );
+
+let markers = L.markerClusterGroup().addTo(map)
+
+
 function fetchAPI(apiEndPoint) {
   fetch(scriptRoot + apiEndPoint)
     .then(response => {
       return response.json();
     })
     .then(data => {
-      document.getElementById("json").textContent = JSON.stringify(data, undefined, 2);
+      markers.clearLayers();
       document.getElementById("results").classList.remove("invisible");
       document.getElementById("loader").classList.add("invisible");
+      if (!(apiEndPoint === "/api/getAllaccessions")) {
+        for (let i = 0; i < data.length; i++) {
+          let {"Fasta Count": fastaCount, GPS, LocationLabel: label } = data[i];
+          let coordinates = GPS.match(/Point\((-?[0-9]+(?:.(?:[0-9]+)?)?) (-?[0-9]+(?:.(?:[0-9]+)?)?)\)/);
+          if (!(coordinates == null)) {
+            let lat, lon;
+            [lon, lat] = coordinates.slice(1, 3).map(parseFloat);
+            let point = L.point()
+            let marker = L.marker([lat, lon]);
+            marker.bindPopup("<b>" + label + "</b><br/>" + "FastaCount: " +fastaCount);
+            markers.addLayer(marker)
+          }}
+      }
+      // Reload the map
+      map.invalidateSize();
     });
   document.getElementById("results").classList.add("invisible");
   document.getElementById("loader").classList.remove("invisible");