Mapbox : Alternatif Maps API Selain Google Maps

Pada tutorial kali ini saya akan membahas mengenai Mapbox yang merupakan salah satu API untuk menampilkan maps.

Mengapa Mapbox?

Sebenarnya ada banyak service untuk menampilkan maps, yang terkenal misalnya adalah Google Maps API. Namun melihat perkembangan saat ini, Google Maps API mulai menerapkan biaya atas layanan yang diberikan misalnya untuk menampilkan dynamic maps di halaman web developer harus membayar $7 untuk menghilangkan watermark "for development puprposes" yang muncul.
Sementara itu Mapbox menawarkan layanan free yang cukup lumayan dengan kuota 50.000 load per bulan tanpa biaya untuk menampilkan maps ke halaman web.

Menampilkan Map ke Halaman Web

Mapbox memberikan layanan untuk menampilkan map ke halaman web dan aplikasi mobile. Pada tutorial kali ini saya akan membagikan cara menampilkan map ke halaman web.
Pertama, lakukan registrasi account. Selanjutnya developer akan diberikan token yang dapat diakses melalui halaman detail account. Kita bisa menggunakan Default public token atau membuat token baru yang khusus untuk aplikasi yang dibuat.
Selanjutnya buat file html dengan menambahkan div untuk menampung tampilan map dan memasukkan file mapbox-gl.js di bagian script, yang kemudian dilanjutkan dengan membuat script untuk menampilkan peta.
Masukkan access token yang ada di account mapbox, kemudian buat variabel map yang merupakan object dari mapboxgl.Map, pada variabel tersebut dilakukan pengaturan container, style, starting position, dan zoom level. Selangkapnya dapat dilihat pada source code berikut

hasilnya adalah sebagai berikut

Bagaimana, mudah bukan membuatnya?
Sampai jumpa di tutorial berikutnya

Comments

  1. Om sya mau tanya kenpa alamat mapbox tidak lengkap ya,.saat cba menampilkan alamat terdekat,.kecuali map nya dklik om bsa dbantu om

    ReplyDelete
    Replies
    1. Kalau mau munculin navigation sepertinya perlu tambahan code, yang saya contohkan belum ada navigasinya. Untuk referensi dapat mencari dokumentasinya di web https://docs.mapbox.com/api/navigation/

      Delete

Post a Comment

Popular posts from this blog

Contoh Inheritance (Pewarisan) di Java

Contoh Penerapan Interface di Pemrograman Java

Review Singkat Pilihan Transportasi Umum Rute Solo - Wonosobo