Implementasi MAP Kit Framework di iOS – FoodPin Apps

MAP Kit Framework merupakan fitur yang bertanggung jawab untuk menampilkan maps, navigasi, menambahkan keterangan untuk lokasi yang spesifik, menambahkan overlays pada maps yang sudah ada, dsb. Dengan framework ini kita bisa menanamkan fungsi tampilan map kedalam aplikasi kita secara full tanpa coding.

Map Kit Framework Cover

Nah pada pembahasan kali ini, kita akan membahas tentang framework ini, mulai dari:

  • Bagaimana menanamkan sebuah map pada layout
  • Bagaimana menerjemahkan alamat menjadi kordinat menggunakan Geocoder
  • Bagaimana menambahkan sebuah pin untuk keterangan pada map
  • Bagaimana memodifikasi keterangan pada map

Untuk memperjelas pembahasan mengenai Map Kit Framework, kita akan menambahkan fitur map di halaman detail view dari aplikasi FoodPin. Setelah mengimplementasikannya, aplikasi akan membawa kita ke sebuah map yang diberi tanda dari lokasi restaurant yang kita pilih dengan sebuah anda pin.

Keren kan? Let’s get started.


 

Menggunakan Map Kit Framework

Biasanya Map Kit Framework tidak di bundle dalam project Xcode, jadi untuk menggunakannya kita harus mengaktifkan fitur Maps. Di Project Navigator, pilih project FoodPin dan kemudian pilih target FoodPin. Kita bisa mengaktfikan fitur Maps di bagian bawah Capabilities dengan cara menghidupkan tombol On pada fitur Maps seperti yang terlihat pada gambar dibawah ini. Dengan diaktifkannya pilihan Maps, Xcode akan otomatis menambahkan MapKit Framework pada project kita.

Enable Maps di project Xcode
Enable Maps di project Xcode

 

Menambahkan Tampilan Maps pada Aplikasi

Yang kita lakukan selanjutknya adalah menambahkan icon maps untuk field alamat pada halaman Detail View. Ketika user menekan icon map, aplikasi akan berpindah ke map view controller dan menampilkan lokasi dari restaurant.

Jadi buka Main.storyboard dan pindahkan sebuah tombol dari Object Library ke cell tabel dari Detail View Controller. Beri nama tombolnya dengan Map, jika ingin membuatnya lebih cantik kita bisa mengganti warna background dan fontnya.

ya adalah menambahkan icon maps untuk field alamat pada halaman Detail View. Ketika user menekan icon map, aplikasi akan berpindah ke map view controller dan menampilkan lokasi dari restaurant.

Jadi buka Main.storyboard dan pindahkan sebuah tombol dari Object Library ke cell tabel dari Detail View Controller. Beri nama tombolnya dengan Map, jika ingin membuatnya lebih cantik kita bisa mengganti warna background dan fontnya.

Menambahkan tombol map pada prototype cell
Menambahkan tombol map pada prototype cell

Untuk membuat tampilan map, tambahkan view controller lainnya dari Object Library ke storyboard, dan diikuti dengan penambahan object MapKit View ke View Controller.

Menambahkan tampilan map
Menambahkan tampilan map

Sekarang tahan tombol control dan pindahkan dari tombol Map ke map view controller yang baru untuk membuat segue baru. Pilih Push sebagai tipe dari seguenya, nah setelah segue dibuat, isi identifiernya dengan showMap yang ada di bawah Attribute Inspector.

Menghubunkan tombol map dengan map view controller
Menghubunkan tombol map dengan map view controller

Jika kita meng-compile dan menjalankan aplikasi, kita akan melihat dua tombol map yang ada di Detail View. Tekan salah satu dari map maka akan menampilkan fungsi map. Inilah kelebihan dari Map Kit Framework, yaitu tanpa menggunakan code apapun kita sudah bisa menanamkan map pada aplikasi kita.

Jika kita melihat kembali ke Attribute Inspector, kita harus mengatur beberapa piliah seperi memperbesar dan scrolling untuk memodifikasi fitur maps. Kita juga bisa mengganti tipe map dari Standard menjadi Satellite atau Hybrid. Pilihan lainnya menggunakan “User Location” untuk menampilkan lokasi terakhir dari user. Tapi kita belum selesai sampai tahap ini, karena aplikasi baru bisa menampilkan maps secara full. Padahal yang diinginkan adalah map yang menampilkan pin point dari lokasi restaurant yang dipilih.


 

Menghapus Tombol Map yang Duplikat

Sebelum kita melanjutkan implementasi dari map, kita harus menghapus salah satu tombol map yand duplikasi yang ada di halaman detail view.

Pertam deklarasikan variabel outlet baru untuk tombol map di file DetailTableViewCell.swift:

@IBOutlet var mapButton:UIButton!

Pergi storyboard, lalu klik kanan cell yang ada di Document Outline untuk membuat koneksi antara tombol map di storyboard dengan variabel outle mapButton.

Membuat koneksi atanra tombol map dengan variabel outlet
Membuat koneksi atanra tombol map dengan variabel outlet

Selain field location, tombol map dan field lainnya harus di hilangkan. Buka file DetailViewController.swift dan ganti method tableView(_:cellForRowAtIndexPath:) dengan code dibawah ini:

Pada code diatas, pasangkan hidden property dari mapButton menjadi true untuk semua field kecuali field location. Ya done, coba compile dan jalankan aplikasi untuk melakukan testing. Seharusnya tombol duplikat yang tadi tampil sudah tidak ada lagi.


 

Mengkonversi Alamat menjadi Kordinat menggunakan Geocoder

Untuk memberi tanda sebuah lokasi di map, kita tidak bisa hanya menggunakan alamat aslinya. Map Kit tidak akan bekerja dengan menggunakan data alamat asli, karena map tersebut membutuhkan kordinat berupa latitute dan longitude untuk menemukan titik yang tepat dari globe.

Framework tersebut bertanggung jawab terhadap object Geocoder dimana nantinya developer dapat mengkonversi sebuah alamat dan bangunan menjadi kordinat global, proses ini biasanya dinamakan dengan geocoding. Dan sebaliknya, kita bisa menggunakan Geocoder untuk mengkonversi latitude dan longitude kembali menjadi sebuah alamat, proses ini dinamakan dengan reverse geocoding.

Untuk memulai sebuah reques geocoding menggunakan class CLGeocoder, semua yang kita butuhkan adalah membuat instansi dari CLGeocoder, dengan memanggil method geocodeAddressString sebagai parameter alamatnya. Berikut contohnya:

let geoCoder = CLGeocoder()
geoCoder.geocodeAddressString("524 Ct St, Brooklyn, NY 11231", completionHandler: { placemarks, error in
// Process the placemark
})

Itu tidak menunjukkan fotmat dari string alamat, method mengirimkan data lokasi yang spesifik ke server geocoding secara asynchronously. Alamat kemudian diuraikan dan mengembalikannya dalam bentuk array dari object placemark. Dengan object placemark yang merupakan instansi dari class CLPlacemark, kita bisa dengna mudah mendapatkan kordinat global dari alamat menggunakan code dibawah ini:

let coordinate = placemark.location.coordinate


 

Menambahkan keterangan kedalam Map

Keterangan
Keterangan

Sekarang kita telah mengerti ide dasar dari Geocoder dan tahu bagaimana membuat kordinat global dari alamat, sekarang kita akan membuat sebuah penanda kordinat pada map. Untuk membuatnya, MAP Kit framwework menyediakan keterangan sebagai penanda dari lokasi yang spesifik tersebut.

Pin keterangan yang kita lihat di aplikasi Map adalah salah satu conton keterangannya. Bagi seorang developer, kita harus mengetahui bahwa keterangan tersebut sebanarnya terdiri dari dua object:

  • Object Keterangan – yang merupakan data yang di tampilkan seperti nama dari alamat.
  • Object Tampilan – yang merupakan object untuk merepresentasikan gambar visual dari keterangan. Gambar pin sebagai contohnya. Jika kita ingin menampilkan keterangan dari lokasi yang kita tandai, kita harus membuat gambar visual dari keterangan sendiri.

Map Kit framework memiliki standar object dan view keterangan sendiri. Jadi kita tidak perlu membuat nya lagi, kecuali ingin memodifikasi gambarnya.

Umumnya standar dari keterangan di map, adalah seperti code berikut:

let annotation = MKPointAnnotation()
annotation.title = "Times Square"
annotation.coordinate = placemark.location.coordinate
self.mapView.showAnnotations([annotation], animated: true)
self.mapView.selectAnnotation(annotation, animated: true)

Class MKPointAnnotation  merupakan class standar untuk mengimplementasikan protocol MKAnnontation. Class itu berisikan judul, sub judul untuk menampilkan sebuah callout bubble yang sangat simple. Dengan menspesfikasikan object keterangan, kita bisa memanggil method showAnnontation dari object mapView untuk di letakkan di pin dari map. Method tersebut cukup pintar untuk mencarikan denah yang tepat untuk keterangan tersebut.

Biasanya callout bubble tidak akan tampil di map sampai user menekan tombol pin. Jika kita ingin menampilkannya tanpa harus melalui interaksi dari user, kita harus menggunakan method selecAnnotation.


 

Mendefinisikan Lokasi di Aplikasi FoodPin

Setelah memperkenalkan pengetahuan dasar dari annotations/keterangan dan geocoding, marik kita kembali lagi ke project FoodPin. Pergi ke Main.storyboard, lalu kita buat class MapViewController untuk view controller yang telah dibuat.

Di Project Navigator, klik kanan folder FoodPin dan pilih “New File ..”. Lalu buat class baru menggunakan class Cocoa Touch dan beri nama classnya dengan MapViewController. Pastikan subclassnya adalah UIViewController dan simpan file tersebut.

Ketika itu telah selesaing, tambahkan statement import untuk bisa menggunkan MAP Kit Framework.

import MapKit

Selanjutnya deklarasikan variabel outlet untuk map view dan variabel lainnya untuk restaurant yang dipilih:


@IBOutlet var mapView:MKMapView!
var restaurant:Restaurant!

Variabel outlet digunakan untuk membuat sebuah koneksi dengan map view yang ada di storyboard. Buka Interface Builder dan pilih map view controller, dibawah Identity Inspector, isi custom classnya dengan MapViewController.

Kemudian buat koneksi antara variabel outlet dengna MKMapView.

Membuat koneksi atanra MKMapView dengan variabel outlet MapView
Membuat koneksi atanra MKMapView dengan variabel outlet MapView

Untuk menambahkan keterangan pada map, perbaruhi method viewDidLoad dengan code dibawah ini:

Pertama kita konversikan alamat dari restaurant yang dipilih menjadi kordinat menggunakan Geocoder. Di banyak kasus, array dari alamat harus berisikan satu inputan, jadi kita hanya memilih element pertama dari array.

Ada satu hal lagi yang ketinggalan sebelum kita melakukan testing aplikasi, yaitu kita belum mengirimkan informasi restaurant yang terpilih ke map view controller. Pada file DetailViewController, tambahkan method prepaterForSegue berikut:


override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject!) {
if segue.identifier == "showMap" {
let destinationController = segue.destinationViewController as MapViewController
destinationController.restaurant = restaurant
}
}

Ok selanjutnya mari kita lakukan testing, dan buka halaman Map di Detail View, dan seharunsya aplikasi kita telah menampilkan halaman map seperti gambar dibawah ini.

Keterangan di MAP
Keterangan di MAP

 

Menambahkan Gambar pada Keterangan Map

Nah akan lebih bagus lagi jika aplikasi kita bisa menampilkan gambar dari restaurant di penanda map yang ada di halaman detail view bukan?

Untuk menambahkan thumnail atau gambar di keterangan, kita harus memodifikasi tampilan keterangan tersebut. Jadi setiap kali map view akan menampilkan keterangan, maka map view akan memanggil method mapView(_:viewForAnnotation:) dari object delegate:

optional func mapView(_ mapView: MKMapView!, viewForAnnotation annotation: MKAnnotation!) ->
MKAnnotationView!

Diawal kita tidak mengimplementasikan method ini, karena kita hanya menggunakan tampilan keterangan map bawaaan. Nah disini kita ingin mengimplementasikan method tersebut gambar dari restaurant.

Buka file MapViewController.swift dan implementasikan MKMapViewDelegate berikut:

class MapViewController: UIViewController, MKMapViewDelegate

Pada method viewDidLoad, tambahkan code dibawah ini untuk mendefinisikan delegate dari mapView:

mapView.delegate = self;

Selanjutnya implementasikan method mapView(_:viewForAnnotation:) menggunakan code dibawah ini:

Nah kita akhirnya selesai, selanjutnya tekan tombol Run dan jalankan aplikasi. Pilih salah satu restaurant dan arahkan ke detail view yang menampilkan map. Seharsunya tampilan aplikasi akan seperti gambar dibawah ini.

Keterangan dengan gambar
Keterangan dengan gambar

Well mungkin cukup sekian pembahasan kali ini, oya untuk contoh code bisa di downlaod disini:
https://www.dropbox.com/s/767b4u3n2qv2enj/FoodPinMap.zip?dl=0

Semoga bermafaat ya Guys, See Yaa .. 😉

Iklan

Good People write good comments ..

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s