[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-mapbox-mapbox-ios-patterns":3,"mdc-cjgxew-key":33,"related-repo-mapbox-mapbox-ios-patterns":2214,"related-org-mapbox-mapbox-ios-patterns":2313},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":23,"repoUrl":24,"updatedAt":25,"license":26,"forks":27,"topics":28,"repo":29,"sourceUrl":31,"mdContent":32},"mapbox-ios-patterns","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},"mapbox","Mapbox","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fmapbox.png",[12,16,19,22],{"name":13,"slug":14,"type":15},"iOS","ios","tag",{"name":17,"slug":18,"type":15},"Mobile","mobile",{"name":20,"slug":21,"type":15},"Swift","swift",{"name":9,"slug":8,"type":15},69,"https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fmapbox-agent-skills","2026-07-30T05:30:54.75526",null,10,[],{"repoUrl":24,"stars":23,"forks":27,"topics":30,"description":26},[],"https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fmapbox-agent-skills\u002Ftree\u002FHEAD\u002Fskills\u002Fmapbox-ios-patterns","---\nname: mapbox-ios-patterns\ndescription: 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.\n---\n\n# Mapbox iOS Integration Patterns\n\nOfficial patterns for integrating Mapbox Maps SDK v11 on iOS with Swift, SwiftUI, and UIKit.\n\n**Use this skill when:**\n\n- Installing and configuring Mapbox Maps SDK for iOS\n- Adding markers and annotations to maps\n- Showing user location and tracking with camera\n- Adding custom data (GeoJSON) to maps\n- Working with map styles, camera, or user interaction\n- Handling feature interactions and taps\n\n**Official Resources:**\n\n- [iOS Maps Guides](https:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fmaps\u002Fguides\u002F)\n- [API Reference](https:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fmaps\u002Fapi-reference\u002F)\n- [Example Apps](https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fmapbox-maps-ios\u002Ftree\u002Fmain\u002FSources\u002FExamples)\n\n---\n\n## Installation & Setup\n\n### Requirements\n\n- iOS 14+\n- Xcode 15+\n- Swift 5.9+\n- Free Mapbox account\n\n### Step 1: Configure Access Token\n\nAdd your public token to `Info.plist`:\n\n```xml\n\u003Ckey>MBXAccessToken\u003C\u002Fkey>\n\u003Cstring>pk.your_mapbox_token_here\u003C\u002Fstring>\n```\n\n**Get your token:** Sign in at [mapbox.com](https:\u002F\u002Faccount.mapbox.com\u002Faccess-tokens\u002F)\n\n### Step 2: Add Swift Package Dependency\n\n1. **File → Add Package Dependencies**\n2. **Enter URL:** `https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fmapbox-maps-ios.git`\n3. **Version:** \"Up to Next Major\" from `11.0.0`\n4. **Verify** four dependencies appear: MapboxCommon, MapboxCoreMaps, MapboxMaps, Turf\n\n**Alternative:** CocoaPods or direct download ([install guide](https:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fmaps\u002Fguides\u002Finstall\u002F))\n\n---\n\n## Map Initialization\n\n### SwiftUI Pattern\n\n**Basic map:**\n\n```swift\nimport SwiftUI\nimport MapboxMaps\n\nstruct ContentView: View {\n    @State private var viewport: Viewport = .camera(\n        center: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194),\n        zoom: 12\n    )\n\n    var body: some View {\n        Map(viewport: $viewport)\n            .mapStyle(.standard)\n    }\n}\n```\n\n**With ornaments:**\n\n```swift\nMap(viewport: $viewport)\n    .mapStyle(.standard)\n    .ornamentOptions(OrnamentOptions(\n        scaleBar: .init(visibility: .visible),\n        compass: .init(visibility: .adaptive),\n        logo: .init(position: .bottomLeading)\n    ))\n```\n\n### UIKit Pattern\n\n```swift\nimport UIKit\nimport MapboxMaps\n\nclass MapViewController: UIViewController {\n    private var mapView: MapView!\n\n    override func viewDidLoad() {\n        super.viewDidLoad()\n\n        let options = MapInitOptions(\n            cameraOptions: CameraOptions(\n                center: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194),\n                zoom: 12\n            )\n        )\n\n        mapView = MapView(frame: view.bounds, mapInitOptions: options)\n        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]\n        view.addSubview(mapView)\n\n        mapView.mapboxMap.loadStyle(.standard)\n    }\n}\n```\n\n---\n\n## Add Markers\n\nThe SDK offers three ways to place a point on the map. Pick the simplest one that fits.\n\n**Agent note:** A SwiftUI Mapbox sketch is incomplete without at least one annotation (`Marker`, `PointAnnotation`, or `MapViewAnnotation`). Do not ship a bare `Map { }` with no pin.\n\n### Which API should I use?\n\n| API                                                       | Use it when                                                                                    | Platforms       | Notes                                                                                                                                                                        |\n| --------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `Marker` (Markers API)                                    | You need a default pin and don't have a custom image asset                                     | SwiftUI only    | No image assets required. Experimental SPI — needs `@_spi(Experimental) import MapboxMaps`. Best \u003C 100 markers.                                                              |\n| `PointAnnotation`                                         | You have a custom image and want layer-level placement                                         | SwiftUI + UIKit | Backed by a symbol layer, so it scales well to hundreds of markers. Accepts any `UIImage` that `UIKit` can render.                                                           |\n| View annotations (`ViewAnnotation` \u002F `MapViewAnnotation`) | You want to render a full native view (card, badge, animated content) anchored to a coordinate | SwiftUI + UIKit | SwiftUI uses `MapViewAnnotation`; UIKit uses `mapView.viewAnnotations` with a `ViewAnnotation`. Each annotation is a real view — costs more than `PointAnnotation` at scale. |\n\nFor hundreds or thousands of features, use a style layer (`SymbolLayer` on a `GeoJSONSource`) instead of annotations.\n\n### Markers API (recommended for simple cases, SwiftUI)\n\n```swift\nimport SwiftUI\n@_spi(Experimental) import MapboxMaps\n\nstruct ContentView: View {\n    var body: some View {\n        Map {\n            Marker(coordinate: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194))\n                .color(.red)\n                .text(\"San Francisco\")\n        }\n    }\n}\n```\n\nMultiple markers from a collection:\n\n```swift\nMap {\n    ForEvery(locations, id: \\.id) { location in\n        Marker(coordinate: location.coordinate)\n            .color(.red)\n            .text(location.name)\n    }\n}\n```\n\n> **Scaling note.** `Marker` and `PointAnnotation` each create their own view or symbol entry per pin — fine up to about 100 markers. For larger datasets (hundreds or thousands of features — common with open-ended GeoJSON feeds), load the data into a `GeoJSONSource` and render it with a `SymbolLayer` instead. That scales to thousands of features and enables clustering.\n\n### PointAnnotation (custom image)\n\n**SwiftUI:**\n\n```swift\nMap(viewport: $viewport) {\n    PointAnnotation(coordinate: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194))\n        .image(.init(image: UIImage(named: \"marker\")!, name: \"marker\"))\n}\n```\n\n**UIKit:**\n\n```swift\n\u002F\u002F Create annotation manager (once, reuse for updates)\nvar pointAnnotationManager = mapView.annotations.makePointAnnotationManager()\n\n\u002F\u002F Create marker\nvar annotation = PointAnnotation(coordinate: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194))\nannotation.image = .init(image: UIImage(named: \"marker\")!, name: \"marker\")\nannotation.iconAnchor = .bottom\n\n\u002F\u002F Add to map\npointAnnotationManager.annotations = [annotation]\n```\n\n**Multiple markers:**\n\n```swift\nlet annotations = locations.map { coordinate in\n    var annotation = PointAnnotation(coordinate: coordinate)\n    annotation.image = .init(image: UIImage(named: \"marker\")!, name: \"marker\")\n    return annotation\n}\n\npointAnnotationManager.annotations = annotations\n```\n\n---\n\n## Show User Location\n\n**Step 1: Add location permission to Info.plist:**\n\n```xml\n\u003Ckey>NSLocationWhenInUseUsageDescription\u003C\u002Fkey>\n\u003Cstring>Show your location on the map\u003C\u002Fstring>\n```\n\n**Step 2: Request permissions and show location:**\n\n```swift\nimport CoreLocation\n\n\u002F\u002F Request permissions\nlet locationManager = CLLocationManager()\nlocationManager.requestWhenInUseAuthorization()\n\n\u002F\u002F Show user location puck\nmapView.location.options.puckType = .puck2D()\nmapView.location.options.puckBearingEnabled = true\n```\n\n---\n\n## Performance Best Practices\n\n### Reuse Annotation Managers\n\n```swift\n\u002F\u002F ❌ Don't create new managers repeatedly\nfunc updateMarkers() {\n    let manager = mapView.annotations.makePointAnnotationManager()\n    manager.annotations = markers\n}\n\n\u002F\u002F ✅ Create once, reuse\nlet pointAnnotationManager: PointAnnotationManager\n\ninit() {\n    pointAnnotationManager = mapView.annotations.makePointAnnotationManager()\n}\n\nfunc updateMarkers() {\n    pointAnnotationManager.annotations = markers\n}\n```\n\n### Batch Annotation Updates\n\n```swift\n\u002F\u002F ✅ Update all at once\npointAnnotationManager.annotations = newAnnotations\n\n\u002F\u002F ❌ Don't update one by one\nfor annotation in newAnnotations {\n    pointAnnotationManager.annotations.append(annotation)\n}\n```\n\n### Memory Management\n\n```swift\n\u002F\u002F Use weak self in closures\nmapView.gestures.onMapTap.observe { [weak self] context in\n    self?.handleTap(context.coordinate)\n}.store(in: &cancelables)\n\n\u002F\u002F Clean up on deinit\ndeinit {\n    cancelables.forEach { $0.cancel() }\n}\n```\n\n### Use Standard Style\n\n```swift\n\u002F\u002F ✅ Standard style is optimized and recommended\n.mapStyle(.standard)\n\n\u002F\u002F Use other styles only when needed for specific use cases\n.mapStyle(.standardSatellite) \u002F\u002F Satellite imagery\n```\n\n---\n\n## Troubleshooting\n\n### Map Not Displaying\n\n**Check:**\n\n1. ✅ `MBXAccessToken` in Info.plist\n2. ✅ Token is valid (test at mapbox.com)\n3. ✅ MapboxMaps framework imported\n4. ✅ MapView added to view hierarchy\n5. ✅ Correct frame\u002Fconstraints set\n\n### Style Not Loading\n\n```swift\nmapView.mapboxMap.onStyleLoaded.observe { [weak self] _ in\n    print(\"Style loaded successfully\")\n    \u002F\u002F Add layers and sources here\n}.store(in: &cancelables)\n```\n\n### Performance Issues\n\n- Use `.standard` style (recommended and optimized)\n- Limit visible annotations to viewport\n- Reuse annotation managers\n- Avoid frequent style reloads\n- Batch annotation updates\n\n---\n\n## Reference Files\n\nLoad these references when the task requires deeper patterns:\n\n- **`references\u002Fannotations.md`** — Circle, Polyline, Polygon Annotations\n- **`references\u002Flocation-tracking.md`** — Camera Follow User + Get Current Location\n- **`references\u002Fcustom-data.md`** — GeoJSON: Lines, Polygons, Points, Update\u002FRemove\n- **`references\u002Fcamera-styles.md`** — Camera Control + Map Styles\n- **`references\u002Finteractions.md`** — Featureset Interactions, Custom Layer Taps, Long Press, Gestures\n\n---\n\n## Additional Resources\n\n- [iOS Maps Guides](https:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fmaps\u002Fguides\u002F)\n- [API Reference](https:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fmaps\u002Fapi\u002F11.18.1\u002Fdocumentation\u002Fmapboxmaps\u002F)\n- [Interactions Guide](https:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fmaps\u002Fguides\u002Fuser-interaction\u002FInteractions\u002F)\n- [SwiftUI User Guide](https:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fmaps\u002Fapi\u002F11.18.1\u002Fdocumentation\u002Fmapboxmaps\u002Fswiftui-user-guide)\n- [Example Apps](https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fmapbox-maps-ios\u002Ftree\u002Fmain\u002FSources\u002FExamples)\n- [Migration Guide (v10 → v11)](https:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fmaps\u002Fguides\u002Fmigrate-to-v11\u002F)\n",{"data":34,"body":35},{"name":4,"description":6},{"type":36,"children":37},"root",[38,47,53,62,97,105,140,144,151,158,181,187,201,232,249,255,309,328,331,337,343,351,482,490,553,559,751,754,760,765,807,813,994,1015,1021,1118,1123,1184,1225,1231,1239,1277,1285,1370,1378,1439,1442,1448,1456,1479,1487,1564,1567,1573,1579,1707,1713,1774,1780,1857,1863,1909,1912,1918,1924,1932,1968,1974,2012,2018,2054,2057,2063,2068,2141,2144,2150,2208],{"type":39,"tag":40,"props":41,"children":43},"element","h1",{"id":42},"mapbox-ios-integration-patterns",[44],{"type":45,"value":46},"text","Mapbox iOS Integration Patterns",{"type":39,"tag":48,"props":49,"children":50},"p",{},[51],{"type":45,"value":52},"Official patterns for integrating Mapbox Maps SDK v11 on iOS with Swift, SwiftUI, and UIKit.",{"type":39,"tag":48,"props":54,"children":55},{},[56],{"type":39,"tag":57,"props":58,"children":59},"strong",{},[60],{"type":45,"value":61},"Use this skill when:",{"type":39,"tag":63,"props":64,"children":65},"ul",{},[66,72,77,82,87,92],{"type":39,"tag":67,"props":68,"children":69},"li",{},[70],{"type":45,"value":71},"Installing and configuring Mapbox Maps SDK for iOS",{"type":39,"tag":67,"props":73,"children":74},{},[75],{"type":45,"value":76},"Adding markers and annotations to maps",{"type":39,"tag":67,"props":78,"children":79},{},[80],{"type":45,"value":81},"Showing user location and tracking with camera",{"type":39,"tag":67,"props":83,"children":84},{},[85],{"type":45,"value":86},"Adding custom data (GeoJSON) to maps",{"type":39,"tag":67,"props":88,"children":89},{},[90],{"type":45,"value":91},"Working with map styles, camera, or user interaction",{"type":39,"tag":67,"props":93,"children":94},{},[95],{"type":45,"value":96},"Handling feature interactions and taps",{"type":39,"tag":48,"props":98,"children":99},{},[100],{"type":39,"tag":57,"props":101,"children":102},{},[103],{"type":45,"value":104},"Official Resources:",{"type":39,"tag":63,"props":106,"children":107},{},[108,120,130],{"type":39,"tag":67,"props":109,"children":110},{},[111],{"type":39,"tag":112,"props":113,"children":117},"a",{"href":114,"rel":115},"https:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fmaps\u002Fguides\u002F",[116],"nofollow",[118],{"type":45,"value":119},"iOS Maps Guides",{"type":39,"tag":67,"props":121,"children":122},{},[123],{"type":39,"tag":112,"props":124,"children":127},{"href":125,"rel":126},"https:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fmaps\u002Fapi-reference\u002F",[116],[128],{"type":45,"value":129},"API Reference",{"type":39,"tag":67,"props":131,"children":132},{},[133],{"type":39,"tag":112,"props":134,"children":137},{"href":135,"rel":136},"https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fmapbox-maps-ios\u002Ftree\u002Fmain\u002FSources\u002FExamples",[116],[138],{"type":45,"value":139},"Example Apps",{"type":39,"tag":141,"props":142,"children":143},"hr",{},[],{"type":39,"tag":145,"props":146,"children":148},"h2",{"id":147},"installation-setup",[149],{"type":45,"value":150},"Installation & Setup",{"type":39,"tag":152,"props":153,"children":155},"h3",{"id":154},"requirements",[156],{"type":45,"value":157},"Requirements",{"type":39,"tag":63,"props":159,"children":160},{},[161,166,171,176],{"type":39,"tag":67,"props":162,"children":163},{},[164],{"type":45,"value":165},"iOS 14+",{"type":39,"tag":67,"props":167,"children":168},{},[169],{"type":45,"value":170},"Xcode 15+",{"type":39,"tag":67,"props":172,"children":173},{},[174],{"type":45,"value":175},"Swift 5.9+",{"type":39,"tag":67,"props":177,"children":178},{},[179],{"type":45,"value":180},"Free Mapbox account",{"type":39,"tag":152,"props":182,"children":184},{"id":183},"step-1-configure-access-token",[185],{"type":45,"value":186},"Step 1: Configure Access Token",{"type":39,"tag":48,"props":188,"children":189},{},[190,192,199],{"type":45,"value":191},"Add your public token to ",{"type":39,"tag":193,"props":194,"children":196},"code",{"className":195},[],[197],{"type":45,"value":198},"Info.plist",{"type":45,"value":200},":",{"type":39,"tag":202,"props":203,"children":208},"pre",{"className":204,"code":205,"language":206,"meta":207,"style":207},"language-xml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ckey>MBXAccessToken\u003C\u002Fkey>\n\u003Cstring>pk.your_mapbox_token_here\u003C\u002Fstring>\n","xml","",[209],{"type":39,"tag":193,"props":210,"children":211},{"__ignoreMap":207},[212,223],{"type":39,"tag":213,"props":214,"children":217},"span",{"class":215,"line":216},"line",1,[218],{"type":39,"tag":213,"props":219,"children":220},{},[221],{"type":45,"value":222},"\u003Ckey>MBXAccessToken\u003C\u002Fkey>\n",{"type":39,"tag":213,"props":224,"children":226},{"class":215,"line":225},2,[227],{"type":39,"tag":213,"props":228,"children":229},{},[230],{"type":45,"value":231},"\u003Cstring>pk.your_mapbox_token_here\u003C\u002Fstring>\n",{"type":39,"tag":48,"props":233,"children":234},{},[235,240,242],{"type":39,"tag":57,"props":236,"children":237},{},[238],{"type":45,"value":239},"Get your token:",{"type":45,"value":241}," Sign in at ",{"type":39,"tag":112,"props":243,"children":246},{"href":244,"rel":245},"https:\u002F\u002Faccount.mapbox.com\u002Faccess-tokens\u002F",[116],[247],{"type":45,"value":248},"mapbox.com",{"type":39,"tag":152,"props":250,"children":252},{"id":251},"step-2-add-swift-package-dependency",[253],{"type":45,"value":254},"Step 2: Add Swift Package Dependency",{"type":39,"tag":256,"props":257,"children":258},"ol",{},[259,267,283,299],{"type":39,"tag":67,"props":260,"children":261},{},[262],{"type":39,"tag":57,"props":263,"children":264},{},[265],{"type":45,"value":266},"File → Add Package Dependencies",{"type":39,"tag":67,"props":268,"children":269},{},[270,275,277],{"type":39,"tag":57,"props":271,"children":272},{},[273],{"type":45,"value":274},"Enter URL:",{"type":45,"value":276}," ",{"type":39,"tag":193,"props":278,"children":280},{"className":279},[],[281],{"type":45,"value":282},"https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fmapbox-maps-ios.git",{"type":39,"tag":67,"props":284,"children":285},{},[286,291,293],{"type":39,"tag":57,"props":287,"children":288},{},[289],{"type":45,"value":290},"Version:",{"type":45,"value":292}," \"Up to Next Major\" from ",{"type":39,"tag":193,"props":294,"children":296},{"className":295},[],[297],{"type":45,"value":298},"11.0.0",{"type":39,"tag":67,"props":300,"children":301},{},[302,307],{"type":39,"tag":57,"props":303,"children":304},{},[305],{"type":45,"value":306},"Verify",{"type":45,"value":308}," four dependencies appear: MapboxCommon, MapboxCoreMaps, MapboxMaps, Turf",{"type":39,"tag":48,"props":310,"children":311},{},[312,317,319,326],{"type":39,"tag":57,"props":313,"children":314},{},[315],{"type":45,"value":316},"Alternative:",{"type":45,"value":318}," CocoaPods or direct download (",{"type":39,"tag":112,"props":320,"children":323},{"href":321,"rel":322},"https:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fmaps\u002Fguides\u002Finstall\u002F",[116],[324],{"type":45,"value":325},"install guide",{"type":45,"value":327},")",{"type":39,"tag":141,"props":329,"children":330},{},[],{"type":39,"tag":145,"props":332,"children":334},{"id":333},"map-initialization",[335],{"type":45,"value":336},"Map Initialization",{"type":39,"tag":152,"props":338,"children":340},{"id":339},"swiftui-pattern",[341],{"type":45,"value":342},"SwiftUI Pattern",{"type":39,"tag":48,"props":344,"children":345},{},[346],{"type":39,"tag":57,"props":347,"children":348},{},[349],{"type":45,"value":350},"Basic map:",{"type":39,"tag":202,"props":352,"children":355},{"className":353,"code":354,"language":21,"meta":207,"style":207},"language-swift shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import SwiftUI\nimport MapboxMaps\n\nstruct ContentView: View {\n    @State private var viewport: Viewport = .camera(\n        center: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194),\n        zoom: 12\n    )\n\n    var body: some View {\n        Map(viewport: $viewport)\n            .mapStyle(.standard)\n    }\n}\n",[356],{"type":39,"tag":193,"props":357,"children":358},{"__ignoreMap":207},[359,367,375,385,394,403,412,421,430,438,446,455,464,473],{"type":39,"tag":213,"props":360,"children":361},{"class":215,"line":216},[362],{"type":39,"tag":213,"props":363,"children":364},{},[365],{"type":45,"value":366},"import SwiftUI\n",{"type":39,"tag":213,"props":368,"children":369},{"class":215,"line":225},[370],{"type":39,"tag":213,"props":371,"children":372},{},[373],{"type":45,"value":374},"import MapboxMaps\n",{"type":39,"tag":213,"props":376,"children":378},{"class":215,"line":377},3,[379],{"type":39,"tag":213,"props":380,"children":382},{"emptyLinePlaceholder":381},true,[383],{"type":45,"value":384},"\n",{"type":39,"tag":213,"props":386,"children":388},{"class":215,"line":387},4,[389],{"type":39,"tag":213,"props":390,"children":391},{},[392],{"type":45,"value":393},"struct ContentView: View {\n",{"type":39,"tag":213,"props":395,"children":397},{"class":215,"line":396},5,[398],{"type":39,"tag":213,"props":399,"children":400},{},[401],{"type":45,"value":402},"    @State private var viewport: Viewport = .camera(\n",{"type":39,"tag":213,"props":404,"children":406},{"class":215,"line":405},6,[407],{"type":39,"tag":213,"props":408,"children":409},{},[410],{"type":45,"value":411},"        center: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194),\n",{"type":39,"tag":213,"props":413,"children":415},{"class":215,"line":414},7,[416],{"type":39,"tag":213,"props":417,"children":418},{},[419],{"type":45,"value":420},"        zoom: 12\n",{"type":39,"tag":213,"props":422,"children":424},{"class":215,"line":423},8,[425],{"type":39,"tag":213,"props":426,"children":427},{},[428],{"type":45,"value":429},"    )\n",{"type":39,"tag":213,"props":431,"children":433},{"class":215,"line":432},9,[434],{"type":39,"tag":213,"props":435,"children":436},{"emptyLinePlaceholder":381},[437],{"type":45,"value":384},{"type":39,"tag":213,"props":439,"children":440},{"class":215,"line":27},[441],{"type":39,"tag":213,"props":442,"children":443},{},[444],{"type":45,"value":445},"    var body: some View {\n",{"type":39,"tag":213,"props":447,"children":449},{"class":215,"line":448},11,[450],{"type":39,"tag":213,"props":451,"children":452},{},[453],{"type":45,"value":454},"        Map(viewport: $viewport)\n",{"type":39,"tag":213,"props":456,"children":458},{"class":215,"line":457},12,[459],{"type":39,"tag":213,"props":460,"children":461},{},[462],{"type":45,"value":463},"            .mapStyle(.standard)\n",{"type":39,"tag":213,"props":465,"children":467},{"class":215,"line":466},13,[468],{"type":39,"tag":213,"props":469,"children":470},{},[471],{"type":45,"value":472},"    }\n",{"type":39,"tag":213,"props":474,"children":476},{"class":215,"line":475},14,[477],{"type":39,"tag":213,"props":478,"children":479},{},[480],{"type":45,"value":481},"}\n",{"type":39,"tag":48,"props":483,"children":484},{},[485],{"type":39,"tag":57,"props":486,"children":487},{},[488],{"type":45,"value":489},"With ornaments:",{"type":39,"tag":202,"props":491,"children":493},{"className":353,"code":492,"language":21,"meta":207,"style":207},"Map(viewport: $viewport)\n    .mapStyle(.standard)\n    .ornamentOptions(OrnamentOptions(\n        scaleBar: .init(visibility: .visible),\n        compass: .init(visibility: .adaptive),\n        logo: .init(position: .bottomLeading)\n    ))\n",[494],{"type":39,"tag":193,"props":495,"children":496},{"__ignoreMap":207},[497,505,513,521,529,537,545],{"type":39,"tag":213,"props":498,"children":499},{"class":215,"line":216},[500],{"type":39,"tag":213,"props":501,"children":502},{},[503],{"type":45,"value":504},"Map(viewport: $viewport)\n",{"type":39,"tag":213,"props":506,"children":507},{"class":215,"line":225},[508],{"type":39,"tag":213,"props":509,"children":510},{},[511],{"type":45,"value":512},"    .mapStyle(.standard)\n",{"type":39,"tag":213,"props":514,"children":515},{"class":215,"line":377},[516],{"type":39,"tag":213,"props":517,"children":518},{},[519],{"type":45,"value":520},"    .ornamentOptions(OrnamentOptions(\n",{"type":39,"tag":213,"props":522,"children":523},{"class":215,"line":387},[524],{"type":39,"tag":213,"props":525,"children":526},{},[527],{"type":45,"value":528},"        scaleBar: .init(visibility: .visible),\n",{"type":39,"tag":213,"props":530,"children":531},{"class":215,"line":396},[532],{"type":39,"tag":213,"props":533,"children":534},{},[535],{"type":45,"value":536},"        compass: .init(visibility: .adaptive),\n",{"type":39,"tag":213,"props":538,"children":539},{"class":215,"line":405},[540],{"type":39,"tag":213,"props":541,"children":542},{},[543],{"type":45,"value":544},"        logo: .init(position: .bottomLeading)\n",{"type":39,"tag":213,"props":546,"children":547},{"class":215,"line":414},[548],{"type":39,"tag":213,"props":549,"children":550},{},[551],{"type":45,"value":552},"    ))\n",{"type":39,"tag":152,"props":554,"children":556},{"id":555},"uikit-pattern",[557],{"type":45,"value":558},"UIKit Pattern",{"type":39,"tag":202,"props":560,"children":562},{"className":353,"code":561,"language":21,"meta":207,"style":207},"import UIKit\nimport MapboxMaps\n\nclass MapViewController: UIViewController {\n    private var mapView: MapView!\n\n    override func viewDidLoad() {\n        super.viewDidLoad()\n\n        let options = MapInitOptions(\n            cameraOptions: CameraOptions(\n                center: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194),\n                zoom: 12\n            )\n        )\n\n        mapView = MapView(frame: view.bounds, mapInitOptions: options)\n        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]\n        view.addSubview(mapView)\n\n        mapView.mapboxMap.loadStyle(.standard)\n    }\n}\n",[563],{"type":39,"tag":193,"props":564,"children":565},{"__ignoreMap":207},[566,574,581,588,596,604,611,619,627,634,642,650,658,666,674,683,691,700,709,718,726,735,743],{"type":39,"tag":213,"props":567,"children":568},{"class":215,"line":216},[569],{"type":39,"tag":213,"props":570,"children":571},{},[572],{"type":45,"value":573},"import UIKit\n",{"type":39,"tag":213,"props":575,"children":576},{"class":215,"line":225},[577],{"type":39,"tag":213,"props":578,"children":579},{},[580],{"type":45,"value":374},{"type":39,"tag":213,"props":582,"children":583},{"class":215,"line":377},[584],{"type":39,"tag":213,"props":585,"children":586},{"emptyLinePlaceholder":381},[587],{"type":45,"value":384},{"type":39,"tag":213,"props":589,"children":590},{"class":215,"line":387},[591],{"type":39,"tag":213,"props":592,"children":593},{},[594],{"type":45,"value":595},"class MapViewController: UIViewController {\n",{"type":39,"tag":213,"props":597,"children":598},{"class":215,"line":396},[599],{"type":39,"tag":213,"props":600,"children":601},{},[602],{"type":45,"value":603},"    private var mapView: MapView!\n",{"type":39,"tag":213,"props":605,"children":606},{"class":215,"line":405},[607],{"type":39,"tag":213,"props":608,"children":609},{"emptyLinePlaceholder":381},[610],{"type":45,"value":384},{"type":39,"tag":213,"props":612,"children":613},{"class":215,"line":414},[614],{"type":39,"tag":213,"props":615,"children":616},{},[617],{"type":45,"value":618},"    override func viewDidLoad() {\n",{"type":39,"tag":213,"props":620,"children":621},{"class":215,"line":423},[622],{"type":39,"tag":213,"props":623,"children":624},{},[625],{"type":45,"value":626},"        super.viewDidLoad()\n",{"type":39,"tag":213,"props":628,"children":629},{"class":215,"line":432},[630],{"type":39,"tag":213,"props":631,"children":632},{"emptyLinePlaceholder":381},[633],{"type":45,"value":384},{"type":39,"tag":213,"props":635,"children":636},{"class":215,"line":27},[637],{"type":39,"tag":213,"props":638,"children":639},{},[640],{"type":45,"value":641},"        let options = MapInitOptions(\n",{"type":39,"tag":213,"props":643,"children":644},{"class":215,"line":448},[645],{"type":39,"tag":213,"props":646,"children":647},{},[648],{"type":45,"value":649},"            cameraOptions: CameraOptions(\n",{"type":39,"tag":213,"props":651,"children":652},{"class":215,"line":457},[653],{"type":39,"tag":213,"props":654,"children":655},{},[656],{"type":45,"value":657},"                center: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194),\n",{"type":39,"tag":213,"props":659,"children":660},{"class":215,"line":466},[661],{"type":39,"tag":213,"props":662,"children":663},{},[664],{"type":45,"value":665},"                zoom: 12\n",{"type":39,"tag":213,"props":667,"children":668},{"class":215,"line":475},[669],{"type":39,"tag":213,"props":670,"children":671},{},[672],{"type":45,"value":673},"            )\n",{"type":39,"tag":213,"props":675,"children":677},{"class":215,"line":676},15,[678],{"type":39,"tag":213,"props":679,"children":680},{},[681],{"type":45,"value":682},"        )\n",{"type":39,"tag":213,"props":684,"children":686},{"class":215,"line":685},16,[687],{"type":39,"tag":213,"props":688,"children":689},{"emptyLinePlaceholder":381},[690],{"type":45,"value":384},{"type":39,"tag":213,"props":692,"children":694},{"class":215,"line":693},17,[695],{"type":39,"tag":213,"props":696,"children":697},{},[698],{"type":45,"value":699},"        mapView = MapView(frame: view.bounds, mapInitOptions: options)\n",{"type":39,"tag":213,"props":701,"children":703},{"class":215,"line":702},18,[704],{"type":39,"tag":213,"props":705,"children":706},{},[707],{"type":45,"value":708},"        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]\n",{"type":39,"tag":213,"props":710,"children":712},{"class":215,"line":711},19,[713],{"type":39,"tag":213,"props":714,"children":715},{},[716],{"type":45,"value":717},"        view.addSubview(mapView)\n",{"type":39,"tag":213,"props":719,"children":721},{"class":215,"line":720},20,[722],{"type":39,"tag":213,"props":723,"children":724},{"emptyLinePlaceholder":381},[725],{"type":45,"value":384},{"type":39,"tag":213,"props":727,"children":729},{"class":215,"line":728},21,[730],{"type":39,"tag":213,"props":731,"children":732},{},[733],{"type":45,"value":734},"        mapView.mapboxMap.loadStyle(.standard)\n",{"type":39,"tag":213,"props":736,"children":738},{"class":215,"line":737},22,[739],{"type":39,"tag":213,"props":740,"children":741},{},[742],{"type":45,"value":472},{"type":39,"tag":213,"props":744,"children":746},{"class":215,"line":745},23,[747],{"type":39,"tag":213,"props":748,"children":749},{},[750],{"type":45,"value":481},{"type":39,"tag":141,"props":752,"children":753},{},[],{"type":39,"tag":145,"props":755,"children":757},{"id":756},"add-markers",[758],{"type":45,"value":759},"Add Markers",{"type":39,"tag":48,"props":761,"children":762},{},[763],{"type":45,"value":764},"The SDK offers three ways to place a point on the map. Pick the simplest one that fits.",{"type":39,"tag":48,"props":766,"children":767},{},[768,773,775,781,783,789,791,797,799,805],{"type":39,"tag":57,"props":769,"children":770},{},[771],{"type":45,"value":772},"Agent note:",{"type":45,"value":774}," A SwiftUI Mapbox sketch is incomplete without at least one annotation (",{"type":39,"tag":193,"props":776,"children":778},{"className":777},[],[779],{"type":45,"value":780},"Marker",{"type":45,"value":782},", ",{"type":39,"tag":193,"props":784,"children":786},{"className":785},[],[787],{"type":45,"value":788},"PointAnnotation",{"type":45,"value":790},", or ",{"type":39,"tag":193,"props":792,"children":794},{"className":793},[],[795],{"type":45,"value":796},"MapViewAnnotation",{"type":45,"value":798},"). Do not ship a bare ",{"type":39,"tag":193,"props":800,"children":802},{"className":801},[],[803],{"type":45,"value":804},"Map { }",{"type":45,"value":806}," with no pin.",{"type":39,"tag":152,"props":808,"children":810},{"id":809},"which-api-should-i-use",[811],{"type":45,"value":812},"Which API should I use?",{"type":39,"tag":814,"props":815,"children":816},"table",{},[817,846],{"type":39,"tag":818,"props":819,"children":820},"thead",{},[821],{"type":39,"tag":822,"props":823,"children":824},"tr",{},[825,831,836,841],{"type":39,"tag":826,"props":827,"children":828},"th",{},[829],{"type":45,"value":830},"API",{"type":39,"tag":826,"props":832,"children":833},{},[834],{"type":45,"value":835},"Use it when",{"type":39,"tag":826,"props":837,"children":838},{},[839],{"type":45,"value":840},"Platforms",{"type":39,"tag":826,"props":842,"children":843},{},[844],{"type":45,"value":845},"Notes",{"type":39,"tag":847,"props":848,"children":849},"tbody",{},[850,887,929],{"type":39,"tag":822,"props":851,"children":852},{},[853,864,869,874],{"type":39,"tag":854,"props":855,"children":856},"td",{},[857,862],{"type":39,"tag":193,"props":858,"children":860},{"className":859},[],[861],{"type":45,"value":780},{"type":45,"value":863}," (Markers API)",{"type":39,"tag":854,"props":865,"children":866},{},[867],{"type":45,"value":868},"You need a default pin and don't have a custom image asset",{"type":39,"tag":854,"props":870,"children":871},{},[872],{"type":45,"value":873},"SwiftUI only",{"type":39,"tag":854,"props":875,"children":876},{},[877,879,885],{"type":45,"value":878},"No image assets required. Experimental SPI — needs ",{"type":39,"tag":193,"props":880,"children":882},{"className":881},[],[883],{"type":45,"value":884},"@_spi(Experimental) import MapboxMaps",{"type":45,"value":886},". Best \u003C 100 markers.",{"type":39,"tag":822,"props":888,"children":889},{},[890,898,903,908],{"type":39,"tag":854,"props":891,"children":892},{},[893],{"type":39,"tag":193,"props":894,"children":896},{"className":895},[],[897],{"type":45,"value":788},{"type":39,"tag":854,"props":899,"children":900},{},[901],{"type":45,"value":902},"You have a custom image and want layer-level placement",{"type":39,"tag":854,"props":904,"children":905},{},[906],{"type":45,"value":907},"SwiftUI + UIKit",{"type":39,"tag":854,"props":909,"children":910},{},[911,913,919,921,927],{"type":45,"value":912},"Backed by a symbol layer, so it scales well to hundreds of markers. Accepts any ",{"type":39,"tag":193,"props":914,"children":916},{"className":915},[],[917],{"type":45,"value":918},"UIImage",{"type":45,"value":920}," that ",{"type":39,"tag":193,"props":922,"children":924},{"className":923},[],[925],{"type":45,"value":926},"UIKit",{"type":45,"value":928}," can render.",{"type":39,"tag":822,"props":930,"children":931},{},[932,951,956,960],{"type":39,"tag":854,"props":933,"children":934},{},[935,937,943,945,950],{"type":45,"value":936},"View annotations (",{"type":39,"tag":193,"props":938,"children":940},{"className":939},[],[941],{"type":45,"value":942},"ViewAnnotation",{"type":45,"value":944}," \u002F ",{"type":39,"tag":193,"props":946,"children":948},{"className":947},[],[949],{"type":45,"value":796},{"type":45,"value":327},{"type":39,"tag":854,"props":952,"children":953},{},[954],{"type":45,"value":955},"You want to render a full native view (card, badge, animated content) anchored to a coordinate",{"type":39,"tag":854,"props":957,"children":958},{},[959],{"type":45,"value":907},{"type":39,"tag":854,"props":961,"children":962},{},[963,965,970,972,978,980,985,987,992],{"type":45,"value":964},"SwiftUI uses ",{"type":39,"tag":193,"props":966,"children":968},{"className":967},[],[969],{"type":45,"value":796},{"type":45,"value":971},"; UIKit uses ",{"type":39,"tag":193,"props":973,"children":975},{"className":974},[],[976],{"type":45,"value":977},"mapView.viewAnnotations",{"type":45,"value":979}," with a ",{"type":39,"tag":193,"props":981,"children":983},{"className":982},[],[984],{"type":45,"value":942},{"type":45,"value":986},". Each annotation is a real view — costs more than ",{"type":39,"tag":193,"props":988,"children":990},{"className":989},[],[991],{"type":45,"value":788},{"type":45,"value":993}," at scale.",{"type":39,"tag":48,"props":995,"children":996},{},[997,999,1005,1007,1013],{"type":45,"value":998},"For hundreds or thousands of features, use a style layer (",{"type":39,"tag":193,"props":1000,"children":1002},{"className":1001},[],[1003],{"type":45,"value":1004},"SymbolLayer",{"type":45,"value":1006}," on a ",{"type":39,"tag":193,"props":1008,"children":1010},{"className":1009},[],[1011],{"type":45,"value":1012},"GeoJSONSource",{"type":45,"value":1014},") instead of annotations.",{"type":39,"tag":152,"props":1016,"children":1018},{"id":1017},"markers-api-recommended-for-simple-cases-swiftui",[1019],{"type":45,"value":1020},"Markers API (recommended for simple cases, SwiftUI)",{"type":39,"tag":202,"props":1022,"children":1024},{"className":353,"code":1023,"language":21,"meta":207,"style":207},"import SwiftUI\n@_spi(Experimental) import MapboxMaps\n\nstruct ContentView: View {\n    var body: some View {\n        Map {\n            Marker(coordinate: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194))\n                .color(.red)\n                .text(\"San Francisco\")\n        }\n    }\n}\n",[1025],{"type":39,"tag":193,"props":1026,"children":1027},{"__ignoreMap":207},[1028,1035,1043,1050,1057,1064,1072,1080,1088,1096,1104,1111],{"type":39,"tag":213,"props":1029,"children":1030},{"class":215,"line":216},[1031],{"type":39,"tag":213,"props":1032,"children":1033},{},[1034],{"type":45,"value":366},{"type":39,"tag":213,"props":1036,"children":1037},{"class":215,"line":225},[1038],{"type":39,"tag":213,"props":1039,"children":1040},{},[1041],{"type":45,"value":1042},"@_spi(Experimental) import MapboxMaps\n",{"type":39,"tag":213,"props":1044,"children":1045},{"class":215,"line":377},[1046],{"type":39,"tag":213,"props":1047,"children":1048},{"emptyLinePlaceholder":381},[1049],{"type":45,"value":384},{"type":39,"tag":213,"props":1051,"children":1052},{"class":215,"line":387},[1053],{"type":39,"tag":213,"props":1054,"children":1055},{},[1056],{"type":45,"value":393},{"type":39,"tag":213,"props":1058,"children":1059},{"class":215,"line":396},[1060],{"type":39,"tag":213,"props":1061,"children":1062},{},[1063],{"type":45,"value":445},{"type":39,"tag":213,"props":1065,"children":1066},{"class":215,"line":405},[1067],{"type":39,"tag":213,"props":1068,"children":1069},{},[1070],{"type":45,"value":1071},"        Map {\n",{"type":39,"tag":213,"props":1073,"children":1074},{"class":215,"line":414},[1075],{"type":39,"tag":213,"props":1076,"children":1077},{},[1078],{"type":45,"value":1079},"            Marker(coordinate: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194))\n",{"type":39,"tag":213,"props":1081,"children":1082},{"class":215,"line":423},[1083],{"type":39,"tag":213,"props":1084,"children":1085},{},[1086],{"type":45,"value":1087},"                .color(.red)\n",{"type":39,"tag":213,"props":1089,"children":1090},{"class":215,"line":432},[1091],{"type":39,"tag":213,"props":1092,"children":1093},{},[1094],{"type":45,"value":1095},"                .text(\"San Francisco\")\n",{"type":39,"tag":213,"props":1097,"children":1098},{"class":215,"line":27},[1099],{"type":39,"tag":213,"props":1100,"children":1101},{},[1102],{"type":45,"value":1103},"        }\n",{"type":39,"tag":213,"props":1105,"children":1106},{"class":215,"line":448},[1107],{"type":39,"tag":213,"props":1108,"children":1109},{},[1110],{"type":45,"value":472},{"type":39,"tag":213,"props":1112,"children":1113},{"class":215,"line":457},[1114],{"type":39,"tag":213,"props":1115,"children":1116},{},[1117],{"type":45,"value":481},{"type":39,"tag":48,"props":1119,"children":1120},{},[1121],{"type":45,"value":1122},"Multiple markers from a collection:",{"type":39,"tag":202,"props":1124,"children":1126},{"className":353,"code":1125,"language":21,"meta":207,"style":207},"Map {\n    ForEvery(locations, id: \\.id) { location in\n        Marker(coordinate: location.coordinate)\n            .color(.red)\n            .text(location.name)\n    }\n}\n",[1127],{"type":39,"tag":193,"props":1128,"children":1129},{"__ignoreMap":207},[1130,1138,1146,1154,1162,1170,1177],{"type":39,"tag":213,"props":1131,"children":1132},{"class":215,"line":216},[1133],{"type":39,"tag":213,"props":1134,"children":1135},{},[1136],{"type":45,"value":1137},"Map {\n",{"type":39,"tag":213,"props":1139,"children":1140},{"class":215,"line":225},[1141],{"type":39,"tag":213,"props":1142,"children":1143},{},[1144],{"type":45,"value":1145},"    ForEvery(locations, id: \\.id) { location in\n",{"type":39,"tag":213,"props":1147,"children":1148},{"class":215,"line":377},[1149],{"type":39,"tag":213,"props":1150,"children":1151},{},[1152],{"type":45,"value":1153},"        Marker(coordinate: location.coordinate)\n",{"type":39,"tag":213,"props":1155,"children":1156},{"class":215,"line":387},[1157],{"type":39,"tag":213,"props":1158,"children":1159},{},[1160],{"type":45,"value":1161},"            .color(.red)\n",{"type":39,"tag":213,"props":1163,"children":1164},{"class":215,"line":396},[1165],{"type":39,"tag":213,"props":1166,"children":1167},{},[1168],{"type":45,"value":1169},"            .text(location.name)\n",{"type":39,"tag":213,"props":1171,"children":1172},{"class":215,"line":405},[1173],{"type":39,"tag":213,"props":1174,"children":1175},{},[1176],{"type":45,"value":472},{"type":39,"tag":213,"props":1178,"children":1179},{"class":215,"line":414},[1180],{"type":39,"tag":213,"props":1181,"children":1182},{},[1183],{"type":45,"value":481},{"type":39,"tag":1185,"props":1186,"children":1187},"blockquote",{},[1188],{"type":39,"tag":48,"props":1189,"children":1190},{},[1191,1196,1197,1202,1204,1209,1211,1216,1218,1223],{"type":39,"tag":57,"props":1192,"children":1193},{},[1194],{"type":45,"value":1195},"Scaling note.",{"type":45,"value":276},{"type":39,"tag":193,"props":1198,"children":1200},{"className":1199},[],[1201],{"type":45,"value":780},{"type":45,"value":1203}," and ",{"type":39,"tag":193,"props":1205,"children":1207},{"className":1206},[],[1208],{"type":45,"value":788},{"type":45,"value":1210}," each create their own view or symbol entry per pin — fine up to about 100 markers. For larger datasets (hundreds or thousands of features — common with open-ended GeoJSON feeds), load the data into a ",{"type":39,"tag":193,"props":1212,"children":1214},{"className":1213},[],[1215],{"type":45,"value":1012},{"type":45,"value":1217}," and render it with a ",{"type":39,"tag":193,"props":1219,"children":1221},{"className":1220},[],[1222],{"type":45,"value":1004},{"type":45,"value":1224}," instead. That scales to thousands of features and enables clustering.",{"type":39,"tag":152,"props":1226,"children":1228},{"id":1227},"pointannotation-custom-image",[1229],{"type":45,"value":1230},"PointAnnotation (custom image)",{"type":39,"tag":48,"props":1232,"children":1233},{},[1234],{"type":39,"tag":57,"props":1235,"children":1236},{},[1237],{"type":45,"value":1238},"SwiftUI:",{"type":39,"tag":202,"props":1240,"children":1242},{"className":353,"code":1241,"language":21,"meta":207,"style":207},"Map(viewport: $viewport) {\n    PointAnnotation(coordinate: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194))\n        .image(.init(image: UIImage(named: \"marker\")!, name: \"marker\"))\n}\n",[1243],{"type":39,"tag":193,"props":1244,"children":1245},{"__ignoreMap":207},[1246,1254,1262,1270],{"type":39,"tag":213,"props":1247,"children":1248},{"class":215,"line":216},[1249],{"type":39,"tag":213,"props":1250,"children":1251},{},[1252],{"type":45,"value":1253},"Map(viewport: $viewport) {\n",{"type":39,"tag":213,"props":1255,"children":1256},{"class":215,"line":225},[1257],{"type":39,"tag":213,"props":1258,"children":1259},{},[1260],{"type":45,"value":1261},"    PointAnnotation(coordinate: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194))\n",{"type":39,"tag":213,"props":1263,"children":1264},{"class":215,"line":377},[1265],{"type":39,"tag":213,"props":1266,"children":1267},{},[1268],{"type":45,"value":1269},"        .image(.init(image: UIImage(named: \"marker\")!, name: \"marker\"))\n",{"type":39,"tag":213,"props":1271,"children":1272},{"class":215,"line":387},[1273],{"type":39,"tag":213,"props":1274,"children":1275},{},[1276],{"type":45,"value":481},{"type":39,"tag":48,"props":1278,"children":1279},{},[1280],{"type":39,"tag":57,"props":1281,"children":1282},{},[1283],{"type":45,"value":1284},"UIKit:",{"type":39,"tag":202,"props":1286,"children":1288},{"className":353,"code":1287,"language":21,"meta":207,"style":207},"\u002F\u002F Create annotation manager (once, reuse for updates)\nvar pointAnnotationManager = mapView.annotations.makePointAnnotationManager()\n\n\u002F\u002F Create marker\nvar annotation = PointAnnotation(coordinate: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194))\nannotation.image = .init(image: UIImage(named: \"marker\")!, name: \"marker\")\nannotation.iconAnchor = .bottom\n\n\u002F\u002F Add to map\npointAnnotationManager.annotations = [annotation]\n",[1289],{"type":39,"tag":193,"props":1290,"children":1291},{"__ignoreMap":207},[1292,1300,1308,1315,1323,1331,1339,1347,1354,1362],{"type":39,"tag":213,"props":1293,"children":1294},{"class":215,"line":216},[1295],{"type":39,"tag":213,"props":1296,"children":1297},{},[1298],{"type":45,"value":1299},"\u002F\u002F Create annotation manager (once, reuse for updates)\n",{"type":39,"tag":213,"props":1301,"children":1302},{"class":215,"line":225},[1303],{"type":39,"tag":213,"props":1304,"children":1305},{},[1306],{"type":45,"value":1307},"var pointAnnotationManager = mapView.annotations.makePointAnnotationManager()\n",{"type":39,"tag":213,"props":1309,"children":1310},{"class":215,"line":377},[1311],{"type":39,"tag":213,"props":1312,"children":1313},{"emptyLinePlaceholder":381},[1314],{"type":45,"value":384},{"type":39,"tag":213,"props":1316,"children":1317},{"class":215,"line":387},[1318],{"type":39,"tag":213,"props":1319,"children":1320},{},[1321],{"type":45,"value":1322},"\u002F\u002F Create marker\n",{"type":39,"tag":213,"props":1324,"children":1325},{"class":215,"line":396},[1326],{"type":39,"tag":213,"props":1327,"children":1328},{},[1329],{"type":45,"value":1330},"var annotation = PointAnnotation(coordinate: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194))\n",{"type":39,"tag":213,"props":1332,"children":1333},{"class":215,"line":405},[1334],{"type":39,"tag":213,"props":1335,"children":1336},{},[1337],{"type":45,"value":1338},"annotation.image = .init(image: UIImage(named: \"marker\")!, name: \"marker\")\n",{"type":39,"tag":213,"props":1340,"children":1341},{"class":215,"line":414},[1342],{"type":39,"tag":213,"props":1343,"children":1344},{},[1345],{"type":45,"value":1346},"annotation.iconAnchor = .bottom\n",{"type":39,"tag":213,"props":1348,"children":1349},{"class":215,"line":423},[1350],{"type":39,"tag":213,"props":1351,"children":1352},{"emptyLinePlaceholder":381},[1353],{"type":45,"value":384},{"type":39,"tag":213,"props":1355,"children":1356},{"class":215,"line":432},[1357],{"type":39,"tag":213,"props":1358,"children":1359},{},[1360],{"type":45,"value":1361},"\u002F\u002F Add to map\n",{"type":39,"tag":213,"props":1363,"children":1364},{"class":215,"line":27},[1365],{"type":39,"tag":213,"props":1366,"children":1367},{},[1368],{"type":45,"value":1369},"pointAnnotationManager.annotations = [annotation]\n",{"type":39,"tag":48,"props":1371,"children":1372},{},[1373],{"type":39,"tag":57,"props":1374,"children":1375},{},[1376],{"type":45,"value":1377},"Multiple markers:",{"type":39,"tag":202,"props":1379,"children":1381},{"className":353,"code":1380,"language":21,"meta":207,"style":207},"let annotations = locations.map { coordinate in\n    var annotation = PointAnnotation(coordinate: coordinate)\n    annotation.image = .init(image: UIImage(named: \"marker\")!, name: \"marker\")\n    return annotation\n}\n\npointAnnotationManager.annotations = annotations\n",[1382],{"type":39,"tag":193,"props":1383,"children":1384},{"__ignoreMap":207},[1385,1393,1401,1409,1417,1424,1431],{"type":39,"tag":213,"props":1386,"children":1387},{"class":215,"line":216},[1388],{"type":39,"tag":213,"props":1389,"children":1390},{},[1391],{"type":45,"value":1392},"let annotations = locations.map { coordinate in\n",{"type":39,"tag":213,"props":1394,"children":1395},{"class":215,"line":225},[1396],{"type":39,"tag":213,"props":1397,"children":1398},{},[1399],{"type":45,"value":1400},"    var annotation = PointAnnotation(coordinate: coordinate)\n",{"type":39,"tag":213,"props":1402,"children":1403},{"class":215,"line":377},[1404],{"type":39,"tag":213,"props":1405,"children":1406},{},[1407],{"type":45,"value":1408},"    annotation.image = .init(image: UIImage(named: \"marker\")!, name: \"marker\")\n",{"type":39,"tag":213,"props":1410,"children":1411},{"class":215,"line":387},[1412],{"type":39,"tag":213,"props":1413,"children":1414},{},[1415],{"type":45,"value":1416},"    return annotation\n",{"type":39,"tag":213,"props":1418,"children":1419},{"class":215,"line":396},[1420],{"type":39,"tag":213,"props":1421,"children":1422},{},[1423],{"type":45,"value":481},{"type":39,"tag":213,"props":1425,"children":1426},{"class":215,"line":405},[1427],{"type":39,"tag":213,"props":1428,"children":1429},{"emptyLinePlaceholder":381},[1430],{"type":45,"value":384},{"type":39,"tag":213,"props":1432,"children":1433},{"class":215,"line":414},[1434],{"type":39,"tag":213,"props":1435,"children":1436},{},[1437],{"type":45,"value":1438},"pointAnnotationManager.annotations = annotations\n",{"type":39,"tag":141,"props":1440,"children":1441},{},[],{"type":39,"tag":145,"props":1443,"children":1445},{"id":1444},"show-user-location",[1446],{"type":45,"value":1447},"Show User Location",{"type":39,"tag":48,"props":1449,"children":1450},{},[1451],{"type":39,"tag":57,"props":1452,"children":1453},{},[1454],{"type":45,"value":1455},"Step 1: Add location permission to Info.plist:",{"type":39,"tag":202,"props":1457,"children":1459},{"className":204,"code":1458,"language":206,"meta":207,"style":207},"\u003Ckey>NSLocationWhenInUseUsageDescription\u003C\u002Fkey>\n\u003Cstring>Show your location on the map\u003C\u002Fstring>\n",[1460],{"type":39,"tag":193,"props":1461,"children":1462},{"__ignoreMap":207},[1463,1471],{"type":39,"tag":213,"props":1464,"children":1465},{"class":215,"line":216},[1466],{"type":39,"tag":213,"props":1467,"children":1468},{},[1469],{"type":45,"value":1470},"\u003Ckey>NSLocationWhenInUseUsageDescription\u003C\u002Fkey>\n",{"type":39,"tag":213,"props":1472,"children":1473},{"class":215,"line":225},[1474],{"type":39,"tag":213,"props":1475,"children":1476},{},[1477],{"type":45,"value":1478},"\u003Cstring>Show your location on the map\u003C\u002Fstring>\n",{"type":39,"tag":48,"props":1480,"children":1481},{},[1482],{"type":39,"tag":57,"props":1483,"children":1484},{},[1485],{"type":45,"value":1486},"Step 2: Request permissions and show location:",{"type":39,"tag":202,"props":1488,"children":1490},{"className":353,"code":1489,"language":21,"meta":207,"style":207},"import CoreLocation\n\n\u002F\u002F Request permissions\nlet locationManager = CLLocationManager()\nlocationManager.requestWhenInUseAuthorization()\n\n\u002F\u002F Show user location puck\nmapView.location.options.puckType = .puck2D()\nmapView.location.options.puckBearingEnabled = true\n",[1491],{"type":39,"tag":193,"props":1492,"children":1493},{"__ignoreMap":207},[1494,1502,1509,1517,1525,1533,1540,1548,1556],{"type":39,"tag":213,"props":1495,"children":1496},{"class":215,"line":216},[1497],{"type":39,"tag":213,"props":1498,"children":1499},{},[1500],{"type":45,"value":1501},"import CoreLocation\n",{"type":39,"tag":213,"props":1503,"children":1504},{"class":215,"line":225},[1505],{"type":39,"tag":213,"props":1506,"children":1507},{"emptyLinePlaceholder":381},[1508],{"type":45,"value":384},{"type":39,"tag":213,"props":1510,"children":1511},{"class":215,"line":377},[1512],{"type":39,"tag":213,"props":1513,"children":1514},{},[1515],{"type":45,"value":1516},"\u002F\u002F Request permissions\n",{"type":39,"tag":213,"props":1518,"children":1519},{"class":215,"line":387},[1520],{"type":39,"tag":213,"props":1521,"children":1522},{},[1523],{"type":45,"value":1524},"let locationManager = CLLocationManager()\n",{"type":39,"tag":213,"props":1526,"children":1527},{"class":215,"line":396},[1528],{"type":39,"tag":213,"props":1529,"children":1530},{},[1531],{"type":45,"value":1532},"locationManager.requestWhenInUseAuthorization()\n",{"type":39,"tag":213,"props":1534,"children":1535},{"class":215,"line":405},[1536],{"type":39,"tag":213,"props":1537,"children":1538},{"emptyLinePlaceholder":381},[1539],{"type":45,"value":384},{"type":39,"tag":213,"props":1541,"children":1542},{"class":215,"line":414},[1543],{"type":39,"tag":213,"props":1544,"children":1545},{},[1546],{"type":45,"value":1547},"\u002F\u002F Show user location puck\n",{"type":39,"tag":213,"props":1549,"children":1550},{"class":215,"line":423},[1551],{"type":39,"tag":213,"props":1552,"children":1553},{},[1554],{"type":45,"value":1555},"mapView.location.options.puckType = .puck2D()\n",{"type":39,"tag":213,"props":1557,"children":1558},{"class":215,"line":432},[1559],{"type":39,"tag":213,"props":1560,"children":1561},{},[1562],{"type":45,"value":1563},"mapView.location.options.puckBearingEnabled = true\n",{"type":39,"tag":141,"props":1565,"children":1566},{},[],{"type":39,"tag":145,"props":1568,"children":1570},{"id":1569},"performance-best-practices",[1571],{"type":45,"value":1572},"Performance Best Practices",{"type":39,"tag":152,"props":1574,"children":1576},{"id":1575},"reuse-annotation-managers",[1577],{"type":45,"value":1578},"Reuse Annotation Managers",{"type":39,"tag":202,"props":1580,"children":1582},{"className":353,"code":1581,"language":21,"meta":207,"style":207},"\u002F\u002F ❌ Don't create new managers repeatedly\nfunc updateMarkers() {\n    let manager = mapView.annotations.makePointAnnotationManager()\n    manager.annotations = markers\n}\n\n\u002F\u002F ✅ Create once, reuse\nlet pointAnnotationManager: PointAnnotationManager\n\ninit() {\n    pointAnnotationManager = mapView.annotations.makePointAnnotationManager()\n}\n\nfunc updateMarkers() {\n    pointAnnotationManager.annotations = markers\n}\n",[1583],{"type":39,"tag":193,"props":1584,"children":1585},{"__ignoreMap":207},[1586,1594,1602,1610,1618,1625,1632,1640,1648,1655,1663,1671,1678,1685,1692,1700],{"type":39,"tag":213,"props":1587,"children":1588},{"class":215,"line":216},[1589],{"type":39,"tag":213,"props":1590,"children":1591},{},[1592],{"type":45,"value":1593},"\u002F\u002F ❌ Don't create new managers repeatedly\n",{"type":39,"tag":213,"props":1595,"children":1596},{"class":215,"line":225},[1597],{"type":39,"tag":213,"props":1598,"children":1599},{},[1600],{"type":45,"value":1601},"func updateMarkers() {\n",{"type":39,"tag":213,"props":1603,"children":1604},{"class":215,"line":377},[1605],{"type":39,"tag":213,"props":1606,"children":1607},{},[1608],{"type":45,"value":1609},"    let manager = mapView.annotations.makePointAnnotationManager()\n",{"type":39,"tag":213,"props":1611,"children":1612},{"class":215,"line":387},[1613],{"type":39,"tag":213,"props":1614,"children":1615},{},[1616],{"type":45,"value":1617},"    manager.annotations = markers\n",{"type":39,"tag":213,"props":1619,"children":1620},{"class":215,"line":396},[1621],{"type":39,"tag":213,"props":1622,"children":1623},{},[1624],{"type":45,"value":481},{"type":39,"tag":213,"props":1626,"children":1627},{"class":215,"line":405},[1628],{"type":39,"tag":213,"props":1629,"children":1630},{"emptyLinePlaceholder":381},[1631],{"type":45,"value":384},{"type":39,"tag":213,"props":1633,"children":1634},{"class":215,"line":414},[1635],{"type":39,"tag":213,"props":1636,"children":1637},{},[1638],{"type":45,"value":1639},"\u002F\u002F ✅ Create once, reuse\n",{"type":39,"tag":213,"props":1641,"children":1642},{"class":215,"line":423},[1643],{"type":39,"tag":213,"props":1644,"children":1645},{},[1646],{"type":45,"value":1647},"let pointAnnotationManager: PointAnnotationManager\n",{"type":39,"tag":213,"props":1649,"children":1650},{"class":215,"line":432},[1651],{"type":39,"tag":213,"props":1652,"children":1653},{"emptyLinePlaceholder":381},[1654],{"type":45,"value":384},{"type":39,"tag":213,"props":1656,"children":1657},{"class":215,"line":27},[1658],{"type":39,"tag":213,"props":1659,"children":1660},{},[1661],{"type":45,"value":1662},"init() {\n",{"type":39,"tag":213,"props":1664,"children":1665},{"class":215,"line":448},[1666],{"type":39,"tag":213,"props":1667,"children":1668},{},[1669],{"type":45,"value":1670},"    pointAnnotationManager = mapView.annotations.makePointAnnotationManager()\n",{"type":39,"tag":213,"props":1672,"children":1673},{"class":215,"line":457},[1674],{"type":39,"tag":213,"props":1675,"children":1676},{},[1677],{"type":45,"value":481},{"type":39,"tag":213,"props":1679,"children":1680},{"class":215,"line":466},[1681],{"type":39,"tag":213,"props":1682,"children":1683},{"emptyLinePlaceholder":381},[1684],{"type":45,"value":384},{"type":39,"tag":213,"props":1686,"children":1687},{"class":215,"line":475},[1688],{"type":39,"tag":213,"props":1689,"children":1690},{},[1691],{"type":45,"value":1601},{"type":39,"tag":213,"props":1693,"children":1694},{"class":215,"line":676},[1695],{"type":39,"tag":213,"props":1696,"children":1697},{},[1698],{"type":45,"value":1699},"    pointAnnotationManager.annotations = markers\n",{"type":39,"tag":213,"props":1701,"children":1702},{"class":215,"line":685},[1703],{"type":39,"tag":213,"props":1704,"children":1705},{},[1706],{"type":45,"value":481},{"type":39,"tag":152,"props":1708,"children":1710},{"id":1709},"batch-annotation-updates",[1711],{"type":45,"value":1712},"Batch Annotation Updates",{"type":39,"tag":202,"props":1714,"children":1716},{"className":353,"code":1715,"language":21,"meta":207,"style":207},"\u002F\u002F ✅ Update all at once\npointAnnotationManager.annotations = newAnnotations\n\n\u002F\u002F ❌ Don't update one by one\nfor annotation in newAnnotations {\n    pointAnnotationManager.annotations.append(annotation)\n}\n",[1717],{"type":39,"tag":193,"props":1718,"children":1719},{"__ignoreMap":207},[1720,1728,1736,1743,1751,1759,1767],{"type":39,"tag":213,"props":1721,"children":1722},{"class":215,"line":216},[1723],{"type":39,"tag":213,"props":1724,"children":1725},{},[1726],{"type":45,"value":1727},"\u002F\u002F ✅ Update all at once\n",{"type":39,"tag":213,"props":1729,"children":1730},{"class":215,"line":225},[1731],{"type":39,"tag":213,"props":1732,"children":1733},{},[1734],{"type":45,"value":1735},"pointAnnotationManager.annotations = newAnnotations\n",{"type":39,"tag":213,"props":1737,"children":1738},{"class":215,"line":377},[1739],{"type":39,"tag":213,"props":1740,"children":1741},{"emptyLinePlaceholder":381},[1742],{"type":45,"value":384},{"type":39,"tag":213,"props":1744,"children":1745},{"class":215,"line":387},[1746],{"type":39,"tag":213,"props":1747,"children":1748},{},[1749],{"type":45,"value":1750},"\u002F\u002F ❌ Don't update one by one\n",{"type":39,"tag":213,"props":1752,"children":1753},{"class":215,"line":396},[1754],{"type":39,"tag":213,"props":1755,"children":1756},{},[1757],{"type":45,"value":1758},"for annotation in newAnnotations {\n",{"type":39,"tag":213,"props":1760,"children":1761},{"class":215,"line":405},[1762],{"type":39,"tag":213,"props":1763,"children":1764},{},[1765],{"type":45,"value":1766},"    pointAnnotationManager.annotations.append(annotation)\n",{"type":39,"tag":213,"props":1768,"children":1769},{"class":215,"line":414},[1770],{"type":39,"tag":213,"props":1771,"children":1772},{},[1773],{"type":45,"value":481},{"type":39,"tag":152,"props":1775,"children":1777},{"id":1776},"memory-management",[1778],{"type":45,"value":1779},"Memory Management",{"type":39,"tag":202,"props":1781,"children":1783},{"className":353,"code":1782,"language":21,"meta":207,"style":207},"\u002F\u002F Use weak self in closures\nmapView.gestures.onMapTap.observe { [weak self] context in\n    self?.handleTap(context.coordinate)\n}.store(in: &cancelables)\n\n\u002F\u002F Clean up on deinit\ndeinit {\n    cancelables.forEach { $0.cancel() }\n}\n",[1784],{"type":39,"tag":193,"props":1785,"children":1786},{"__ignoreMap":207},[1787,1795,1803,1811,1819,1826,1834,1842,1850],{"type":39,"tag":213,"props":1788,"children":1789},{"class":215,"line":216},[1790],{"type":39,"tag":213,"props":1791,"children":1792},{},[1793],{"type":45,"value":1794},"\u002F\u002F Use weak self in closures\n",{"type":39,"tag":213,"props":1796,"children":1797},{"class":215,"line":225},[1798],{"type":39,"tag":213,"props":1799,"children":1800},{},[1801],{"type":45,"value":1802},"mapView.gestures.onMapTap.observe { [weak self] context in\n",{"type":39,"tag":213,"props":1804,"children":1805},{"class":215,"line":377},[1806],{"type":39,"tag":213,"props":1807,"children":1808},{},[1809],{"type":45,"value":1810},"    self?.handleTap(context.coordinate)\n",{"type":39,"tag":213,"props":1812,"children":1813},{"class":215,"line":387},[1814],{"type":39,"tag":213,"props":1815,"children":1816},{},[1817],{"type":45,"value":1818},"}.store(in: &cancelables)\n",{"type":39,"tag":213,"props":1820,"children":1821},{"class":215,"line":396},[1822],{"type":39,"tag":213,"props":1823,"children":1824},{"emptyLinePlaceholder":381},[1825],{"type":45,"value":384},{"type":39,"tag":213,"props":1827,"children":1828},{"class":215,"line":405},[1829],{"type":39,"tag":213,"props":1830,"children":1831},{},[1832],{"type":45,"value":1833},"\u002F\u002F Clean up on deinit\n",{"type":39,"tag":213,"props":1835,"children":1836},{"class":215,"line":414},[1837],{"type":39,"tag":213,"props":1838,"children":1839},{},[1840],{"type":45,"value":1841},"deinit {\n",{"type":39,"tag":213,"props":1843,"children":1844},{"class":215,"line":423},[1845],{"type":39,"tag":213,"props":1846,"children":1847},{},[1848],{"type":45,"value":1849},"    cancelables.forEach { $0.cancel() }\n",{"type":39,"tag":213,"props":1851,"children":1852},{"class":215,"line":432},[1853],{"type":39,"tag":213,"props":1854,"children":1855},{},[1856],{"type":45,"value":481},{"type":39,"tag":152,"props":1858,"children":1860},{"id":1859},"use-standard-style",[1861],{"type":45,"value":1862},"Use Standard Style",{"type":39,"tag":202,"props":1864,"children":1866},{"className":353,"code":1865,"language":21,"meta":207,"style":207},"\u002F\u002F ✅ Standard style is optimized and recommended\n.mapStyle(.standard)\n\n\u002F\u002F Use other styles only when needed for specific use cases\n.mapStyle(.standardSatellite) \u002F\u002F Satellite imagery\n",[1867],{"type":39,"tag":193,"props":1868,"children":1869},{"__ignoreMap":207},[1870,1878,1886,1893,1901],{"type":39,"tag":213,"props":1871,"children":1872},{"class":215,"line":216},[1873],{"type":39,"tag":213,"props":1874,"children":1875},{},[1876],{"type":45,"value":1877},"\u002F\u002F ✅ Standard style is optimized and recommended\n",{"type":39,"tag":213,"props":1879,"children":1880},{"class":215,"line":225},[1881],{"type":39,"tag":213,"props":1882,"children":1883},{},[1884],{"type":45,"value":1885},".mapStyle(.standard)\n",{"type":39,"tag":213,"props":1887,"children":1888},{"class":215,"line":377},[1889],{"type":39,"tag":213,"props":1890,"children":1891},{"emptyLinePlaceholder":381},[1892],{"type":45,"value":384},{"type":39,"tag":213,"props":1894,"children":1895},{"class":215,"line":387},[1896],{"type":39,"tag":213,"props":1897,"children":1898},{},[1899],{"type":45,"value":1900},"\u002F\u002F Use other styles only when needed for specific use cases\n",{"type":39,"tag":213,"props":1902,"children":1903},{"class":215,"line":396},[1904],{"type":39,"tag":213,"props":1905,"children":1906},{},[1907],{"type":45,"value":1908},".mapStyle(.standardSatellite) \u002F\u002F Satellite imagery\n",{"type":39,"tag":141,"props":1910,"children":1911},{},[],{"type":39,"tag":145,"props":1913,"children":1915},{"id":1914},"troubleshooting",[1916],{"type":45,"value":1917},"Troubleshooting",{"type":39,"tag":152,"props":1919,"children":1921},{"id":1920},"map-not-displaying",[1922],{"type":45,"value":1923},"Map Not Displaying",{"type":39,"tag":48,"props":1925,"children":1926},{},[1927],{"type":39,"tag":57,"props":1928,"children":1929},{},[1930],{"type":45,"value":1931},"Check:",{"type":39,"tag":256,"props":1933,"children":1934},{},[1935,1948,1953,1958,1963],{"type":39,"tag":67,"props":1936,"children":1937},{},[1938,1940,1946],{"type":45,"value":1939},"✅ ",{"type":39,"tag":193,"props":1941,"children":1943},{"className":1942},[],[1944],{"type":45,"value":1945},"MBXAccessToken",{"type":45,"value":1947}," in Info.plist",{"type":39,"tag":67,"props":1949,"children":1950},{},[1951],{"type":45,"value":1952},"✅ Token is valid (test at mapbox.com)",{"type":39,"tag":67,"props":1954,"children":1955},{},[1956],{"type":45,"value":1957},"✅ MapboxMaps framework imported",{"type":39,"tag":67,"props":1959,"children":1960},{},[1961],{"type":45,"value":1962},"✅ MapView added to view hierarchy",{"type":39,"tag":67,"props":1964,"children":1965},{},[1966],{"type":45,"value":1967},"✅ Correct frame\u002Fconstraints set",{"type":39,"tag":152,"props":1969,"children":1971},{"id":1970},"style-not-loading",[1972],{"type":45,"value":1973},"Style Not Loading",{"type":39,"tag":202,"props":1975,"children":1977},{"className":353,"code":1976,"language":21,"meta":207,"style":207},"mapView.mapboxMap.onStyleLoaded.observe { [weak self] _ in\n    print(\"Style loaded successfully\")\n    \u002F\u002F Add layers and sources here\n}.store(in: &cancelables)\n",[1978],{"type":39,"tag":193,"props":1979,"children":1980},{"__ignoreMap":207},[1981,1989,1997,2005],{"type":39,"tag":213,"props":1982,"children":1983},{"class":215,"line":216},[1984],{"type":39,"tag":213,"props":1985,"children":1986},{},[1987],{"type":45,"value":1988},"mapView.mapboxMap.onStyleLoaded.observe { [weak self] _ in\n",{"type":39,"tag":213,"props":1990,"children":1991},{"class":215,"line":225},[1992],{"type":39,"tag":213,"props":1993,"children":1994},{},[1995],{"type":45,"value":1996},"    print(\"Style loaded successfully\")\n",{"type":39,"tag":213,"props":1998,"children":1999},{"class":215,"line":377},[2000],{"type":39,"tag":213,"props":2001,"children":2002},{},[2003],{"type":45,"value":2004},"    \u002F\u002F Add layers and sources here\n",{"type":39,"tag":213,"props":2006,"children":2007},{"class":215,"line":387},[2008],{"type":39,"tag":213,"props":2009,"children":2010},{},[2011],{"type":45,"value":1818},{"type":39,"tag":152,"props":2013,"children":2015},{"id":2014},"performance-issues",[2016],{"type":45,"value":2017},"Performance Issues",{"type":39,"tag":63,"props":2019,"children":2020},{},[2021,2034,2039,2044,2049],{"type":39,"tag":67,"props":2022,"children":2023},{},[2024,2026,2032],{"type":45,"value":2025},"Use ",{"type":39,"tag":193,"props":2027,"children":2029},{"className":2028},[],[2030],{"type":45,"value":2031},".standard",{"type":45,"value":2033}," style (recommended and optimized)",{"type":39,"tag":67,"props":2035,"children":2036},{},[2037],{"type":45,"value":2038},"Limit visible annotations to viewport",{"type":39,"tag":67,"props":2040,"children":2041},{},[2042],{"type":45,"value":2043},"Reuse annotation managers",{"type":39,"tag":67,"props":2045,"children":2046},{},[2047],{"type":45,"value":2048},"Avoid frequent style reloads",{"type":39,"tag":67,"props":2050,"children":2051},{},[2052],{"type":45,"value":2053},"Batch annotation updates",{"type":39,"tag":141,"props":2055,"children":2056},{},[],{"type":39,"tag":145,"props":2058,"children":2060},{"id":2059},"reference-files",[2061],{"type":45,"value":2062},"Reference Files",{"type":39,"tag":48,"props":2064,"children":2065},{},[2066],{"type":45,"value":2067},"Load these references when the task requires deeper patterns:",{"type":39,"tag":63,"props":2069,"children":2070},{},[2071,2085,2099,2113,2127],{"type":39,"tag":67,"props":2072,"children":2073},{},[2074,2083],{"type":39,"tag":57,"props":2075,"children":2076},{},[2077],{"type":39,"tag":193,"props":2078,"children":2080},{"className":2079},[],[2081],{"type":45,"value":2082},"references\u002Fannotations.md",{"type":45,"value":2084}," — Circle, Polyline, Polygon Annotations",{"type":39,"tag":67,"props":2086,"children":2087},{},[2088,2097],{"type":39,"tag":57,"props":2089,"children":2090},{},[2091],{"type":39,"tag":193,"props":2092,"children":2094},{"className":2093},[],[2095],{"type":45,"value":2096},"references\u002Flocation-tracking.md",{"type":45,"value":2098}," — Camera Follow User + Get Current Location",{"type":39,"tag":67,"props":2100,"children":2101},{},[2102,2111],{"type":39,"tag":57,"props":2103,"children":2104},{},[2105],{"type":39,"tag":193,"props":2106,"children":2108},{"className":2107},[],[2109],{"type":45,"value":2110},"references\u002Fcustom-data.md",{"type":45,"value":2112}," — GeoJSON: Lines, Polygons, Points, Update\u002FRemove",{"type":39,"tag":67,"props":2114,"children":2115},{},[2116,2125],{"type":39,"tag":57,"props":2117,"children":2118},{},[2119],{"type":39,"tag":193,"props":2120,"children":2122},{"className":2121},[],[2123],{"type":45,"value":2124},"references\u002Fcamera-styles.md",{"type":45,"value":2126}," — Camera Control + Map Styles",{"type":39,"tag":67,"props":2128,"children":2129},{},[2130,2139],{"type":39,"tag":57,"props":2131,"children":2132},{},[2133],{"type":39,"tag":193,"props":2134,"children":2136},{"className":2135},[],[2137],{"type":45,"value":2138},"references\u002Finteractions.md",{"type":45,"value":2140}," — Featureset Interactions, Custom Layer Taps, Long Press, Gestures",{"type":39,"tag":141,"props":2142,"children":2143},{},[],{"type":39,"tag":145,"props":2145,"children":2147},{"id":2146},"additional-resources",[2148],{"type":45,"value":2149},"Additional Resources",{"type":39,"tag":63,"props":2151,"children":2152},{},[2153,2161,2170,2180,2190,2198],{"type":39,"tag":67,"props":2154,"children":2155},{},[2156],{"type":39,"tag":112,"props":2157,"children":2159},{"href":114,"rel":2158},[116],[2160],{"type":45,"value":119},{"type":39,"tag":67,"props":2162,"children":2163},{},[2164],{"type":39,"tag":112,"props":2165,"children":2168},{"href":2166,"rel":2167},"https:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fmaps\u002Fapi\u002F11.18.1\u002Fdocumentation\u002Fmapboxmaps\u002F",[116],[2169],{"type":45,"value":129},{"type":39,"tag":67,"props":2171,"children":2172},{},[2173],{"type":39,"tag":112,"props":2174,"children":2177},{"href":2175,"rel":2176},"https:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fmaps\u002Fguides\u002Fuser-interaction\u002FInteractions\u002F",[116],[2178],{"type":45,"value":2179},"Interactions Guide",{"type":39,"tag":67,"props":2181,"children":2182},{},[2183],{"type":39,"tag":112,"props":2184,"children":2187},{"href":2185,"rel":2186},"https:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fmaps\u002Fapi\u002F11.18.1\u002Fdocumentation\u002Fmapboxmaps\u002Fswiftui-user-guide",[116],[2188],{"type":45,"value":2189},"SwiftUI User Guide",{"type":39,"tag":67,"props":2191,"children":2192},{},[2193],{"type":39,"tag":112,"props":2194,"children":2196},{"href":135,"rel":2195},[116],[2197],{"type":45,"value":139},{"type":39,"tag":67,"props":2199,"children":2200},{},[2201],{"type":39,"tag":112,"props":2202,"children":2205},{"href":2203,"rel":2204},"https:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fmaps\u002Fguides\u002Fmigrate-to-v11\u002F",[116],[2206],{"type":45,"value":2207},"Migration Guide (v10 → v11)",{"type":39,"tag":2209,"props":2210,"children":2211},"style",{},[2212],{"type":45,"value":2213},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":2215,"total":711},[2216,2228,2245,2260,2280,2292,2306],{"slug":2217,"name":2217,"fn":2218,"description":2219,"org":2220,"tags":2221,"stars":23,"repoUrl":24,"updatedAt":2227},"mapbox-android-patterns","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},[2222,2225,2226],{"name":2223,"slug":2224,"type":15},"Android","android",{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},"2026-07-30T05:30:51.739352",{"slug":2229,"name":2229,"fn":2230,"description":2231,"org":2232,"tags":2233,"stars":23,"repoUrl":24,"updatedAt":2244},"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},[2234,2237,2240,2241],{"name":2235,"slug":2236,"type":15},"Branding","branding",{"name":2238,"slug":2239,"type":15},"Design","design",{"name":9,"slug":8,"type":15},{"name":2242,"slug":2243,"type":15},"Typography","typography","2026-04-06T18:28:41.2556",{"slug":2246,"name":2246,"fn":2247,"description":2248,"org":2249,"tags":2250,"stars":23,"repoUrl":24,"updatedAt":2259},"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},[2251,2254,2255,2256],{"name":2252,"slug":2253,"type":15},"Data Visualization","data-visualization",{"name":2238,"slug":2239,"type":15},{"name":9,"slug":8,"type":15},{"name":2257,"slug":2258,"type":15},"Performance","performance","2026-04-06T18:29:02.907655",{"slug":2261,"name":2261,"fn":2262,"description":2263,"org":2264,"tags":2265,"stars":23,"repoUrl":24,"updatedAt":2279},"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},[2266,2267,2270,2273,2274,2275,2276],{"name":2223,"slug":2224,"type":15},{"name":2268,"slug":2269,"type":15},"Dart","dart",{"name":2271,"slug":2272,"type":15},"Flutter","flutter",{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},{"name":2277,"slug":2278,"type":15},"SDK","sdk","2026-05-12T06:03:11.211517",{"slug":2281,"name":2281,"fn":2282,"description":2283,"org":2284,"tags":2285,"stars":23,"repoUrl":24,"updatedAt":2291},"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},[2286,2287,2288],{"name":9,"slug":8,"type":15},{"name":2257,"slug":2258,"type":15},{"name":2289,"slug":2290,"type":15},"Strategy","strategy","2026-07-30T05:30:52.766227",{"slug":2293,"name":2293,"fn":2294,"description":2295,"org":2296,"tags":2297,"stars":23,"repoUrl":24,"updatedAt":2305},"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},[2298,2299,2302],{"name":9,"slug":8,"type":15},{"name":2300,"slug":2301,"type":15},"Migration","migration",{"name":2303,"slug":2304,"type":15},"Web Development","web-development","2026-04-06T18:28:56.459496",{"slug":4,"name":4,"fn":5,"description":6,"org":2307,"tags":2308,"stars":23,"repoUrl":24,"updatedAt":25},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2309,2310,2311,2312],{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},{"name":20,"slug":21,"type":15},{"items":2314,"total":711},[2315,2321,2328,2335,2345,2351,2357,2364,2378,2391,2406,2418],{"slug":2217,"name":2217,"fn":2218,"description":2219,"org":2316,"tags":2317,"stars":23,"repoUrl":24,"updatedAt":2227},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2318,2319,2320],{"name":2223,"slug":2224,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},{"slug":2229,"name":2229,"fn":2230,"description":2231,"org":2322,"tags":2323,"stars":23,"repoUrl":24,"updatedAt":2244},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2324,2325,2326,2327],{"name":2235,"slug":2236,"type":15},{"name":2238,"slug":2239,"type":15},{"name":9,"slug":8,"type":15},{"name":2242,"slug":2243,"type":15},{"slug":2246,"name":2246,"fn":2247,"description":2248,"org":2329,"tags":2330,"stars":23,"repoUrl":24,"updatedAt":2259},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2331,2332,2333,2334],{"name":2252,"slug":2253,"type":15},{"name":2238,"slug":2239,"type":15},{"name":9,"slug":8,"type":15},{"name":2257,"slug":2258,"type":15},{"slug":2261,"name":2261,"fn":2262,"description":2263,"org":2336,"tags":2337,"stars":23,"repoUrl":24,"updatedAt":2279},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2338,2339,2340,2341,2342,2343,2344],{"name":2223,"slug":2224,"type":15},{"name":2268,"slug":2269,"type":15},{"name":2271,"slug":2272,"type":15},{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},{"name":2277,"slug":2278,"type":15},{"slug":2281,"name":2281,"fn":2282,"description":2283,"org":2346,"tags":2347,"stars":23,"repoUrl":24,"updatedAt":2291},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2348,2349,2350],{"name":9,"slug":8,"type":15},{"name":2257,"slug":2258,"type":15},{"name":2289,"slug":2290,"type":15},{"slug":2293,"name":2293,"fn":2294,"description":2295,"org":2352,"tags":2353,"stars":23,"repoUrl":24,"updatedAt":2305},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2354,2355,2356],{"name":9,"slug":8,"type":15},{"name":2300,"slug":2301,"type":15},{"name":2303,"slug":2304,"type":15},{"slug":4,"name":4,"fn":5,"description":6,"org":2358,"tags":2359,"stars":23,"repoUrl":24,"updatedAt":25},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2360,2361,2362,2363],{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},{"name":20,"slug":21,"type":15},{"slug":2365,"name":2365,"fn":2366,"description":2367,"org":2368,"tags":2369,"stars":23,"repoUrl":24,"updatedAt":2377},"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},[2370,2373,2374],{"name":2371,"slug":2372,"type":15},"Data Quality","data-quality",{"name":9,"slug":8,"type":15},{"name":2375,"slug":2376,"type":15},"MCP","mcp","2026-04-15T05:01:44.248764",{"slug":2379,"name":2379,"fn":2380,"description":2381,"org":2382,"tags":2383,"stars":23,"repoUrl":24,"updatedAt":2390},"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},[2384,2387,2388,2389],{"name":2385,"slug":2386,"type":15},"Engineering","engineering",{"name":9,"slug":8,"type":15},{"name":2300,"slug":2301,"type":15},{"name":2303,"slug":2304,"type":15},"2026-04-06T18:28:51.531856",{"slug":2392,"name":2392,"fn":2393,"description":2394,"org":2395,"tags":2396,"stars":23,"repoUrl":24,"updatedAt":2405},"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},[2397,2400,2403,2404],{"name":2398,"slug":2399,"type":15},"Documentation","documentation",{"name":2401,"slug":2402,"type":15},"Local Development","local-development",{"name":9,"slug":8,"type":15},{"name":2375,"slug":2376,"type":15},"2026-04-06T18:28:53.790961",{"slug":2407,"name":2407,"fn":2408,"description":2409,"org":2410,"tags":2411,"stars":23,"repoUrl":24,"updatedAt":2417},"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},[2412,2415,2416],{"name":2413,"slug":2414,"type":15},"Architecture","architecture",{"name":9,"slug":8,"type":15},{"name":2375,"slug":2376,"type":15},"2026-04-06T18:28:55.164842",{"slug":2419,"name":2419,"fn":2420,"description":2421,"org":2422,"tags":2423,"stars":23,"repoUrl":24,"updatedAt":2431},"mapbox-search-integration","implement Mapbox search in applications","Complete workflow for implementing Mapbox search in applications - from discovery questions to production-ready integration with best practices",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2424,2427,2428],{"name":2425,"slug":2426,"type":15},"API Development","api-development",{"name":9,"slug":8,"type":15},{"name":2429,"slug":2430,"type":15},"Search","search","2026-04-06T18:28:50.264933"]