Map di Android dengan menggunakan mapbox (Part 1)

Mapbox adalah API, SDK, dan live update map untuk membantu developer dalam membangun atau membuat pemetaan, navigasi, dan pengalaman pencarian across platforms menjadi lebih baik dan mudah. Mapbox menurut mimin menjadi salah satu pilihan yang cukup bagus sebagai pengganti dari Google Map.

• Part 1 – (Sekarang)
• Part 2 – Permission and device location
• Part 3 – Mapbox Studio

Kenapa mapbox?

1. Banyak industri yang telah menggunakan layanan ini, seperti: Facebook, Snap Inc, CNN, Shopify, tableau, kfc, dan banyak industri lainnya. Untuk industri lainnya, bisa kamu cek di url ini ya.
2. Untuk ketersediaan fiturnya, mapbox memiliki fitur yang pada umumnya dimiliki oleh penyedia library lainnya. Di mapbox terdapat beberapa fitur menarik seperti, kita bisa mendesign map sesuai dengan yang kita inginkan (Kita bakal bahas lebih detail di part lainnya ya).
3. MapBox vision (Beta) yang memiliki fungsi menarik juga, yaitu berguna untuk memahami jalan raya secara Real Time dengan memanfaatkan neural networks.
4. Pricing. Tentu saja hal ini sering jadi faktor penentu, apa kah kita akan menggunakan library tersebut? Menurut mimin jika di bandingkan dengan Pricing yang ditawarkan oleh Google Map, Map Box memiliki pricing yang lebih terjangkau. Silahkan dicek ya.

Yuk Ngoding

Nah, kita langsung praktek ya.

1. Buat akun

Sebelum ke project Android Studio, pertama kita harus membuat akun di mapbox. Hal ini dilakukan agar kita bisa mendapatkan token untuk penggunaan map, untuk billing, pembuatan style map sendiri, dan banyak manfaat lainnya.

2. Update build.gradle

Pertama kita akan mengubah build.gradle pada level project, menjadi seperti berikut:

buildscript {
    ext.kotlin_version = "1.4.0"
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath "com.android.tools.build:gradle:4.0.1"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

allprojects {
    repositories {
        google()
        jcenter()

        //MapBox
        mavenCentral()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

Setelah itu perbarui build.gradle pada level app, seperti berikut:

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 30
    buildToolsVersion "30.0.2"

    defaultConfig {
        applicationId "id.yukngoding.explore_mapbox"
        minSdkVersion 21
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    implementation 'androidx.core:core-ktx:1.3.2'
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'

    implementation 'com.mapbox.mapboxsdk:mapbox-android-sdk:8.6.7'
}

3. Tambahkan key mapbox ke strings.xml

Sebelumnya kita sudah memiliki key yang didapatkan setelah mendaftar di website mapbox. Tambahkan key tersebut ke strings.xml seperti berikut:

<resources>
    <string name="app_name">Explore_MapBox</string>
    <string name="access_token" translatable="false">YOUR_KEY</string>
</resources>

4. Layout

Sekarang kita akan menambahkan mapbox ke layout yang nantinya akan kita gunakan. Perbarui layout menjadi seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".type.display.DisplayActivity">

    <com.mapbox.mapboxsdk.maps.MapView
        android:id="@+id/mapView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:mapbox_cameraTargetLat="-6.1753924"
        app:mapbox_cameraTargetLng="106.8271528"
        app:mapbox_cameraZoom="12" />

</androidx.constraintlayout.widget.ConstraintLayout>

• mapbox_cameraTargetLat, digunakan untuk menentukan koordinat latitude ketika map berhasil diload untuk pertama kali
• mapbox_cameraTargetLng, digunakan untuk menentukan koordinat longitude ketika map berhasil diload untuk pertama kali
• mapbox_cameraZoom, digunakan untuk menentukan level zoom ketika map berhasil diload untuk pertama kali

5. Acitivity

Nah akhirnya kita berada di activity (disini mimin pakai kotlin ya). Perbarui code pada activity menjadi seperti berikut:

package id.yukngoding.explore_mapbox.type.display

import android.os.Bundle
import android.util.Log
import androidx.appcompat.app.AppCompatActivity
import com.mapbox.mapboxsdk.Mapbox
import com.mapbox.mapboxsdk.maps.MapboxMap
import com.mapbox.mapboxsdk.maps.OnMapReadyCallback
import com.mapbox.mapboxsdk.maps.Style
import id.yukngoding.explore_mapbox.R
import kotlinx.android.synthetic.main.activity_display.*

class DisplayActivity : AppCompatActivity(), OnMapReadyCallback {
    lateinit var mapboxMap: MapboxMap

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_display)

        Mapbox.getInstance(this, getString(R.string.access_token))
        mapView.onCreate(savedInstanceState)
        mapView.getMapAsync(this)
    }

    override fun onMapReady(mapboxMap: MapboxMap) {
        Log.e("Ikhwan", "Trace onMapReady")
        this.mapboxMap = mapboxMap
        this.mapboxMap.setStyle(Style.TRAFFIC_DAY, Style.OnStyleLoaded {
            Log.e("Ikhwan", "Trace onMapReady, Style.OnStyleLoaded")
        })
    }

    /**
     * LIFECYCLE
     * */
    override fun onStart() {
        super.onStart()
        mapView.onStart()
    }

    override fun onResume() {
        super.onResume()
        mapView.onResume()
    }

    override fun onPause() {
        super.onPause()
        mapView.onPause()
    }

    override fun onStop() {
        super.onStop()
        mapView.onStop()
    }

    override fun onSaveInstanceState(outState: Bundle) {
        super.onSaveInstanceState(outState)
        mapView.onSaveInstanceState(outState)
    }

    override fun onDestroy() {
        super.onDestroy()
        mapView.onDestroy()
    }

    override fun onLowMemory() {
        super.onLowMemory()
        mapView.onLowMemory()
    }

}

Setelah itu jalankan aplikasi, dan akan menghasilkan tampilan seperti berikut:

Sekian dulu tulisan kali ini, semoga bermanfaat ya. Silahkan ditunggu untuk part selanjutnya terkait mapbox. Terima kasih.

Oh iya di website ini ada tulisan menarik lainnya juga loh, seperti berikut:

• Membuat animasi dengan Motion Layout di Android (Part-1)
• Memulai aplikasi iOS dengan XIB di XCode
• Mengelompokkan Berbagai Widget dengan Column