basic looped animation

code/heatmap.js

@@ -9,19 +9,47 @@ var map = new mapboxgl.Map({
     maxZoom: 12
 });
 
-const years = [
-  '2017',
-  '2018',
-  '2019',
-  '2020',
-  '2021',
-  '2022',
-  '2023'
-];
+// Define the years
+let years = [2017, 2018, 2019, 2020, 2021, 2022, 2023];
+
+// Start with the first year
+let currentYearIndex = 0;
+
+// Get the slider element
+let slider = document.getElementById('year-slider');
+
+// Set the initial slider value
+slider.value = years[currentYearIndex];
+
+// Create a loop that updates the slider value
+let intervalId = setInterval(function() {
+  // Move to the next year
+  currentYearIndex++;
+
+  // If we've gone through all the years, loop back to the first year
+  if (currentYearIndex >= years.length) {
+    currentYearIndex = 0;
+  }
+
+  // Update the slider value
+  slider.value = years[currentYearIndex];
+  filterBy(years[currentYearIndex]);
+}, 1000); // Change the slider value every 1000 milliseconds (1 second)
+
+// Stop the loop when the slider is clicked
+slider.addEventListener('mousedown', function() {
+  clearInterval(intervalId);
+});
+
+// Update the heatmap when the slider value changes
+slider.addEventListener('input', function(e) {
+  const year = parseInt(e.target.value, 10);
+  filterBy(year);
+});
 
 function filterBy(year) {
   // Set a filter on the heatmap layer to only show data for the selected year
-  map.setFilter('heatmap-layer', ['==', ['get', 'year'], year]);
+  map.setFilter('heatmap-layer', ['<=', ['get', 'year'], year]);
   // Update the year display
   document.getElementById('year-display').textContent = year;
 }
@@ -59,26 +87,22 @@ function jsonCallback(err, data) {
     'paint': {
       // Add custom heatmap layer properties here
       'heatmap-weight': ['interpolate', ['linear'], ['get', 'Valuation'], 0, 0, 6, 1],
-      'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, 12, 3],
+      'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, 5, 1],
       'heatmap-color': [
         'interpolate',
         ['linear'],
         ['heatmap-density'],
         0,
         'rgba(33,102,172,0)',
-        0.1,
-        'rgb(103,169,207)',
-        0.2,
-        'rgb(209,229,240)',
         0.5,
-        'rgb(253,219,199)',
-        0.8,
-        'rgb(239,138,98)',
+        '#D889E8',
+        0.7,
+        '#996DE8',
         1,
-        'rgb(178,24,43)'
+        '#434FE6'
       ],
-      'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 5, 12, 100],
-      'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 9, 1, 12, 0]
+      'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 5, 12, 20],
+      'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 9, 1, 12, 1]
     }
   });
 

index.html

@@ -19,6 +19,6 @@ <h2>Anchorage Solar Installations</h2>
     <script src='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
     <script src="https://d3js.org/d3.v6.min.js"></script>
-    <script src='code/contourmap.js'></script>
+    <script src='code/heatmap.js'></script>
 </body>
 </html>