Improve marker performance/visuals

Author: jameson-dev

app.js

@@ -100,7 +100,9 @@ function initMap() {
         minZoom: 5,  // Prevent zooming out too far
         maxZoom: 19, // Allow detailed street-level zoom
         maxBounds: australiaBounds, // Restrict panning to Australia
-        maxBoundsViscosity: 0.8 // Make bounds "sticky" (0.0 = soft, 1.0 = hard boundaries)
+        maxBoundsViscosity: 0.8, // Make bounds "sticky" (0.0 = soft, 1.0 = hard boundaries)
+        zoomAnimation: false, // Disable zoom animation so markers update instantly
+        fadeAnimation: true   // Smooth tile fade prevents flicker
     });
 
     // Define multiple base map layers
@@ -147,7 +149,8 @@ function initMap() {
     // Initialize layers
     markersLayer = L.markerClusterGroup({
         chunkedLoading: true,
-        chunkDelay: 50,        // Reduced from default 200ms for faster loading
+        chunkDelay: 1,         // Near-instant chunk processing (1ms)
+        chunkInterval: 200,    // Process 200 markers per chunk for faster completion
         chunkProgress: null,   // Disable progress updates for better performance
         spiderfyOnMaxZoom: true,
         showCoverageOnHover: false,
@@ -157,7 +160,8 @@ function initMap() {
             return zoom < 10 ? 80 : (zoom < 13 ? 60 : 50);
         },
         disableClusteringAtZoom: 19, // Disable clustering when fully zoomed in
-        animate: false,        // Disable animations for faster rendering
+        animate: true,         // Enable smooth animations during zoom
+        animateAddingMarkers: true, // Enable fade-in animations for markers
         removeOutsideVisibleBounds: true, // Remove markers outside viewport
         iconCreateFunction: function(cluster) {
             const childCount = cluster.getChildCount();

service-worker.js

@@ -1,7 +1,7 @@
 // Service Worker for SA Crash Data Map
 // Implements caching strategies for offline support and performance
 
-const VERSION = '1.0.46';
+const VERSION = '1.0.48';
 const CACHE_NAME = `crash-map-static-v${VERSION}`;
 const DATA_CACHE_NAME = `crash-map-data-v${VERSION}`;
 const RUNTIME_CACHE_NAME = `crash-map-runtime-v${VERSION}`;

styles.css

@@ -78,6 +78,39 @@
             height: 100vh;
             width: 100%;
             z-index: 1;
+            background-color: #1a1a1a; /* Dark background prevents white flash during tile loading */
+        }
+
+        /* Hardware acceleration for smoother zoom/pan */
+        .leaflet-map-pane,
+        .leaflet-tile-pane,
+        .leaflet-overlay-pane,
+        .leaflet-marker-pane {
+            transform: translate3d(0, 0, 0);
+            will-change: transform;
+        }
+
+        /* Quick fade-in animation for markers and clusters */
+        .leaflet-marker-icon,
+        .marker-cluster {
+            animation: markerFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        @keyframes markerFadeIn {
+            from {
+                opacity: 0;
+                transform: scale(0.95);
+            }
+            to {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+
+        /* Quick cluster split/merge during zoom */
+        .leaflet-cluster-anim .leaflet-marker-icon,
+        .leaflet-cluster-anim .leaflet-marker-shadow {
+            transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease-out;
         }
 
         .controls-panel {