Menjajal Peta dari MapBox Sebagai Alternatif Google Maps di Android

Last Updated on 9 years by Mas Herdi

Hi semuanya, sudah lama saya nggak update artikel tutorial di website ini dikarenakan beberapa hal. 😀 Oke, kali ini saya akan membahas tentang cara membuat aplikasi peta di Android menggunakan MapBox SDK for Android yang baru-baru ini diluncurkan. Bagi yang belum tahu, MapBox adalah penyedia layanan pemetaan seperti halnya Google Maps. Untuk data petanya sendiri MapBox menggunakan base tiles dari OpenStreetMaps, dan juga dari beberapa sumber lainnya, seperti NASA, DigitalGlobe, dan USGS.

Membuat Aplikasi Pemetaan di Android Menggunakan MapBox SDK

Setelah saya coba-coba, sepertinya lumayan juga ketika kita ingin menggunakan MapBox sebagai library map di aplikasi pemetaan Android buatan kalian, dan MapBox sangat recommended apabila kalian mencari alternatif dari Google Maps SDK for Android.  MapBox sendiri defaultnya menyediakan 4 jenis tipe maps, yaitu MapBox Street, Emerald, Light and Dark, dan Satellite.

Dependencies & Access Token

Kemudian, untuk membuat aplikasi pemetaan menggunakan MapBox, kalian pertama-tama harus mendaftar dulu pada website MapBox untuk mendapatkan access token, yang nantinya akan digunakan sebagai API key di aplikasi kalian, sama halnya dengan ketika kita ingin menampilkan peta menggunakan Google Maps SDK for Android.

Jika sudah, kita bisa membuat sebuah project baru di Android Studio dan memasukkan dependencies seperti berikut pada file build.gradle:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
    compile ('com.mapbox.mapboxsdk:mapbox-android-sdk:2.2.0@aar'){
        transitive=true
    }
}

Di situ bisa kita lihat, library dari MapBox SDK bernama “com.mapbox.mapboxsdk:mapbox-android-sdk:2.2.0@aar”, pada saat artikel ini dibuat. Setelah itu kita lakukan sync gradle supaya project kita terupdate dengan library-library tersebut.

App Permissions

Setelah itu, MapBox menggunakan beberapa permission yang harus ditambahkan pada Android Manifest di aplikasi kalian, yaitu sebagai berikut :

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Permission INTERNET dan ACCESS_NETWORK_STATE kita gunakan untuk menampilkan map secara online. Kemudian permission LOCATION digunakan apabila kita ingin aplikasi ini bisa mendeteksi lokasi kita.

Setting Up Maps

Untuk men-setting maps nya sendiri tidak jauh berbeda dengan Google Maps, pada main layout pastikan kalian tambahkan element MapView dari MapBox, yang disertai dengan access token kalian :

<com.mapbox.mapboxsdk.views.MapView
        android:id="@+id/mapview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        mapbox:access_token="<YOUR ACCESS TOKEN>"/>

Ganti tulisan YOUR ACCESS TOKEN dengan access token yang sudah kalian dapatkan.

Setelah itu, pada main activity kita setup maps dengan kode berikut :

    private void setMap(Bundle savedInstanceState){
        mapView = (MapView) findViewById(R.id.mapview);

        /* set map style */
        mapView.setStyleUrl(Style.EMERALD);

        /* set user location */
        mapView.setMyLocationEnabled(true);
        mapView.setMyLocationTrackingMode(MyLocationTracking.TRACKING_NONE);

        /* animate to center */
        mapView.setCenterCoordinate(new LatLngZoom(-6.178696, 106.827722, 10f), true);

        /* custom marker icon */
        SpriteFactory spriteFactory = new SpriteFactory(mapView);
        Drawable drawable = ContextCompat.getDrawable(this, R.drawable.ic_marker_strip);
        Sprite icon = spriteFactory.fromDrawable(drawable);

        mapView.addMarker(new MarkerOptions()
                .position(new LatLng(-6.179696, 106.828722))
                .title("To Entertain")
                .icon(icon));

        /* standard icon */
        mapView.addMarker(new MarkerOptions()
                .position(new LatLng(-6.181793, 106.825434))
                .title("Kantor")
                .snippet("Kantor Kementerian BUMN"));

        mapView.onCreate(savedInstanceState);
    }

Bisa dilihat pada kode di atas, peta MapBox juga bisa menampilkan lokasi pengguna (marker warna biru) layaknya Google Maps. Kita bisa juga menambahkan marker dengan icon standard, ataupun dengan icon khusus. MapBox juga mempunyai beberapa jenis style maps yang bisa kita pilih, dan fitur-fitur lainnya yang kita sudah biasa gunakan pada Google Maps.

Perlu diingat, mungkin karena masih beta, MapView sangat memperhatikan tentang activity lifecycle, sehingga di tiap-tiap lifecycle (seperti onStop, onStart, onDestroy, dsb) kita harus memanggil juga parent method yang sama pada MapView tersebut. Jika tidak maka aplikasi akan force close. Contohnya peng-handle-an seperti berikut :

    @Override
    protected void onStart() {
        super.onStart();
        mapView.onStart();
    }

    @Override
    protected void onStop() {
        super.onStop();
        mapView.onStop();
    }

Demo

Ketika dijalankan, maka beginilah tampilan peta yang dibuat menggunakan MapBox SDK for Android :

Tampilan MapBox dengan Street Style

Tampilan MapBox dengan Dark Style

Tampilan MapBox dengan Satellite Style

Tampilan MapBox dengan Emerald Style

Review

Karena mungkin belum versi stabil, masih cukup banyak bugs yang saya temukan. Diantaranya seperti tidak bisa menampilkan dua icon marker yang berbeda, seperti gambar di atas ada dua marker seharusnya satu menggunakan icon custom, dan satunya icon default, namun saat dijalankan semua marker menggunakan icon yang sama (custom/default).

Kemudian karena menggunakan OpenGL Native, saya coba aplikasi masih sering force close saat aplikasi ditutup, atau dibuka lagi, padahal sudah dilakukan handling pada tiap2 activity lifecycle, seperti onStart, onStop, onPause, dsb seperti contoh pada tutorial resmi dari MapBox.

Kelebihannya, kita bisa menggunakan custom style dari kita sendiri pada maps yang kita buat. Dan tampilan peta dari MapBox lebih bagus dengan warna-warna pastel yang enak dilihat.

Untuk sample module nya bisa didownload langsung di GitHub saya.