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/templates/demo.html | 30 ++++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

(limited to 'bh20simplewebuploader/templates/demo.html')

diff --git a/bh20simplewebuploader/templates/demo.html b/bh20simplewebuploader/templates/demo.html
index 44aded0..2e290c6 100644
--- a/bh20simplewebuploader/templates/demo.html
+++ b/bh20simplewebuploader/templates/demo.html
@@ -5,8 +5,34 @@
     {% include 'banner.html' %}
     {% include 'menu.html' %}
     {% include 'search.html' %}
-      <p>The Virtuoso database contains <span id="CounterDB"></span> public sequences!</p>
-    {% include 'demo-run.html' %}
+    <p>The Virtuoso database contains <span id="CounterDB"></span> public sequences!</p>
+
+    <section class="search-section">
+      <div class="filter-options" action="#">
+        <p>[Demo] Display content sequences by: </p>
+        <div>
+          <button class="button" onclick="fetchSEQCountBySpecimen()">Count by Specimen source</button>
+          <button class="button" onclick="fetchSEQCountByLocation()">Count by Location</button>
+          <button class="button" onclick="fetchSEQCountByTech()">Count by Sequencer</button>
+          <!-- <button class="button" onclick="fetchAllaccessions()">Show All accessions</button> -->
+          <button class="button" onclick="fetchSEQCountbyContinent()">Count by Continent</button>
+          <button class="button" onclick="fetchMap()">Map</button>
+        </div>
+
+      </div>
+
+    </section>
+    <div id="loader" class="loader invisible">
+    </div>
+
+    <section id="map_view" class="invisible">
+      <div id="map"></div>
+    </section>
+
+    <section>
+      <div id="table"></div>
+    </section>
+
     {% include 'footer.html' %}
 
     <script type="text/javascript">
-- 
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/templates/demo.html')

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: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-  subdomains: ['a','b','c']
-}).addTo( map );
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    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: '&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);
-      }
+    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);
+            }
 
       });
+    document.getElementById("map_view").classList.remove("invisible");
+    map.invalidateSize();
 }
 
 
@@ -46,9 +43,10 @@ fetch(scriptRoot + "api/getCountByGPS")
  *
 */
 function updateMapMarkers() {
-    markers.clearLayers(); // remove all markers
-    document.getElementById("results").classList.remove("invisible");
+    // markers.clearLayers(); // remove all markers
+    // document.getElementById("results").classList.remove("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(" ");
@@ -58,10 +56,11 @@ function updateMapMarkers() {
             let point = L.point()
             let marker = L.marker([lat, lon]);
             marker.bindPopup("<b>" + label + "</b><br/>" + "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 @@
 <!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=""/>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css"
+        integrity="sha512-RLEjtaFGdC4iQMJDbMzim/dOvAu+8Qp9sw7QE4wIMYcg2goVoivzwgSZq9CsIxp4xKAZPKh5J2f2lOko2Ze6FQ=="
+        crossorigin=""/>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css"
+        integrity="sha512-BBToHPBStgMiw0lD4AtkRIZmdndhB6aQbXpX7omcrXeG2PauGBl2lzq2xUZTxaLxYz5IDHlmneCZ1IJ+P3kYtQ=="
+        crossorigin=""/>
+
+  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
+          integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
+          crossorigin=""></script>
+  <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"
+          integrity="sha512-MQlyPV+ol2lp4KodaU/Xmrn+txc1TP15pOBF/2Sfre7MRsA/pB4Vy58bEqe9u7a7DczMLtU5wT8n7OblJepKbg=="
+          crossorigin=""></script>
+
+
   <body>
     {% include 'banner.html' %}
     {% include 'menu.html' %}
     {% include 'search.html' %}
+
     <p>The Virtuoso database contains <span id="CounterDB"></span> public sequences!</p>
 
     <section class="search-section">
@@ -26,14 +46,14 @@
     </div>
 
     <section id="map_view" class="invisible">
-      <div id="map"></div>
+      <div id="mapid"></div>
     </section>
 
     <section>
       <div id="table"></div>
     </section>
 
-    {% include 'footer.html' %}
+ {% include 'footer.html' %}
 
     <script type="text/javascript">
       let scriptRoot = {{ request.script_root|tojson|safe }}; // examples
@@ -50,7 +70,10 @@
               });
       });
 
+     drawMap()
+
     </script>
+
   </body>
 
 </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 @@
-<!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=""/>
-  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css"
-        integrity="sha512-RLEjtaFGdC4iQMJDbMzim/dOvAu+8Qp9sw7QE4wIMYcg2goVoivzwgSZq9CsIxp4xKAZPKh5J2f2lOko2Ze6FQ=="
-        crossorigin=""/>
-
-  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css"
-        integrity="sha512-BBToHPBStgMiw0lD4AtkRIZmdndhB6aQbXpX7omcrXeG2PauGBl2lzq2xUZTxaLxYz5IDHlmneCZ1IJ+P3kYtQ=="
-        crossorigin=""/>
-
-  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
-          integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
-          crossorigin=""></script>
-
-  <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"
-          integrity="sha512-MQlyPV+ol2lp4KodaU/Xmrn+txc1TP15pOBF/2Sfre7MRsA/pB4Vy58bEqe9u7a7DczMLtU5wT8n7OblJepKbg=="
-          crossorigin=""></script>
-
-  <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
-      </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>
-- 
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/templates/demo.html')

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("<b>" + label + "</b><br/>" + "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 @@
 <!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=""/>
-  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css"
-        integrity="sha512-RLEjtaFGdC4iQMJDbMzim/dOvAu+8Qp9sw7QE4wIMYcg2goVoivzwgSZq9CsIxp4xKAZPKh5J2f2lOko2Ze6FQ=="
-        crossorigin=""/>
-  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css"
-        integrity="sha512-BBToHPBStgMiw0lD4AtkRIZmdndhB6aQbXpX7omcrXeG2PauGBl2lzq2xUZTxaLxYz5IDHlmneCZ1IJ+P3kYtQ=="
-        crossorigin=""/>
-
-  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
-          integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
-          crossorigin=""></script>
-  <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"
-          integrity="sha512-MQlyPV+ol2lp4KodaU/Xmrn+txc1TP15pOBF/2Sfre7MRsA/pB4Vy58bEqe9u7a7DczMLtU5wT8n7OblJepKbg=="
-          crossorigin=""></script>
-
-
+  {% include 'mapheader.html' %}
   <body>
     {% include 'banner.html' %}
     {% include 'menu.html' %}
@@ -36,7 +18,6 @@
           <button class="button" onclick="fetchSEQCountByTech()">Count by Sequencer</button>
           <!-- <button class="button" onclick="fetchAllaccessions()">Show All accessions</button> -->
           <button class="button" onclick="fetchSEQCountbyContinent()">Count by Continent</button>
-          <button class="button" onclick="fetchMap()">Map</button>
         </div>
 
       </div>
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 @@
 <!DOCTYPE html>
 <html>
   {% include 'header.html' %}
+  {% include 'mapheader.html' %}
     <body>
       {% include 'banner.html' %}
       {% include 'menu.html' %}
@@ -44,7 +45,19 @@
                 </div>
         </section>
 
-{% include 'footer.html' %}
+      <section id="map_view" class="invisible">
+        <div id="mapid"></div>
+      </section>
+
+      {% include 'footer.html' %}
+
+
+      <script type="text/javascript">
+        let scriptRoot = {{ request.script_root|tojson|safe }}; // examples
+
+        drawMap()
+
+      </script>
 
    </body>
 </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 @@
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
+        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+        crossorigin=""/>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css"
+        integrity="sha512-RLEjtaFGdC4iQMJDbMzim/dOvAu+8Qp9sw7QE4wIMYcg2goVoivzwgSZq9CsIxp4xKAZPKh5J2f2lOko2Ze6FQ=="
+        crossorigin=""/>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css"
+        integrity="sha512-BBToHPBStgMiw0lD4AtkRIZmdndhB6aQbXpX7omcrXeG2PauGBl2lzq2xUZTxaLxYz5IDHlmneCZ1IJ+P3kYtQ=="
+        crossorigin=""/>
+
+  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
+          integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
+          crossorigin=""></script>
+  <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"
+          integrity="sha512-MQlyPV+ol2lp4KodaU/Xmrn+txc1TP15pOBF/2Sfre7MRsA/pB4Vy58bEqe9u7a7DczMLtU5wT8n7OblJepKbg=="
+          crossorigin=""></script>
-- 
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/templates/demo.html')

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: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> | <a href="http://covid19.genenetwork.org/">COVID-19 PubSeq</a>',
     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<data.length;i++) {
                 gps=data[i]["GPS"].split(" ")
                 var circle = L.circle([gps[1], gps[0]], {
@@ -31,7 +31,8 @@ function drawMap(){
                     radius: parseInt(data[i]["count"])  //not working for whatever reason
                 }).addTo(mymap);
             }
-            // updateMapMarkers(data);
+            */
+            updateMapMarkers(data);
 
       });
     document.getElementById("map_view").classList.remove("invisible");
@@ -44,10 +45,6 @@ function drawMap(){
  *
 */
 function updateMapMarkers(data) {
-    // markers.clearLayers(); // remove all markers
-    // document.getElementById("results").classList.remove("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(" ");
@@ -55,14 +52,8 @@ function updateMapMarkers(data) {
             let lat, lon;
             [lon, lat] = coordinates.map(parseFloat);
             let point = L.point()
-            let marker = L.marker([lat, lon]);
-            marker.bindPopup("<b>" + label + "</b><br/>" + "FastaCount: " +fastaCount);
-            // markers.addLayer(marker)
+            L.marker([lat, lon]).addTo(map)
+                .bindPopup("<b>" + label + "</b><br/>" + "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 @@
   <body>
     {% include 'banner.html' %}
     {% include 'menu.html' %}
-    {% include 'search.html' %}
 
     <p>The Virtuoso database contains <span id="CounterDB"></span> public sequences!</p>
 
+    <!--
+    <div class="search">
+      <input id="search-input" type="search" placeholder="FASTA uri" required>
+      <button class="button search-button" type="submit" onclick="search()">
+        <span class="icon ion-search">
+          <span class="sr-only">Search</span>
+        </span>
+      </button>
+      <span class="dropt" title="http://collections.lugli.arvadosapi.com/c=00fede2c6f52b053a14edca01cfa02b7+126/sequence.fasta">(example)<span style="width:500px;"></span></span>
+    </div>
+    -->
+
     <section class="search-section">
       <div class="filter-options" action="#">
         <p>[Demo] Display content sequences by: </p>
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 @@
-<div class="search">
-  <input id="search-input" type="search" placeholder="FASTA uri" required>
-  <button class="button search-button" type="submit" onclick="search()">
-    <span class="icon ion-search">
-      <span class="sr-only">Search</span>
-    </span>
-  </button>
-  <span class="dropt" title="http://collections.lugli.arvadosapi.com/c=00fede2c6f52b053a14edca01cfa02b7+126/sequence.fasta">(example)<span style="width:500px;"></span></span>
-</div>
-
-- 
cgit v1.2.3


From 108a96f8608c3d82c8cfe1d33ebb37501c01413b Mon Sep 17 00:00:00 2001
From: Pjotr Prins
Date: Fri, 17 Jul 2020 10:38:23 +0100
Subject: Align map a bit

---
 bh20simplewebuploader/static/main.css     | 5 +++++
 bh20simplewebuploader/templates/demo.html | 2 +-
 bh20simplewebuploader/templates/home.html | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

(limited to 'bh20simplewebuploader/templates/demo.html')

diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css
index 9f89045..6e651a4 100644
--- a/bh20simplewebuploader/static/main.css
+++ b/bh20simplewebuploader/static/main.css
@@ -385,6 +385,11 @@ div.status {
     border-bottom: 1px solid #ddd;
 }
 
+.map {
+    padding: 20px 32px;
+    // display: inline-block;
+}
+
 .editbutton {
     float: right;
     text-align: right;
diff --git a/bh20simplewebuploader/templates/demo.html b/bh20simplewebuploader/templates/demo.html
index 04bf877..75bc0e2 100644
--- a/bh20simplewebuploader/templates/demo.html
+++ b/bh20simplewebuploader/templates/demo.html
@@ -37,7 +37,7 @@
     <div id="loader" class="loader invisible">
     </div>
 
-    <section id="map_view" class="invisible">
+    <section id="map_view" class="map">
       <div id="mapid"></div>
     </section>
 
diff --git a/bh20simplewebuploader/templates/home.html b/bh20simplewebuploader/templates/home.html
index 42b08c0..bede611 100644
--- a/bh20simplewebuploader/templates/home.html
+++ b/bh20simplewebuploader/templates/home.html
@@ -45,7 +45,7 @@
                 </div>
         </section>
 
-      <section id="map_view" class="invisible">
+      <section id="map_view" class="map">
         <div id="mapid"></div>
       </section>
 
-- 
cgit v1.2.3