Enhanced zooming and filtering mechanics for sugar mill web app

webapps/sugar_mill_locator/app.js

@@ -511,6 +511,14 @@ function applyFilters() {
     
     // Update map display
     updateMillsVisibility();
+    
+    // Update legend to show only filtered countries
+    updateLegendFiltered();
+    
+    // Zoom to filtered results if any exist
+    if (filteredMills.length > 0) {
+        zoomToFilteredBounds();
+    }
 }
 
 // Update visibility of mill markers based on filters
@@ -538,6 +546,45 @@ function updateMillsVisibility() {
     });
 }
 
+// Zoom map to encapsulate all filtered results
+function zoomToFilteredBounds() {
+    if (filteredMills.length === 0) return;
+    
+    const bounds = L.latLngBounds();
+    let hasValidBounds = false;
+    
+    filteredMills.forEach(mill => {
+        const lat = parseFloat(mill.Latitude);
+        const lng = parseFloat(mill.Longitude);
+        
+        if (!isNaN(lat) && !isNaN(lng)) {
+            bounds.extend([lat, lng]);
+            hasValidBounds = true;
+        }
+    });
+    
+    if (hasValidBounds) {
+        map.fitBounds(bounds, { padding: [50, 50], maxZoom: 10 });
+    }
+}
+
+// Update legend to show only countries in filtered results
+function updateLegendFiltered() {
+    const filteredCountries = [...new Set(filteredMills.map(m => m.Country))].sort();
+    const legendHTML = filteredCountries.map(country => {
+        const color = countryColors[country] || '#999';
+        const count = filteredMills.filter(m => m.Country === country).length;
+        return `
+            <div class="country-item">
+                <div class="country-color" style="background: ${color};"></div>
+                <span>${country} (${count})</span>
+            </div>
+        `;
+    }).join('');
+    
+    document.getElementById('legendContainer').innerHTML = legendHTML || '<p style="color: #999; font-size: 12px;">No mills match current filters</p>';
+}
+
 // Reset all filters
 function resetFilters() {
     document.getElementById('searchInput').value = '';
@@ -545,6 +592,9 @@ function resetFilters() {
     document.getElementById('minProduction').value = '';
     filteredMills = [...mills];
     updateMillsVisibility();
+    updateLegend(); // Show all countries again
+    // Reset map to initial view
+    map.setView([-20, 33], 5);
 }
 
 // Mode switching