Mappls SDK for MapConductor iOS

Description

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

Setup

https://mapconductor.com/setup/

API key

MapConductor does not read Mappls credentials. Initialise the Mappls SDK yourself, before the first map is created. Credentials come from the Mappls (MapmyIndia) developer console. Keep them out of source control.

Usage

import SwiftUI
import MapConductorCore
import MapConductorForMappls

struct MapView: View {
    @StateObject private var mapViewState = MapplsViewState(
        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 {
        MapplsMapView(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

MapplsMapView [docs]

struct MapExample: View {
    @StateObject private var mapViewState = MapplsViewState(
        cameraPosition: MapCameraPosition(
            position: GeoPoint(latitude: 37.422198, longitude: -122.085377),
            zoom: 17,
            tilt: 60,
            bearing: 30
        )
    )

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

---

Marker [docs]

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

    var body: some View {
        MapplsMapView(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 {
        MapplsMapView(state: mapViewState) {
            Marker(state: markerState)
            if let selected = selectedMarker {
                InfoBubble(marker: selected) {
                    Text("Hello, world!")
                }
            }
        }
    }
}

---

Circle [docs]

struct CircleExample: View {
    var body: some View {
        MapplsMapView(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 {
        MapplsMapView(state: mapViewState) {
            Polyline(
                points: airports,
                strokeColor: UIColor.blue.withAlphaComponent(0.5),
                geodesic: true
            )
        }
    }
}

---

Polygon [docs]

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

---

Polygon Hole

struct PolygonHoleExample: View {
    var body: some View {
        MapplsMapView(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 {
        MapplsMapView(state: mapViewState) {
            GroundImage(
                bounds: GeoRectBounds(
                    southWest: GeoPoint.fromLatLong(...),
                    northEast: GeoPoint.fromLatLong(...)
                ),
                image: uiImage,
                opacity: 0.5
            )
        }
    }
}