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/map.js | 67 +++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 bh20simplewebuploader/static/map.js (limited to 'bh20simplewebuploader/static/map.js') diff --git a/bh20simplewebuploader/static/map.js b/bh20simplewebuploader/static/map.js new file mode 100644 index 0000000..afc6c3f --- /dev/null +++ b/bh20simplewebuploader/static/map.js @@ -0,0 +1,67 @@ +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 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 From 7565f72b1bf0d70426947a50d1b9a62edc48071d Mon Sep 17 00:00:00 2001 From: Pjotr Prins Date: Fri, 17 Jul 2020 09:45:58 +0100 Subject: Map is back --- bh20simplewebuploader/static/main.css | 2 +- bh20simplewebuploader/static/map.js | 71 +++++++++++++++---------------- bh20simplewebuploader/templates/demo.html | 27 +++++++++++- bh20simplewebuploader/templates/map.html | 49 --------------------- 4 files changed, 61 insertions(+), 88 deletions(-) (limited to 'bh20simplewebuploader/static/map.js') diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css index b28ee9c..9f89045 100644 --- a/bh20simplewebuploader/static/main.css +++ b/bh20simplewebuploader/static/main.css @@ -47,7 +47,7 @@ h2 > svg { float: right; } -#map { +#mapid { width: 800px; height: 440px; border: 1px solid #AAA; diff --git a/bh20simplewebuploader/static/map.js b/bh20simplewebuploader/static/map.js index afc6c3f..e1a4289 100644 --- a/bh20simplewebuploader/static/map.js +++ b/bh20simplewebuploader/static/map.js @@ -1,43 +1,40 @@ -let map = L.map( 'map', { - center: [37.0902, -95.7129], // Default to U.S.A - minZoom: 3, - zoom: 0 + +var map = L.map( 'mapid', { + center: [51.505, -0.09], // Default to U.S.A + minZoom: 2, + zoom: 0 }); + L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { - attribution: '© OpenStreetMap', - subdomains: ['a','b','c'] -}).addTo( map ); + attribution: '© OpenStreetMap', + subdomains: ['a','b','c'] +}).addTo(map); -let markers = L.markerClusterGroup().addTo(map) +var markers = L.markerClusterGroup().addTo(mapid) function drawMap(){ + var mymap = map; -// 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 { + console.log(response) + return response.json(); + }) + .then(data => { + for (var i=0; i" + label + "
" + "FastaCount: " +fastaCount); - markers.addLayer(marker) + // markers.addLayer(marker) }} + */ // Reload the map map.invalidateSize(); - document.getElementById("map_view").classList.add("invisible"); - document.getElementById("loader").classList.add("invisible"); + // document.getElementById("map_view").classList.add("invisible"); + // document.getElementById("loader").classList.add("invisible"); } diff --git a/bh20simplewebuploader/templates/demo.html b/bh20simplewebuploader/templates/demo.html index 2e290c6..3a80abf 100644 --- a/bh20simplewebuploader/templates/demo.html +++ b/bh20simplewebuploader/templates/demo.html @@ -1,10 +1,30 @@ {% include 'header.html' %} + + + + + + + + + {% include 'banner.html' %} {% include 'menu.html' %} {% include 'search.html' %} +

The Virtuoso database contains public sequences!

@@ -26,14 +46,14 @@
- {% include 'footer.html' %} + {% include 'footer.html' %} + diff --git a/bh20simplewebuploader/templates/map.html b/bh20simplewebuploader/templates/map.html index 4aa22b9..e69de29 100644 --- a/bh20simplewebuploader/templates/map.html +++ b/bh20simplewebuploader/templates/map.html @@ -1,49 +0,0 @@ - - - {% include 'header.html' %} - - - - - - - - - - - - {% include 'banner.html' %} - {% include 'menu.html' %} -
- - {% include 'footer.html' %} - - - - - - - - - - - -- cgit v1.2.3 From 06e3922a5541641077b18016e272cddc7e50205b Mon Sep 17 00:00:00 2001 From: Pjotr Prins Date: Fri, 17 Jul 2020 09:59:32 +0100 Subject: Map refactoring, now shows on HOME --- bh20simplewebuploader/main.py | 2 +- bh20simplewebuploader/static/map.js | 14 ++++++++------ bh20simplewebuploader/templates/demo-run.html | 0 bh20simplewebuploader/templates/demo.html | 21 +-------------------- bh20simplewebuploader/templates/home.html | 15 ++++++++++++++- bh20simplewebuploader/templates/map.html | 0 bh20simplewebuploader/templates/mapheader.html | 16 ++++++++++++++++ 7 files changed, 40 insertions(+), 28 deletions(-) delete mode 100644 bh20simplewebuploader/templates/demo-run.html delete mode 100644 bh20simplewebuploader/templates/map.html create mode 100644 bh20simplewebuploader/templates/mapheader.html (limited to 'bh20simplewebuploader/static/map.js') diff --git a/bh20simplewebuploader/main.py b/bh20simplewebuploader/main.py index e8bb507..206f884 100644 --- a/bh20simplewebuploader/main.py +++ b/bh20simplewebuploader/main.py @@ -253,7 +253,7 @@ def send_home(): Send the front page. """ - return render_template('home.html', menu='HOME') + return render_template('home.html', menu='HOME', load_map=True) @app.route('/upload') diff --git a/bh20simplewebuploader/static/map.js b/bh20simplewebuploader/static/map.js index e1a4289..8b8ecba 100644 --- a/bh20simplewebuploader/static/map.js +++ b/bh20simplewebuploader/static/map.js @@ -31,6 +31,7 @@ function drawMap(){ radius: parseInt(data[i]["count"]) //not working for whatever reason }).addTo(mymap); } + // updateMapMarkers(data); }); document.getElementById("map_view").classList.remove("invisible"); @@ -42,11 +43,11 @@ function drawMap(){ /* This function updates the map with markers * */ -function updateMapMarkers() { +function updateMapMarkers(data) { // markers.clearLayers(); // remove all markers // document.getElementById("results").classList.remove("invisible"); - document.getElementById("loader").classList.add("invisible"); - /* + // document.getElementById("loader").classList.add("invisible"); + for (let i = 0; i < data.length; i++) { let {"count": fastaCount, GPS, LocationLabel: label } = data[i]; let coordinates = GPS.split(" "); @@ -57,10 +58,11 @@ function updateMapMarkers() { let marker = L.marker([lat, lon]); marker.bindPopup("" + label + "
" + "FastaCount: " +fastaCount); // markers.addLayer(marker) - }} - */ + } + } + // Reload the map - map.invalidateSize(); + // map.invalidateSize(); // document.getElementById("map_view").classList.add("invisible"); // document.getElementById("loader").classList.add("invisible"); } diff --git a/bh20simplewebuploader/templates/demo-run.html b/bh20simplewebuploader/templates/demo-run.html deleted file mode 100644 index e69de29..0000000 diff --git a/bh20simplewebuploader/templates/demo.html b/bh20simplewebuploader/templates/demo.html index 3a80abf..65ba462 100644 --- a/bh20simplewebuploader/templates/demo.html +++ b/bh20simplewebuploader/templates/demo.html @@ -1,25 +1,7 @@ {% include 'header.html' %} - - - - - - - - - + {% include 'mapheader.html' %} {% include 'banner.html' %} {% include 'menu.html' %} @@ -36,7 +18,6 @@ - diff --git a/bh20simplewebuploader/templates/home.html b/bh20simplewebuploader/templates/home.html index b90a18d..42b08c0 100644 --- a/bh20simplewebuploader/templates/home.html +++ b/bh20simplewebuploader/templates/home.html @@ -1,6 +1,7 @@ {% include 'header.html' %} + {% include 'mapheader.html' %} {% include 'banner.html' %} {% include 'menu.html' %} @@ -44,7 +45,19 @@
-{% include 'footer.html' %} + + + {% include 'footer.html' %} + + + diff --git a/bh20simplewebuploader/templates/map.html b/bh20simplewebuploader/templates/map.html deleted file mode 100644 index e69de29..0000000 diff --git a/bh20simplewebuploader/templates/mapheader.html b/bh20simplewebuploader/templates/mapheader.html new file mode 100644 index 0000000..ca62051 --- /dev/null +++ b/bh20simplewebuploader/templates/mapheader.html @@ -0,0 +1,16 @@ + + + + + + -- cgit v1.2.3 From b8376a3174835d75cb8235c622ac49585f23e8ee Mon Sep 17 00:00:00 2001 From: Pjotr Prins Date: Fri, 17 Jul 2020 10:20:04 +0100 Subject: Map markers; disabled search again --- bh20simplewebuploader/static/map.js | 23 +++++++---------------- bh20simplewebuploader/templates/demo.html | 13 ++++++++++++- bh20simplewebuploader/templates/search.html | 10 ---------- 3 files changed, 19 insertions(+), 27 deletions(-) (limited to 'bh20simplewebuploader/static/map.js') diff --git a/bh20simplewebuploader/static/map.js b/bh20simplewebuploader/static/map.js index 8b8ecba..e877454 100644 --- a/bh20simplewebuploader/static/map.js +++ b/bh20simplewebuploader/static/map.js @@ -6,12 +6,11 @@ var map = L.map( 'mapid', { }); L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { - attribution: '© OpenStreetMap', + attribution: '© OpenStreetMap | COVID-19 PubSeq', subdomains: ['a','b','c'] }).addTo(map); -var markers = L.markerClusterGroup().addTo(mapid) - +// var markers = L.markerClusterGroup().addTo(mapid) function drawMap(){ var mymap = map; @@ -22,6 +21,7 @@ function drawMap(){ return response.json(); }) .then(data => { + /* for (var i=0; i" + label + "
" + "FastaCount: " +fastaCount); - // markers.addLayer(marker) + L.marker([lat, lon]).addTo(map) + .bindPopup("" + label + "
" + "FastaCount: " +fastaCount); } } - - // Reload the map - // map.invalidateSize(); - // document.getElementById("map_view").classList.add("invisible"); - // document.getElementById("loader").classList.add("invisible"); } diff --git a/bh20simplewebuploader/templates/demo.html b/bh20simplewebuploader/templates/demo.html index 65ba462..04bf877 100644 --- a/bh20simplewebuploader/templates/demo.html +++ b/bh20simplewebuploader/templates/demo.html @@ -5,10 +5,21 @@ {% include 'banner.html' %} {% include 'menu.html' %} - {% include 'search.html' %}

The Virtuoso database contains public sequences!

+ +

[Demo] Display content sequences by:

diff --git a/bh20simplewebuploader/templates/search.html b/bh20simplewebuploader/templates/search.html index dbdca90..e69de29 100644 --- a/bh20simplewebuploader/templates/search.html +++ b/bh20simplewebuploader/templates/search.html @@ -1,10 +0,0 @@ - - -- cgit v1.2.3 From fdb534f551e11ba5d43bec4aeba2bab4d141700b Mon Sep 17 00:00:00 2001 From: Pjotr Prins Date: Fri, 17 Jul 2020 10:31:34 +0100 Subject: Using mapcluster again --- bh20simplewebuploader/static/map.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'bh20simplewebuploader/static/map.js') diff --git a/bh20simplewebuploader/static/map.js b/bh20simplewebuploader/static/map.js index e877454..36208b5 100644 --- a/bh20simplewebuploader/static/map.js +++ b/bh20simplewebuploader/static/map.js @@ -10,7 +10,6 @@ L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { subdomains: ['a','b','c'] }).addTo(map); -// var markers = L.markerClusterGroup().addTo(mapid) function drawMap(){ var mymap = map; @@ -45,6 +44,7 @@ function drawMap(){ * */ function updateMapMarkers(data) { + let markers = L.markerClusterGroup(); for (let i = 0; i < data.length; i++) { let {"count": fastaCount, GPS, LocationLabel: label } = data[i]; let coordinates = GPS.split(" "); @@ -52,8 +52,10 @@ function updateMapMarkers(data) { let lat, lon; [lon, lat] = coordinates.map(parseFloat); let point = L.point() - L.marker([lat, lon]).addTo(map) - .bindPopup("" + label + "
" + "FastaCount: " +fastaCount); + marker = (L.marker([lat, lon])); + // .bindPopup("" + label + "
" + "FastaCount: " +fastaCount)); + markers.addLayer(marker); } } + map.addLayer(markers); } -- cgit v1.2.3 From 22dc44b243674f3acb6ef464985f333cdc983824 Mon Sep 17 00:00:00 2001 From: Pjotr Prins Date: Fri, 17 Jul 2020 10:32:42 +0100 Subject: Map: show FASTA count --- bh20simplewebuploader/static/map.js | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) (limited to 'bh20simplewebuploader/static/map.js') diff --git a/bh20simplewebuploader/static/map.js b/bh20simplewebuploader/static/map.js index 36208b5..5ecf95d 100644 --- a/bh20simplewebuploader/static/map.js +++ b/bh20simplewebuploader/static/map.js @@ -20,17 +20,6 @@ function drawMap(){ return response.json(); }) .then(data => { - /* - for (var i=0; i" + label + "
" + "FastaCount: " +fastaCount)); + marker.bindPopup("" + label + "
" + "FastaCount: " +fastaCount); markers.addLayer(marker); } } -- cgit v1.2.3 From 48caca541bf19e1c4f75f5b95272b99eb06a02bc Mon Sep 17 00:00:00 2001 From: Pjotr Prins Date: Fri, 17 Jul 2020 11:03:04 +0100 Subject: Update map popup --- bh20simplewebuploader/static/map.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'bh20simplewebuploader/static/map.js') diff --git a/bh20simplewebuploader/static/map.js b/bh20simplewebuploader/static/map.js index 5ecf95d..1003f7d 100644 --- a/bh20simplewebuploader/static/map.js +++ b/bh20simplewebuploader/static/map.js @@ -42,7 +42,7 @@ function updateMapMarkers(data) { [lon, lat] = coordinates.map(parseFloat); let point = L.point() marker = (L.marker([lat, lon])); - marker.bindPopup("" + label + "
" + "FastaCount: " +fastaCount); + marker.bindPopup("" + label + "
" + "SARS-CoV-2
sequences: " +fastaCount); markers.addLayer(marker); } } -- cgit v1.2.3