Edits to filtering logic

mgkollander · Apr 5, 2024 · 901ac9d · 901ac9d
1 parent 8c690c9
commit 901ac9d
Showing 1 changed file with 16 additions and 152 deletions.
diff --git a/map.js b/map.js
@@ -67,13 +67,7 @@ fetch('markerData.geojson')
         // Store in array
         markerData = data.features;
 
-        // Create markers
-        markerData.forEach(feature => {
-            const { coordinates } = feature.geometry;
-            const marker = new PruneCluster.Marker(coordinates[1], coordinates[0]);
-            marker.data.properties = feature.properties;
-            leafletView.RegisterMarker(marker);
-        });
+        // REGISTER MARKERS IN STARTING SLIDER RANGE
 
         // Add updated layer group to map
         pruneClusterLayer.addLayer(leafletView);
@@ -89,15 +83,10 @@ function initializeSlider() {
 
     // If slider exists, update options
     if (slider.noUiSlider) {
-        slider.noUiSlider.updateOptions({
-            start: [1750, 2020],
-            tooltips: [true, true],
-            step: 1,
-            range: { 'min': 1750, 'max': 2020 }
-        });
+        slider.noUiSlider.updateOptions();
     } else {
         noUiSlider.create(slider, {
-            start: [1750, 2020],
+            start: [1750, 1800],
             connect: true,
             tooltips: [true, true],
             step: 1,
@@ -115,25 +104,27 @@ function initializeSlider() {
 // Initialize slider
 const slider = initializeSlider();
 
-// The following code dynamically filters markers based on the current timeline slider range; it is very resource-intensive and not in a finished state
-// This method will be replaced in the future
-
-/* -------------------------------------------------------
-
 // Function to filter markers based on slider range
 const filterMarkersByRange = (startYear, endYear) => {
-    leafletView.RemoveMarkers();
+    let markersToRemove = [];
     markerData.forEach(feature => {
         const markerStartDate = feature.properties.startDate;
         const markerEndDate = feature.properties.endDate;
 
         if (markerStartDate <= endYear && markerEndDate >= startYear) {
-            const marker = new PruneCluster.Marker(feature.geometry.coordinates[1], feature.geometry.coordinates[0]);
-            marker.data.properties = feature.properties;
-            leafletView.RegisterMarker(marker);
+            if (false /* IF MARKERS ARE CURERNTLY ON MAP / LAYER */) {
+                const marker = new PruneCluster.Marker(feature.geometry.coordinates[1], feature.geometry.coordinates[0]);
+                marker.data.properties = feature.properties;
+                leafletView.RegisterMarker(marker);
+            } else {
+                // LEAVE IT
+            }
+        } else {
+            markersToRemove.push(feature);
         }
     });
 
+    leafletView.RemoveMarkers(markersToRemove);
     leafletView.ProcessView();
 };
 
@@ -146,135 +137,8 @@ slider.noUiSlider.on('slide', function(values) {
     filterMarkersByRange(startYear, endYear);
 });
 
-------------------------------------------------------- */
-
-// Listen for window resize
-window.addEventListener('resize', function() {
-    map.setMinZoom(calculateMinZoom());
-    initializeSlider();
-});
-
-
-/* ----------------- WIP CODE BELOW ----------------- */
-
-/*
-// Function to calculate minimum zoom based on current screen width
-const calculateMinZoom = () => document.documentElement.clientWidth < 768 ? 4 : 5;
-
-// Initialize map
-const map = L.map('map', {
-    maxBounds:[[46.56, -189.14],[73.15, -123.93]],
-    maxBoundsViscosity: 0.5,
-    minZoom: calculateMinZoom(),
-    maxZoom: 8,
-    attributionControl: false
-}).setView([64.793, -153.040], calculateMinZoom());
-
-// Add tile layer
-L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png').addTo(map);
-
-// Function to initialize range slider
-function initializeSlider() {
-    const slider = document.getElementById('slider');
-
-    // Check if slider already exists, if so, just update its options
-    if (slider.noUiSlider) {
-        slider.noUiSlider.updateOptions({
-            start: [1750, 2020],
-            tooltips: [true, true],
-            step: 1,
-            range: { 'min': 1750, 'max': 2020 }
-        });
-    } else {
-        noUiSlider.create(slider, {
-            start: [1750, 2020],
-            connect: true,
-            tooltips: [true, true],
-            step: 1,
-            format: { to: value => Math.round(value), from: value => value },
-            range: { 'min': 1750, 'max': 2020 }
-        });
-    }
-
-    // Merge slider tooltips when overlapping
-    mergeTooltips(slider, Math.floor(8600 / window.innerWidth), ' - ');
-
-    return slider;
-}
-
-// Initialize slider
-const slider = initializeSlider();
-
 // Listen for window resize
 window.addEventListener('resize', function() {
     map.setMinZoom(calculateMinZoom());
-    initializeSlider();
-});
-
-// Initialize PruneCluster
-const leafletView = new PruneClusterForLeaflet();
-leafletView.Cluster.Size = 70;
-
-// Create layer group
-let pruneClusterLayer = L.layerGroup();
-
-// Array to store marker data
-let markerData = [];
-
-// Fetch GeoJSON and store marker data
-fetch('markerData.geojson')
-    .then(response => response.json())
-    .then(data => {
-        markerData = data.features; // Store marker data in the array
-        // Add markers to PruneCluster
-        markerData.forEach(feature => {
-            let marker = new PruneCluster.Marker(feature.geometry.coordinates[1], feature.geometry.coordinates[0]);
-            marker.data.properties = feature.properties;
-            leafletView.RegisterMarker(marker);
-        });
-        // Add updated layer group to map
-        pruneClusterLayer.addLayer(leafletView); 
-        map.addLayer(pruneClusterLayer);
-
-        // Event listener for slider slide event
-        slider.noUiSlider.on('slide', function(values) {
-            let startYear = parseInt(values[0]);
-            let endYear = parseInt(values[1]);
-            
-            if (markerStartDate <= endYear && markerEndDate >= startYear) {
-                // INSERT FILTERING LOGIC FOR OPACITY
-            }
-            
-            // INSERT CODE HERE
-            leafletView.ProcessView();
-        });
-    });
-
-// Customize marker behavior
-leafletView.PrepareLeafletMarker = function(leafletMarker, data) {
-    let popupContent = "<b>" + data.properties.startDate + ' - ' + data.properties.endDate + "</b><br>" + data.properties.description;
-    const customIcon = L.icon({
-        iconUrl: 'data/icons/pin.png',
-        iconSize: [40, 40],
-        iconAnchor: [3, 30],
-        popupAnchor: [17, -28]
-    });
-    leafletMarker.setIcon(customIcon);
-    leafletMarker.bindPopup(popupContent);
-    leafletMarker.on("click", function() {
-        map.panTo(leafletMarker.getLatLng());
-    });
-};
-
-// Set custom cluster icon
-leafletView.BuildLeafletClusterIcon = function(cluster) {
-    var population = cluster.population;
-    var icon = L.divIcon({
-        html: '<div class="cluster-icon">' + population + '</div>',
-        className: 'custom-cluster-icon',
-        iconSize: [40, 40],
-        iconAnchor: [20, 40]
-    });
-    return icon;
-};
-*/
+    // Recalculate mergeTooltips isntead of reinitializing slider?
+});