[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-mapbox-mapbox-navigation-patterns":3,"mdc-4bedrq-key":36,"related-repo-mapbox-mapbox-navigation-patterns":879,"related-org-mapbox-mapbox-navigation-patterns":985},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":32,"sourceUrl":34,"mdContent":35},"mapbox-navigation-patterns","implement Mapbox navigation and routing","Navigation implementation patterns for turn-by-turn directions, route optimization, real-time traffic, multi-stop routing, and voice guidance across web, iOS, and Android platforms",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"mapbox","Mapbox","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fmapbox.png",[12,16,19,20,23],{"name":13,"slug":14,"type":15},"Mobile","mobile","tag",{"name":17,"slug":18,"type":15},"Routing","routing",{"name":9,"slug":8,"type":15},{"name":21,"slug":22,"type":15},"Navigation","navigation",{"name":24,"slug":25,"type":15},"Maps","maps",69,"https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fmapbox-agent-skills","2026-08-22T03:56:49.436714",null,10,[],{"repoUrl":27,"stars":26,"forks":30,"topics":33,"description":29},[],"https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fmapbox-agent-skills\u002Ftree\u002FHEAD\u002Fskills\u002Fmapbox-navigation-patterns","---\nname: mapbox-navigation-patterns\ndescription: Navigation implementation patterns for turn-by-turn directions, route optimization, real-time traffic, multi-stop routing, and voice guidance across web, iOS, and Android platforms\n---\n\n# Mapbox Navigation Patterns\n\nExpert guidance for implementing navigation and routing features using Mapbox Directions API and Navigation SDKs. Covers turn-by-turn navigation, route optimization, real-time traffic integration, multi-stop routing, and navigation UI components.\n\n## Use This Skill When\n\nUser says things like:\n\n- \"I need turn-by-turn navigation in my app\"\n- \"How do I add driving directions?\"\n- \"I want to show a route on the map\"\n- \"I need multi-stop routing\"\n- \"How do I add voice guidance?\"\n- \"I want real-time traffic updates\"\n- \"I need to optimize delivery routes\"\n\n## Product Overview\n\n### Directions API (REST)\n\n**Best for:** Web applications, simple routing, backend route calculation\n\n**Features:**\n\n- Route calculation (driving, walking, cycling, traffic)\n- Alternative routes\n- Turn-by-turn instructions\n- Multi-stop routing (up to 25 waypoints)\n- Route optimization\n- Real-time traffic data\n- Avoid specific roads\u002Fareas\n\n**Pricing:** Pay per request\n\n### Navigation SDK for iOS\n\n**Best for:** Native iOS apps with turn-by-turn navigation\n\n**Defaults:** SwiftUI app shell + wrap drop-in `NavigationViewController` via `UIViewControllerRepresentable` (official getting-started path). Use a fully custom Core UI ([CoreSDKExample](https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fmapbox-navigation-ios\u002Ftree\u002Fmain\u002FExamples\u002FCoreSDKExample)) only when the user explicitly wants to build their own nav chrome.\n\n**Before coding:** SPM (`MapboxNavigationCore` + `MapboxNavigationUIKit`), `.netrc` download token, `MBXAccessToken`, location permissions, background `audio`\u002F`location` — see [install guide](https:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fnavigation\u002Fguides\u002Finstall\u002F) and the iOS reference checklist.\n\n**Features:**\n\n- Drop-in turn-by-turn UI (`NavigationViewController`) — default\n- Optional fully custom Core UI (route progress \u002F banner publishers)\n- Voice guidance (30+ languages)\n- Real-time rerouting\n- Traffic-aware routing\n- Offline maps and routing\n- Route progress tracking\n- Speed limit display\n\n**Pricing:** Monthly Active Users (MAU) based\n\n### Navigation SDK for Android\n\n**Best for:** Native Android apps with turn-by-turn navigation\n\n**Features:**\n\n- Complete turn-by-turn navigation UI\n- Voice guidance (30+ languages)\n- Real-time rerouting\n- Traffic-aware routing\n- Offline maps and routing\n- Custom UI components\n- Route progress tracking\n- Speed limit display\n\n**Pricing:** Monthly Active Users (MAU) based\n\n## Decision Guide\n\n### Choose Directions API when:\n\n- ✅ Web application\n- ✅ Simple route display (no turn-by-turn)\n- ✅ Backend route calculation\n- ✅ Route planning and optimization\n- ✅ Multi-stop routing\n- ✅ Don't need voice guidance\n\n### Choose Navigation SDK when:\n\n- ✅ Native mobile app (iOS\u002FAndroid)\n- ✅ Need turn-by-turn navigation\n- ✅ Need voice guidance\n- ✅ Need navigation UI components\n- ✅ Need offline navigation\n- ✅ Need real-time rerouting\n- ✅ Building a navigation\u002Fdelivery app\n\n## Implementation Patterns\n\n- **[references\u002Fweb-directions-api.md](references\u002Fweb-directions-api.md)** - Directions API patterns for the web: basic route display, turn-by-turn instructions, alternative routes, multi-stop routing, route optimization, and congestion-based route coloring\n- **[references\u002Fios-navigation-sdk.md](references\u002Fios-navigation-sdk.md)** - When: iOS turn-by-turn, setup, default SwiftUI + wrapped `NavigationViewController`, Core opt-in, example catalog\n- **[references\u002Fios-navigation-specialized.md](references\u002Fios-navigation-specialized.md)** - When: multi-stop, route line, camera, road cameras, route alerts, or `NavigationMapView` customization\n- **[references\u002Fandroid-navigation-sdk.md](references\u002Fandroid-navigation-sdk.md)** - Navigation SDK for Android: basic turn-by-turn navigation, custom navigation UI, route line rendering, maneuver arrows, navigation camera, voice guidance\n- **[references\u002Fandroid-performance-antipatterns.md](references\u002Fandroid-performance-antipatterns.md)** - Android Navigation SDK performance and correctness antipatterns: Native Route Object traversal costs, threading, memory\u002Flifecycle leaks, route management correctness, frequent-callback rendering efficiency, and Coordination API lifecycle\n- **[references\u002Fbest-practices.md](references\u002Fbest-practices.md)** - Route caching, error handling, performance optimization, user experience, and common use cases (delivery routing, ride-sharing ETAs, walking\u002Fcycling directions)\n\n## Related Skills\n\n- **mapbox-search-integration**: Address search and geocoding\n- **mapbox-web-performance-patterns**: Optimizing navigation performance\n- **mapbox-ios-patterns**: iOS-specific integration patterns\n- **mapbox-android-patterns**: Android-specific integration patterns\n- **mapbox-token-security**: Securing your access tokens\n\n## Resources\n\n- [Directions API Documentation](https:\u002F\u002Fdocs.mapbox.com\u002Fapi\u002Fnavigation\u002Fdirections\u002F)\n- [Navigation SDK for iOS](https:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fnavigation\u002F)\n- [Navigation SDK for Android](https:\u002F\u002Fdocs.mapbox.com\u002Fandroid\u002Fnavigation\u002F)\n- [Optimization API Documentation](https:\u002F\u002Fdocs.mapbox.com\u002Fapi\u002Fnavigation\u002Foptimization\u002F)\n- [Map Matching API](https:\u002F\u002Fdocs.mapbox.com\u002Fapi\u002Fnavigation\u002Fmap-matching\u002F)\n- [Navigation Products Overview](https:\u002F\u002Fdocs.mapbox.com\u002Fhelp\u002Fgetting-started\u002Fnavigation\u002F)\n\n## Quick Decision Guide\n\n**User says: \"I need directions\"**\n\n- Web app → Use Directions API\n- Mobile app → Use Navigation SDK\n\n**User says: \"I need turn-by-turn navigation\"**\n\n- iOS → Navigation SDK for iOS (SwiftUI + wrapped `NavigationViewController` by default; Core custom UI only if requested)\n- Android → Navigation SDK for Android\n- Web → Use Directions API + custom UI (no voice guidance)\n\n**User says: \"I need to optimize delivery routes\"**\n→ Use Optimization API (multi-stop route optimization)\n\n**User says: \"I need real-time traffic\"**\n→ Use `driving-traffic` profile with Directions API or Navigation SDK\n\n**User says: \"I need voice guidance\"**\n→ Must use Navigation SDK (iOS\u002FAndroid only)\n\n**User says: \"Directions API or Navigation SDK?\"**\n→ Native turn-by-turn \u002F voice → Navigation SDK (**MAU** pricing). Web \u002F route display only → Directions API (**pay-per-request**).\n",{"data":37,"body":38},{"name":4,"description":6},{"type":39,"children":40},"root",[41,49,55,62,67,107,113,120,131,139,177,187,193,202,240,307,314,364,373,379,388,395,432,440,446,452,485,491,529,535,631,637,690,696,757,763,771,784,792,817,827,845,855],{"type":42,"tag":43,"props":44,"children":45},"element","h1",{"id":4},[46],{"type":47,"value":48},"text","Mapbox Navigation Patterns",{"type":42,"tag":50,"props":51,"children":52},"p",{},[53],{"type":47,"value":54},"Expert guidance for implementing navigation and routing features using Mapbox Directions API and Navigation SDKs. Covers turn-by-turn navigation, route optimization, real-time traffic integration, multi-stop routing, and navigation UI components.",{"type":42,"tag":56,"props":57,"children":59},"h2",{"id":58},"use-this-skill-when",[60],{"type":47,"value":61},"Use This Skill When",{"type":42,"tag":50,"props":63,"children":64},{},[65],{"type":47,"value":66},"User says things like:",{"type":42,"tag":68,"props":69,"children":70},"ul",{},[71,77,82,87,92,97,102],{"type":42,"tag":72,"props":73,"children":74},"li",{},[75],{"type":47,"value":76},"\"I need turn-by-turn navigation in my app\"",{"type":42,"tag":72,"props":78,"children":79},{},[80],{"type":47,"value":81},"\"How do I add driving directions?\"",{"type":42,"tag":72,"props":83,"children":84},{},[85],{"type":47,"value":86},"\"I want to show a route on the map\"",{"type":42,"tag":72,"props":88,"children":89},{},[90],{"type":47,"value":91},"\"I need multi-stop routing\"",{"type":42,"tag":72,"props":93,"children":94},{},[95],{"type":47,"value":96},"\"How do I add voice guidance?\"",{"type":42,"tag":72,"props":98,"children":99},{},[100],{"type":47,"value":101},"\"I want real-time traffic updates\"",{"type":42,"tag":72,"props":103,"children":104},{},[105],{"type":47,"value":106},"\"I need to optimize delivery routes\"",{"type":42,"tag":56,"props":108,"children":110},{"id":109},"product-overview",[111],{"type":47,"value":112},"Product Overview",{"type":42,"tag":114,"props":115,"children":117},"h3",{"id":116},"directions-api-rest",[118],{"type":47,"value":119},"Directions API (REST)",{"type":42,"tag":50,"props":121,"children":122},{},[123,129],{"type":42,"tag":124,"props":125,"children":126},"strong",{},[127],{"type":47,"value":128},"Best for:",{"type":47,"value":130}," Web applications, simple routing, backend route calculation",{"type":42,"tag":50,"props":132,"children":133},{},[134],{"type":42,"tag":124,"props":135,"children":136},{},[137],{"type":47,"value":138},"Features:",{"type":42,"tag":68,"props":140,"children":141},{},[142,147,152,157,162,167,172],{"type":42,"tag":72,"props":143,"children":144},{},[145],{"type":47,"value":146},"Route calculation (driving, walking, cycling, traffic)",{"type":42,"tag":72,"props":148,"children":149},{},[150],{"type":47,"value":151},"Alternative routes",{"type":42,"tag":72,"props":153,"children":154},{},[155],{"type":47,"value":156},"Turn-by-turn instructions",{"type":42,"tag":72,"props":158,"children":159},{},[160],{"type":47,"value":161},"Multi-stop routing (up to 25 waypoints)",{"type":42,"tag":72,"props":163,"children":164},{},[165],{"type":47,"value":166},"Route optimization",{"type":42,"tag":72,"props":168,"children":169},{},[170],{"type":47,"value":171},"Real-time traffic data",{"type":42,"tag":72,"props":173,"children":174},{},[175],{"type":47,"value":176},"Avoid specific roads\u002Fareas",{"type":42,"tag":50,"props":178,"children":179},{},[180,185],{"type":42,"tag":124,"props":181,"children":182},{},[183],{"type":47,"value":184},"Pricing:",{"type":47,"value":186}," Pay per request",{"type":42,"tag":114,"props":188,"children":190},{"id":189},"navigation-sdk-for-ios",[191],{"type":47,"value":192},"Navigation SDK for iOS",{"type":42,"tag":50,"props":194,"children":195},{},[196,200],{"type":42,"tag":124,"props":197,"children":198},{},[199],{"type":47,"value":128},{"type":47,"value":201}," Native iOS apps with turn-by-turn navigation",{"type":42,"tag":50,"props":203,"children":204},{},[205,210,212,219,221,227,229,238],{"type":42,"tag":124,"props":206,"children":207},{},[208],{"type":47,"value":209},"Defaults:",{"type":47,"value":211}," SwiftUI app shell + wrap drop-in ",{"type":42,"tag":213,"props":214,"children":216},"code",{"className":215},[],[217],{"type":47,"value":218},"NavigationViewController",{"type":47,"value":220}," via ",{"type":42,"tag":213,"props":222,"children":224},{"className":223},[],[225],{"type":47,"value":226},"UIViewControllerRepresentable",{"type":47,"value":228}," (official getting-started path). Use a fully custom Core UI (",{"type":42,"tag":230,"props":231,"children":235},"a",{"href":232,"rel":233},"https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fmapbox-navigation-ios\u002Ftree\u002Fmain\u002FExamples\u002FCoreSDKExample",[234],"nofollow",[236],{"type":47,"value":237},"CoreSDKExample",{"type":47,"value":239},") only when the user explicitly wants to build their own nav chrome.",{"type":42,"tag":50,"props":241,"children":242},{},[243,248,250,256,258,264,266,272,274,280,282,288,290,296,298,305],{"type":42,"tag":124,"props":244,"children":245},{},[246],{"type":47,"value":247},"Before coding:",{"type":47,"value":249}," SPM (",{"type":42,"tag":213,"props":251,"children":253},{"className":252},[],[254],{"type":47,"value":255},"MapboxNavigationCore",{"type":47,"value":257}," + ",{"type":42,"tag":213,"props":259,"children":261},{"className":260},[],[262],{"type":47,"value":263},"MapboxNavigationUIKit",{"type":47,"value":265},"), ",{"type":42,"tag":213,"props":267,"children":269},{"className":268},[],[270],{"type":47,"value":271},".netrc",{"type":47,"value":273}," download token, ",{"type":42,"tag":213,"props":275,"children":277},{"className":276},[],[278],{"type":47,"value":279},"MBXAccessToken",{"type":47,"value":281},", location permissions, background ",{"type":42,"tag":213,"props":283,"children":285},{"className":284},[],[286],{"type":47,"value":287},"audio",{"type":47,"value":289},"\u002F",{"type":42,"tag":213,"props":291,"children":293},{"className":292},[],[294],{"type":47,"value":295},"location",{"type":47,"value":297}," — see ",{"type":42,"tag":230,"props":299,"children":302},{"href":300,"rel":301},"https:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fnavigation\u002Fguides\u002Finstall\u002F",[234],[303],{"type":47,"value":304},"install guide",{"type":47,"value":306}," and the iOS reference checklist.",{"type":42,"tag":50,"props":308,"children":309},{},[310],{"type":42,"tag":124,"props":311,"children":312},{},[313],{"type":47,"value":138},{"type":42,"tag":68,"props":315,"children":316},{},[317,329,334,339,344,349,354,359],{"type":42,"tag":72,"props":318,"children":319},{},[320,322,327],{"type":47,"value":321},"Drop-in turn-by-turn UI (",{"type":42,"tag":213,"props":323,"children":325},{"className":324},[],[326],{"type":47,"value":218},{"type":47,"value":328},") — default",{"type":42,"tag":72,"props":330,"children":331},{},[332],{"type":47,"value":333},"Optional fully custom Core UI (route progress \u002F banner publishers)",{"type":42,"tag":72,"props":335,"children":336},{},[337],{"type":47,"value":338},"Voice guidance (30+ languages)",{"type":42,"tag":72,"props":340,"children":341},{},[342],{"type":47,"value":343},"Real-time rerouting",{"type":42,"tag":72,"props":345,"children":346},{},[347],{"type":47,"value":348},"Traffic-aware routing",{"type":42,"tag":72,"props":350,"children":351},{},[352],{"type":47,"value":353},"Offline maps and routing",{"type":42,"tag":72,"props":355,"children":356},{},[357],{"type":47,"value":358},"Route progress tracking",{"type":42,"tag":72,"props":360,"children":361},{},[362],{"type":47,"value":363},"Speed limit display",{"type":42,"tag":50,"props":365,"children":366},{},[367,371],{"type":42,"tag":124,"props":368,"children":369},{},[370],{"type":47,"value":184},{"type":47,"value":372}," Monthly Active Users (MAU) based",{"type":42,"tag":114,"props":374,"children":376},{"id":375},"navigation-sdk-for-android",[377],{"type":47,"value":378},"Navigation SDK for Android",{"type":42,"tag":50,"props":380,"children":381},{},[382,386],{"type":42,"tag":124,"props":383,"children":384},{},[385],{"type":47,"value":128},{"type":47,"value":387}," Native Android apps with turn-by-turn navigation",{"type":42,"tag":50,"props":389,"children":390},{},[391],{"type":42,"tag":124,"props":392,"children":393},{},[394],{"type":47,"value":138},{"type":42,"tag":68,"props":396,"children":397},{},[398,403,407,411,415,419,424,428],{"type":42,"tag":72,"props":399,"children":400},{},[401],{"type":47,"value":402},"Complete turn-by-turn navigation UI",{"type":42,"tag":72,"props":404,"children":405},{},[406],{"type":47,"value":338},{"type":42,"tag":72,"props":408,"children":409},{},[410],{"type":47,"value":343},{"type":42,"tag":72,"props":412,"children":413},{},[414],{"type":47,"value":348},{"type":42,"tag":72,"props":416,"children":417},{},[418],{"type":47,"value":353},{"type":42,"tag":72,"props":420,"children":421},{},[422],{"type":47,"value":423},"Custom UI components",{"type":42,"tag":72,"props":425,"children":426},{},[427],{"type":47,"value":358},{"type":42,"tag":72,"props":429,"children":430},{},[431],{"type":47,"value":363},{"type":42,"tag":50,"props":433,"children":434},{},[435,439],{"type":42,"tag":124,"props":436,"children":437},{},[438],{"type":47,"value":184},{"type":47,"value":372},{"type":42,"tag":56,"props":441,"children":443},{"id":442},"decision-guide",[444],{"type":47,"value":445},"Decision Guide",{"type":42,"tag":114,"props":447,"children":449},{"id":448},"choose-directions-api-when",[450],{"type":47,"value":451},"Choose Directions API when:",{"type":42,"tag":68,"props":453,"children":454},{},[455,460,465,470,475,480],{"type":42,"tag":72,"props":456,"children":457},{},[458],{"type":47,"value":459},"✅ Web application",{"type":42,"tag":72,"props":461,"children":462},{},[463],{"type":47,"value":464},"✅ Simple route display (no turn-by-turn)",{"type":42,"tag":72,"props":466,"children":467},{},[468],{"type":47,"value":469},"✅ Backend route calculation",{"type":42,"tag":72,"props":471,"children":472},{},[473],{"type":47,"value":474},"✅ Route planning and optimization",{"type":42,"tag":72,"props":476,"children":477},{},[478],{"type":47,"value":479},"✅ Multi-stop routing",{"type":42,"tag":72,"props":481,"children":482},{},[483],{"type":47,"value":484},"✅ Don't need voice guidance",{"type":42,"tag":114,"props":486,"children":488},{"id":487},"choose-navigation-sdk-when",[489],{"type":47,"value":490},"Choose Navigation SDK when:",{"type":42,"tag":68,"props":492,"children":493},{},[494,499,504,509,514,519,524],{"type":42,"tag":72,"props":495,"children":496},{},[497],{"type":47,"value":498},"✅ Native mobile app (iOS\u002FAndroid)",{"type":42,"tag":72,"props":500,"children":501},{},[502],{"type":47,"value":503},"✅ Need turn-by-turn navigation",{"type":42,"tag":72,"props":505,"children":506},{},[507],{"type":47,"value":508},"✅ Need voice guidance",{"type":42,"tag":72,"props":510,"children":511},{},[512],{"type":47,"value":513},"✅ Need navigation UI components",{"type":42,"tag":72,"props":515,"children":516},{},[517],{"type":47,"value":518},"✅ Need offline navigation",{"type":42,"tag":72,"props":520,"children":521},{},[522],{"type":47,"value":523},"✅ Need real-time rerouting",{"type":42,"tag":72,"props":525,"children":526},{},[527],{"type":47,"value":528},"✅ Building a navigation\u002Fdelivery app",{"type":42,"tag":56,"props":530,"children":532},{"id":531},"implementation-patterns",[533],{"type":47,"value":534},"Implementation Patterns",{"type":42,"tag":68,"props":536,"children":537},{},[538,551,571,592,605,618],{"type":42,"tag":72,"props":539,"children":540},{},[541,549],{"type":42,"tag":124,"props":542,"children":543},{},[544],{"type":42,"tag":230,"props":545,"children":547},{"href":546},"references\u002Fweb-directions-api.md",[548],{"type":47,"value":546},{"type":47,"value":550}," - Directions API patterns for the web: basic route display, turn-by-turn instructions, alternative routes, multi-stop routing, route optimization, and congestion-based route coloring",{"type":42,"tag":72,"props":552,"children":553},{},[554,562,564,569],{"type":42,"tag":124,"props":555,"children":556},{},[557],{"type":42,"tag":230,"props":558,"children":560},{"href":559},"references\u002Fios-navigation-sdk.md",[561],{"type":47,"value":559},{"type":47,"value":563}," - When: iOS turn-by-turn, setup, default SwiftUI + wrapped ",{"type":42,"tag":213,"props":565,"children":567},{"className":566},[],[568],{"type":47,"value":218},{"type":47,"value":570},", Core opt-in, example catalog",{"type":42,"tag":72,"props":572,"children":573},{},[574,582,584,590],{"type":42,"tag":124,"props":575,"children":576},{},[577],{"type":42,"tag":230,"props":578,"children":580},{"href":579},"references\u002Fios-navigation-specialized.md",[581],{"type":47,"value":579},{"type":47,"value":583}," - When: multi-stop, route line, camera, road cameras, route alerts, or ",{"type":42,"tag":213,"props":585,"children":587},{"className":586},[],[588],{"type":47,"value":589},"NavigationMapView",{"type":47,"value":591}," customization",{"type":42,"tag":72,"props":593,"children":594},{},[595,603],{"type":42,"tag":124,"props":596,"children":597},{},[598],{"type":42,"tag":230,"props":599,"children":601},{"href":600},"references\u002Fandroid-navigation-sdk.md",[602],{"type":47,"value":600},{"type":47,"value":604}," - Navigation SDK for Android: basic turn-by-turn navigation, custom navigation UI, route line rendering, maneuver arrows, navigation camera, voice guidance",{"type":42,"tag":72,"props":606,"children":607},{},[608,616],{"type":42,"tag":124,"props":609,"children":610},{},[611],{"type":42,"tag":230,"props":612,"children":614},{"href":613},"references\u002Fandroid-performance-antipatterns.md",[615],{"type":47,"value":613},{"type":47,"value":617}," - Android Navigation SDK performance and correctness antipatterns: Native Route Object traversal costs, threading, memory\u002Flifecycle leaks, route management correctness, frequent-callback rendering efficiency, and Coordination API lifecycle",{"type":42,"tag":72,"props":619,"children":620},{},[621,629],{"type":42,"tag":124,"props":622,"children":623},{},[624],{"type":42,"tag":230,"props":625,"children":627},{"href":626},"references\u002Fbest-practices.md",[628],{"type":47,"value":626},{"type":47,"value":630}," - Route caching, error handling, performance optimization, user experience, and common use cases (delivery routing, ride-sharing ETAs, walking\u002Fcycling directions)",{"type":42,"tag":56,"props":632,"children":634},{"id":633},"related-skills",[635],{"type":47,"value":636},"Related Skills",{"type":42,"tag":68,"props":638,"children":639},{},[640,650,660,670,680],{"type":42,"tag":72,"props":641,"children":642},{},[643,648],{"type":42,"tag":124,"props":644,"children":645},{},[646],{"type":47,"value":647},"mapbox-search-integration",{"type":47,"value":649},": Address search and geocoding",{"type":42,"tag":72,"props":651,"children":652},{},[653,658],{"type":42,"tag":124,"props":654,"children":655},{},[656],{"type":47,"value":657},"mapbox-web-performance-patterns",{"type":47,"value":659},": Optimizing navigation performance",{"type":42,"tag":72,"props":661,"children":662},{},[663,668],{"type":42,"tag":124,"props":664,"children":665},{},[666],{"type":47,"value":667},"mapbox-ios-patterns",{"type":47,"value":669},": iOS-specific integration patterns",{"type":42,"tag":72,"props":671,"children":672},{},[673,678],{"type":42,"tag":124,"props":674,"children":675},{},[676],{"type":47,"value":677},"mapbox-android-patterns",{"type":47,"value":679},": Android-specific integration patterns",{"type":42,"tag":72,"props":681,"children":682},{},[683,688],{"type":42,"tag":124,"props":684,"children":685},{},[686],{"type":47,"value":687},"mapbox-token-security",{"type":47,"value":689},": Securing your access tokens",{"type":42,"tag":56,"props":691,"children":693},{"id":692},"resources",[694],{"type":47,"value":695},"Resources",{"type":42,"tag":68,"props":697,"children":698},{},[699,709,718,727,737,747],{"type":42,"tag":72,"props":700,"children":701},{},[702],{"type":42,"tag":230,"props":703,"children":706},{"href":704,"rel":705},"https:\u002F\u002Fdocs.mapbox.com\u002Fapi\u002Fnavigation\u002Fdirections\u002F",[234],[707],{"type":47,"value":708},"Directions API Documentation",{"type":42,"tag":72,"props":710,"children":711},{},[712],{"type":42,"tag":230,"props":713,"children":716},{"href":714,"rel":715},"https:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fnavigation\u002F",[234],[717],{"type":47,"value":192},{"type":42,"tag":72,"props":719,"children":720},{},[721],{"type":42,"tag":230,"props":722,"children":725},{"href":723,"rel":724},"https:\u002F\u002Fdocs.mapbox.com\u002Fandroid\u002Fnavigation\u002F",[234],[726],{"type":47,"value":378},{"type":42,"tag":72,"props":728,"children":729},{},[730],{"type":42,"tag":230,"props":731,"children":734},{"href":732,"rel":733},"https:\u002F\u002Fdocs.mapbox.com\u002Fapi\u002Fnavigation\u002Foptimization\u002F",[234],[735],{"type":47,"value":736},"Optimization API Documentation",{"type":42,"tag":72,"props":738,"children":739},{},[740],{"type":42,"tag":230,"props":741,"children":744},{"href":742,"rel":743},"https:\u002F\u002Fdocs.mapbox.com\u002Fapi\u002Fnavigation\u002Fmap-matching\u002F",[234],[745],{"type":47,"value":746},"Map Matching API",{"type":42,"tag":72,"props":748,"children":749},{},[750],{"type":42,"tag":230,"props":751,"children":754},{"href":752,"rel":753},"https:\u002F\u002Fdocs.mapbox.com\u002Fhelp\u002Fgetting-started\u002Fnavigation\u002F",[234],[755],{"type":47,"value":756},"Navigation Products Overview",{"type":42,"tag":56,"props":758,"children":760},{"id":759},"quick-decision-guide",[761],{"type":47,"value":762},"Quick Decision Guide",{"type":42,"tag":50,"props":764,"children":765},{},[766],{"type":42,"tag":124,"props":767,"children":768},{},[769],{"type":47,"value":770},"User says: \"I need directions\"",{"type":42,"tag":68,"props":772,"children":773},{},[774,779],{"type":42,"tag":72,"props":775,"children":776},{},[777],{"type":47,"value":778},"Web app → Use Directions API",{"type":42,"tag":72,"props":780,"children":781},{},[782],{"type":47,"value":783},"Mobile app → Use Navigation SDK",{"type":42,"tag":50,"props":785,"children":786},{},[787],{"type":42,"tag":124,"props":788,"children":789},{},[790],{"type":47,"value":791},"User says: \"I need turn-by-turn navigation\"",{"type":42,"tag":68,"props":793,"children":794},{},[795,807,812],{"type":42,"tag":72,"props":796,"children":797},{},[798,800,805],{"type":47,"value":799},"iOS → Navigation SDK for iOS (SwiftUI + wrapped ",{"type":42,"tag":213,"props":801,"children":803},{"className":802},[],[804],{"type":47,"value":218},{"type":47,"value":806}," by default; Core custom UI only if requested)",{"type":42,"tag":72,"props":808,"children":809},{},[810],{"type":47,"value":811},"Android → Navigation SDK for Android",{"type":42,"tag":72,"props":813,"children":814},{},[815],{"type":47,"value":816},"Web → Use Directions API + custom UI (no voice guidance)",{"type":42,"tag":50,"props":818,"children":819},{},[820,825],{"type":42,"tag":124,"props":821,"children":822},{},[823],{"type":47,"value":824},"User says: \"I need to optimize delivery routes\"",{"type":47,"value":826},"\n→ Use Optimization API (multi-stop route optimization)",{"type":42,"tag":50,"props":828,"children":829},{},[830,835,837,843],{"type":42,"tag":124,"props":831,"children":832},{},[833],{"type":47,"value":834},"User says: \"I need real-time traffic\"",{"type":47,"value":836},"\n→ Use ",{"type":42,"tag":213,"props":838,"children":840},{"className":839},[],[841],{"type":47,"value":842},"driving-traffic",{"type":47,"value":844}," profile with Directions API or Navigation SDK",{"type":42,"tag":50,"props":846,"children":847},{},[848,853],{"type":42,"tag":124,"props":849,"children":850},{},[851],{"type":47,"value":852},"User says: \"I need voice guidance\"",{"type":47,"value":854},"\n→ Must use Navigation SDK (iOS\u002FAndroid only)",{"type":42,"tag":50,"props":856,"children":857},{},[858,863,865,870,872,877],{"type":42,"tag":124,"props":859,"children":860},{},[861],{"type":47,"value":862},"User says: \"Directions API or Navigation SDK?\"",{"type":47,"value":864},"\n→ Native turn-by-turn \u002F voice → Navigation SDK (",{"type":42,"tag":124,"props":866,"children":867},{},[868],{"type":47,"value":869},"MAU",{"type":47,"value":871}," pricing). Web \u002F route display only → Directions API (",{"type":42,"tag":124,"props":873,"children":874},{},[875],{"type":47,"value":876},"pay-per-request",{"type":47,"value":878},").",{"items":880,"total":984},[881,892,909,924,946,958,972],{"slug":677,"name":677,"fn":882,"description":883,"org":884,"tags":885,"stars":26,"repoUrl":27,"updatedAt":891},"integrate Mapbox Maps SDK on Android","Official integration patterns for Mapbox Maps SDK on Android. Covers installation, adding markers, user location, custom data, styles, camera control, and featureset interactions. Based on official Mapbox documentation.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[886,889,890],{"name":887,"slug":888,"type":15},"Android","android",{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},"2026-07-30T05:30:51.739352",{"slug":893,"name":893,"fn":894,"description":895,"org":896,"tags":897,"stars":26,"repoUrl":27,"updatedAt":908},"mapbox-cartography","apply cartographic design principles to Mapbox","Expert guidance on map design principles, color theory, visual hierarchy, typography, and cartographic best practices for creating effective and beautiful maps with Mapbox. Use when designing map styles, choosing colors, or making cartographic decisions.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[898,901,904,905],{"name":899,"slug":900,"type":15},"Branding","branding",{"name":902,"slug":903,"type":15},"Design","design",{"name":9,"slug":8,"type":15},{"name":906,"slug":907,"type":15},"Typography","typography","2026-04-06T18:28:41.2556",{"slug":910,"name":910,"fn":911,"description":912,"org":913,"tags":914,"stars":26,"repoUrl":27,"updatedAt":923},"mapbox-data-visualization-patterns","implement Mapbox data visualization patterns","Patterns for visualizing data on maps including choropleth maps, heat maps, 3D visualizations, data-driven styling, and animated data. Covers layer types, color scales, and performance optimization.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[915,918,919,920],{"name":916,"slug":917,"type":15},"Data Visualization","data-visualization",{"name":902,"slug":903,"type":15},{"name":9,"slug":8,"type":15},{"name":921,"slug":922,"type":15},"Performance","performance","2026-04-06T18:29:02.907655",{"slug":925,"name":925,"fn":926,"description":927,"org":928,"tags":929,"stars":26,"repoUrl":27,"updatedAt":945},"mapbox-flutter-patterns","integrate Mapbox maps into Flutter applications","Official integration patterns for the Mapbox Maps Flutter SDK. Covers installation, iOS\u002FAndroid platform setup, access token configuration, MapWidget initialization, camera control, annotations with tap handling, user location, and loading GeoJSON. Based on official Mapbox documentation.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[930,931,934,937,940,941,942],{"name":887,"slug":888,"type":15},{"name":932,"slug":933,"type":15},"Dart","dart",{"name":935,"slug":936,"type":15},"Flutter","flutter",{"name":938,"slug":939,"type":15},"iOS","ios",{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},{"name":943,"slug":944,"type":15},"SDK","sdk","2026-05-12T06:03:11.211517",{"slug":947,"name":947,"fn":948,"description":949,"org":950,"tags":951,"stars":26,"repoUrl":27,"updatedAt":957},"mapbox-geospatial-operations","select geospatial tools for Mapbox operations","Expert guidance on choosing the right geospatial tool based on problem type, accuracy requirements, and performance needs",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[952,953,954],{"name":9,"slug":8,"type":15},{"name":921,"slug":922,"type":15},{"name":955,"slug":956,"type":15},"Strategy","strategy","2026-07-30T05:30:52.766227",{"slug":959,"name":959,"fn":960,"description":961,"org":962,"tags":963,"stars":26,"repoUrl":27,"updatedAt":971},"mapbox-google-maps-migration","migrate from Google Maps to Mapbox","Migration guide for developers moving from Google Maps Platform to Mapbox GL JS, covering API equivalents, pattern translations, and key differences",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[964,965,968],{"name":9,"slug":8,"type":15},{"name":966,"slug":967,"type":15},"Migration","migration",{"name":969,"slug":970,"type":15},"Web Development","web-development","2026-04-06T18:28:56.459496",{"slug":667,"name":667,"fn":973,"description":974,"org":975,"tags":976,"stars":26,"repoUrl":27,"updatedAt":983},"integrate Mapbox Maps SDK on iOS","Official integration patterns for Mapbox Maps SDK on iOS. Covers installation, adding markers, user location, custom data, styles, camera control, and featureset interactions. Based on official Mapbox documentation.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[977,978,979,980],{"name":938,"slug":939,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},{"name":981,"slug":982,"type":15},"Swift","swift","2026-07-30T05:30:54.75526",20,{"items":986,"total":984},[987,993,1000,1007,1017,1023,1029,1036,1050,1063,1078,1090],{"slug":677,"name":677,"fn":882,"description":883,"org":988,"tags":989,"stars":26,"repoUrl":27,"updatedAt":891},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[990,991,992],{"name":887,"slug":888,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},{"slug":893,"name":893,"fn":894,"description":895,"org":994,"tags":995,"stars":26,"repoUrl":27,"updatedAt":908},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[996,997,998,999],{"name":899,"slug":900,"type":15},{"name":902,"slug":903,"type":15},{"name":9,"slug":8,"type":15},{"name":906,"slug":907,"type":15},{"slug":910,"name":910,"fn":911,"description":912,"org":1001,"tags":1002,"stars":26,"repoUrl":27,"updatedAt":923},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1003,1004,1005,1006],{"name":916,"slug":917,"type":15},{"name":902,"slug":903,"type":15},{"name":9,"slug":8,"type":15},{"name":921,"slug":922,"type":15},{"slug":925,"name":925,"fn":926,"description":927,"org":1008,"tags":1009,"stars":26,"repoUrl":27,"updatedAt":945},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1010,1011,1012,1013,1014,1015,1016],{"name":887,"slug":888,"type":15},{"name":932,"slug":933,"type":15},{"name":935,"slug":936,"type":15},{"name":938,"slug":939,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},{"name":943,"slug":944,"type":15},{"slug":947,"name":947,"fn":948,"description":949,"org":1018,"tags":1019,"stars":26,"repoUrl":27,"updatedAt":957},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1020,1021,1022],{"name":9,"slug":8,"type":15},{"name":921,"slug":922,"type":15},{"name":955,"slug":956,"type":15},{"slug":959,"name":959,"fn":960,"description":961,"org":1024,"tags":1025,"stars":26,"repoUrl":27,"updatedAt":971},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1026,1027,1028],{"name":9,"slug":8,"type":15},{"name":966,"slug":967,"type":15},{"name":969,"slug":970,"type":15},{"slug":667,"name":667,"fn":973,"description":974,"org":1030,"tags":1031,"stars":26,"repoUrl":27,"updatedAt":983},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1032,1033,1034,1035],{"name":938,"slug":939,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},{"name":981,"slug":982,"type":15},{"slug":1037,"name":1037,"fn":1038,"description":1039,"org":1040,"tags":1041,"stars":26,"repoUrl":27,"updatedAt":1049},"mapbox-location-grounding","generate grounded location-aware responses with Mapbox","Compose Mapbox MCP tools to produce grounded, cited location-aware responses from live data instead of training data",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1042,1045,1046],{"name":1043,"slug":1044,"type":15},"Data Quality","data-quality",{"name":9,"slug":8,"type":15},{"name":1047,"slug":1048,"type":15},"MCP","mcp","2026-04-15T05:01:44.248764",{"slug":1051,"name":1051,"fn":1052,"description":1053,"org":1054,"tags":1055,"stars":26,"repoUrl":27,"updatedAt":1062},"mapbox-maplibre-migration","migrate from MapLibre to Mapbox","Guide for migrating from MapLibre GL JS to Mapbox GL JS, covering API compatibility, token setup, style configuration, and the benefits of Mapbox's official support and ecosystem",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1056,1059,1060,1061],{"name":1057,"slug":1058,"type":15},"Engineering","engineering",{"name":9,"slug":8,"type":15},{"name":966,"slug":967,"type":15},{"name":969,"slug":970,"type":15},"2026-04-06T18:28:51.531856",{"slug":1064,"name":1064,"fn":1065,"description":1066,"org":1067,"tags":1068,"stars":26,"repoUrl":27,"updatedAt":1077},"mapbox-mcp-devkit-patterns","integrate Mapbox MCP DevKit in coding assistants","Integration patterns for Mapbox MCP DevKit Server in AI coding assistants. Covers setup, style management, token management, validation workflows, and documentation access through MCP. Use when building Mapbox applications with AI coding assistance.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1069,1072,1075,1076],{"name":1070,"slug":1071,"type":15},"Documentation","documentation",{"name":1073,"slug":1074,"type":15},"Local Development","local-development",{"name":9,"slug":8,"type":15},{"name":1047,"slug":1048,"type":15},"2026-04-06T18:28:53.790961",{"slug":1079,"name":1079,"fn":1080,"description":1081,"org":1082,"tags":1083,"stars":26,"repoUrl":27,"updatedAt":1089},"mapbox-mcp-runtime-patterns","integrate Mapbox MCP Server in AI apps","Integration patterns for Mapbox MCP Server in AI applications and agent frameworks. Covers runtime integration with pydantic-ai, mastra, LangChain, and custom agents. Use when building AI-powered applications that need geospatial capabilities.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1084,1087,1088],{"name":1085,"slug":1086,"type":15},"Architecture","architecture",{"name":9,"slug":8,"type":15},{"name":1047,"slug":1048,"type":15},"2026-04-06T18:28:55.164842",{"slug":4,"name":4,"fn":5,"description":6,"org":1091,"tags":1092,"stars":26,"repoUrl":27,"updatedAt":28},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1093,1094,1095,1096,1097],{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},{"name":13,"slug":14,"type":15},{"name":21,"slug":22,"type":15},{"name":17,"slug":18,"type":15}]