timelapse: prefetch all tiles

Author: h0rv

explorations/philly-timelapse/index.html

@@ -387,7 +387,6 @@
 const MIN_YEAR = SNAPSHOTS[0].year;   // 1860
 const MAX_YEAR = SNAPSHOTS[SNAPSHOTS.length - 1].year; // 2025
 const SPAN     = MAX_YEAR - MIN_YEAR; // 165
-const PREFETCH = 2;
 
 function pct(year) { return ((year - MIN_YEAR) / SPAN * 100).toFixed(3) + '%'; }
 
@@ -445,29 +444,16 @@
 function showYear(index, animate = true) {
   if (index < 0 || index >= SNAPSHOTS.length) return;
 
-  const dur      = animate ? 500 : 0;
-  const winStart = Math.max(0, index - PREFETCH);
-  const winEnd   = Math.min(SNAPSHOTS.length - 1, index + PREFETCH);
-
-  for (let i = winStart; i <= winEnd; i++) ensureLayer(i);
+  const dur = animate ? 500 : 0;
 
   requestAnimationFrame(() => {
-    for (let i = winStart; i <= winEnd; i++) {
+    for (let i = 0; i < SNAPSHOTS.length; i++) {
       if (!map.getLayer(lid(i))) continue;
       map.setPaintProperty(lid(i), 'raster-opacity-transition', { duration: dur, delay: 0 });
       map.setPaintProperty(lid(i), 'raster-opacity', i === index ? 1 : 0);
     }
   });
 
-  // Prune outside window
-  setTimeout(() => {
-    for (let i = 0; i < SNAPSHOTS.length; i++) {
-      if (i >= winStart && i <= winEnd) continue;
-      if (map.getLayer(lid(i))) map.removeLayer(lid(i));
-      if (map.getSource(sid(i))) map.removeSource(sid(i));
-    }
-  }, dur + 100);
-
   currentIndex = index;
   updateHUD(animate);
 }
@@ -582,7 +568,13 @@
 });
 
 // ─── Boot ────────────────────────────────────────────────────
-map.on('load', () => showYear(currentIndex, false));
+// Add all 30 layers immediately at opacity 0 so MapLibre starts fetching
+// tiles for every year in the background. Switching years then just flips
+// opacities — no layer creation delay, no tile cold-starts.
+map.on('load', () => {
+  for (let i = 0; i < SNAPSHOTS.length; i++) ensureLayer(i);
+  showYear(currentIndex, false);
+});
 </script>
 </body>
 </html>