Merge pull request #1 from acep-uaf/feature/animate-heatmap-year

Feature/animate heatmap year

code/contourmap.js

@@ -0,0 +1,82 @@
+document.addEventListener('DOMContentLoaded', (event) => {
+mapboxgl.accessToken = 'MAPBOX_API';
+
+var map = new mapboxgl.Map({
+    container: 'map', // container id
+    style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
+    center: [-149.75, 61.22], // starting position [lng, lat]
+    zoom: 9, // starting zoom
+    maxZoom: 12
+});
+
+const years = [
+  '2017',
+  '2018',
+  '2019',
+  '2020',
+  '2021',
+  '2022',
+  '2023'
+];
+
+function filterBy(year) {
+  // Set a filter on the heatmap layer to only show data for the selected year
+  map.setFilter('contour-layer', ['==', ['get', 'year'], year]);
+  // Update the year display
+  document.getElementById('year-display').textContent = year;
+}
+
+map.on('load', function () {
+  fetch('data/permits_lat_long.geojson')
+    .then(response => {
+      return response.json();
+    })
+    .then(data => {
+      jsonCallback(null, data);
+    })
+    .catch(error => console.error('Error:', error));
+});
+
+function jsonCallback(err, data) {
+  if (err) {
+    throw err;
+  }
+
+  data.features = data.features.map((d) => {
+    d.properties.year = Number(d.properties.properties.year);
+    return d;
+  });
+
+  map.addSource('contour-source', {
+    'type': 'geojson',
+    'data': data
+  });
+
+  map.addLayer({
+    'id': 'contour-layer',
+    'type': 'contour',
+    'source': 'contour-source',
+    'paint': {
+      'contour-color': [
+        'step',
+        ['get', 'Valuation'],
+        '#f1f075',
+        20,
+        '#eb4d5c'
+      ]
+    }
+  });
+
+  filterBy(2017);
+}
+
+document.getElementById('year-slider').addEventListener('input', function(e) {
+  const year = parseInt(e.target.value, 10);
+  filterBy(year);
+});
+
+});
+
+
+
+

code/heatmap.js

@@ -9,31 +9,57 @@ 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;
 }
 
 map.on('load', function () {
   fetch('data/permits_lat_long.geojson')
     .then(response => {
-      console.log('Response:', response);
       return response.json();
     })
     .then(data => {
-      console.log('Data:', data);
       jsonCallback(null, data);
     })
     .catch(error => console.error('Error:', error));
@@ -61,36 +87,30 @@ 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]
     }
   });
 
   filterBy(2017);
 }
 
 document.getElementById('year-slider').addEventListener('input', function(e) {
-  console.log('Slider input event:', e);  // Log the event
   const year = parseInt(e.target.value, 10);
-  console.log('Slider year:', year);  // Log the year
   filterBy(year);
 });
 

code/value_interpolation.js

@@ -0,0 +1,31 @@
+const turf = require('@turf/turf');
+const fs = require('fs');
+
+let rawdata = fs.readFileSync('data/permits_lat_long.geojson');
+let geojsonData = JSON.parse(rawdata);
+
+let points = geojsonData.features.filter(feature => {
+    return ['Point', 'LineString', 'Polygon', 'MultiPoint', 'MultiLineString', 'MultiPolygon', 'GeometryCollection'].includes(feature.geometry.type);
+  });
+// Define the grid parameters
+let cellSize = 0.1;
+let gridUnits = 'degrees';
+
+// Create a grid of points
+let grid = turf.pointGrid(turf.bbox(points), cellSize, {units: gridUnits});
+
+// Perform IDW interpolation
+let interpolated = turf.interpolate(points, grid, {gridType: 'point', property: 'Valuation', units: gridUnits});
+
+// Convert the GeoJSON object to a string
+let data = JSON.stringify(interpolated);
+
+// Write the string to a file
+fs.writeFile('data/value_interpolated.geojson', data, 'utf8', function(err) {
+  if (err) {
+    console.log('An error occurred while writing JSON Object to File.');
+    return console.log(err);
+  }
+
+  console.log('JSON file has been saved.');
+});