mapbox-store-locator-patterns

Build Mapbox location apps with marker display, filtering, search, geolocation, and directions.

Updated Mar 29, 2026
One-click install
npx skills add https://github.com/Ylopo/Shana-Gates --skill mapbox-store-locator-patterns-ylopo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mapbox-store-locator-patterns
Source: https://github.com/Ylopo/Shana-Gates/tree/main/.agents/skills/mapbox-store-locator-patterns
Command: npx skills add https://github.com/Ylopo/Shana-Gates --skill mapbox-store-locator-patterns-ylopo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires mapbox-gl, turf, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This skill addresses the challenge of building applications that need to display multiple locations on a map and offer various features like filtering, search, and directions integration.

Core Features & Use Cases

  • Marker Display: Shows locations on a map with customizable strategies for few, moderate, or large numbers of locations.

  • Filtering and Searching: Allows users to search and filter locations based on various criteria.

  • Interactive List: Provides a list of locations synchronized with map markers.

  • Geolocation: Calculates distances from the user's location and allows showing the user's location on the map.

  • Directions: Integrate directions to selected locations with ease.

  • Use Case: A retail store chain can use this skill to create a user-friendly store locator with filtering options by categories or hours, making it easy for customers to find their nearest store.

Quick Start

Use the mapbox-store-locator-patterns skill to integrate a fully-featured store locator into your application by initializing the map and adding location data to the map.

Frequently Asked Questions about mapbox-store-locator-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a store locator with Mapbox GL JS that handles filtering and directions?

Building a store locator with Mapbox GL JS involves using specific patterns for marker display, location filtering, and directions integration. It supports customizable marker strategies for varying location densities and interactive list synchronization.

What is the best way to display a large number of store locations on a Mapbox map?

The best way to display large numbers of locations on a Mapbox map is using scalable marker display strategies. This skill provides specific patterns for few, moderate, and large location sets to ensure map performance and usability.

How do I calculate distances from a user's location to nearby stores using Turf.js?

To calculate distances from a user's location to nearby stores, you use Turf.js for spatial calculations. The geolocation patterns determine the user's position and compute distances to each store, displaying the user's location on the map.

Does this Mapbox store locator pattern support mobile responsive layouts?

Yes, this Mapbox store locator pattern supports mobile responsive layouts. It includes various UI and layout options specifically designed to ensure the location-based application functions correctly across different screen sizes.

Can I synchronize an interactive location list with Mapbox map markers?

Yes, you can synchronize an interactive location list with Mapbox map markers. The patterns provide a list of locations that automatically syncs with the map markers, allowing users to search and filter locations seamlessly.