aboutsummaryrefslogtreecommitdiff
path: root/bh20simplewebuploader
diff options
context:
space:
mode:
Diffstat (limited to 'bh20simplewebuploader')
-rw-r--r--bh20simplewebuploader/static/main.css2
-rw-r--r--bh20simplewebuploader/static/map.js71
-rw-r--r--bh20simplewebuploader/templates/demo.html27
-rw-r--r--bh20simplewebuploader/templates/map.html49
4 files changed, 61 insertions, 88 deletions
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>