MapKit in SwiftUI

How to use MKMapViewDelegate methods with SwiftUI?

Anand Nimje
Oct 20 · 5 min read

Most of the iOS developers know SwiftUI is similar to the UIKit but still, there are some differences in the development phase. To learn more, let’s create MKMapView inside SwiftUI.

Let’s start with it.

If you are new with the SwiftUI then you need to check my previous blog for getting started with the SwiftUI. Now coming to the point. Create your new class with the SwiftUI.

Go to > XCode > File > New > File > SwiftUI View > Next > Name for the File

Create SwiftUI View
  • Now open your file -

In this class, we don’t require View protocol in place we are going to use UIViewRepresentable protocol for UIKit support inside the SwiftUI because we don’t have MapKit.

Now the question about what is the UIViewRepresentable why not View?

Press + Click

XCode Quick Help

After looking into we are getting the summary -“A view that represents a UIKit view.”

UIViewRepresentable Protocol

After replacing View Protocol with UIViewRepresentable The protocol we have to remove a body from your MapView class.

You will get the warning ⚠️ for the confirm UIViewRepresentable protocol.

Adding one more function inside MapView class for the updates presented view

MapView

Adding the Pinpoint (Annotation) now inside the Map.

Creating now MKAnnotation model -

Adding inside our MapView class-

MapView with Annotations

Now changing the image for the MKAnnotation.

Accessing the Protocol delegate methods inside the SwiftUI required Coordinator. You can write it inside your class or out of the class.

Adding this Coordinator inside MapView class.

Once more change required for the delegate -

Final output of this code-

MapView with Custom Annotations

You can add any kind of image as an annotation and after clicking on this you will see the Title and subtitle inside the custom view.

Details for the Custom view

Conclusion

In this part, you came to know how to create an intermediate map view to custom. This is a pretty interesting 🧐 building MapView with the SwiftUI. It’s completely programmatically layout design. Just in few lines of code, you can make decent Design.

UIViewRepresentable the protocol is a very important part of this article you came to know now how to add UIKit inside the SwiftUI.

Coordinator was the key 🔑 point inside the for adding Delegates methods inside your class and you can give any name to this just like a normal class with the Protocols whose methods you wanted to confirm inside your class.

This is a basic example of the MapKit inside the SwiftUI you can add inside your applications view with custom height and width. I have not removed pinpoints from the map view but I have added the code inside the example if you wanted to remove it you can clean older and add new. It was the hardcoded data so not required for me but in realtime applications, It’s required. You can add UIKit the inside SwiftUI with the help of UIViewRepresentable protocol. I hope you like it. 😊✌🏼

Framework Integration Interfacing with UIKit.
Source- Apple SwiftUI tutorial

Thanks for reading 🙌🏼

If you having any queries regarding this tutorial? | If you think you can do more simple way or little bit more extra things with this stuff please let me know questions, feedback or comments -on Twitter

Flawless iOS

🍏 Community around iOS development, mobile design, and marketing

Anand Nimje

Written by

I am Swift developer and makes iOS apps

Flawless iOS

🍏 Community around iOS development, mobile design, and marketing

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade