diff options
Diffstat (limited to 'bh20simplewebuploader/static')
-rw-r--r-- | bh20simplewebuploader/static/main.css | 21 | ||||
-rw-r--r-- | bh20simplewebuploader/static/main.js | 30 |
2 files changed, 38 insertions, 13 deletions
diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css index cadb9a5..5a9f231 100644 --- a/bh20simplewebuploader/static/main.css +++ b/bh20simplewebuploader/static/main.css @@ -47,6 +47,11 @@ h2 > svg { float: right; } +#map { + width: 800px; + height: 440px; + border: 1px solid #AAA; +} /* ---- start menu ---- */ /* Add a black background color to the top navigation */ @@ -227,17 +232,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; @@ -261,12 +255,15 @@ pre code { .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/static/main.js b/bh20simplewebuploader/static/main.js index efefe70..f2e5d99 100644 --- a/bh20simplewebuploader/static/main.js +++ b/bh20simplewebuploader/static/main.js @@ -13,15 +13,43 @@ 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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>', + 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 => { - document.getElementById("json").textContent = JSON.stringify(data, undefined, 2); + 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("<b>" + label + "</b><br/>" + "FastaCount: " +fastaCount); + markers.addLayer(marker) + }} + } + // Reload the map + map.invalidateSize(); }); document.getElementById("results").classList.add("invisible"); document.getElementById("loader").classList.remove("invisible"); |