3 files changed, 89 insertions, 2 deletions
diff --git a/bh20simplewebuploader/main.py b/bh20simplewebuploader/main.py
index 840070d..40046c8 100644
--- a/bh20simplewebuploader/main.py
+++ b/bh20simplewebuploader/main.py
@@ -459,6 +459,13 @@ def about_page():
     buf = get_html_body('doc/web/about.html')
     return render_template('about.html',menu='ABOUT',embed=buf)
 
+##
+@app.route('/map')
+def map_page():
+    return render_template('map.html',menu='DEMO')
+
+
+
 ## Dynamic API functions starting here
 ## This is quick and dirty for now, just to get something out and demonstrate the queries
 ## Feel free to rename the functions/endpoints, feel free to process result so we get nicer JSON
@@ -522,10 +529,10 @@ def getCountByGPS():
     payload = {'query': query, 'format': 'json'}
     r = requests.get(baseURL, params=payload)
     result = r.json()['results']['bindings']
-    return jsonify([{'Fasta Count': x['fastaCount']['value'],
+    return jsonify([{'count': x['fastaCount']['value'],
                      'Location': x['location']['value'],
                      'LocationLabel': x['location_label']['value'],
-                     'GPS' :x['GPS']['value']} for x in result])
+                     'GPS' :x['GPS']['value'][6:-1]} for x in result])
 
 
 @app.route('/api/getSEQCountbytech', methods=['GET'])
diff --git a/bh20simplewebuploader/static/main.js b/bh20simplewebuploader/static/main.js
index 1d2bcba..efefe70 100644
--- a/bh20simplewebuploader/static/main.js
+++ b/bh20simplewebuploader/static/main.js
@@ -28,6 +28,7 @@ function fetchAPI(apiEndPoint) {
 
 }
 
+// Copy from function above but now added as table instead of plain json
 function fetchAPIV2(apiEndPoint) {
   fetch(scriptRoot + apiEndPoint)
     .then(response => {
@@ -218,3 +219,36 @@ function on_submit_button() {
         return false;
     }
 }
+
+
+
+//
+
+function drawMap(){
+
+// initialize the map on the "map" div with a given center and zoom
+var mymap = L.map('mapid').setView([51.505, -0.09], 1);
+
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+}).addTo(mymap);
+
+fetch(scriptRoot + "api/getCountByGPS")
+    .then(response => {
+    console.log(response)
+      return response.json();
+    })
+    .then(data => {
+
+   for (var i=0; i<data.length;i++) {
+   gps=data[i]["GPS"].split(" ")
+    var circle = L.circle([gps[1], gps[0]], {
+    color: 'red',
+    fillColor: '#f03',
+    fillOpacity: 0.5,
+    radius: parseInt(data[i]["count"])  //not working for whatever reason
+        }).addTo(mymap);
+      }
+
+      });
+}
\ No newline at end of file
diff --git a/bh20simplewebuploader/templates/map.html b/bh20simplewebuploader/templates/map.html
new file mode 100644
index 0000000..6d63c3c
--- /dev/null
+++ b/bh20simplewebuploader/templates/map.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  {% include 'header.html' %}
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
+   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+   crossorigin=""/>
+
+    {% include 'banner.html' %}
+    {% include 'menu.html' %}
+    <div id="mapid" style="height: 500px;"></div>
+
+    {% include 'footer.html' %}
+
+
+
+
+       <script type="text/javascript">
+        let scriptRoot = {{ request.script_root|tojson|safe }}; // examples
+
+        document.addEventListener("DOMContentLoaded", function(){
+            var count = fetch("/api/getCount")
+                .then((resp) => resp.json())
+                .then(function (data) {
+                    count = data["sequences"];
+              console.log(count);
+                    span = document.getElementById("Counter");
+                    txt = document.createTextNode(count);
+                    span.appendChild(txt);
+                });
+        });
+
+      </script>
+
+<!-- Make sure you put this AFTER Leaflet's CSS -->
+ <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
+   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
+   crossorigin=""></script>
+
+  <script>
+     //drawMap
+     drawMap()
+  </script>
+
+  </body>
+
+</html>