Search

Search for a Location​

From here onwards, code for both Mapbox and Google Maps is similar.

Take a look at the following code. As discussed before, this will select a location specifically named "The Crow".

https://github.com/MapsPeople/MapsIndoorsGettingStarted-Mapbox/blob/12aaf3c15d8516842e76effddec95416f3a7e3c4/MapsIndoorsGettingStarted-Mapbox/ViewController.swift#L28-L35

                    // Create a query to locate a specific Location
                    let query = MPQuery()
                    let filter = MPFilter()

                    query.query = "The Crow"
                    filter.take = 1

                    let locations = await MPMapsIndoors.shared.locationsWith(query: query, filter: filter)

Our goal now is to enable the user to interact with a search bar and move the map with respect to their search. Therefore, we need to implement a bit more functionality in our ViewController class, so feel free to update it as follows.

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource, UISearchBarDelegate {
...
}

Let us start off by implementing the search bar. In this case, we add the following variables to our ViewController class. The tableView will be used to allow the user to see and interact with the search results.

https://github.com/MapsPeople/MapsIndoorsGettingStarted-Mapbox/blob/12aaf3c15d8516842e76effddec95416f3a7e3c4/MapsIndoorsGettingStarted-Mapbox/ViewController.swift#L86-L87

    var searchResult: [MPLocation]?
    lazy var tableView = UITableView(frame: CGRect(x: 0, y: 90, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))

And let us also make sure the search bar is correctly displayed in our view and the ViewController is its delegate.

https://github.com/MapsPeople/MapsIndoorsGettingStarted-Mapbox/blob/12aaf3c15d8516842e76effddec95416f3a7e3c4/MapsIndoorsGettingStarted-Mapbox/ExampleUI.swift#L19-L31

    class func addSearchBar(parentView: UIView, delegate: UISearchBarDelegate) -> UIView {
        let destinationSearch = UISearchBar(frame: CGRect(x: 0, y: 40, width: 0, height: 0))
        destinationSearch.sizeToFit()
        destinationSearch.delegate = delegate
        destinationSearch.barTintColor = UIColor(red: 35 / 255, green: 85 / 255, blue: 84 / 255, alpha: 1)
        destinationSearch.searchTextField.textColor = .white
        destinationSearch.searchTextField.backgroundColor = UIColor(red: 75 / 255, green: 125 / 255, blue: 124 / 255, alpha: 0.3)
        destinationSearch.searchTextField.layer.cornerRadius = 8
        destinationSearch.searchTextField.clipsToBounds = true
        parentView.addSubview(destinationSearch)
        
        return destinationSearch
    }

Finally, let us add the functions necessary for our class to conform to the UISearchBarDelegate and UITableViewDataSource protocols for the actual search button functionality.

https://github.com/MapsPeople/MapsIndoorsGettingStarted-Mapbox/blob/12aaf3c15d8516842e76effddec95416f3a7e3c4/MapsIndoorsGettingStarted-Mapbox/ViewController%2BUISearchBarDelegate.swift

import MapsIndoors
import MapsIndoorsCore
import UIKit

extension ViewController: UISearchBarDelegate {

    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        view.addSubview(tableView)
        let query = MPQuery()
        let filter = MPFilter()
        query.query = searchText
        filter.take = 100
        Task {
            searchResult = await MPMapsIndoors.shared.locationsWith(query: query, filter: filter)
            tableView.reloadData()
        }
    }

}

This responds to what the user enters in the search bar and tells MapsIndoors to search for the entered text and show the found Locations in the table view. This is almost exactly the same as the initial simple search we included in Display a Map with MapsIndoors.

https://github.com/MapsPeople/MapsIndoorsGettingStarted-Mapbox/blob/12aaf3c15d8516842e76effddec95416f3a7e3c4/MapsIndoorsGettingStarted-Mapbox/ViewController%2BUITableViewDataSource.swift

import UIKit

extension ViewController: UITableViewDataSource {

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return searchResult?.count ?? 0
    }

    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell()
        let location = searchResult?[indexPath.row]
        cell.textLabel?.text = location?.name ?? ""
        return cell
    }

}

These three functions simply outline the appearance of the table. Namely, how many rows to show and which text to represent each entry.

https://github.com/MapsPeople/MapsIndoorsGettingStarted-Mapbox/blob/12aaf3c15d8516842e76effddec95416f3a7e3c4/MapsIndoorsGettingStarted-Mapbox/ViewController%2BUITableViewDelegate.swift

import UIKit

extension ViewController: UITableViewDelegate {

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        guard let location = searchResult?[indexPath.row] else { return }
        mapControl?.goTo(entity: location)  // Use the retained mpMapControl object
        tableView.removeFromSuperview()

        // Call the directions(to:) function to get directions to the selected search result
        directions(to: location)
    }

}

This instructs what to do once an item is selected – in this case we simply go to the specified Location and hide the table view again.

At this point we should have a functional map with a search feature.

Expected Result​