diff options
| -rw-r--r-- | bh20simplewebuploader/static/main.css | 2 | ||||
| -rw-r--r-- | bh20simplewebuploader/static/map.js | 71 | ||||
| -rw-r--r-- | bh20simplewebuploader/templates/demo.html | 27 | ||||
| -rw-r--r-- | bh20simplewebuploader/templates/map.html | 49 |
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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>', - subdomains: ['a','b','c'] -}).addTo( map ); + attribution: '© <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: '© <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> |