How to Build Location Filters and Dropdown Navigation for WordPress Maps

The Problem: Too Many Locations, No Way to Navigate

What Happens When a Map Has 20+ Data Points

Early in the university project, the client asked a straightforward question: what happens when they want to add 20 data points? The answer — at that stage of development — was that all 20 would appear on the map simultaneously, with no way for the user to filter by type or navigate to a specific location without manually panning and zooming. That answer was not acceptable for an institutional map.

Two Solutions: Category Filters and Location Dropdown

Category filters address the problem of visual overload. The location dropdown addresses targeted navigation — if you know which location you are looking for, select it from the list and the map flies to it. Both are implemented entirely in JavaScript without any server requests after initial page load.

Building Category Filter Buttons

Rendering Filter Buttons from PHP to HTML

Filter buttons are rendered server-side from the category data, one button per category. Each button carries data attributes for its category ID, slug, and the map ID it belongs to. The background color is set inline using the category’s RGBA color value.

Toggle Show/Hide Logic in JavaScript

When a filter button is clicked, the JavaScript iterates over all polygon layers and marker layers, checking each location’s category slug against the active filter. Layers that match are shown; layers that do not match are hidden using Leaflet’s addTo and remove methods. Clicking the same button again deactivates the filter and restores all locations.

Visual Feedback: Active vs Inactive State

Use CSS classes to manage filter button state, toggling an active class on the clicked button and an inactive class on all others. This keeps the visual logic in CSS where it belongs and makes the behavior easy to restyle.

Building a Location Dropdown

Populating the Dropdown from Location Data

The location dropdown is a standard HTML select element populated server-side from the location posts. Each option’s value is the location’s post ID, which is used to look up the location’s coordinates in the JavaScript data object when the user makes a selection.

Flying to a Location on Select Using Leaflet flyTo

When the user selects a location from the dropdown, the map animates smoothly to that location’s coordinates using Leaflet’s flyTo method. flyTo provides a smooth animated transition that helps the user maintain spatial orientation rather than snapping abruptly to a new position.

Making Filters and Dropdown Work Together

Syncing Filter State with Dropdown Options

When a category filter is active, the dropdown should show only the locations in that category. Use the hidden attribute on individual option elements to show and hide them without removing them from the DOM, preserving the ability to restore them when the filter is cleared.

Avoiding Conflicts When Both Are Used Simultaneously

A potential conflict arises when the user selects a location from the dropdown that belongs to a category currently filtered out. Handle this by temporarily clearing the active category filter when a dropdown selection is made, restoring all layers before navigating to the selected location.

Common Pitfalls with Filters and Navigation

Performance Issues When Filtering Large Datasets

For maps with hundreds of locations, iterating over all layers on every filter button click can cause noticeable lag. Pre-index the layer arrays by category slug at initialization time rather than filtering on each click for significantly faster filter response.

Dropdown Showing Locations from Other Maps

If multiple maps appear on the same page, each dropdown must only show locations belonging to its own map. Each map instance should be entirely self-contained in its own closure — never share a global location array between map instances.

Summary and What Comes Next

Category filters and location dropdowns are the navigational backbone of a multi-location map. Build filter buttons from category data, implement toggle show/hide with Leaflet layer methods, and use flyTo for smooth navigation. Keep each map instance scoped to its own data and event listeners.

With the full feature set in place, the next challenge is making the map available beyond WordPress. The next article covers shortcode, iframe embed, and how to meet the strict widget requirements of CMS platforms like Bloomreach.