MapTiler SDK for MapConductor iOS

Description

MapConductor provides a unified API for iOS SwiftUI. You can use MapTiler with SwiftUI, but you can also switch to other Maps SDKs (such as Mapbox, MapKit, and so on), anytime. Even using the wrapper API, you can still access the native MapTiler view if you want.

Setup

https://mapconductor.com/setup/ios/maptiler/

API key

MapTiler tiles require a MapTiler Cloud API key. Provide it either per view or via Info.plist:

// Per view
MapTilerMapView(state: mapViewState, apiKey: "YOUR_MAPTILER_API_KEY")

<!-- Info.plist fallback (used when apiKey is nil) -->
<key>MapTilerAPIKey</key>
<string>YOUR_MAPTILER_API_KEY</string>

This mirrors android, which reads MAPTILER_API_KEY from the AndroidManifest.

Usage

import SwiftUI
import MapConductorCore
import MapConductorForMapTiler

struct MapView: View {
    @StateObject private var mapViewState = MapTilerViewState(
        cameraPosition: MapCameraPosition(
            position: GeoPoint(latitude: 35.6762, longitude: 139.6503),
            zoom: 2
        )
    )
    @State private var selectedMarker: MarkerState? = nil

    let center = GeoPoint(latitude: 35.6762, longitude: 139.6503)

    var body: some View {
        MapTilerMapView(state: mapViewState) {
            Marker(
                position: center,
                icon: DefaultMarkerIcon(label: "Tokyo"),
                onClick: { state in selectedMarker = state }
            )
            if let selected = selectedMarker {
                InfoBubble(marker: selected) {
                    Text("Hello, world!")
                }
            }
        }
    }
}

Components

MapTilerMapView [docs]

struct MapExample: View {
    @StateObject private var mapViewState = MapTilerViewState(
        cameraPosition: MapCameraPosition(
            position: GeoPoint(latitude: 34.091, longitude: -117.886),
            zoom: 9,
            tilt: 60,
            bearing: 30
        )
    )

    var body: some View {
        MapTilerMapView(state: mapViewState)
    }
}

---

Marker [docs]

struct MarkerExample: View {
    @State private var markerState = MarkerState(
        position: GeoPoint(latitude: 35.6762, longitude: 139.6503),
        icon: DefaultMarkerIcon(label: "MapTiler"),
        onClick: { state in state.animate(.bounce) }
    )

    var body: some View {
        MapTilerMapView(state: mapViewState) {
            Marker(state: markerState)
        }
    }
}

---

InfoBubble [docs]

struct InfoBubbleExample: View {
    @State private var selectedMarker: MarkerState? = nil
    @State private var markerState = MarkerState(
        position: GeoPoint(latitude: 35.6762, longitude: 139.6503),
        onClick: { [self] state in selectedMarker = state }
    )

    var body: some View {
        MapTilerMapView(state: mapViewState) {
            Marker(state: markerState)
            if let selected = selectedMarker {
                InfoBubble(marker: selected) {
                    Text("Hello, world!")
                }
            }
        }
    }
}

---

Circle [docs]

struct CircleExample: View {
    var body: some View {
        MapTilerMapView(state: mapViewState) {
            Circle(
                center: GeoPoint(latitude: 35.6762, longitude: 139.6503),
                radiusMeters: 50,
                fillColor: UIColor.blue.withAlphaComponent(0.5),
                onClick: { state in
                    state.fillColor = UIColor.red.withAlphaComponent(0.5)
                }
            )
        }
    }
}

---

Polyline [docs]

struct PolylineExample: View {
    var body: some View {
        MapTilerMapView(state: mapViewState) {
            Polyline(
                points: airports,
                strokeColor: UIColor.blue.withAlphaComponent(0.5),
                strokeWidth: 4,
                geodesic: true
            )
        }
    }
}

---

Polygon [docs]

struct PolygonExample: View {
    var body: some View {
        MapTilerMapView(state: mapViewState) {
            Polygon(
                points: goryokaku,
                strokeColor: UIColor.blue.withAlphaComponent(0.5),
                fillColor: UIColor.red.withAlphaComponent(0.7)
            )
        }
    }
}

---

Polygon Hole

struct PolygonHoleExample: View {
    var body: some View {
        MapTilerMapView(state: mapViewState) {
            Polygon(
                points: outerPoints,
                holes: [innerPoints1, innerPoints2],
                fillColor: UIColor(red: 0.47, green: 0.47, blue: 0.50, alpha: 0.8),
                strokeColor: UIColor.red,
                strokeWidth: 2
            )
        }
    }
}

---

GroundImage [docs]

struct GroundImageExample: View {
    var body: some View {
        MapTilerMapView(state: mapViewState) {
            GroundImage(
                bounds: GeoRectBounds(
                    southWest: GeoPoint.fromLatLong(...),
                    northEast: GeoPoint.fromLatLong(...)
                ),
                image: uiImage,
                opacity: 0.5
            )
        }
    }
}