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