Tutorial Menggunakan Geocoding Dengan Mapbox

Dipublikasikan oleh El Cicko pada

tutorial geocoding dengan mapbox

Pada kesempatan kali ini saya akan sharing tutorial tentang bagaimana cara menampilkan lokasi menggunakan geocoding dengan Mapbox. Mapbox adalah sebuah map flatform yang dikhususkan bagi developer untuk membangun sebuah aplikasi desktop maupun mobile yang terintegrasi dengan peta. Beberapa layanan IT yang menggunakan Mapbox ini diantaranya adalah Foursquare, Evernote, Pinterest bahkan Uber.

Tutorial Menggunakan Geocoding Dengan Mapbox #Kode

Seperti judul diatas, sekarang kita akan belajar bagaimana cara menampilkan peta menggunakan Geocoding dengan Mapbox.

Salah satu kelebihan dari Mapbox dari platform Maps yang lain seperti Google Maps adalah pada syntax yang sangat singkat dan sederhana, jadi kamu bisa membuat sebuah fungsi dengan  baris kode yang sangat sedikit.

Namun, Mapbox mewajibkan API Key untuk para pengembang yang ingin menggunakan Mapbox sehingga pengembang diwajibkan untuk melakukan pendaftaran.

Tapi tenang saja karena Mapbox sendiri memiliki Free Plan yang memiliki limit penggunaan yang saya rasa sudah cukup untuk aplikasi yang memiliki skala menengah.

Setelah melakukan pendaftaran kamu akan mendaftkan public key yang kamu bisa gunakan pada aplikasi kamu.

Pada text editor kamu, ketikkan script berikut ini.

<!DOCTYPE html>
<html>
    <head>
    <meta charset=utf-8 />
    <title>Geocoding Pada Mapbox</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
    <link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
    </head>
    <body>
        <div id='map'></div>
        <script>
            L.mapbox.accessToken = 'API KEY KAMU';
            L.mapbox.map('map', 'mapbox.streets').addControl(L.mapbox.geocoderControl('mapbox.places'));
        </script>
    </body>
</html>

Jangan lupa untuk menempatkan Public Key kamu pada kode diatas, jalankan script diatas maka output yang tampil akan menjadi seperti ini.

Contoh Geocoding Dengan Mapbox

Beberapa kekurangan pada Mapbox adalah masih kurang lengkapnya database wilayah Indonesia sehingga sedikit meyulitkan kita dalam melakukan pencarian lokasi terutama pada beberapa wilayah pelosok.  semoga kedepannya Mapbox dapat menutupi kekurangan ini.  

Sekian dulu tutorial saya mengenai cara menggunakan Geocoding dengan Mapbox. Silahkan dicoba dan semoga bermanfaat.


El Cicko

Nama saya Riky Fahri Hasibuan, Saya yang biasa nulis di blog ini. Blog ini adalah sarana dokumentasi dari apa yang saya kerjakan dan tidak ada salahnya juga saya sebarkan. Jika artikel di blog bermanfaat, kamu bisa memberikan apresiasi pada blog ini dengan memberikan donasi pada blog ini.

2 Komentar

Andreas Febrianus Tanujaya · Juli 13, 2016 pada 9:12 am

gan, saya tidak muncul peta nya, kenapa ya?

    El Cicko · Juli 21, 2016 pada 9:23 am

    mas bisa baca-baca tentang keterangan error di Google Maps dan gimana cara resolvenya disini.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *