From 3219721c15ba9518ea153bea335966b45a4cffcb Mon Sep 17 00:00:00 2001 From: BonfaceKilz Date: Wed, 17 Jun 2020 03:04:18 +0300 Subject: Remove literal json representation of map --- bh20simplewebuploader/static/main.js | 1 - 1 file changed, 1 deletion(-) (limited to 'bh20simplewebuploader/static/main.js') diff --git a/bh20simplewebuploader/static/main.js b/bh20simplewebuploader/static/main.js index d90b5af..7361a99 100644 --- a/bh20simplewebuploader/static/main.js +++ b/bh20simplewebuploader/static/main.js @@ -19,7 +19,6 @@ function fetchAPI(apiEndPoint) { return response.json(); }) .then(data => { - document.getElementById("json").textContent = JSON.stringify(data, undefined, 2); document.getElementById("results").classList.remove("invisible"); document.getElementById("loader").classList.add("invisible"); }); -- cgit v1.2.3 From 81230deb1ff6ec179cd84ecdeaf9ae891b256d55 Mon Sep 17 00:00:00 2001 From: BonfaceKilz Date: Wed, 17 Jun 2020 16:10:39 +0300 Subject: Move map logic to main.js --- bh20simplewebuploader/static/main.js | 13 +++++++++++++ bh20simplewebuploader/templates/demo.html | 2 -- 2 files changed, 13 insertions(+), 2 deletions(-) (limited to 'bh20simplewebuploader/static/main.js') diff --git a/bh20simplewebuploader/static/main.js b/bh20simplewebuploader/static/main.js index 7361a99..0556fb7 100644 --- a/bh20simplewebuploader/static/main.js +++ b/bh20simplewebuploader/static/main.js @@ -13,14 +13,27 @@ 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: '© OpenStreetMap', + subdomains: ['a','b','c'] +}).addTo( map ); + function fetchAPI(apiEndPoint) { fetch(scriptRoot + apiEndPoint) .then(response => { return response.json(); }) .then(data => { + console.log(data); document.getElementById("results").classList.remove("invisible"); document.getElementById("loader").classList.add("invisible"); + // Reload the map + map.invalidateSize(); }); document.getElementById("results").classList.add("invisible"); document.getElementById("loader").classList.remove("invisible"); diff --git a/bh20simplewebuploader/templates/demo.html b/bh20simplewebuploader/templates/demo.html index f3d2df5..76c19c4 100644 --- a/bh20simplewebuploader/templates/demo.html +++ b/bh20simplewebuploader/templates/demo.html @@ -22,8 +22,6 @@ span.appendChild(txt); }); }); - - var mymap = L.map('mapid').setView([51.505, -0.09], 13); -- cgit v1.2.3 From a80646c6d6f2d768f63db2545f7e1542ea290f77 Mon Sep 17 00:00:00 2001 From: BonfaceKilz Date: Wed, 17 Jun 2020 18:54:58 +0300 Subject: Add cluster marker group When markers are close together, lump them together. Also, it provides a convenient method of remove markers when loading other GPS co-ordinates --- bh20simplewebuploader/static/main.js | 18 +++++++++++++++++- bh20simplewebuploader/templates/header.html | 12 ++++++++++++ 2 files changed, 29 insertions(+), 1 deletion(-) (limited to 'bh20simplewebuploader/static/main.js') diff --git a/bh20simplewebuploader/static/main.js b/bh20simplewebuploader/static/main.js index 0556fb7..149eb3c 100644 --- a/bh20simplewebuploader/static/main.js +++ b/bh20simplewebuploader/static/main.js @@ -23,15 +23,31 @@ L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 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 => { - console.log(data); + 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("" + label + "
" + "FastaCount: " +fastaCount); + markers.addLayer(marker) + }} + } // Reload the map map.invalidateSize(); }); diff --git a/bh20simplewebuploader/templates/header.html b/bh20simplewebuploader/templates/header.html index 35882d7..0ac5157 100644 --- a/bh20simplewebuploader/templates/header.html +++ b/bh20simplewebuploader/templates/header.html @@ -9,7 +9,19 @@ + + + + + + -- cgit v1.2.3