14.3. Phase 3: Place Search and Navigate

At this point, we will add a Bottom Search Sheet to find the places around and navigate there.

Setting up the Bottom Search Sheet

First, let's add a search button at the bottom of the Map Screen. Open MapView.swift file, and put the following code to add the search button and its constraints:

//
//  MapView.swift
//  App14
//
//  Created by Sakib Miazi on 6/14/23.
//

import UIKit
import MapKit

class MapView: UIView {
    //codes omitted...
    var buttonSearch:UIButton!
    
    override init(frame: CGRect) {
        //codes omitted...
        setupButtonSearch()
        initConstraints()
    }
   //codes omitted...
    
    func setupButtonSearch(){
        buttonSearch = UIButton(type: .system)
        buttonSearch.setTitle(" Search places...  ", for: .normal)
        buttonSearch.titleLabel?.font = UIFont.boldSystemFont(ofSize: 24)
        buttonSearch.setImage(UIImage(systemName: "magnifyingglass.circle.fill"), for: .normal)
        buttonSearch.layer.backgroundColor = UIColor.darkGray.cgColor
        buttonSearch.tintColor = .white
        buttonSearch.layer.cornerRadius = 10
        
        buttonSearch.layer.shadowOffset = .zero
        buttonSearch.layer.shadowRadius = 4
        buttonSearch.layer.shadowOpacity = 0.7
        
        buttonSearch.translatesAutoresizingMaskIntoConstraints = false
        buttonSearch.isHidden = true
        self.addSubview(buttonSearch)
    }
    
    func initConstraints(){
        NSLayoutConstraint.activate([
            //codes omitted...
            buttonSearch.bottomAnchor.constraint(equalTo: buttonCurrentLocation.bottomAnchor),
            buttonSearch.centerXAnchor.constraint(equalTo: self.safeAreaLayoutGuide.centerXAnchor),
            buttonSearch.heightAnchor.constraint(equalTo: buttonCurrentLocation.heightAnchor)
        ])
    }
    //codes omitted...
}

Now, let's create the files related to the Bottom Search Sheet in the project: SearchViewController.swift, SearchBottomSheet.swift, SearchTableViewCell.swift, and SearchTableViewManager.swift.

Then we set up the Bottom Search Sheet following the example in .

Bottom Search Sheet

SearchViewController.swift

Let's add the following code to the file:

//
//  SearchViewController.swift
//  App14
//
//  Created by Sakib Miazi on 6/15/23.
//

import UIKit
import MapKit

class SearchViewController: UIViewController {

    let searchBottomSheet = SearchBottomSheet()

    override func loadView() {
        view = searchBottomSheet
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        searchBottomSheet.tableViewSearchResults.delegate = self
        searchBottomSheet.tableViewSearchResults.dataSource = self
        searchBottomSheet.searchBar.delegate = self
        
        searchBottomSheet.tableViewSearchResults.separatorStyle = .none
        
    }
    
}

extension SearchViewController: UISearchBarDelegate{
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        
    }
    
    func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
        self.dismiss(animated: true)
    }
}

SearchBottomSheet.swift

Let's add the following code to the file:

//
//  SearchBottomSheet.swift
//  App14
//
//  Created by Sakib Miazi on 6/15/23.
//

import UIKit

class SearchBottomSheet: UIView {
    var searchBar: UISearchBar!
    var tableViewSearchResults: UITableView!
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .white
        setupSearchBar()
        setupTableViewSearchResults()
        initConstraints()
    }
    
    func setupSearchBar(){
        searchBar = UISearchBar()
        searchBar.placeholder = "Search places..."
        searchBar.showsCancelButton = true
        searchBar.autocapitalizationType = .none
        searchBar.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(searchBar)
    }
    func setupTableViewSearchResults(){
        tableViewSearchResults = UITableView()
        tableViewSearchResults.register(SearchTableViewCell.self, forCellReuseIdentifier: Configs.searchTableViewID)
        tableViewSearchResults.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(tableViewSearchResults)
    }
    
    func initConstraints(){
        NSLayoutConstraint.activate([
            searchBar.topAnchor.constraint(equalTo: self.safeAreaLayoutGuide.topAnchor),
            searchBar.leadingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.leadingAnchor, constant: 16),
            searchBar.trailingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.trailingAnchor, constant: -16),
            
            tableViewSearchResults.topAnchor.constraint(equalTo: searchBar.bottomAnchor, constant: 8),
            tableViewSearchResults.bottomAnchor.constraint(equalTo: self.safeAreaLayoutGuide.bottomAnchor),
            tableViewSearchResults.widthAnchor.constraint(equalTo: self.safeAreaLayoutGuide.widthAnchor),
            tableViewSearchResults.widthAnchor.constraint(equalTo: self.safeAreaLayoutGuide.widthAnchor),
        ])
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

SearchTableViewCell.swift

Let's add the following code to the file:

//
//  SearchTableViewCell.swift
//  App14
//
//  Created by Sakib Miazi on 6/15/23.
//

import UIKit

class SearchTableViewCell: UITableViewCell {

    var wrapperCellView: UIView!
    var labelTitle: UILabel!
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupWrapperCellVIew()
        setupLabelTitle()
        initConstraints()
    }
    
    func setupWrapperCellVIew(){
        wrapperCellView = UITableViewCell()
        wrapperCellView.backgroundColor = .white
        wrapperCellView.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(wrapperCellView)
    }
    func setupLabelTitle(){
        labelTitle = UILabel()
        labelTitle.font = UIFont.boldSystemFont(ofSize: 20)
        labelTitle.translatesAutoresizingMaskIntoConstraints = false
        wrapperCellView.addSubview(labelTitle)
    }
    func initConstraints(){
        NSLayoutConstraint.activate([
            wrapperCellView.topAnchor.constraint(equalTo: self.topAnchor,constant: 10),
            wrapperCellView.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 10),
            wrapperCellView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -10),
            wrapperCellView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -10),
            
            labelTitle.topAnchor.constraint(equalTo: wrapperCellView.topAnchor, constant: 8),
            labelTitle.leadingAnchor.constraint(equalTo: wrapperCellView.leadingAnchor, constant: 16),
            labelTitle.heightAnchor.constraint(equalToConstant: 20),
            labelTitle.widthAnchor.constraint(lessThanOrEqualTo: wrapperCellView.widthAnchor),
            
            wrapperCellView.heightAnchor.constraint(equalToConstant: 40)
        ])
        
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

}

SearchTableViewManager.swift

Let's add the following code to the file:

//
//  SearchTableViewManager.swift
//  App14
//
//  Created by Sakib Miazi on 6/15/23.
//

import Foundation
import UIKit

extension SearchViewController: UITableViewDelegate, UITableViewDataSource{
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return mapItems.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: Configs.searchTableViewID, for: indexPath) as! SearchTableViewCell
        
        return cell
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        
    }
}

Displaying the Bottom Search Sheet

We need to add an action to the search button in ViewController. And then display the bottom search sheet.

Let's add the following code in ViewController.swift file:

//
//  ViewController.swift
//  App14
//
//  Created by Sakib Miazi on 6/14/23.
//

import UIKit
import MapKit

class ViewController: UIViewController {
    //codes omitted...
    override func viewDidLoad() {
        super.viewDidLoad()
        
        title = "Search in Map"
        navigationController?.navigationBar.prefersLargeTitles = true
        //codes omitted...
        
        //MARK: add action for bottom search button tap...
        mapView.buttonSearch.addTarget(self, action: #selector(onButtonSearchTapped), for: .touchUpInside)
        //codes omitted...
    }
    //codes omitted...
    @objc func onButtonSearchTapped(){
        
        //MARK: Setting up bottom search sheet...
        let searchViewController  = SearchViewController()
        let navForSearch = UINavigationController(rootViewController: searchViewController)
        navForSearch.modalPresentationStyle = .pageSheet
        
        if let searchBottomSheet = navForSearch.sheetPresentationController{
            searchBottomSheet.detents = [.medium(), .large()]
            searchBottomSheet.prefersGrabberVisible = true
        }
        
        present(navForSearch, animated: true)
    }

}

In the above code:

• On lines 25 through 38, we handle the action when the user taps on the search button.

  • We create the bottom search sheet and embed it in a navigation controller.

  • Then we define the presentation style, detents, and grabber for the bottom search sheet.

  • Finally, present the sheet.

If we run the app now:

So, our bottom search sheet is working!

Searching Nearby Places

Here we have to type something on the search bar, and depending on what we type, it should display the list of related places in the search results table view. So, let's open SearchViewController.swift and put in the following code to add a delegate to mapview:

//
//  SearchViewController.swift
//  App14
//
//  Created by Sakib Miazi on 6/15/23.
//

import UIKit
import MapKit

class SearchViewController: UIViewController {
    
    var delegateToMapView: ViewController!
    
    var mapItems = [MKMapItem]()
    //codes omitted...
        
}

extension SearchViewController: UISearchBarDelegate{
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
    }
    
    func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
        self.dismiss(animated: true)
    }
}

In the above code, on line 13, we declare a delegate variable to the ViewController where the map view is.

Now, let's create a new file named LoadPlaces.swift in the group "Map Screen."

Let's write the following code in the file:

//
//  LoadPlaces.swift
//  App14
//
//  Created by Sakib Miazi on 6/15/23.
//

import Foundation
import CoreLocation
import MapKit

extension ViewController{
    func loadPlacesAround(query: String){
        var mapItems = [MKMapItem]()
        
        let searchRequest = MKLocalSearch.Request()
        searchRequest.naturalLanguageQuery = query


        // Set the region to an associated map view's region.
        searchRequest.region = mapView.mapView.region


        let search = MKLocalSearch(request: searchRequest)
        search.start { (response, error) in
            guard let response = response else {
                // Handle the error.
                return
            }
            mapItems = response.mapItems
            
            for item in response.mapItems {
                if let name = item.name,
                    let location = item.placemark.location {
                    print("\(name), \(location)")
                }
            }
        }
    }
}

In the above code:

• We import CoreLocation and MapKit libraries to search places.

• We extend the ViewController class and define the method loadPlacesAround() where we take a String parameter named query.

• We use MKLocalSearch service from Apple Maps to search for places.

• On line 16, we create a search request instance.

• On line 17, we set the naturalLanguageQuery of the local search service to the parameter query.

• Now, the search request needs a region, right? We won't be searching the whole world. So on line 21, we set the search region to the current map view region. It means I will be looking for places close to the region we see on the map inside the screen.

• On lines 24 through 38, we run the search for the places related to the query.

Now, let's open SearchViewController.swift file again and call loadPlacesAround() method when the user type something:

//
//  SearchViewController.swift
//  App14
//
//  Created by Sakib Miazi on 6/15/23.
//

class SearchViewController: UIViewController {
    
    var delegateToMapView: ViewController!
    
    //codes omitted...
    
}

extension SearchViewController: UISearchBarDelegate{
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        delegateToMapView.loadPlacesAround(query: searchText)
    }
    
    func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
        self.dismiss(animated: true)
    }
}

In the above code, on line 18, we call the loadPlacesAround(query: searchText) method of map screen using the delegate. We send the text the user writes on the search bar.

We need to update ViewController.swift file to initialize the delegateToMapView variable. So, let's initialize it as the following code:

//
//  ViewController.swift
//  App14
//
//  Created by Sakib Miazi on 6/14/23.
//
class ViewController: UIViewController {
    //codes omitted...
    
    @objc func onButtonSearchTapped(){
        
        //MARK: Setting up bottom search sheet...
        let searchViewController  = SearchViewController()
        searchViewController.delegateToMapView = self
        
        let navForSearch = UINavigationController(rootViewController: searchViewController)
        navForSearch.modalPresentationStyle = .pageSheet
        
        if let searchBottomSheet = navForSearch.sheetPresentationController{
            searchBottomSheet.detents = [.medium(), .large()]
            searchBottomSheet.prefersGrabberVisible = true
        }
        
        present(navForSearch, animated: true)
    }
}
//codes omitted...

In the above code, on line 14, we initialize delegateToMapView variable of the search view controller to self.

Let's run the app.

The results are getting printed in the output area in the above demo. The results are related to the search query "coffee." It fetches all the coffee shops around.

Displaying the search results in the search table view

Now we have the search results in the map screen, so we need to send them back to the search result table view. We will use Notification Center for that. We need to observe the data from the search bottom sheet. We post the notification from the map screen.

Setting an observer from the bottom search sheet

Open SearchViewController.swift file, and put the following code there:

//
//  SearchViewController.swift
//  App14
//
//  Created by Sakib Miazi on 6/15/23.
//

import UIKit
import MapKit

class SearchViewController: UIViewController {
    
    var delegateToMapView: ViewController!
    
    //codes omitted...
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //codes omitted... 
        notificationCenter.addObserver(
            self,
            selector: #selector(notificationForPlaces(notification:)),
            name: .placesFromMap,
            object: nil
        )
        
    }
    
    @objc func notificationForPlaces(notification: Notification){
        mapItems = notification.object as! [MKMapItem]
        self.searchBottomSheet.tableViewSearchResults.reloadData()
    }
    
}

extension SearchViewController: UISearchBarDelegate{
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        delegateToMapView.loadPlacesAround(query: searchText)
    }
    
    func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
        self.dismiss(animated: true)
    }
}

In the above code:

• We observe the notification center on lines 20 through 25.

• On lines 29 through 32, we define the method for handling the notification received event.

  • We basically receive an array of map items. Then we have to display them in the table view.

Let's open SearchTableViewManager.swift file and add the following code to display the map items on the cells:

//
//  SearchTableViewManager.swift
//  App14
//
//  Created by Sakib Miazi on 6/15/23.
//

import Foundation
import UIKit

extension SearchViewController: UITableViewDelegate, UITableViewDataSource{
    //codes omitted...
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: Configs.searchTableViewID, for: indexPath) as! SearchTableViewCell
        if let name = mapItems[indexPath.row].name{
                cell.labelTitle.text = name
        }
        return cell
    }
    //codes omitted...
}

In the above code:

• On lines 15 through 17, we set the text of the cell's labelTitle to the name of the current map item.

Posting notification from Map Screen

Let's open LoadPlaces.swift file, and put the following code there:

//
//  LoadPlaces.swift
//  App14
//
//  Created by Sakib Miazi on 6/15/23.
//

import Foundation
import CoreLocation
import MapKit

extension ViewController{
    func loadPlacesAround(query: String){
        //MARK: initializing the notification center...
        let notificationCenter = NotificationCenter.default
        
        var mapItems = [MKMapItem]()
        
        let searchRequest = MKLocalSearch.Request()
        searchRequest.naturalLanguageQuery = query


        // Set the region to an associated map view's region.
        searchRequest.region = mapView.mapView.region


        let search = MKLocalSearch(request: searchRequest)
        search.start { (response, error) in
            guard let response = response else {
                // Handle the error.
                return
            }
            mapItems = response.mapItems
            
            for item in response.mapItems {
                if let name = item.name,
                    let location = item.placemark.location {
                    print("\(name), \(location)")
                }
            }
            
            //MARK: posting the search results...
            notificationCenter.post(name: .placesFromMap, object: mapItems)
        }
    }
}

In the above code:

• On line 15, we initialize the notification center.

• On line 43, we post the map items we fetched to the notification center.

Let's run the app again:

Great! We can see the search results!!! Now can we show the place on the map when we select it on the table view?

Code so far

53KB

App14_phase3.zip

archive

Open