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.
Fetches mapbox-store-locator-patterns from mapbox/mapbox-agent-skills and configures it for Cursor.
3
Select Cursor when prompted
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ────────────────
│ · Cline · Codex · Goose · Windsurf
│ ●Cursor(selected)
│ · Cursor · Aider · Continue
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/mapbox-store-locator-patterns
Restart Cursor to activate mapbox-store-locator-patterns. Access via /mapbox-store-locator-patterns in your agent's command palette.
⚠
Security Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
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:
npminstall mapbox-gl @turf/turf
Core Architecture
Pattern Overview
A typical store locator consists of:
Map Display - Shows all locations as markers
Location Data - GeoJSON with store/location information
Interactive List - Side panel listing all locations
Detail View - Popup or panel with location details
User Location - Geolocation for distance calculation. For the blue dot location indicator, use the built-in mapboxgl.GeolocateControl — simpler than custom markers.
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"}}]}
Key properties:
id - Unique identifier for each location
name - Display name
address - Full address for display and geocoding
coordinates - [longitude, latitude] format
category - For filtering (retail, restaurant, office, etc.)
Custom properties as needed (hours, phone, website, etc.)
Basic Store Locator Implementation
Step 1: Initialize Map and Data
importmapboxglfrom'mapbox-gl';import'mapbox-gl/dist/mapbox-gl.css';mapboxgl.accessToken='YOUR_MAPBOX_ACCESS_TOKEN';// Store locations dataconst stores ={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',category:'retail'}}// ... more stores]};const map =newmapboxgl.Map({container:'map',style:'mapbox://styles/mapbox/standard',center:[-77.034084,38.909671],zoom:11});
Step 2: Add Markers to Map
Marker strategy by location count:
Count
Strategy
Reason
Fewer than 100
HTML Markers
Full DOM/CSS control; DOM node count is manageable
100–1,000
Symbol Layer (default)
Renders on the GPU via WebGL — one <canvas>, zero per-point DOM elements
More than 1,000
Clustering
Reduces visual clutter at large scale
HTML Markers create one DOM element per point. Beyond ~100 locations the browser spends too much time on layout/paint. Symbol layers bypass the DOM entirely — the GPU draws all points in a single WebGL draw call.
Symbol Layer implementation (best for 100–1,000 locations). For HTML Markers (fewer than 100) or Clustering (more than 1,000), see references/markers.md.
map.on('load',()=>{// Add store data as source map.addSource('stores',{type:'geojson',data: stores
});// Add custom marker image map.loadImage('/marker-icon.png',(error, image)=>{if(error)throw error; map.addImage('custom-marker', image);// Add symbol layer map.addLayer({id:'stores-layer',type:'symbol',source:'stores',layout:{'icon-image':'custom-marker','icon-size':0.8,'icon-allow-overlap':true,'text-field':['get','name'],'text-font':['Open Sans Bold','Arial Unicode MS Bold'],'text-offset':[0,1.5],'text-anchor':'top','text-size':12}});});// Handle marker clicks using Interactions API (recommended) map.addInteraction('store-click',{type:'click',target:{layerId:'stores-layer'},handler:(e)=>{const store = e.feature;flyToStore(store);createPopup(store);}});// Or using traditional event listener:// map.on('click', 'stores-layer', (e) => {// const store = e.features[0];// flyToStore(store);// createPopup(store);// });// Change cursor on hover map.on('mouseenter','stores-layer',()=>{ map.getCanvas().style.cursor='pointer';})
✓
Make data-driven prioritization decisions faster
Stakeholder Communication
Draft PRDs, status updates, and stakeholder presentations
›Access to product documentation and roadmap tools (Jira, Notion, etc.)
›Understanding of product management frameworks (RICE, Jobs-to-be-Done, etc.)
›Stakeholder contact information and communication channels
Time Estimate
30-60 minutes to see productivity improvements
Steps
1Install product management skill
2Start with user story generation for known feature
3Progress to competitive analysis: research 2-3 competitors
4Use for roadmap prioritization: apply RICE/ICE scoring
5Draft stakeholder communications and refine based on feedback
6Build template library for recurring PM tasks
7Share effective prompts with product team
Common Pitfalls
⚠Not validating competitive research—verify facts before sharing
⚠Accepting user stories without involving engineering team
⚠Over-relying on frameworks without qualitative judgment
⚠Not customizing outputs to company culture and communication style
⚠Skipping stakeholder validation of generated requirements
Best Practices
✓ Do
+Validate research and competitive analysis with real data
+Collaborate with engineering when generating technical requirements
+Customize frameworks and templates to your company context
+Use skill for first drafts, refine with stakeholder input
+Document successful prompt patterns for PM tasks
+Combine AI efficiency with human judgment and intuition
✗ Don't
−Don't publish competitive analysis without fact-checking
−Don't finalize user stories without engineering review
−Don't make prioritization decisions solely on AI scoring
−Don't skip customer validation of generated requirements
−Don't ignore company-specific context and culture
💡 Pro Tips
★Provide context: company goals, constraints, customer feedback
★Ask for alternatives: 'Show 3 ways to prioritize this roadmap'
★Request stakeholder-specific formatting: 'Executive summary vs. engineering spec'
★Use skill for 70% generation + 30% customization to company needs
When to Use This
✓ Use when
Use for user story writing, competitive research, roadmap prioritization, stakeholder communication, and PRD drafting. Best for reducing repetitive documentation and research work.
✗ Avoid when
Avoid for strategic product vision (requires deep customer empathy), pricing decisions (needs market and financial expertise), or when face-to-face customer discovery is more valuable than speed.
Learning Path
1Basic: user stories, feature specs, status updates
