Surprisingly for myself, I realized that I have never implemented address autocompletion using only Apple technologies. Before, I had experience only with and even with the not-so-well-known European . I found it curious — to know how we can limit ourselves to using only SwiftUI and MapKit to solve a similar problem. Google Places SDK GeoDataHub MapKit Before starting let’s briefly describe MapKit — a powerful framework invented by Apple. : See documentation Display map or satellite imagery within your app, call out points of interest, and determine placemark information for map coordinates. The framework includes a bunch of useful things. I will list only what we are going to use: the Map itself ( for SwiftUI); — this model will allow showing a particular region on the map; — another model with coordinates and other data for showing on the map, and engine which we are going to use to get a list of completions from searchable address. To implement this we need to and where we can get results — possible addresses. MapView MKCoordinateRegion MKAnnotation MapMarker MKLocalSearch useMKLocalSearchCompleterDelegate MKLocalSearchCompleter Project Overview The completed task should look like this: We are not going to ask a user to get the current location of a device hence we will not touch configuration at all, I tried to simplify the project as much as possible. Let’s start with a couple of models. The goal is to see how many things we need to implement for this simple application. plist So the structure is the following, MVVM with two screens: Content and Map. Models Let’s start with a couple of models: and . Both should be conformed to protocol because we are going to use them in the collections. AddressResult Annotation Identifiable } struct AddressResult : Identifiable { let id = UUID () let title: String let subtitle: String }
} struct AnnotationItem : Identifiable { let id = UUID () let latitude: Double let longitude: Double var coordinate: CLLocationCoordinate2D { CLLocationCoordinate2D (latitude: latitude, longitude: longitude) model will be used in the list of results. collection we will set right in the Map component. But before dive in into this, let's set up our view models first. AddressResult AnnotationItem Content View Model Our iOS application is starting from because we are using SwiftUI, therefore, we need to prepare our first view model: . The will be observable because two things need to be published — the value from (searchable text) and results array of model. ContentView ContentViewModel ContentViewModel textfield AddressResult }() }
} class ContentViewModel : NSObject , ObservableObject { @Published private(set) var results: Array < AddressResult > = [] @Published var searchableText = "" private lazy var localSearchCompleter: MKLocalSearchCompleter = { let completer = MKLocalSearchCompleter () completer.delegate = self return completer func searchAddress ( _ searchableText : String ) { guard searchableText.isEmpty == false else { return } localSearchCompleter.queryFragment = searchableText Some of you can notice is not marked as . This is because this value is going to be bound. Also, as you can see, here is an . This completer will help to get results using . For that, we need to conform to the : searchableText private(set) initializedMKLocalSearchCompleter queryFragment MKLocalSearchCompleterDelegate }
        }
    } }
} extension ContentViewModel : MKLocalSearchCompleterDelegate { func completerDidUpdateResults ( _ completer : MKLocalSearchCompleter ) { Task { @MainActor in results = completer.results.map { AddressResult (title: $0 .title, subtitle: $0 .subtitle) func completer ( _ completer : MKLocalSearchCompleter , didFailWithError error : Error ) { print (error) We are not going to handle errors at this time, so let me skip this part, we can just print a message. The where results are set from the completer’s results. Since our results are published, so we need to the main thread to avoid this warning: methodcompleterDidUpdateResults [SwiftUI] Publishing changes from within view updates is not allowed, this will cause undefined behavior Map View Model The view models in this project are independent. We are going to observe them using . The is pretty simple: two published variables and one method: @StateObject MapViewModel )
                } }
        }
    }
} class MapViewModel : ObservableObject { @Published var region = MKCoordinateRegion () @Published private(set) var annotationItems: [ AnnotationItem ] = [] func getPlace ( from address : AddressResult ) { let request = MKLocalSearch . Request () let title = address.title let subTitle = address.subtitle request.naturalLanguageQuery = subTitle.contains(title) ? subTitle : title + ", " + subTitle Task { let response = try await MKLocalSearch (request: request).start() await MainActor .run { self .annotationItems = response.mapItems.map { AnnotationItem ( latitude: $0 .placemark.coordinate.latitude, longitude: $0 .placemark.coordinate.longitude self .region = response.boundingRegion Region value as will be bound with a view and collection will be used by the Map view itself. MKCoordinateRegion AnnotationItem The most interesting part is this method with the argument as . Briefly, this method converts our row address data into the coordinates using request! getPlace AddressResult MKLocalSearch Our address consists of a title and subtitle. In some cases, subtitle can contain the title, so we need to check first this part to prepare . Next, it is going to be a task with utility. From the response we need two things: collection and . From the first one, we will prepare collection. The second one will be a map region that encloses the returned search results. naturalLanguageQuery MKLocalSearch MapItem MKCoordinateRegion AnnotationItem Content View I really enjoy SwiftUI because you don’t need to spend so much time building user interfaces. It means you will spend really about 10 mins just to implement everything — 2 screens including a map. Our task is simple, we need to prepare just a with for query and a of results. Let’s take a look: NavigationView TextField List The first screen is when the app is just launched and the is immediately focused on appearing. Also, I couldn’t resist myself to add a clear button to the . So, let’s implement all these views. textfield TextField .padding()
                    .autocorrectionDisabled() .font(.title)
                    .onReceive( )
                    ) { } .overlay { .padding(.trailing) }
                    .onAppear { } .listRowBackground(backgroundColor)
                }
                .listStyle(.plain)
                .scrollContentBackground(.hidden)
            }
            .background(backgroundColor)
            .edgesIgnoringSafeArea(.bottom)
        }
    } } struct ContentView : View { @StateObject var viewModel: ContentViewModel @FocusState private var isFocusedTextField: Bool var body: some View { NavigationView { VStack (alignment: .leading, spacing: 0 ) { TextField ( "Type address" , text: $viewModel .searchableText) .focused( $isFocusedTextField ) viewModel. $searchableText .debounce( for: .seconds( 1 ), scheduler: DispatchQueue .main viewModel.searchAddress( $0 ) .background( Color . init (uiColor: .systemBackground)) ClearButton (text: $viewModel .searchableText) .padding(.top, 8 ) isFocusedTextField = true List ( self .viewModel.results) { address in AddressRow (address: address) var backgroundColor: Color = Color . init (uiColor: .systemGray6) I will not go through line by line because, in my opinion, this code is pretty simple. I just wanted to grab your attention on some parts. is used for focusing on appear. FocusState TextView On receiving value in , it’s needed to wait at least 1 second to get a searchable text except by querying each letter. TextView List view. I tested which works only in iOS16 — it helps to hide a content background. .scrollContentBackground(.hidden) Using in we can add our with bound searchable text (1. for checking if this text is not empty then the clear button will be rendered; 2. for clearing text from the component). overlay TextField ClearButton ClearButton } label: { }
                .foregroundColor(.secondary)
            } }
    }
} struct ClearButton : View { @Binding var text: String var body: some View { if text.isEmpty == false { HStack { Spacer () Button { text = "" Image (systemName: "multiply.circle.fill" ) .foregroundColor( Color (red: 0.7 , green: 0.7 , blue: 0.7 )) } else { EmptyView () The Address row is wrapped by with a destination in . NavigationLink MapView } label: { .font(.caption)
            }
        } }
} struct AddressRow : View { let address: AddressResult var body: some View { NavigationLink { MapView (address: address) VStack (alignment: .leading) { Text (address.title) Text (address.subtitle) .padding(.bottom, 2 ) Map View The second screen is a map itself and this view should show the correct location from the search result. It’s going to be only one view: Map View. As you remember method converts addresses into coordinates, so when the view appears we need to update the coordinates: region and annotation items. Eventually, in annotation content, we can prepare the . Map view configured with , , and arguments. When all data is ready in the view model, the Map view will be updated. As you can see argument applies a binding value. can be just identifiable with coordinate variable inside (latitude and longitude) — it’s used in item in closure. getPlace MapMarker coordinateRegion annotationItems annotationContent coordinateRegion annotationItems annotationContent } annotationItems: viewModel.annotationItems, }
        )
        .onAppear { }
        .edgesIgnoringSafeArea(.bottom)
    }
} struct MapView : View { @StateObject private var viewModel = MapViewModel () private let address: AddressResult init ( address : AddressResult ) { self .address = address var body: some View { Map ( coordinateRegion: $viewModel .region, annotationContent: { item in MapMarker (coordinate: item.coordinate) self .viewModel.getPlace(from: address) Btw, when you build the project you might see some SwiftUI warnings: which means you probably updated coordinates during view rendering. If you think that you did absolutely right, your states are updated from , so it can be an issue in Map inside. You can check about this issue by Donney Wals. Publishing changes from within view updates is not allowed…— onAppear this article Wrapping up Countless applications use Maps. But still few of them use a combination of SwiftUI and MapKit. I was curious to see what we can build if using only Apple technologies. How many lines of code are needed to implement this useful feature? Each year in WWDC you can notice that Apple engineers update MapKit rigorously adding new features especially if it comes to SwiftUI. I used only SwiftUI building Address with an autocompletion feature with Map because I truly believe that this framework is our closest future and UIKit soon will be secondary technology. Source Code GitHub: https://github.com/maxkalik/address-autocomplete-swiftui Don’t hesitate to follow me on . I appreciate any suggestions or comments regarding my research and articles. Want to Connect? Twitter Also Published Here

Too Long; Didn't Read

Making security fun one episode at a time

Address Autocompletion Using SwiftUI and MapKit

Too Long; Didn't Read

Max Kalik

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Address Autocompletion Using SwiftUI and MapKit

Too Long; Didn't Read

Max Kalik

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES