aboutsummaryrefslogtreecommitdiff
path: root/bh20simplewebuploader
diff options
context:
space:
mode:
Diffstat (limited to 'bh20simplewebuploader')
-rw-r--r--bh20simplewebuploader/static/main.css4
-rw-r--r--bh20simplewebuploader/static/map.js53
2 files changed, 42 insertions, 15 deletions
diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css
index bc8acb0..bd51118 100644
--- a/bh20simplewebuploader/static/main.css
+++ b/bh20simplewebuploader/static/main.css
@@ -469,7 +469,11 @@ div.status {
font-size: 20px;
}
+.my-custom-icon.my-custom-icon-0 {
+ background-color: red;
+}
.my-custom-icon.my-custom-icon-1 {
+ background-color: orange;
}
.my-custom-icon.my-custom-icon-2 {
background-color: #FFFAF0;
diff --git a/bh20simplewebuploader/static/map.js b/bh20simplewebuploader/static/map.js
index dfe88f9..cabb63d 100644
--- a/bh20simplewebuploader/static/map.js
+++ b/bh20simplewebuploader/static/map.js
@@ -1,4 +1,10 @@
+/*
+
+Draws the map using Leaflet and OpenStreetmap
+
+drawMap() is the main function.
+*/
var map = L.map( 'mapid', {
center: [51.505, -0.09], // Default to U.S.A
minZoom: 2,
@@ -10,17 +16,21 @@ L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
subdomains: ['a','b','c']
}).addTo(map);
+/*
+ * When a page gets rendered this function draws the map
+ */
function drawMap(){
var mymap = map;
+ // ---- fetch all counts
fetch(scriptRoot + "api/getCountByGPS")
.then(response => {
console.log(response)
return response.json();
})
.then(data => {
- updateMapMarkers(data);
+ buildMapMarkers(data);
});
document.getElementById("map_view").classList.remove("invisible");
@@ -28,10 +38,8 @@ function drawMap(){
}
-
-
/*
- * These functions updates the map with markers
+ * Register a marker with special attribute track # sequences
*/
seqMarker = L.Marker.extend({
@@ -42,26 +50,41 @@ seqMarker = L.Marker.extend({
}
});
+/*
+ * Builds markers on the map. We use cluster groups to allow
+ * counts at different zoom levels. This function is called
+ * once on page loading. markerClusterGroup just handles it.
+ * Note the display is handled in CSS (main.css) as .my-custom-icon*
+ */
-function updateMapMarkers(data) {
+function buildMapMarkers(data) {
let markers = L.markerClusterGroup({
+ singleMarkerMode: true,
iconCreateFunction: function (cluster) {
- var theseMarkers = cluster.getAllChildMarkers(); //// -- this is the array of each marker in the cluster.
+ // ---- add marker
+ // array of each marker in the cluster:
+ var theseMarkers = cluster.getAllChildMarkers();
+
+ // --- compute zoom level and set style
sumCount = 0;
for (var i = 0; i < theseMarkers.length; i++) {
- // console.log(theseMarkers[i]);
sumCount += theseMarkers[i].options.sequences;
}
- var digits = (sumCount + '').length;
-
- return L.divIcon({
- html: sumCount,
- className: 'my-custom-icon my-custom-icon-'+digits,
- });
- },
- });
+ if (theseMarkers.length < 2) {
+ return L.divIcon({
+ html: sumCount,
+ className: 'my-custom-icon my-custom-icon-0',
+ })
+ } else {
+ var digits = (sumCount + '').length;
+ return L.divIcon({
+ html: sumCount,
+ className: 'my-custom-icon my-custom-icon-'+digits,
+ });
+ }}});
+ // ---- Build the marker list
for (let i = 0; i < data.length; i++) {
let {"count": fastaCount, GPS, LocationLabel: label } = data[i];
let countSeq = Number(fastaCount);