Style the geofilter control: icon, near-me, and radius display

Goal

Already got geofilters turned on? Good — that’s covered in Recipe: Enable geofilters. This how-to is about presentation: how the location picker looks and behaves once it’s live — where it sits, what icon and colors it wears, whether users see a Near Me shortcut, and whether they can dial in their own search radius. Everything here is a per-role app setting, so there’s no code to write.

If you haven’t turned geofilters on yet, or just want to set a default radius, head to the Enable geofilters recipe instead — that’s step one. Come back here once the control is live and you’re ready to make it match your app’s chrome and decide how much control to hand your users.


Before you start

  • WordPress admin access.
  • MAM Suite installed, with mam-main and mam-geofilters activated under Mobile App Manager → Software.
  • Geofilters already enabled for the role you’re styling (Use GeoFilters = yes, or showing as an icon — see below).
  • A device or simulator signed in as a user in that role, so you can preview changes.

You’ll find every setting below in one place: the App Settings screen, under the GeoFilters tab — and each one is stored per role. That means two roles in the same app can present the geofilter control in completely different ways.


The three styling axes

Styling the control really comes down to three independent decisions, and each one maps to one or more app settings.

Axis What you’re deciding Key settings
Placement / icon Inline control vs. a navbar icon, which side, icon colors geofilters_show_as_icon, geofilter_icon_on_right, geofilters_use_backer_view, geofilter_marker_button_color, geofilter_marker_backer_color, hide_geofilters
Near Me Whether users get a one-tap “use my current location” shortcut geofilters_hide_near_me
Radius display Whether users can change the radius, and within what bounds geofilters_hide_radius, gf_min_radius, gf_max_radius

There’s also one shared cosmetic touch that applies no matter which axis you’re adjusting: the prompt message (geofilters_message) shown in the control.


Axis 1 — Placement and icon

Inline vs. navbar icon

Out of the box, the picker renders inline in the home view. If you’d rather tuck it into a compact navbar icon, set:

  • Use GeoFilters Navbar Icon Only (tsl-geofilters_show_as_icon) = yes

Switch it on, and the geofilter control shows up only as a navigation-bar icon — no more inline strip in the home content.

Which side of the navbar

  • Show GeoFilters in right side of Navbar (tsl-geofilter_icon_on_right) = yes moves the control to the right of the navigation bar. Leave it off and it stays on the left.

Hide it from the nav header entirely

  • Hide GeoFilters in Nav Header (tsl-hide_geofilters) = yes removes the geofilter control from the navigation header. Reach for this when you’d rather the picker live only in the home content, not in the surrounding chrome.

Icon colors and the backer view

Think of the navbar icon as a “marker button” — you can color it, and optionally set it on a background chip (a “backer view”):

Setting Type Default Effect
Geofilter Marker Button Color (tsl-setting-geofilter_marker_button_color) color #000000 Color of the marker/icon itself.
Use GeoFilters Icon Backer View (tsl-geofilters_use_backer_view) yes/no When yes, draws the icon on a background chip.
Geofilter Marker Backer Color (tsl-setting-geofilter_marker_backer_color) color #ffffff Background color of that chip. Only meaningful when the backer view is on.

A pattern that works well: match the marker button color to your brand accent, turn the backer view on, and give the backer a contrasting neutral color so the icon still reads clearly against a busy navbar.


Axis 2 — The Near Me button

When a user’s device shares its GPS location, the geofilter list can offer them a one-tap shortcut straight to where they’re standing. In the mobile JSON, that shows up as a Nearby / Current Location entry at the top of the picker — the plugin prepends it whenever the request carries actual_lat / actual_lon.

The home screen also gives users this shortcut as its own dedicated Near Me button. To take it away:

  • Hide Near Me button on Home screen? (tsl-geofilters_hide_near_me) = yes

Hide it when your content isn’t really location-aware per device, or when you’d rather users choose from your curated city list than snap straight to wherever they happen to be standing.

Keep in mind: the Near Me / Current Location shortcut only shows up when GPS coordinates actually reach the request. If the app instead sends no_gps=yes and you’ve installed the optional GeoIP Detection plugin, the picker gets seeded with a city guessed from the request’s IP address instead. See Plugin overview: mam-geofilters for the full fallback chain.


Axis 3 — The radius selector

By default, users can adjust the search radius right inside the picker, within bounds you set. You’re in control of both whether they can change it at all and the range they can choose from.

Let users change the radius (or not)

  • Hide GeoFilters radius selector (tsl-geofilters_hide_radius) = yes removes the radius control entirely. Turn it on and users see content at the role’s fixed radius (GeoFilter Radius (Miles), tsl-setting-geofilter_radius), with no way to widen or narrow it themselves.

Hide the selector when you want a tightly curated experience; leave it visible when letting users say “show me more” or “show me less” of the area genuinely helps them.

Bound the range users can pick

Once the selector is visible, you can constrain the range it offers:

Setting Type Effect
GeoFilter Select Min Radius (tsl-setting-gf_min_radius) text (miles) Smallest radius a user can choose.
GeoFilter Select Max Radius (tsl-setting-gf_max_radius) text (miles) Largest radius a user can choose.

These two settings only bound the user-facing selector — they’re separate from the role’s default radius, and from the platform’s hard cap of 3000 miles enforced in code. (Developers can override the resolved radius per request via the mam_geofilter_radius filter — see that hook’s reference.)

A sensible regional setup looks like this: default radius 25, min 10, max 100 — plenty of room for a user to dial it in, without accidentally pulling in content from three states away.


Shared cosmetic — the prompt message

  • Geofilter Message (tsl-setting-geofilters_message) is free text that appears right in the geofilter control — a good spot for a call to action, like “Choose your city” or “Showing results near you.” Leave it blank and the app falls back to its default presentation.

Putting it together: two example presets

Compact, branded navbar icon (curated, no user radius control)

Setting Value
tsl-geofilters_show_as_icon yes
tsl-geofilter_icon_on_right yes
tsl-geofilters_use_backer_view yes
tsl-setting-geofilter_marker_button_color your accent color
tsl-setting-geofilter_marker_backer_color a contrasting neutral
tsl-geofilters_hide_radius yes
tsl-geofilters_hide_near_me no

Result: a small branded pin sits on the right of the navbar, a Near Me shortcut stays handy, and the radius stays fixed.

Full inline picker (let users explore)

Setting Value
tsl-geofilters_show_as_icon no
tsl-hide_geofilters no
tsl-geofilters_hide_radius no
tsl-setting-gf_min_radius 10
tsl-setting-gf_max_radius 100
tsl-geofilters_hide_near_me no
tsl-setting-geofilters_message “Choose your city”

Result: an inline picker appears with a Near Me button, a full city list, and a radius slider bounded 10–100 miles.


Steps

  1. Head to Mobile App Manager → App Settings and pick the role you’re styling (often mam-all to start).
  2. Open the GeoFilters tab of settings.
  3. Work through the three axes above, top to bottom — placement/icon, Near Me, radius display — and set the shared message too, if you’d like one.
  4. Save the role.
  5. Open the app signed in as a user in that role and check that the control looks and behaves the way you configured it. Color changes and which side the icon sits on are the easiest things to spot first.

Verify

Open the mobile app as a user in the configured role, then check:

  • The control is where you put it (inline, left-navbar icon, or right-navbar icon — or hidden from the header).
  • Icon and backer colors match what you set.
  • The Near Me button is present or absent per your choice (you’ll need GPS enabled on the device to see the Near Me / Current Location entry).
  • The radius selector is present or absent; if present, it won’t go below your min or above your max.
  • Your prompt message appears in the control.

If nothing looks different, double-check you saved on the right role and that the app is signed in as a user in that same role. Settings live per role, so styling the wrong one is the most common miss.


  • Recipe: Enable geofilters — turn the picker on and set the default radius (do this first).
  • Recipe: Manage the city list — trim or edit the cities shown in the picker.
  • Recipe: Per-neighborhood city lists — different city lists per neighborhood.
  • Plugin overview: mam-geofilters — how the control works end to end, including the GPS / GeoIP fallback chain and the mobile JSON contract.
  • Hook: mam_geofilter_radius — override the resolved radius in code.
  • Hook: mam_force_geofilters — override the on/off decision in code.

Verification

This draft was grounded against:

  • mam-geofilters/includes/admin-settings.php — the geofilters category settings registrations for use_geofilters, geofilters_show_as_icon, geofilter_icon_on_right, hide_geofilters, geofilters_hide_radius, geofilter_radius, geofilter_default_name/lat/lon, gf_min_radius, gf_max_radius, geofilters_hide_near_me, geofilter_marker_button_color, geofilters_use_backer_view, geofilter_marker_backer_color, geofilters_message (exact titles, IDs, types, and color defaults taken from here). These are appended to the main settings array via mam_add_setting_to_main, and the GeoFilters tab is registered via mam_add_settings_categories_to_main.
  • mam-geofilters/includes/phone-manager.php — Current Location prepend logic and the no_gps / GeoIP fallback.
  • mam-geofilters/includes/geofilters-cities-list.php — the “Nearby” entry prepended when actual_lat is present.
  • mam-geofilters/user_docs/02-recipe-enable-geofilters.md and 08-hook-mam-geofilter-radius.md — enable flow and radius resolution chain.
  • The per-setting reference docs under app-setting-reference/ (one app-setting-geofilter* entry per setting).
Was this article helpful?
Contents

    Need Support?

    Can't find the answer you're looking for? Don't worry we're here to help!