contour map prep work

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

@@ -29,11 +29,9 @@ function filterBy(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));
@@ -88,9 +86,7 @@ function jsonCallback(err, data) {
 }
 
 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.');
+});

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/heatmap.js'></script>
+    <script src='code/contourmap.js'></script>
 </body>
 </html>