Map di Android dengan menggunakan mapbox (Part 3)

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 – Installation and display
• Part 2 – Permission and device location
• Part 3 (Sekarang)

Di part ini, kita akan membahas tentang menampilkan map dengan menggunakan style buatan sendiri. Yuk langsung aja

1. Mapbox Studio

Mapbox studio merupakan fitur yang akan kita gunakan untuk mendesign tampilan map kita sendiri. Mapbox studio ini terdapat di halaman dashboard Mapbox. Menu ini terdapat di sisi kanan website.

Klik menu “Design In Mapbox Studio” dan website akan menampilkan halaman seperti berikut:

Seperti yang terlihat di gambar, mimin telah memiliki satu style map. Untuk membuat style map yang baru, kita bisa klik pada bagian “New Style“.

Untuk pembuatan style map baru, teman” bisa bereksperimen sendiri atau mengikuti panduan yang telah disediakan oleh Mapbox sendiri (panduannya pun berupa video loh). Teman-teman bisa klik pada menu di sisi kanan “Watch how to videos” atau langsung menuju link https://www.mapbox.com/videos/

Setelah pembuatan style mapnya selesai, kita harus menyimpan Style URL dari style map tersebut, agar bisa digunakan nanti pada aplikasi. Style URL bisa didapatkan dari website list style kita yang tadi.

Atau klik tombol share pada sisi kanan atas, setelah selesai melakukan pembuatan style map, seperi berikut:

Setelah diklik, akan muncul pop up seperti berikut:

Pada pop up tersebut terdapat url “Preview only” yang bisa kita gunakan untuk langsung melihat hasil style map kita di browser, dan juga “Style URL” yang akan kita butuhkan nanti

2 Project Android

Untuk di androidnya, kita bisa menggunakan code yang terdapat pada part 1, lalu mengubah codenya sedikit pada bagian function onMapReady seperti berikut:

    override fun onMapReady(mapboxMap: MapboxMap) {
        this.mapboxMap = mapboxMap
        this.mapboxMap.setStyle(Style.TRAFFIC_DAY, Style.OnStyleLoaded {
        })
    }

Perbarui menjadi:

    override fun onMapReady(mapboxMap: MapboxMap) {
        this.mapboxMap = mapboxMap
        this.mapboxMap.setStyle(Style.Builder().fromUri("STYLE URL DARI MAPBOX TADI"))
    }

Setelah diperbarui, jalankan project tersebut, dan peta akan tampil sesuai dengan style yang telah kita buat sendiri.

Sekian dulu tulisan kali ini, semoga bermanfaat ya.

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