Last updated:

May 19, 2026

Map Address Search (Mapbox Only)

Address search lets users filter map items within a radius around a typed location. Requires Mapbox as the map provider. Configure radius units, min/max values, search pattern, and optional country restrictions in Dynamic Map App. Style the search input and elements using the ncf-address-search-input, ncf-address-current-location, and ncf-address-clear classes.

Address search lets users filter map items within a radius around a location they type in. This is especially useful for store locators and maps in areas your users are already familiar with.

⚠️ Mapbox Only: This feature requires Mapbox as your map provider and a valid Mapbox Access Token.

Animated GIF showing Dynamic Map's address search feature — a user types an address and the map zooms to show only items within a set radius.
Animated GIF showing Dynamic Map's address search feature — a user types an address and the map zooms to show only items within a set radius.

Configure in Dynamic Map App

  1. Activate Address Search in Filter and Sorting.
  2. Set the radius unit (km or miles).
  3. Set the min and max radius values for the searchable range.
  4. Define the search pattern (e.g. Postcode, Street).
  5. Optionally disable the default bounding box.
  6. Optionally restrict search to specific countries using ISO 3166-2 codes.
Dynamic Map App Filter and Sorting panel showing the Address Search configuration options including unit, radius range, search pattern, and country restriction.
Dynamic Map App Filter and Sorting panel showing the Address Search configuration options including unit, radius range, search pattern, and country restriction.

Style Address Search States

Default state: Use the Webflow class ncf-address-search-input.

Webflow Designer showing the ncf-address-search-input class applied to the address search input element to style its default state.
Webflow Designer showing the ncf-address-search-input class applied to the address search input element to style its default state.

Hover state: Use Webflow's built-in hover selector on the same element.

Webflow Designer showing the hover state styled on the address search input using Webflow's default hover selector.
Webflow Designer showing the hover state styled on the address search input using Webflow's default hover selector.

Active state: Add the combo class ncf-address-search-input + active.

Webflow Designer showing the active combo class ncf-address-search-input active applied to style the address search input when focused.
Webflow Designer showing the active combo class ncf-address-search-input active applied to style the address search input when focused.

Style Address Search Elements

Style the ncf-address-current-location and ncf-address-clear elements using their default Webflow classes.

Webflow Designer showing the ncf-address-current-location and ncf-address-clear elements inside the address search component, ready to be styled.
Webflow Designer showing the ncf-address-current-location and ncf-address-clear elements inside the address search component, ready to be styled.

💡 Pro Tip: Set ncf-address-range-container to Display: None while designing — Dynamic Map will still display it on the live site.