osm toilet - Filter working, need to remove some defaults being send

baditaflorin · Jun 19, 2024 · 91ba6e8 · 91ba6e8
1 parent d41a3c3
commit 91ba6e8
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 81 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/osm-toilet-map/static/data.js b/osm-toilet-map/static/data.js
@@ -2,8 +2,10 @@
 
 import { updateTitleAndCount } from "./utils.js";
 import { routeToNode } from "./routing.js";
+import {filterData} from "./filter.js";
 
 const markers = L.markerClusterGroup();
+let allData = []; // Store all fetched data
 
 const toiletIcon = L.icon({
     iconUrl: '/static/toilet_icon.png',
@@ -131,28 +133,38 @@ const filterAndMapNodes = async (data) => {
     return markers.filter(marker => marker !== null);
 };
 
-export const fetchDataAndAddMarkers = async (map, criteria = {}) => {
-    const bounds = map.getBounds();
-    const bbox = `${bounds.getSouth()},${bounds.getWest()},${bounds.getNorth()},${bounds.getEast()}`;
 
-    try {
-        const response = await fetch(`/data?bbox=${bbox}`);
-        const data = await response.json();
+export const fetchDataAndAddMarkers = async (map, criteria = {}) => {
+    if (!map || typeof map.getBounds !== 'function') {
+        console.error('Invalid map object');
+        return;
+    }
 
-        markers.clearLayers();
+    if (allData.length === 0) {
+        const bounds = map.getBounds();
+        const bbox = `${bounds.getSouth()},${bounds.getWest()},${bounds.getNorth()},${bounds.getEast()}`;
 
-        if (map.getZoom() < 7) {
-            alert("Zoom in to see locations");
+        try {
+            const response = await fetch(`/data?bbox=${bbox}`);
+            allData = await response.json();
+        } catch (error) {
+            console.error('Error fetching data:', error);
             return;
         }
+    }
 
-        const markersToAdd = await filterAndMapNodes(data);
-        markersToAdd.forEach((marker) => markers.addLayer(marker));
-        map.addLayer(markers);
+    markers.clearLayers();
 
-        const updateTitle = updateTitleAndCount(markersToAdd.length);
-        updateTitle();
-    } catch (error) {
-        console.error('Error fetching data and adding markers:', error);
+    if (map.getZoom() < 7) {
+        alert("Zoom in to see locations");
+        return;
     }
+
+    const filteredData = filterData(allData, criteria);
+    const markersToAdd = await filterAndMapNodes(filteredData);
+    markersToAdd.forEach((marker) => markers.addLayer(marker));
+    map.addLayer(markers);
+
+    const updateTitle = updateTitleAndCount(markersToAdd.length);
+    updateTitle();
 };
diff --git a/osm-toilet-map/static/filter.js b/osm-toilet-map/static/filter.js
@@ -1,6 +1,6 @@
 // filter.js
 
-const filterData = (data, criteria) => {
+export const filterData = (data, criteria) => {
     return data.filter(item => {
         return Object.entries(criteria).every(([key, value]) => {
             if (Array.isArray(value)) {

diff --git a/osm-toilet-map/static/filters.js b/osm-toilet-map/static/filters.js
@@ -1,5 +1,4 @@
 // filters.js
-
 import { fetchDataAndAddMarkers } from './data.js';
 
 const createFilterElement = (key, value, count) => {
@@ -22,21 +21,7 @@ const populateFilters = (topKeyValues) => {
     });
 };
 
-// const populateFilters = (topKeyValues) => {
-//     const filtersContainer = document.getElementById('filters');
-//     topKeyValues.forEach(([keyValue, count]) => {
-//         const [key, value] = keyValue.split(':');
-//         const filterId = `filter-${key}-${value}`;
-//         const filterElement = document.createElement('div');
-//         filterElement.innerHTML = `
-//             <input type="checkbox" id="${filterId}" data-key="${key}" data-value="${value}">
-//             <label for="${filterId}">${key}: ${value} (${count})</label>
-//         `;
-//         filtersContainer.appendChild(filterElement);
-//     });
-// };
-
-const setupFilterEventListeners = () => {
+const setupFilterEventListeners = (map) => {
     document.getElementById('apply-filters').addEventListener('click', () => {
         const selectedFilters = Array.from(document.querySelectorAll('#filters input:checked')).map(input => ({
             key: input.getAttribute('data-key'),
@@ -51,12 +36,12 @@ const setupFilterEventListeners = () => {
             return criteria;
         }, {});
 
-        fetchDataAndAddMarkers(filterCriteria);
+        fetchDataAndAddMarkers(map, filterCriteria);
     });
 
     document.getElementById('clear-filters').addEventListener('click', () => {
         document.querySelectorAll('#filters input:checked').forEach(input => input.checked = false);
-        fetchDataAndAddMarkers(); // Fetch all data without any filters
+        fetchDataAndAddMarkers(map); // Fetch all data without any filters
     });
 
     document.getElementById('toggle-filters').addEventListener('click', () => {

diff --git a/osm-toilet-map/static/map.js b/osm-toilet-map/static/map.js
@@ -1,3 +1,4 @@
+// map.js
 import { getUrlParameter, setUrlParameters, saveMapCenterToCookies, getUserPosition } from './utils.js';
 import { onMapClick, isAddingSource } from './addSource.js';
 import { fetchDataAndAddMarkers } from './data.js';
@@ -95,45 +96,6 @@ const initializeMap = () => {
     return map;
 };
 
-const setupEventListeners = (map) => {
-    document.getElementById('apply-filters').addEventListener('click', () => {
-        const selectedFilters = Array.from(document.querySelectorAll('#filters input:checked')).map(input => ({
-            key: input.getAttribute('data-key'),
-            value: input.getAttribute('data-value')
-        }));
-
-        const filterCriteria = selectedFilters.reduce((criteria, filter) => {
-            if (!criteria[filter.key]) {
-                criteria[filter.key] = [];
-            }
-            criteria[filter.key].push(filter.value);
-            return criteria;
-        }, {});
-
-        fetchDataAndAddMarkers(map, filterCriteria);
-    });
-
-    document.getElementById('clear-filters').addEventListener('click', () => {
-        document.querySelectorAll('#filters input:checked').forEach(input => input.checked = false);
-        fetchDataAndAddMarkers(map);
-    });
-
-    document.getElementById('toggle-filters').addEventListener('click', () => {
-        const filtersContent = document.getElementById('filters-content');
-        const isHidden = filtersContent.style.display === 'none';
-        filtersContent.style.display = isHidden ? 'block' : 'none';
-        document.getElementById('toggle-filters').textContent = isHidden ? 'Hide Filters' : 'Show Filters';
-    });
-
-    document.getElementById('search-button').addEventListener('click', () => {
-        const query = document.getElementById('search-input').value;
-        searchLocation(query, map);
-    });
-
-    addGeolocateButton(map);
-    addNewToiletSourceButton(map);
-};
-
 const mymap = initializeMap();
 
 document.addEventListener("DOMContentLoaded", async function() {
@@ -152,7 +114,7 @@ document.addEventListener("DOMContentLoaded", async function() {
     setupFilterEventListeners(mymap);
 
     // Initial load of markers without filters
-    fetchDataAndAddMarkers(mymap);
+    await fetchDataAndAddMarkers(mymap);
 });
 
-export { mymap, addGeolocateButton, initializeMap, addNewToiletSourceButton, setupEventListeners, populateFilters };
+export { mymap, addGeolocateButton, initializeMap, addNewToiletSourceButton, setupFilterEventListeners, populateFilters };