Mapbox : Alternatif Maps API Selain Google Maps

By -
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. yogaMay 6, 2021 at 8:43 AM

    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. ardhi wijayantoMay 8, 2021 at 8:44 AM

      Maaf, maksudnya bagaimana ya?

      Delete
    2. XITKJOne23July 1, 2022 at 2:35 PM

      navigasi maksudnya

      Delete
    3. ardhi wijayantoSeptember 1, 2022 at 1:37 PM

      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

By -
Image
diupdate 24 November 2023 Inheritance atau pewarisan, dalam paradigma pemrograman berorientasi objek bisa diartikan membuat suatu class yang mirip seperti class yang lain. Ada class yang ditiru (class induk / parent / superclass) dan ada class hasil tiruan / hasil turunan (class child / subclass). Subclass akan mewarisi atribut dan method-method yang ada pada superclass. Contoh inheritance atau pewarisan dalam OOP misalnya sebagai berikut. Ada class Karyawan yang memiliki atribut NIP, nama, dan jenis kelamin serta dua buah method yaitu masukKerja() dan beriNama(String nama). Apabila digambarkan dalam class diagram seperti berikut Dibuat source code dalam bahasa pemrograman Java sebagai berikut Dibuat class baru yaitu Dosen, class Dosen adalah turunan dari class Karyawan. Dalam bahasa pemrograman Java untuk membuat pewarisan digunakan keyword extends ketika menuliskan deklarasi class (lihat baris ke tiga di source berikut). Class Dosen akan mewarisi atribut NIP, nama, dan je...
Read more

Review Singkat Pilihan Transportasi Umum Rute Solo - Wonosobo

By -
Karena satu hal, saya cukup sering bolak balik Solo - Wonosobo. Jarak dua kota tersebut cukup jauh, sebenarnya bisa saja ditempuh dengan kendaraan pribadi seperti sepeda motor namun kadang untuk meminimalisir rasa capek akibat mengemudi saya memilih naik kendaraan umum. Terdapat beberapa pilihan moda transportasi umum untuk rute Solo - Wonosobo. Sejumlah bus AKAP asal Jawa Timur saat ini telah memperluas jangkauannya hingga mencapai Purbalingga, kita dapat memilih naik Eka atau Sugeng Rahayu jurusan Purbalingga yang melalui Wonosobo. Bus-bus AKAP ini cukup nyaman dengan fasilitas standar bus PATAS Jawa Timuran : AC dingin, interior terawat, dan tidak ketinggalan full music Jawa.  Dari segi harga, saya sudah agak lupa karena sudah lama tidak naik bus ini, namun kalau saya tidak salah ingat saat ini untuk jurusan Solo - Wonosobo sudah tembus di atas 100 ribu rupiah. Kenaikan harga BBM yang kemudian diikuti pandemi Covid-19 berkontribusi mengerek tarif bus, padahal dulu di tahun 2018 ...
Read more

Physical address dan Logical Address dalam Jaringan Komputer

By -
Image
Dalam jaringan komputer, setiap node (misalnya PC atau perangkat smartphone) yang terhubung diberikan suatu alamat agar dapat berkomunikasi dengan node lainnya. Dalam arsitektur TCP/IP, terdapat empat jenis alamat, yaitu : 1. Physical address 2. Logical address 3. Port address 4. Application-specific address   Physical address adalah alamat suatu node yang ditentukan oleh jaringan (LAN atau WAN), alamat ini diinclude-kan dalam frame data yang digunakan oleh data link layer. Ukuran dan format dari physical address tersebut sangat bervariasi tergantug pada jaringannya, misal pada ethernet digunakan alamat 6-byte (48 bit) yang diasosiasikan dengan sebuah network interface card (NIC). Karena ukuran dan format physical address yang berbeda-beda (tergantung jenis jaringan), maka jenis alamat ini kurang cocok untuk lingkungan internetwork yang di dalamnya terdapat sejumlah jaringan dengan format alamat yang berbeda-beda. Untuk mengatasi hal tersebut, diperlukan adanya alamat univ...
Read more