Custom map having issues displayin all locations after filtering

Ask the community
, , , ,
1

Hi everyone! I’m working on a custom map integration using Leaflet.js in my Wix website. I’m pulling location data from a Wix CMS collection and displaying the locations as markers on the map. I’ve set up a dropdown filter so users can select specific locations or choose “All Locations” to show all the markers.

The problem I’m facing is this:

  1. Initial state: All locations display properly when the page is loaded, and all markers show up on the map.
  2. Dropdown filter: When I select a specific location from the dropdown, the markers filter correctly, and only the selected location’s marker is shown.
  3. Problem: After filtering, when I select “All Locations” again from the dropdown, no markers appear, even though I expect all the locations to be re-displayed. It seems like the map is clearing the markers, but not re-adding all the markers from the dataset when “All” is selected again.

Here’s what I’ve tried so far:

  • I’m using the postMessage method to send the selected location and dataset from Wix Velo to my HTML code.
  • In the HTML, I clear the map markers before displaying new ones based on the selected filter.
  • I’ve verified that the data passed to the HTML is correct and contains all locations when “All” is selected, but the markers are not reappearing on the map.

What I need help with:

  1. Ensuring that the markers are re-displayed when “All Locations” is selected after filtering.
  2. Understanding why the markers disappear entirely after switching back to “All Locations.”

Here’s a copy of my code :

JS code :
import wixData from ‘wix-data’;

$w.onReady(function () {
let locationData = ; // Global array to store location data

// Fetch data from CMS collection
wixData.query("YourCollectionName")
    .find()
    .then(results => {
        if (results.items.length > 0) {
            // Map CMS data to the format needed
            locationData = results.items.map(item => ({
                lat: item.latitude,
                lng: item.longitude,
                name: item.location
            }));

            // Populate dropdown with location options
            let uniqueLocations = [...new Set(locationData.map(item => item.name))];
            $w("#dropdown1").options = [{ label: "All Locations", value: "All" }];
            uniqueLocations.forEach(location => {
                $w("#dropdown1").options.push({ label: location, value: location });
            });

            // Initially display all markers
            $w("#html1").postMessage(JSON.stringify({ selectedLocation: "All", locations: locationData }));

            // Handle dropdown changes
            $w("#dropdown1").onChange(() => {
                const selectedLocation = $w("#dropdown1").value;
                if (selectedLocation === "All") {
                    // Show all markers again
                    $w("#html1").postMessage(JSON.stringify({ selectedLocation: "All", locations: locationData }));
                } else {
                    // Filter and show only the selected marker
                    const filteredLocation = locationData.filter(loc => loc.name === selectedLocation);
                    $w("#html1").postMessage(JSON.stringify({ selectedLocation, locations: filteredLocation }));
                }
            });
        }
    })
    .catch(err => console.error(err));

});

Html code :

#map { height: 685px; width: 100%; }

Any suggestions or guidance on how to fix this issue would be greatly appreciated. Thanks in advance!

2

I had a similar issue with dropdowns and found that using “RESET_ALL” worked instead of “All”

1 Like
3

Yes, as Dan mentioned, “All” is the label whereas “RESET_ALL” is the actual value. So try using that instead.

4

Thanks! That really helps! It’s finally working. Appreciate much!

1 Like
5

Thank you so much! Got it working, thanks for the quick reply.