adding a MapMarker to MapKit in swiftUI 2

Question

I am trying to use the new Mapkit SwiftUI view and I am able to show a map with a certain region but I can't figure how to show a Map Marker.

This is what I have:

import SwiftUI
import MapKit

struct ContentView: View {
    @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 38.8977, longitude: -77.0365), span: MKCoordinateSpan(latitudeDelta: 0.5, longitudeDelta: 0.5))
    var location1 =  MapMarker(coordinate: CLLocationCoordinate2D(latitude: 38.8977, longitude: -77.0365), tint: .red)
    
    
    var body: some View {
        Map(coordinateRegion: $region, showsUserLocation: true).edgesIgnoringSafeArea(.all)
    }
}

Does anyone know how to add location1 to the Map? I found this but I have not been able to make it work

Stoddard

Answer 1

Here is a simple demo. Tested with Xcode 12 / iOS 14

import CoreLocation
import MapKit

struct Marker: Identifiable {
    let id = UUID()
    var location: MapMarker
}

struct DemoView: View {

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

    let markers = [Marker(location: MapMarker(coordinate: CLLocationCoordinate2D(latitude: 38.8977, longitude: -77.0365), tint: .red))]


    var body: some View {
        Map(coordinateRegion: $region, showsUserLocation: true, 
          annotationItems: markers) { marker in
            marker.location
        }.edgesIgnoringSafeArea(.all)
    }
}

Excrescence

Answer 2

You can use MapPin(), or MapMarker() as follows:

import SwiftUI
import MapKit

struct Place: Identifiable {
let id = UUID()
let name: String
let latitude: Double
let longitude: Double
var coordinate: CLLocationCoordinate2D {
    CLLocationCoordinate2D(latitude: latitude, longitude: longitude)
  }
}

struct MapView: View {

let places = [
    Place(name: "Position 1", latitude: 31.21, longitude: 120.50),
    Place(name: "Position 2", latitude: 31.210205, longitude: 120.52301),
    Place(name: "Position 3", latitude: 31.230006, longitude: 120.54002)
]

@State private var region = MKCoordinateRegion(
    center: CLLocationCoordinate2D(latitude: 31.21, longitude: 120.50),
    span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
)

var body: some View {
    Map(coordinateRegion: $region, showsUserLocation: false,  annotationItems: places){ place in
        MapPin(coordinate: place.coordinate)
        //MapMarker(coordinate: place.coordinate)

    }
  }
}

Broomrape

Answer 3

'MapPin' was deprecated in iOS 16.0: Use MapMarker or MapAnnotation

import Foundation
import MapKit

struct NationalParkLocation: Codable, Identifiable {
    var id = UUID()
    var latitude, longitude: Double
    //Computed Property
    var location: CLLocationCoordinate2D {
        CLLocationCoordinate2D(latitude: latitude, longitude: longitude)
    }
}

import SwiftUI
import MapKit

struct MapView: View {
    
    @State private var region: MKCoordinateRegion = {
        var mapCoordinate = CLLocationCoordinate2D.init(latitude: 6.60, longitude: 16.43)
        var mapZoomLevel = MKCoordinateSpan.init(latitudeDelta: 70.0, longitudeDelta: 70.0)
        var mapRegion = MKCoordinateRegion.init(center: mapCoordinate, span: mapZoomLevel)
        return mapRegion
    }()
    
    let locations: [NationalParkLocation] = [
        NationalParkLocation.init(latitude: -2.3333333, longitude: 34.8333333),
        NationalParkLocation.init(latitude: -23.9883848, longitude: 31.5525515)
    ]
    var body: some View {
        Map(coordinateRegion: $region,showsUserLocation: true ,annotationItems: locations) { item in
            // (A) MARKER: (New Style) (always static)
             MapMarker(coordinate: item.location)
            
            // (B) Custom basic annotation (it could be iteractive)
//            MapAnnotation(coordinate: item.location) {
//                Button {
//                    print("Location is", item.location)
//                } label: {
//                    Image("job")
//                        .resizable()
//                        .scaledToFit()
//                        .frame(width: 50, height: 50)
//                }
//            } // Annotation
        }
    }
}

(A)MARKER:

(B)Custom basic annotation

Snowonthemountain