aboutsummaryrefslogtreecommitdiff
path: root/bh20simplewebuploader
diff options
context:
space:
mode:
Diffstat (limited to 'bh20simplewebuploader')
-rw-r--r--bh20simplewebuploader/main.py11
-rw-r--r--bh20simplewebuploader/static/main.js34
-rw-r--r--bh20simplewebuploader/templates/map.html46
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>