PPR Blog

number 1 Represneting a call function with the existing data in the datatable with all the locations. The data is parsed as JSON and then processed to display on my map feature. Here the function is able to catch an error and then return an error output if data retrieval is not successful.

function fetchDataFromBackend() {
      fetch(`${URL}/api/explores`, safeFetchOptions)
        .then(response => {
          if (!response.ok) {
            throw new Error('Error fetching data from /api/explores');
          }
          return response.json();
        })
        .then(data => {
          citysMarkers.forEach(({ marker }) => map.removeLayer(marker));
          citysMarkers = [];
          data.forEach(city => 

number 2

My project is an interacatble map which you can add and view locations with filters. This code listens for click events on the map. When a click is detected, it places a marker at the clicked location. This interaction allows users to select and mark points of interest dynamically on the map.

map.on("click", (e) => {
  placeSelectedMarker(e.latlng);
});

number 3 This function applies multiple filters on the map markers. It checks each marker against the selected cities, category, location input, and interest tags. Markers that meet all criteria remain visible, while others are removed. This provides a dynamic and interactive way to refine the map view.

function applyFilters() {
  const activeCities = Array.from(document.querySelectorAll('.city-option:checked'))
                            .map(cb => cb.value.toLowerCase());
  const category = document.getElementById('category-filter').value.toLowerCase();
  const locationStr = document.getElementById('location-filter').value.toLowerCase();
  const interest = document.getElementById('interest-filter').value.toLowerCase();
  
  citysMarkers.forEach(({ city, marker }) => {
    let isVisible = activeCities.includes(city.value.toLowerCase());
    if (category && city.category.toLowerCase() !== category) isVisible = false;
    if (locationStr && !city.name.toLowerCase().includes(locationStr)) isVisible = false;
    if (interest && !city.interest.toLowerCase().includes(interest)) isVisible = false;
    
    isVisible ? marker.addTo(map) : marker.remove();
  });
}

number 4 Here is where my function stores the data that is inputted into the form feature in my map with filters. There is a table with location, categories, tags, and location (long, lat) value.

number 5 This function applies multiple filters to determine which markers should be visible. It checks the selected cities, category, location, and interest, dynamically updating the map view by adding or removing markers accordingly. This is the heart of my feature.

function applyFilters() {
  const activeCities = Array.from(document.querySelectorAll('.city-option:checked'))
                            .map(cb => cb.value.toLowerCase());
  const category = document.getElementById('category-filter').value.toLowerCase();
  const locationStr = document.getElementById('location-filter').value.toLowerCase();
  const interest = document.getElementById('interest-filter').value.toLowerCase();
  
  citysMarkers.forEach(({ city, marker }) => {
    let isVisible = activeCities.includes(city.value.toLowerCase());
    if (category && city.category.toLowerCase() !== category) isVisible = false;
    if (locationStr && !city.name.toLowerCase().includes(locationStr)) isVisible = false;
    if (interest && !city.interest.toLowerCase().includes(interest)) isVisible = false;
    
    isVisible ? marker.addTo(map) : marker.remove();
  });
}