Using OneMap Address Search in iOS App

In this tutorial, we are going to implement the address search feature using OneMap REST API. If you want to know more about OneMap, please visit to OneMap API Help page.

We will continue our tutorial from my post how to add OneMap to iOS App, in which I’ve shown how to use ArcGIS iOS SDK and adding OneMap base map and setting map extent. Complete the steps in it before attempting this tutorial.

We are going to call the Address Search REST API from OneMap form our iOS app. I’ve tried out the API call and explored the data returned from the service in previous post Exploring OneMap REST API with Swift Playgrounds.

Add Navigation Controller
First, we need to add Navigation controller to our View Controller. Go to Editor > Embed In > Navigation Controller. A Navigation Controller is added to our View Controller.

Embed in navigation

Add UISearchController And UITableViewController
We are going to use the UISearchController to allow users to key in address. The results will be shown in UITableViewController as the user type in the key words. Add UISearchController property and UITableViewController property in the View Controller.

var resultTableViewController = UITableViewController()
var searchController = UISearchController()

view raw
gistfile1.swift
hosted with ❤ by GitHub

In the viewDidLoad( ) method, add following setup code for UISearchController.

// UISearchController Setup
searchController = UISearchController(searchResultsController: resultTableViewController)
searchController.searchResultsUpdater = self
searchController.searchBar.searchBarStyle = UISearchBarStyle.Minimal
searchController.hidesNavigationBarDuringPresentation = false
navigationItem.titleView = searchController.searchBar
definesPresentationContext = true
resultTableViewController.tableView.dataSource = self
resultTableViewController.tableView.delegate = self
searchController.dimsBackgroundDuringPresentation = false
searchController.delegate = self
searchController.searchBar.delegate = self

view raw
gistfile1.swift
hosted with ❤ by GitHub

Next, add the necessary delegates to View Controller as follow:

// delegates for AGSMapViewLayer, UISearchController, UITableView
class ViewController: UIViewController, AGSMapViewLayerDelegate,
UISearchResultsUpdating, UITableViewDelegate,
UITableViewDataSource, UISearchControllerDelegate,
UISearchBarDelegate {

view raw
gistfile1.swift
hosted with ❤ by GitHub

Create a data structure to hold the address data
Create a structure named Place to hold address name, category, X and Y.

struct Place {
var placeName = ""
var Category = ""
var X = 0.0
var Y = 0.0
}

view raw
gistfile1.swift
hosted with ❤ by GitHub

In ViewController, declare an array of Places. This array will be our data model to store the search results.

var searchResults = [Place]()

view raw
gistfile1.swift
hosted with ❤ by GitHub

Implement UITableView delegate protocol methods 
There are three protocol methods we need to implement to adopt the UITableView delegate protocol. Add the following methods to ViewController Class.

// UITableView delegate protocol methods
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
searchController.searchBar.text = searchResults[indexPath.row].placeName
showSelectedSearchPlace(searchResults[indexPath.row])
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let rowData = searchResults[indexPath.row].placeName
let cell = UITableViewCell()
cell.textLabel?.text = rowData
return cell
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return searchResults.count
}

view raw
gistfile1.swift
hosted with ❤ by GitHub

Implement UISearchResultsUpdating delegate protocol method
UISearchResultsUpdating protocol requires to implement the following method. This allow us to update search results based on the information users enters in the search bar.

func updateSearchResultsForSearchController(searchController: UISearchController) {
getAddresses(searchController.searchBar.text)
}

view raw
gistfile1.swift
hosted with ❤ by GitHub

Next, we will implement the function to call OneMap REST API to search for the address.

// Call OneMap's Address Search API to search a location in Singapore
func getAddresses(keyWord: String ){
if keyWord != "" {
let keyWordEscaped = keyWord.stringByAddingPercentEscapesUsingEncoding(NSUTF8StringEncoding)
let urlString = "http://www.onemap.sg/API/services.svc/basicSearch?token=qo/s2TnSUmfLz+32CvLC4RMVkzEFYjxqyti1KhByvEacEdMWBpCuSSQ+IFRT84QjGPBCuz/cBom8PfSm3GjEsGc8PkdEEOEr&wc=SEARCHVAL%20LIKE%20%27\(keyWordEscaped!)$%27&otptFlds=CATEGORY&returnGeom=0&nohaxr=10"
session.dataTaskWithURL(NSURL(string: urlString)!, completionHandler: {
(taskData, taskResponse, taskError) -> Void in
var jsonReadError : NSError?
var jsonResult = NSJSONSerialization.JSONObjectWithData(taskData, options: NSJSONReadingOptions.MutableContainers, error: &jsonReadError) as NSDictionary
let resultsArray = jsonResult["SearchResults"] as NSArray
self.searchResults = []
for (index, result) in enumerate(resultsArray){
if index > 0 {
var place = Place()
if let placeName = result["SEARCHVAL"] as String? {
place.placeName = placeName
}
if let category = result["CATEGORY"] as String? {
place.Category = category
}
if let x = result["X"] as NSString? {
place.X = x.doubleValue
}
if let y = result["Y"] as NSString? {
place.Y = y.doubleValue
}
self.searchResults.append(place)
}
}
self.resultTableViewController.tableView.reloadData()
}).resume()
}
}

view raw
gistfile1.swift
hosted with ❤ by GitHub

Run the application
If everything goes well, a search bar will be displayed on the navigation controller title place.

searchbar

When the user type in the search keywords in the search bar, getAddresses function is called and a list of addresses started by the keyword is shown in the table view as suggestion.

Auto suggestion

Show the selected one on the map view
We need to implement one more function to show the search result when the user clicks on one of the suggested places. This function is called in tableView:didSelectRowAtIndexPath: delegate method.

func showSelectedSearchPlace(selectedPlace :Place){
// to close suggested list when the user selected one
searchController.active = false
searchController.searchBar.text = selectedPlace.placeName
// a red color symbol to mark the place
let myMarkerSymbol = AGSSimpleMarkerSymbol()
myMarkerSymbol.color = UIColor.redColor()
// a point representing x,y data from selctedPlace
let point = AGSPoint(x: selectedPlace.X, y: selectedPlace.Y, spatialReference: mapView.spatialReference)
// make the selectedPlace at the center of the map
mapView.centerAtPoint(point, animated: false)
// make a graphic with symbol and point to add to the map
var pointGraphic = AGSGraphic(geometry: point, symbol: myMarkerSymbol, attributes: nil)
// remove previously searched places
graphicLayer.removeAllGraphics()
// display the graphic on the map
graphicLayer.addGraphic(pointGraphic)
}

view raw
gistfile1.swift
hosted with ❤ by GitHub

showaddress

Above screen is shown when the user selects City Hall from suggested addresses. The project is available on github. Please leave comments if you have any questions and suggestion.

Using OneMap in iOS map application

I am learning Swift, the new programming language developed by Apple for iOS and OSX application development, and ArcGIS iOS SDK. I am planning  to make a series of tutorials based on what I have learned progressively.

In this tutorial, I am going to show you how to use Singapore’s official map platform, OneMap (www.onemap.sg), in iOS 8 application.

OneMap is an integrated map system for government agencies to deliver location-based services and information. It is a multi-agency collaboration with many government agencies currently participating and contributing information. ~ http://www.onemap.sg/home

To use OneMap in our iOS app, we need to use ArcGIS iOS SDK from Esri.  First download the ArcGIS SDK for iOS from https://developers.arcgis.com/ios/. Follow the guide to install and setup the development environment. ArcGIS has a very comprehensive guide for installing and setting up the development environment.

To use OneMap, first you need to add a UIView to your storyboard. In the Identity Inspector, change the UIView class name to AGCMapView.

MapView

Connect the map view to the view controller by creating an outlet in in ViewController.swift file.

Outlet

Import the ArcGIS framework in view controller’s swift file to use ArcGIS SDK for ios.

// import ArcGIS framework
import UIKit
import ArcGIS

view raw
import_arcgis
hosted with ❤ by GitHub

In the viewDidLoad method of ViewController.swift file, create a tiled map layer using OneMap map service and add it to the map:

override func viewDidLoad() {
super.viewDidLoad()
// set OneMap base map url
let url = NSURL(string: "http://e1.onemap.sg/arcgis/rest/services/BASEMAP/MapServer")
// create a tiled map layer
let tiledLayer = AGSTiledMapServiceLayer(URL: url)
// add layer to the mapView UIView
self.mapView.addMapLayer(tiledLayer, withName: "Basemap Tiled Layer")
}

view raw
gistfile1.swift
hosted with ❤ by GitHub

Run the application and you will see the map application displaying onemap.sg base map in the map view.

Initial Run

Right now, our map displays the whole Singapore, but we want it to be focus on a particular area in Singapore when it is loaded. To do this we need to define the initial map extent to zoom in display. We need to pass the envelope geometry to the  zoomToEnvelope:animated: method to zoom to the area we are interested in. 

An envelope is defined by a pair of X-Y coordinates representing the lower-left and upper-right corners of a rectangular bounding-box.

To create an envelope geometry, we need X min, Y min, X max and Y max. How do we find out this values? Pretty easy. We can get the current map’s extent from mapView.visibleAreaEnvelope property. So we just have to zoom in to the area of interest and inspect the current mapView.visibleAreaEnvelope values and use them as the initial extent in viewDidLoad method.

Our View Controller must adapt to the  AGSMapViewLayerDelegate protocol and set itself as the delegate of mapView‘s layerDelegate.

class ViewController: UIViewController, AGSMapViewLayerDelegate {

view raw
gistfile1.swift
hosted with ❤ by GitHub

In the viewDidLoad method, add this line to set delegate. See the API reference documentation for the AGSMapViewLayerDelegate protocol to learn more on layerDelegate

self.mapView.layerDelegate = self

view raw
gistfile1.swift
hosted with ❤ by GitHub

Then implement mapViewDidLoad delegate method to add observer for mapView pan and zoom notifications.

func mapViewDidLoad(mapView:AGSMapView!){
NSNotificationCenter.defaultCenter().addObserver(self, selector: "responseToEventChanged:", name: AGSMapViewDidEndZoomingNotification, object: nil)
}
func responseToEventChanged(notification: NSNotification){
let theString = "xmin = \(mapView.visibleAreaEnvelope.xmin),\nymin = \(mapView.visibleAreaEnvelope.ymin),\nxmax = \(mapView.visibleAreaEnvelope.xmax),\nymax = \(mapView.visibleAreaEnvelope.ymax)"
println(theString);
}

view raw
gistfile1.swift
hosted with ❤ by GitHub

Run the application and zoom to the area you want to show on initial start up. As you zoom in to the area, you can see then envelope geometry data printed out in Xcode console. When you are satisfied with the view, copy the X min, Y min, X max and Y max from the console and use them as initial extent.

I choose Nanyang Polytechnic as my starting view and create an envelop geometry from it. Following is the complete code:

import UIKit
import ArcGIS
class ViewController: UIViewController, AGSMapViewLayerDelegate {
@IBOutlet weak var mapView: AGSMapView!
let xmin = 29495.9472786567
let ymin = 39801.9418330241
let xmax = 30037.5707551916
let ymax = 40765.3094566208
override func viewDidLoad() {
super.viewDidLoad()
// add base map
let url = NSURL(string: "http://e1.onemap.sg/arcgis/rest/services/BASEMAP/MapServer")
let tiledLayer = AGSTiledMapServiceLayer(URL: url)
self.mapView.addMapLayer(tiledLayer, withName: "Basemap Tiled Layer")
self.mapView.layerDelegate = self
let envelope = AGSEnvelope(xmin: xmin, ymin: ymin, xmax: xmax, ymax: ymax, spatialReference: self.mapView.spatialReference);
self.mapView.zoomToEnvelope(envelope, animated: false)
}
func mapViewDidLoad(mapView:AGSMapView!){
NSNotificationCenter.defaultCenter().addObserver(self, selector: "responseToEventChanged:", name: AGSMapViewDidEndZoomingNotification, object: nil)
}
func responseToEventChanged(notification: NSNotification){
let theString = "xmin = \(mapView.visibleAreaEnvelope.xmin),\nymin = \(mapView.visibleAreaEnvelope.ymin),\nxmax = \(mapView.visibleAreaEnvelope.xmax),\nymax = \(mapView.visibleAreaEnvelope.ymax)"
println(theString);
}
}

view raw
gistfile1.swift
hosted with ❤ by GitHub

Mat on NYP

In this tutorial, we have learned how to add OneMap as based map to the iOS application and setting up initial map extent to the location of interest by using envelop geometry. If you want to know more about OneMap features and services, please visit to their API help page http://www.onemap.sg/api/help/.

Look forward for more tutorials on using OneMap from me and please leave a comment if you find any error or have difficulty following the steps above.