mapbox-store-locator-patterns

Store Locator Patterns Skill

Comprehensive patterns for building store locators, restaurant finders, and location-based search applications with Mapbox GL JS. Covers marker display, filtering, distance calculation, interactive lists, and directions integration.

When to Use This Skill

Use this skill when building applications that:

• Display multiple locations on a map (stores, restaurants, offices, etc.)
• Allow users to filter or search locations
• Calculate distances from user location
• Provide interactive lists synced with map markers
• Show location details in popups or side panels
• Integrate directions to selected locations

Dependencies

Required:

• Mapbox GL JS v3.x
• @turf/turf - For spatial calculations (distance, area, etc.)

Installation:

npm install mapbox-gl @turf/turf

Core Architecture

Pattern Overview

A typical store locator consists of:

1. Map Display - Shows all locations as markers
2. Location Data - GeoJSON with store/location information
3. Interactive List - Side panel listing all locations
4. Filtering - Search, category filters, distance filters
5. Detail View - Popup or panel with location details
6. User Location - Geolocation for distance calculation. For the blue dot location indicator, use the built-in mapboxgl.GeolocateControl — simpler than custom markers.
7. Directions - Route to selected location (optional)

Data Structure

GeoJSON format for locations:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-77.034084, 38.909671]
      },
      "properties": {
        "id": "store-001",
        "name": "Downtown Store",
        "address": "123 Main St, Washington, DC 20001",
        "phone": "(202) 555-0123",
        "hours": "Mon-Sat: 9am-9pm, Sun: 10am-6pm",
        "category": "retail",
        "website": "https://example.com/downtown"
      }
    }
  ]
}