At WWDC 2023, Apple introduced higher SwiftUI assist for MapKit. MapKit is a large API, so it’ll be some time earlier than we see a totally native SwiftUI model. Nevertheless it’s positively getting simpler to show an interactive map view in your app. Probably the most widely-used characteristic — annotations — will get a giant enchancment, and the brand new map type modifier requires nearly no work so as to add a ton of pizzazz to your app. Slowly however absolutely, MapKit is buying a extra SwiftUI “contact and really feel”.
On the draw back, when you’ve written numerous Map
code previously couple of years, you may have to rewrite a few of it, as Xcode 15 replaces all of the Xcode 12 Map
initializers.
Getting Began
Click on Obtain supplies on the high or backside of this text to obtain the starter undertaking. Open it in Xcode 15 beta to see what it’s important to work with.
PublicArt
I wrote the primary model of PublicArt in 2014 for my very first raywenderlich.com tutorial MapKit Tutorial: Getting Began. It was an replace of Ray’s unique MapKit tutorial, and Andrew Tetlaw up to date it once more in 2020.
In 2019, I tailored PublicArt for SwiftUI Tutorial: Navigation. Utilizing Xcode 11, I needed to create a struct MapView: UIViewRepresentable
to show an MKMapView
in a SwiftUI app.
Earlier this 12 months, Josh Steele up to date PublicArt to Xcode 14.2 for our SwiftUI Fundamentals course. That is the starter undertaking for this text: It makes use of the SwiftUI Map
launched in Xcode 12.
For this text, the starter undertaking has iOS Deployment set to iOS 17.
Xcode 12 Map
Open LocationMap within the code editor. There’s an MKCoordinateRegion @State
property. You move a binding to this into the Map
initializer, together with an array of annotationItems
, then show a MapMarker
utilizing an art work
merchandise’s coordinate
property. When the Map
view seems, you set area.heart
and area.span
:
@State var area = MKCoordinateRegion()
...
Map(coordinateRegion: $area, annotationItems: [artwork]) { art work in
MapMarker(coordinate: art work.coordinate)
}
.onAppear {
area.heart = art work.coordinate
area.span = MKCoordinateSpan(latitudeDelta: 0.02, longitudeDelta: 0.02)
}
Refresh the preview or construct and run the app, and navigate to the map:
Xcode 15 Beta Map
This 12 months’s Map
deprecates all of the Xcode 12 initializers. As an alternative of bindings to MKCoordinateRegion
or MKMapRect
, you create a Map
with MapCameraBounds
or MapCameraPosition
.
You possibly can create a MapCameraBounds
worth with an MKCoordinateRegion
or MKMapRect
worth, plus minimal and most distances, or you may create one utilizing solely minimal and most distances.
Or you may create a Map
utilizing no parameters in any respect!
Map & Marker
In LocationMap, remark out @State var area
and exchange all of the Map
code — Map(...) { ... }.onAppear { ... }
— with this:
Map {
Marker(art work.title, coordinate: art work.coordinate)
}
MapMarker
is deprecated, changed by Marker
, the place you show a label, which is a View
.
You get the identical balloon marker, however the map has zoomed proper in to it. To point out roughly the identical area because the previous area
, initialize Map
with bounds
:
Map(bounds:
MapCameraBounds(minimumDistance: 4500,
maximumDistance: 4500))
Annotation
Along with Marker
, there’s a brand new Annotation
construction:
Annotation(art work.title,
coordinate: art work.coordinate) {
Picture(systemName: "particular person.bust")
.padding(6)
.foregroundStyle(.white)
.background(Coloration.blue)
}
An Annotation
shows each a label View
and a content material View
, so you may customise your map pins. For instance, add these properties to Paintings:
var image: String {
swap self-discipline {
case "Monument", "Sculpture":
return "particular person.bust"
case "Mural":
return "paintpalette"
case "Plaque":
return "particular person.textual content.rectangle"
default:
return "mappin"
}
}
var background: Coloration {
swap self-discipline {
case "Monument", "Sculpture":
return .blue
case "Mural":
return .mint
case "Plaque":
return .orange
default:
return .crimson
}
}
Every art work has a self-discipline
property, and these new properties specify symbols and background colours for the most-populated disciplines.
Now, exchange your Marker
and Annotation
code with:
Marker(art work.title, systemImage: art work.image,
coordinate: art work.coordinate)
.tint(art work.background)
Annotation(art work.title,
coordinate: art work.coordinate,
anchor: .topLeading) {
Picture(systemName: art work.image)
.padding(6)
.foregroundStyle(.white)
.background(art work.background)
}
Just like the deprecated MapMarker
, Marker
helps you to specify tint
.
To see these customized symbols and colours at work, change the index of the artData
merchandise within the preview to 1. This art work is a mural, so that you get mint-colored pins, and the annotation image is a paint palette:
You most likely wouldn’t need to use each Marker
and Annotation
for a similar location, however whereas they’re each there, see how one can regulate the place of the annotation’s anchor
:
Annotation(art work.title,
coordinate: art work.coordinate,
anchor: .topLeading) // add this argument
The worth of anchor
could be high, backside, main, trailing or combos, or you may specify a CGPoint
with x and y coordinates.
Map Model
And now for probably the greatest new options: mapStyle
. Add this modifier to Map
after its closing brace:
.mapStyle(.imagery(elevation: .life like))
And alter bounds
to zoom in:
Map(bounds:
MapCameraBounds(minimumDistance: 1500,
maximumDistance: 1500))
Shift-Possibility-drag to maneuver the map digicam angle:
It’s also possible to add an initialPosition
parameter to Map
to set the map digicam:
Map(
initialPosition: .digicam(MapCamera(
centerCoordinate: art work.coordinate,
distance: 1200,
heading: 90,
pitch: 60)),
bounds:
MapCameraBounds(minimumDistance: 1500,
maximumDistance: 1500)) {
Now, you may take an aerial tour round Honolulu by altering the artData
merchandise within the preview. For instance, artData[12]
:
There are solely 17 artworks, so don’t transcend artData[16]
.
The place to Go From Right here?
Obtain the ultimate undertaking utilizing Obtain supplies on the high or backside of this text.
On this article, you discovered about:
- The brand new strategy to create a
Map
. - The brand new
Marker
andAnnotation
buildings. - The brand new
MapStyle
construction. - The brand new
MapCamera
construction.
Meet MapKit for SwiftUI reveals off a number of nifty options, together with:
-
onMapCameraChange(frequency:)
, an occasion technique ofMapPitchButton
. -
MapPolyline
andMKRoute
. -
MapCompass
andMapScaleView
.
We hope you loved this tutorial, and in case you have any questions or feedback, please be part of the discussion board dialogue beneath!