Mapbox Ios Patterns

作者 mapboxaab3a6fef5c6無授權條款80 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫7 天前更新

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.

僅含說明Software Development

AI 產生的概覽

提供 iOS 上 Mapbox Maps SDK v11 的官方整合模式，涵蓋 Swift、SwiftUI 與 UIKit。

功能: 這個技能提供把 Mapbox Maps SDK v11 整合進 iOS 專案的參考指南與程式碼模式。內容涵蓋安裝與存取權杖設定、SwiftUI 與 UIKit 的地圖初始化、加入標記與註記、顯示使用者位置、自訂 GeoJSON 資料、地圖樣式、相機控制、圖徵互動、效能實務與疑難排解。它產出程式碼片段與設定步驟，而不是可直接執行的指令碼。
適用情境: 適用於開發或維護內嵌 Mapbox 地圖的 iOS 應用程式，且需要初始化、註記、位置顯示、自訂資料、樣式或手勢的具體模式時。也適合排查地圖未顯示、樣式載入失敗或註記效能問題。
執行需求: 需要一個 iOS 14+ 專案，使用 Xcode 15+ 與 Swift 5.9+，透過 Swift Package Manager、CocoaPods 或直接下載方式加入 Mapbox Maps SDK v11，並擁有免費 Mapbox 帳號及寫入 Info.plist 的公開存取權杖。位置功能需要 CoreLocation 權限宣告。此技能不含指令碼，僅為說明與參考文件。

Mapbox iOS Integration Patterns

Official patterns for integrating Mapbox Maps SDK v11 on iOS with Swift, SwiftUI, and UIKit.

Use this skill when:

Installing and configuring Mapbox Maps SDK for iOS
Adding markers and annotations to maps
Showing user location and tracking with camera
Adding custom data (GeoJSON) to maps
Working with map styles, camera, or user interaction
Handling feature interactions and taps

Official Resources:

Installation & Setup

Requirements

iOS 14+
Xcode 15+
Swift 5.9+
Free Mapbox account

Step 1: Configure Access Token

Add your public token to Info.plist:

Get your token: Sign in at mapbox.com

Step 2: Add Swift Package Dependency

File → Add Package Dependencies
Enter URL: https://github.com/mapbox/mapbox-maps-ios.git
Version: "Up to Next Major" from 11.0.0
Verify four dependencies appear: MapboxCommon, MapboxCoreMaps, MapboxMaps, Turf

Alternative: CocoaPods or direct download (install guide)

Map Initialization

SwiftUI Pattern

Basic map:

swift

import SwiftUIimport MapboxMaps
struct ContentView: View {    @State private var viewport: Viewport = .camera(        center: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194),        zoom: 12    )
    var body: some View {        Map(viewport: $viewport)            .mapStyle(.standard)    }}

import SwiftUIimport MapboxMaps
struct ContentView: View {    @State private var viewport: Viewport = .camera(        center: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194),        zoom: 12    )
    var body: some View {        Map(viewport: $viewport)            .mapStyle(.standard)    }}

With ornaments:

swift

Map(viewport: $viewport)    .mapStyle(.standard)    .ornamentOptions(OrnamentOptions(        scaleBar: .init(visibility: .visible),        compass: .init(visibility: .adaptive),        logo: .init(position: .bottomLeading)    ))

Map(viewport: $viewport)    .mapStyle(.standard)    .ornamentOptions(OrnamentOptions(        scaleBar: .init(visibility: .visible),        compass: .init(visibility: .adaptive),        logo: .init(position: .bottomLeading)    ))

UIKit Pattern

swift

import UIKitimport MapboxMaps
class MapViewController: UIViewController {    private var mapView: MapView!
    override func viewDidLoad() {        super.viewDidLoad()
        let options = MapInitOptions(            cameraOptions: CameraOptions(                center: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194),                zoom: 12            )        )
        mapView = MapView(frame: view.bounds, mapInitOptions: options)        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]        view.addSubview(mapView)
        mapView.mapboxMap.loadStyle(.standard)    }}

import UIKitimport MapboxMaps
class MapViewController: UIViewController {    private var mapView: MapView!
    override func viewDidLoad() {        super.viewDidLoad()
        let options = MapInitOptions(            cameraOptions: CameraOptions(                center: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194),                zoom: 12            )        )
        mapView = MapView(frame: view.bounds, mapInitOptions: options)        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]        view.addSubview(mapView)
        mapView.mapboxMap.loadStyle(.standard)    }}

Add Markers

The SDK offers three ways to place a point on the map. Pick the simplest one that fits.

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.

Which API should I use?

API	Use it when	Platforms	Notes
`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 < 100 markers.
`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.
View annotations (`ViewAnnotation` / `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.

For hundreds or thousands of features, use a style layer (SymbolLayer on a GeoJSONSource) instead of annotations.

Markers API (recommended for simple cases, SwiftUI)

swift

import SwiftUI@_spi(Experimental) import MapboxMaps
struct ContentView: View {    var body: some View {        Map {            Marker(coordinate: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194))                .color(.red)                .text("San Francisco")        }    }}

import SwiftUI@_spi(Experimental) import MapboxMaps
struct ContentView: View {    var body: some View {        Map {            Marker(coordinate: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194))                .color(.red)                .text("San Francisco")        }    }}

Multiple markers from a collection:

swift

Map {    ForEvery(locations, id: \.id) { location in        Marker(coordinate: location.coordinate)            .color(.red)            .text(location.name)    }}

Map {    ForEvery(locations, id: \.id) { location in        Marker(coordinate: location.coordinate)            .color(.red)            .text(location.name)    }}

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.

PointAnnotation (custom image)

SwiftUI:

swift

Map(viewport: $viewport) {    PointAnnotation(coordinate: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194))        .image(.init(image: UIImage(named: "marker")!, name: "marker"))}

Map(viewport: $viewport) {    PointAnnotation(coordinate: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194))        .image(.init(image: UIImage(named: "marker")!, name: "marker"))}

UIKit:

swift

// Create annotation manager (once, reuse for updates)var pointAnnotationManager = mapView.annotations.makePointAnnotationManager()
// Create markervar annotation = PointAnnotation(coordinate: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194))annotation.image = .init(image: UIImage(named: "marker")!, name: "marker")annotation.iconAnchor = .bottom
// Add to mappointAnnotationManager.annotations = [annotation]

// Create annotation manager (once, reuse for updates)var pointAnnotationManager = mapView.annotations.makePointAnnotationManager()
// Create markervar annotation = PointAnnotation(coordinate: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194))annotation.image = .init(image: UIImage(named: "marker")!, name: "marker")annotation.iconAnchor = .bottom
// Add to mappointAnnotationManager.annotations = [annotation]

Multiple markers:

swift

let annotations = locations.map { coordinate in    var annotation = PointAnnotation(coordinate: coordinate)    annotation.image = .init(image: UIImage(named: "marker")!, name: "marker")    return annotation}
pointAnnotationManager.annotations = annotations

let annotations = locations.map { coordinate in    var annotation = PointAnnotation(coordinate: coordinate)    annotation.image = .init(image: UIImage(named: "marker")!, name: "marker")    return annotation}
pointAnnotationManager.annotations = annotations

Show User Location

Step 1: Add location permission to Info.plist:

Step 2: Request permissions and show location:

swift

import CoreLocation
// Request permissionslet locationManager = CLLocationManager()locationManager.requestWhenInUseAuthorization()
// Show user location puckmapView.location.options.puckType = .puck2D()mapView.location.options.puckBearingEnabled = true

import CoreLocation
// Request permissionslet locationManager = CLLocationManager()locationManager.requestWhenInUseAuthorization()
// Show user location puckmapView.location.options.puckType = .puck2D()mapView.location.options.puckBearingEnabled = true

Performance Best Practices

Reuse Annotation Managers

swift

// ❌ Don't create new managers repeatedlyfunc updateMarkers() {    let manager = mapView.annotations.makePointAnnotationManager()    manager.annotations = markers}
// ✅ Create once, reuselet pointAnnotationManager: PointAnnotationManager
init() {    pointAnnotationManager = mapView.annotations.makePointAnnotationManager()}
func updateMarkers() {    pointAnnotationManager.annotations = markers}

// ❌ Don't create new managers repeatedlyfunc updateMarkers() {    let manager = mapView.annotations.makePointAnnotationManager()    manager.annotations = markers}
// ✅ Create once, reuselet pointAnnotationManager: PointAnnotationManager
init() {    pointAnnotationManager = mapView.annotations.makePointAnnotationManager()}
func updateMarkers() {    pointAnnotationManager.annotations = markers}

Batch Annotation Updates

swift

// ✅ Update all at oncepointAnnotationManager.annotations = newAnnotations
// ❌ Don't update one by onefor annotation in newAnnotations {    pointAnnotationManager.annotations.append(annotation)}

// ✅ Update all at oncepointAnnotationManager.annotations = newAnnotations
// ❌ Don't update one by onefor annotation in newAnnotations {    pointAnnotationManager.annotations.append(annotation)}

Memory Management

swift

// Use weak self in closuresmapView.gestures.onMapTap.observe { [weak self] context in    self?.handleTap(context.coordinate)}.store(in: &cancelables)
// Clean up on deinitdeinit {    cancelables.forEach { $0.cancel() }}

// Use weak self in closuresmapView.gestures.onMapTap.observe { [weak self] context in    self?.handleTap(context.coordinate)}.store(in: &cancelables)
// Clean up on deinitdeinit {    cancelables.forEach { $0.cancel() }}

Use Standard Style

swift

// ✅ Standard style is optimized and recommended.mapStyle(.standard)
// Use other styles only when needed for specific use cases.mapStyle(.standardSatellite) // Satellite imagery

// ✅ Standard style is optimized and recommended.mapStyle(.standard)
// Use other styles only when needed for specific use cases.mapStyle(.standardSatellite) // Satellite imagery

Troubleshooting

Map Not Displaying

Check:

✅ MBXAccessToken in Info.plist
✅ Token is valid (test at mapbox.com)
✅ MapboxMaps framework imported
✅ MapView added to view hierarchy
✅ Correct frame/constraints set

Style Not Loading

swift

mapView.mapboxMap.onStyleLoaded.observe { [weak self] _ in    print("Style loaded successfully")    // Add layers and sources here}.store(in: &cancelables)

mapView.mapboxMap.onStyleLoaded.observe { [weak self] _ in    print("Style loaded successfully")    // Add layers and sources here}.store(in: &cancelables)

Performance Issues

Use .standard style (recommended and optimized)
Limit visible annotations to viewport
Reuse annotation managers
Avoid frequent style reloads
Batch annotation updates

Reference Files

Load these references when the task requires deeper patterns:

references/annotations.md — Circle, Polyline, Polygon Annotations
references/location-tracking.md — Camera Follow User + Get Current Location
references/custom-data.md — GeoJSON: Lines, Polygons, Points, Update/Remove
references/camera-styles.md — Camera Control + Map Styles
references/interactions.md — Featureset Interactions, Custom Layer Taps, Long Press, Gestures

Additional Resources

來源與署名

來源：mapbox/mapbox-agent-skills位於skills/mapbox-ios-patterns提交aab3a6f

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Mapbox Ios Patterns

Mapbox iOS Integration Patterns

Installation & Setup

Requirements

Step 1: Configure Access Token

Step 2: Add Swift Package Dependency

Map Initialization

SwiftUI Pattern

UIKit Pattern

Add Markers

Which API should I use?

Markers API (recommended for simple cases, SwiftUI)

PointAnnotation (custom image)

Show User Location

Performance Best Practices

Reuse Annotation Managers

Batch Annotation Updates

Memory Management

Use Standard Style

Troubleshooting

Map Not Displaying

Style Not Loading

Performance Issues

Reference Files

Additional Resources

來源與署名

更多來自 mapbox/mapbox-agent-skills 的技能

Mapbox Web Performance Patterns

Mapbox Style Quality

Mapbox Mcp Devkit Patterns

Mapbox Location Grounding

Mapbox Geospatial Operations

Mapbox Flutter Patterns

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Dpop Adoption

Gemini Live Api

Gemini Api