- Display loader until all data is loaded when switching between stat…

…e/county view.

   - Fixed a bug that prevented users from dragging the map when switching tabs.
   - Update leaflet to the latest version.

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v.0.9.5 (2024-4-18):
+   - Display loader until all data is loaded when switching between state/county view.
+   - Fixed a bug that prevented users from dragging the map when switching tabs.
+   - Update leaflet to the latest version.
 ## v.0.9.4 (2024-1-31):
    - Display loader until all data is loaded.
    - Modify server configuration to turn off caching.

cdph/www/lib/leafletjs/leaflet.css

@@ -60,6 +60,11 @@
 	padding: 0;
 	}
 
+.leaflet-container img.leaflet-tile {
+	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
+	mix-blend-mode: plus-lighter;
+}
+
 .leaflet-container.leaflet-touch-zoom {
 	-ms-touch-action: pan-x pan-y;
 	touch-action: pan-x pan-y;
@@ -423,8 +428,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .leaflet-control-attribution a:focus {
 	text-decoration: underline;
 	}
-.leaflet-control-attribution svg {
+.leaflet-attribution-flag {
 	display: inline !important;
+	vertical-align: baseline !important;
+	width: 1em;
+	height: 0.6669em;
 	}
 .leaflet-left .leaflet-control-scale {
 	margin-left: 5px;
@@ -438,12 +446,10 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	line-height: 1.1;
 	padding: 2px 5px 1px;
 	white-space: nowrap;
-	overflow: hidden;
 	-moz-box-sizing: border-box;
 	     box-sizing: border-box;
-
-	background: #fff;
-	background: rgba(255, 255, 255, 0.5);
+	background: rgba(255, 255, 255, 0.8);
+	text-shadow: 1px 1px #fff;
 	}
 .leaflet-control-scale-line:not(:first-child) {
 	border-top: 2px solid #777;
@@ -537,8 +543,6 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	}
 .leaflet-popup-scrolled {
 	overflow: auto;
-	border-bottom: 1px solid #ddd;
-	border-top: 1px solid #ddd;
 	}
 
 .leaflet-oldie .leaflet-popup-content-wrapper {
@@ -647,11 +651,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	}
 
 /* Printing */
-	
+
 @media print {
 	/* Prevent printers from removing background-images of controls. */
 	.leaflet-control {
 		-webkit-print-color-adjust: exact;
-		color-adjust: exact;
+		print-color-adjust: exact;
 		}
 	}

cdph/www/scripts/datagrid.js

@@ -284,6 +284,7 @@ function loadData(dataArr, type, taxoniumURL = '') {
   }
   setGridView();
 
+  // Hide loader
   if (basicDataLoaded && sampleDataLoaded) {
     const loadingOverlay = document.getElementById('loading_overlay');
     loadingOverlay.style.display = 'none';

cdph/www/scripts/main.js

@@ -23,6 +23,27 @@ for (j = 0; j < 2; j++) {
     }
 }
 
+/* 
+Re-enable dragging on leaflet map when it's clicked.
+Solves an issue where you move your mouse outside of the DOM
+and back into it, then it doesn't let you drag the lab.
+This is due to the leaflet-gesture-handling library.
+*/ 
+window.addEventListener('DOMContentLoaded', () => {
+    const mapDiv = document.getElementById('mapid');
+    if (mapDiv) {
+        mapDiv.addEventListener('click', () => {
+            console.log('test');
+            map.dragging.enable();
+            map.scrollWheelZoom.enable();
+            if (map.tap) {
+                map.tap.enable();
+            }
+        });
+    } else {
+      console.error("Element with ID 'mapid' not found.");
+    }
+});
 
 function maxClusterCt(region_id,timel,map_layer) {
     let maxn = 0;
@@ -296,6 +317,10 @@ function changeScale() {
 }
 
 function swap_countystate() {
+    // Show loader
+    const loadingOverlay = document.getElementById('loading_overlay');
+    loadingOverlay.style.display = 'flex';
+
     var btn = document.getElementById('btn_SC');
     color_scale = 'log';
     global_state = 'default';