From 3219721c15ba9518ea153bea335966b45a4cffcb Mon Sep 17 00:00:00 2001 From: BonfaceKilz Date: Wed, 17 Jun 2020 03:04:18 +0300 Subject: Remove literal json representation of map --- bh20simplewebuploader/static/main.css | 11 ----------- bh20simplewebuploader/static/main.js | 1 - 2 files changed, 12 deletions(-) diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css index cadb9a5..cc6d5e4 100644 --- a/bh20simplewebuploader/static/main.css +++ b/bh20simplewebuploader/static/main.css @@ -227,17 +227,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; diff --git a/bh20simplewebuploader/static/main.js b/bh20simplewebuploader/static/main.js index d90b5af..7361a99 100644 --- a/bh20simplewebuploader/static/main.js +++ b/bh20simplewebuploader/static/main.js @@ -19,7 +19,6 @@ function fetchAPI(apiEndPoint) { return response.json(); }) .then(data => { - document.getElementById("json").textContent = JSON.stringify(data, undefined, 2); document.getElementById("results").classList.remove("invisible"); document.getElementById("loader").classList.add("invisible"); }); -- cgit v1.2.3 From ae107a75f2a0211a8aeb082127865ff029ed87a5 Mon Sep 17 00:00:00 2001 From: BonfaceKilz Date: Wed, 17 Jun 2020 03:07:49 +0300 Subject: Add leaflet css and js libs --- bh20simplewebuploader/templates/demo.html | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/bh20simplewebuploader/templates/demo.html b/bh20simplewebuploader/templates/demo.html index d9ebae2..b9df5dc 100644 --- a/bh20simplewebuploader/templates/demo.html +++ b/bh20simplewebuploader/templates/demo.html @@ -1,16 +1,19 @@ {% include 'header.html' %} + {% include 'banner.html' %} {% include 'menu.html' %} {% include 'search.html' %} {% include 'demo-run.html' %} - - WIP - {% include 'footer.html' %} + -- cgit v1.2.3 From f08d4fab5bc8051324206995cad2b180bbf0aeb9 Mon Sep 17 00:00:00 2001 From: BonfaceKilz Date: Wed, 17 Jun 2020 03:08:06 +0300 Subject: Add section for map and add basic styling --- bh20simplewebuploader/static/main.css | 8 +++++++- bh20simplewebuploader/templates/demo-run.html | 13 ++++++------- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css index cc6d5e4..66b9161 100644 --- a/bh20simplewebuploader/static/main.css +++ b/bh20simplewebuploader/static/main.css @@ -47,6 +47,9 @@ h2 > svg { float: right; } +#mapid { + height: 200px; +} /* ---- start menu ---- */ /* Add a black background color to the top navigation */ @@ -250,12 +253,15 @@ a { .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/templates/demo-run.html b/bh20simplewebuploader/templates/demo-run.html index 4479409..c9f1473 100644 --- a/bh20simplewebuploader/templates/demo-run.html +++ b/bh20simplewebuploader/templates/demo-run.html @@ -12,15 +12,14 @@ - - - - + + + +
-- cgit v1.2.3 From 967e1d56a81c184d3dc8d265dec13852eb8c90a6 Mon Sep 17 00:00:00 2001 From: BonfaceKilz Date: Wed, 17 Jun 2020 03:13:53 +0300 Subject: Move leaflet CSS to the head section --- bh20simplewebuploader/templates/demo.html | 6 ------ bh20simplewebuploader/templates/header.html | 6 ++++++ 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/bh20simplewebuploader/templates/demo.html b/bh20simplewebuploader/templates/demo.html index b9df5dc..f3d2df5 100644 --- a/bh20simplewebuploader/templates/demo.html +++ b/bh20simplewebuploader/templates/demo.html @@ -1,9 +1,6 @@ {% include 'header.html' %} - {% include 'banner.html' %} {% include 'menu.html' %} @@ -11,9 +8,6 @@ {% include 'demo-run.html' %} {% include 'footer.html' %} - -- cgit v1.2.3 From ac00b9a434db48828c64459ff9b0608bf5235683 Mon Sep 17 00:00:00 2001 From: BonfaceKilz Date: Wed, 17 Jun 2020 03:24:45 +0300 Subject: Fix broken HTML --- bh20simplewebuploader/templates/demo-run.html | 2 +- bh20simplewebuploader/templates/footer.html | 3 +-- bh20simplewebuploader/templates/search.html | 6 +++--- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/bh20simplewebuploader/templates/demo-run.html b/bh20simplewebuploader/templates/demo-run.html index c9f1473..f885dd5 100644 --- a/bh20simplewebuploader/templates/demo-run.html +++ b/bh20simplewebuploader/templates/demo-run.html @@ -22,4 +22,4 @@
-
+ diff --git a/bh20simplewebuploader/templates/footer.html b/bh20simplewebuploader/templates/footer.html index 0218278..7366507 100644 --- a/bh20simplewebuploader/templates/footer.html +++ b/bh20simplewebuploader/templates/footer.html @@ -1,5 +1,4 @@
-

@@ -40,4 +39,4 @@
- +
diff --git a/bh20simplewebuploader/templates/search.html b/bh20simplewebuploader/templates/search.html index 1257ee2..dbdca90 100644 --- a/bh20simplewebuploader/templates/search.html +++ b/bh20simplewebuploader/templates/search.html @@ -1,10 +1,10 @@
- + - (example) + (example)
- + -- cgit v1.2.3 From 485534cb4594b3df3c00ef6dec2f410c5366aecb Mon Sep 17 00:00:00 2001 From: BonfaceKilz Date: Wed, 17 Jun 2020 15:48:48 +0300 Subject: Add styling to map --- bh20simplewebuploader/static/main.css | 6 ++++-- bh20simplewebuploader/templates/demo-run.html | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css index 66b9161..5a9f231 100644 --- a/bh20simplewebuploader/static/main.css +++ b/bh20simplewebuploader/static/main.css @@ -47,8 +47,10 @@ h2 > svg { float: right; } -#mapid { - height: 200px; +#map { + width: 800px; + height: 440px; + border: 1px solid #AAA; } /* ---- start menu ---- */ diff --git a/bh20simplewebuploader/templates/demo-run.html b/bh20simplewebuploader/templates/demo-run.html index f885dd5..a5b4150 100644 --- a/bh20simplewebuploader/templates/demo-run.html +++ b/bh20simplewebuploader/templates/demo-run.html @@ -17,7 +17,7 @@
-- cgit v1.2.3 From e8dab2bef5d09f0aee6f1b6e43bcce24ca42ddcb Mon Sep 17 00:00:00 2001 From: BonfaceKilz Date: Wed, 17 Jun 2020 15:51:14 +0300 Subject: Move js script to bottom of page Methods associated with map need to be created after the div container --- bh20simplewebuploader/templates/footer.html | 1 + bh20simplewebuploader/templates/header.html | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/bh20simplewebuploader/templates/footer.html b/bh20simplewebuploader/templates/footer.html index 7366507..9326b1e 100644 --- a/bh20simplewebuploader/templates/footer.html +++ b/bh20simplewebuploader/templates/footer.html @@ -40,3 +40,4 @@
+ diff --git a/bh20simplewebuploader/templates/header.html b/bh20simplewebuploader/templates/header.html index adb0fd8..35882d7 100644 --- a/bh20simplewebuploader/templates/header.html +++ b/bh20simplewebuploader/templates/header.html @@ -3,7 +3,6 @@ COVID-19 PubSeq: Public SARS-CoV-2 Sequence Resource - {% if blog %} {% endif %} -- cgit v1.2.3 From 81230deb1ff6ec179cd84ecdeaf9ae891b256d55 Mon Sep 17 00:00:00 2001 From: BonfaceKilz Date: Wed, 17 Jun 2020 16:10:39 +0300 Subject: Move map logic to main.js --- bh20simplewebuploader/static/main.js | 13 +++++++++++++ bh20simplewebuploader/templates/demo.html | 2 -- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/bh20simplewebuploader/static/main.js b/bh20simplewebuploader/static/main.js index 7361a99..0556fb7 100644 --- a/bh20simplewebuploader/static/main.js +++ b/bh20simplewebuploader/static/main.js @@ -13,14 +13,27 @@ 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 ); + function fetchAPI(apiEndPoint) { fetch(scriptRoot + apiEndPoint) .then(response => { return response.json(); }) .then(data => { + console.log(data); document.getElementById("results").classList.remove("invisible"); document.getElementById("loader").classList.add("invisible"); + // Reload the map + map.invalidateSize(); }); document.getElementById("results").classList.add("invisible"); document.getElementById("loader").classList.remove("invisible"); diff --git a/bh20simplewebuploader/templates/demo.html b/bh20simplewebuploader/templates/demo.html index f3d2df5..76c19c4 100644 --- a/bh20simplewebuploader/templates/demo.html +++ b/bh20simplewebuploader/templates/demo.html @@ -22,8 +22,6 @@ span.appendChild(txt); }); }); - - var mymap = L.map('mapid').setView([51.505, -0.09], 13); -- cgit v1.2.3 From a80646c6d6f2d768f63db2545f7e1542ea290f77 Mon Sep 17 00:00:00 2001 From: BonfaceKilz Date: Wed, 17 Jun 2020 18:54:58 +0300 Subject: Add cluster marker group When markers are close together, lump them together. Also, it provides a convenient method of remove markers when loading other GPS co-ordinates --- bh20simplewebuploader/static/main.js | 18 +++++++++++++++++- bh20simplewebuploader/templates/header.html | 12 ++++++++++++ 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/bh20simplewebuploader/static/main.js b/bh20simplewebuploader/static/main.js index 0556fb7..149eb3c 100644 --- a/bh20simplewebuploader/static/main.js +++ b/bh20simplewebuploader/static/main.js @@ -23,15 +23,31 @@ L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 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 {"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("" + label + "
" + "FastaCount: " +fastaCount); + markers.addLayer(marker) + }} + } // Reload the map map.invalidateSize(); }); diff --git a/bh20simplewebuploader/templates/header.html b/bh20simplewebuploader/templates/header.html index 35882d7..0ac5157 100644 --- a/bh20simplewebuploader/templates/header.html +++ b/bh20simplewebuploader/templates/header.html @@ -9,7 +9,19 @@ + + + + + + -- cgit v1.2.3