Mapbox Store Locator Patterns: A Guide for AI Agents

Where this fits

A developer is building a restaurant finder. They have a list of locations in a database, but rendering them on a map with filters, distance sorting, and a clickable sidebar requires wiring Mapbox GL JS, turf distance helpers, and state synchronisation. This skill packages those patterns so an agent can generate a working store locator without rediscovering every API quirk.

Why agents benefit

• Agent can scaffold a complete map + list UI by following known patterns instead of improvising from Mapbox docs.
• Distance calculations are delegated to @turf/turf, reducing geospatial math mistakes.
• Filtering and marker updates are paired with interactive list state, ensuring map and sidebar stay in sync.
• Popups and directions to selected locations are covered, so the agent can extend to 'get directions' features.
• The skill's structure lets an agent adapt to different data sources (static GeoJSON, API responses, CSV) without rewriting view logic.

Practical scenarios

Restaurant finder with live filters

The agent loads restaurant data, displays markers, and wires a cuisine filter. Selecting a cuisine hides non-matching markers and updates the list. Distance from user location is recalculated and sorted without page reload.

Branch office locator with 'directions' button

The agent adds a list of offices with addresses. When a user clicks a branch, a popup shows details and a 'Directions' button opens Mapbox directions to that location. The skill's patterns cover the click-to-route flow.

Event venue search with radius control

An agent builds a venue search where users adjust a 5/10/25 mile radius. Markers outside the radius are removed, and venue cards show distance. The agent reuses the distance calculation and marker filtering patterns with a slider input.

Add it to your agent workflow

Install the skill with:

npx skills add mapbox/mapbox-agent-skills --skill mapbox-store-locator-patterns

Then ask your agent to 'use the mapbox store locator patterns to build a location finder from locations.json'. The agent will reference the skill's examples for marker layers, filter logic, and distance sorting, then implement the app with Mapbox GL JS and turf dependencies.

Compare before adopting

Before wiring this skill in, compare its quality signals with alternatives. Check the repository's last commit date and issue responsiveness; 75 stars is modest but the author is Mapbox, which counts as official maintenance. Compare against the official Mapbox example gallery and against custom solutions using Leaflet or Google Maps if the project already has vendor constraints. The relevant question is workflow fit: will the agent be able to act on these patterns quickly, and are the dependencies acceptable for the target stack?

Why it is worth tracking

The skill is worth tracking because it comes from the Mapbox org and targets a common agent task: generating map interaction features without trial-and-error. As the Mapbox agent-skills repo grows, this pattern library is likely to gain new recipes for clustering, geocoding, and navigation. Evaluate it when location-aware features are on your roadmap, and revisit the repo periodically for updates, star growth, and new pattern files. For a cataloged reference with quality signals, see https://www.openagentskill.com/skills/mapbox-mapbox-store-locator-patterns.