Skip to content

97 MKMapView - OLD

Using Apple Maps - MapKit (pre 2023 WWDC)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import MapKit

...


@State private var region = MKCoordinateRegion(
    center: CLLocationCoordinate2D(latitude: 51.507222, longitude: -0.1275), 
    span: MKCoordinateSpan(latitudeDelta: 0.5, longitudeDelta: 0.5))


var body: some View {
        VStack {
            VStack {

                Map(
                    coordinateRegion: $region, 
                    showsUserLocation: true, 
                    userTrackingMode: .constant(.follow)
                )


            }
            .padding()
        }
    }

This is simple and really limited map view. No polylines etc. Has only simple annotations

  • MapPin
  • MapMarker
  • MapAnnotation

Advanced Map View - MKMapView

Create custom SwiftUI view based on older UIView, protocol UIViewRepresentable

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
struct SomeUIViewBasedView: UIViewRepresentable {
    @binding var someValue: SomeValueType

    func makeUIView(context: Context) -> UIViewOfSomeKind {
        return UIViewOfSomeKind()
    }

    func updateUIView(_ view: UIViewOfSomeKind, context: Context) {
        view.someAttribute = someValue
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
    let region: MKCoordinateRegion
    let lineCoordinates: [CLLocationCoordinate2D]

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    func makeUIView(context: Context) -> MKMapView {
        let mapView = MKMapView()
        mapView.delegate = context.coordinator
        mapView.region = region
        mapView.showsUserLocation = true

        let polyline = MKPolyline(coordinates: lineCoordinates, count: lineCoordinates.count)
        mapView.addOverlay(polyline)

        return mapView
    }

    func updateUIView(_ view: MKMapView, context: Context) {
        view.setRegion(region, animated: true)
        let polyline = MKPolyline(coordinates: lineCoordinates, count: lineCoordinates.count)
        view.addOverlay(polyline)
        view.removeOverlays(view.overlays.dropLast())
    }
}

class Coordinator: NSObject, MKMapViewDelegate {
    var parent: MapView

    init(_ parent: MapView) {
        self.parent = parent
    }

    func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
        if let routePolyline = overlay as? MKPolyline {
            let renderer = MKPolylineRenderer(polyline: routePolyline)
            renderer.strokeColor = UIColor.systemBlue
            renderer.lineWidth = 10
            return renderer
        }
        return MKOverlayRenderer()
    }

}
  • https://developer.apple.com/documentation/mapkit/mkmapview
  • https://developer.apple.com/library/archive/samplecode/Breadcrumb/Introduction/Intro.html#//apple_ref/doc/uid/DTS40010048-Intro-DontLinkElementID_2

Using Google maps in SwiftUI

https://developers.google.com/codelabs/maps-platform/maps-platform-ios-swiftui