From d3fa51ee16d902fc0bfa414611d5e0bae6618009 Mon Sep 17 00:00:00 2001
From: Pjotr Prins
Date: Fri, 17 Jul 2020 09:09:23 +0100
Subject: Refactoring map code
---
bh20simplewebuploader/static/main.js | 149 +++++++++++------------------------
bh20simplewebuploader/static/map.js | 67 ++++++++++++++++
2 files changed, 112 insertions(+), 104 deletions(-)
create mode 100644 bh20simplewebuploader/static/map.js
(limited to 'bh20simplewebuploader/static')
diff --git a/bh20simplewebuploader/static/main.js b/bh20simplewebuploader/static/main.js
index 4703047..1633c25 100644
--- a/bh20simplewebuploader/static/main.js
+++ b/bh20simplewebuploader/static/main.js
@@ -13,70 +13,41 @@ 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: '© OpenStreetMap',
- 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 => {
- console.log(data);
- 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 {"count": fastaCount, GPS, LocationLabel: label } = data[i];
- let coordinates = GPS.split(" ");
- if (!(coordinates == null)) {
- let lat, lon;
- [lon, lat] = coordinates.map(parseFloat);
- let point = L.point()
- let marker = L.marker([lat, lon]);
- marker.bindPopup("" + label + "
" + "FastaCount: " +fastaCount);
- markers.addLayer(marker)
- }}
- }
- // Reload the map
- map.invalidateSize();
- });
- document.getElementById("results").classList.add("invisible");
- document.getElementById("loader").classList.remove("invisible");
-
-}
-
-// Copy from function above but now added as table instead of plain json
-function fetchAPIV2(apiEndPoint) {
- fetch(scriptRoot + apiEndPoint)
- .then(response => {
- return response.json();
- })
- .then(data => {
- console.log(data)
- htmlString="
"
-
- // Depending on what we want to explore we'd have to call a different function ....? But how to Include that?
- for (var i=0; i"+data[i]["label"]+" | "+data[i]["count"]+" | "
- }
- htmlString=htmlString+" |
"
-
- document.getElementById("table").innerHTML = htmlString
- });
-
- document.getElementById("results").classList.add("invisible");
+ fetch(scriptRoot + apiEndPoint)
+ .then(response => {
+ return response.json();
+ })
+ .then(data => {
+ console.log(data);
+ });
+ document.getElementById("map_view").classList.add("invisible");
+ document.getElementById("loader").classList.remove("invisible");
+}
+
+// Copy from function above but now output HTML table instead of plain json
+function fetchHTMLTable(apiEndPoint) {
+ fetch(scriptRoot + apiEndPoint)
+ .then(response => {
+ return response.json();
+ })
+ .then(data => {
+ console.log(data)
+ htmlString=""
+
+ // Depending on what we want to explore we'd have to call a different function ....? But how to Include that?
+ /*
+ for (var i=0; i"+data[i]["label"]+" | "+data[i]["count"]+" | "
+ }
+*/
+ for (var i=0; i"+data[i]["label"]+" | "+data[i]["count"]+" | "
+ }
+ htmlString=htmlString+" | |
"
+
+ document.getElementById("table").innerHTML = htmlString
+ });
}
@@ -85,36 +56,39 @@ let search = () => {
fetchAPI(scriptRoot + "/api/getDetailsForSeq?seq=" + encodeURIComponent(m));
}
+// Get count from Arvados
let fetchCount = () => {
fetchAPI("/api/getCount");
}
+// Get count from Virtuoso
let fetchCountDB = () => {
fetchAPI("/api/getCountDB");
}
let fetchSEQCountBySpecimen = () => {
- fetchAPIV2("/api/getSEQCountbySpecimenSource");
+ fetchHTMLTable("/api/getSEQCountbySpecimenSource");
}
let fetchSEQCountByLocation = () => {
- fetchAPIV2("/api/getSEQCountbyLocation");
+ fetchHTMLTable("/api/getSEQCountbyLocation");
}
let fetchSEQCountByTech = () => {
- fetchAPIV2("/api/getSEQCountbytech");
+ fetchHTMLTable("/api/getSEQCountbytech");
}
let fetchAllaccessions = () => {
- fetchAPI("/api/getAllaccessions");
+ fetchHTMLTable("/api/getAllaccessions");
};
-let fetchCountByGPS = () => {
- fetchAPI("/api/getCountByGPS");
+let fetchMap = () => {
+ fetchAPI("/api/getCountByGPS");
+ updateMapMarkers();
};
let fetchSEQCountbyLocation = () => {
- fetchAPIV2("/api/getSEQCountbyLocation");
+ fetchHTMLTable("/api/getSEQCountbyLocation");
};
let fetchSEQByLocation = () => {
@@ -122,7 +96,7 @@ let fetchSEQByLocation = () => {
};
let fetchSEQCountbyContinent = () => {
- fetchAPIV2("/api/getSEQCountbyContinent");
+ fetchHTMLTable("/api/getSEQCountbyContinent");
}
@@ -252,36 +226,3 @@ 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: '© OpenStreetMap contributors'
-}).addTo(mymap);
-
-fetch(scriptRoot + "api/getCountByGPS")
- .then(response => {
- console.log(response)
- return response.json();
- })
- .then(data => {
-
- for (var i=0; iOpenStreetMap',
+ subdomains: ['a','b','c']
+}).addTo( map );
+
+let markers = L.markerClusterGroup().addTo(map)
+
+
+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: '© OpenStreetMap contributors'
+}).addTo(mymap);
+
+fetch(scriptRoot + "api/getCountByGPS")
+ .then(response => {
+ console.log(response)
+ return response.json();
+ })
+ .then(data => {
+
+ for (var i=0; i" + label + "
" + "FastaCount: " +fastaCount);
+ markers.addLayer(marker)
+ }}
+ // Reload the map
+ map.invalidateSize();
+ document.getElementById("map_view").classList.add("invisible");
+ document.getElementById("loader").classList.add("invisible");
+}
--
cgit v1.2.3