Claude MarketplacesSubmit
mapbox avatar

Mapbox Store Locator Patterns

mapbox/mapbox-agent-skillsOfficial

This is a solid reference for building any kind of location finder with Mapbox. It walks through the full stack: GeoJSON structure, marker strategies based on count (HTML markers under 100 locations, symbol layers for 100-1000, clustering beyond that), interactive sidebars, and distance calculations with Turf.js. The guidance on when to use GPU-rendered symbol layers versus DOM markers is especially practical, and the code samples cover the annoying details like syncing map clicks with sidebar scrolling. If you're building a store locator, restaurant finder, or office directory, this gives you the patterns to avoid reinventing everything from scratch.

skills.sh installs
1.7K
GitHub stars
86
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add mapbox/mapbox-agent-skills --skill mapbox-store-locator-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

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:

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/mapbox/mapbox-agent-skills
Category
AI & Agent Building
First seen
May 16, 2026

More from mapbox/mapbox-agent-skills

All 18

Recommended

More AI & Agent Building
1lingzhi227 avatarrebuttal-writinglingzhi227/agent-research-skillsWrite point-by-point rebuttals to reviewer comments. Extract concerns from reviews, generate evidence-based responses, and format as a structured rebuttal docum1.7Kskills.sh installs
2lingzhi227 avatarcode-debugginglingzhi227/agent-research-skillsDebug experiment code with structured error analysis. Categorize errors, apply targeted fixes with retry logic, and use reflection to prevent recurring issues. 1.7Kskills.sh installs
3github avatargtm-0-to-1-launchgithub/awesome-copilotLaunch new products from idea to first customers. Use when launching products, finding early adopters, building launch week playbooks, diagnosing why adoption s1.7Kskills.sh installs
4github avatargdpr-compliantgithub/awesome-copilotApply GDPR-compliant engineering practices across your codebase. Use this skill whenever you are designing APIs, writing data models, building authentication fl1.7Kskills.sh installs
5lingzhi227 avatarrelated-work-writinglingzhi227/agent-research-skillsWrite Related Work sections that compare and contrast prior work with your approach. Organize by theme, cite broadly, and explain how your work differs. Use whe1.7Kskills.sh installs
6github avatarsandbox-npm-installgithub/awesome-copilotInstall npm packages in a Docker sandbox environment. Use this skill whenever you need to install, reinstall, or update node_modules inside a container where th1.7Kskills.sh installs