membuat peta online

Leafletjs tutorial: membuat peta online dengan mudah – hanya pakai notepad

Pada artikel ini kita akan mencoba membuat peta online sederhana menggunakan Leafletjs. Sebetulnya lebih tepatnya bukan membuat peta, melainkan menggunakan fitur peta yang pada saatnya nanti dapat dikembangkan menjadi sistem informasi geografis.

Apa itu Leafletjs?

Leafletjs atau disingkat Leaflet adalah sebuah pustaka JavaScript terkemuka yang digunakan untuk membuat petainteraktif yang ramah seluler. Libary ini bersifat open source dan orang dapat secara bebas menggunakannya untuk mengembangkan aplikasi berbasis map. Ukurannya kecil, hanya sekitar 39KB namun ia memiliki semua fitur pemetaan yang paling dibutuhkan pengembang.

Sebagaimana dikutip dari halaman web resminya https://leafletjs.com/ Leaflet dirancang dengan mengutamakan kesederhanaan, kinerja, dan manfaat yang besar bagi banyak orang. Pustaka ini dapat bekerja secara efisien di semua platform desktop dan seluler utama, dapat dikembangkan dengan banyak plugin, memiliki API yang indah, mudah digunakan dan didokumentasikan dengan baik dan kode sumber yang sederhana dan dapat dibaca yang memudahkan para sukarelawan untuk berkontribusi.

Membuat peta online

Dalam contoh ini kita akan membuat marka,, menggambar garis polyline, membuat popup pesan, dan menangkap event pengguna. Kegunaan marka adalah untuk menandai sebuah titik lokasi berdasarkan koordinat, sedangkan garis polyline berguna untuk menandai sebuah area.

Kali ini saya akan menunjukkan pembuatan aplikasi sederhana yang hanya menggunakan HTML, CSS dan Javascript. Sehingga fiturnya masih sebatas membuat tanda atau marka dan blok polyline, tidak sampai menyimpan koordinat ke dalam database.

Daftar kebutuhan peralatan untuk menggunakan leaflet adalah

Untuk mengikuti leafletjs tutorial ini, dibutuhkan peralatan sebagai berikut:

  1. Komputer, tentu saja.
  2. Notepad. Bisa juga menggunakan editor yang lebih advance seperti Notepad++, Atom, Sublime, Visual Studio Code, dan lain-lain.
  3. Browser. Dianjurkan menggunakan browser modern seperti Mozilla, Chrome.
  4. Koneksi internet. Karena aplikasi menggunakan pustaka leafletjs dan OpenStreetMap, maka ditbutuhkan koneksi internet yang cukup stabil

Baca juga: Chapter 3: Belajar bahasa pemrograman berbasis web – Javascript (Part 3)

Mempersiapkan file HTML dasar

Buatlah sebuah file menggunakan editor kode yang disukai, beri nama apa saja misalnya index.html kemudian masukkan kode-kode dasar berikut ini:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Peta web menggunakan Leaflet</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  <main>
    <section>
       <p>Ini paragraf</p>
    </section>
  </main>

  <footer>
    <p> © Framelian; 2020. All rights reserved. </p>
  </footer>

</body>

</html>

Memasukkan Leaflet ke dalam dokumen

Langkah berikutnya adalah menambahkan kode-kode yang berfungsi untuk memanggil CSS Leaflet ke dalam file di dalam / di antara tag <head></head>

Menambahkan pemanggil CSS Leaflet

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>

Memanggil Javascript Leaflet

Baca juga: Chapter 3: Belajar bahasa pemrograman berbasis web – Javascript (Part 2)

Kemudian masukkan pemanggil Javascript Leaflet tepat setelah CSS-nya leaflet di atas

<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

Sehingga kode pada dokumen menjadi seperti berikut:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Peta web menggunakan Leaflet</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="css/main.css">

  <!-- CSS nya Leaflet -->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
  <!-- Akhir dari CSS nya Leaflet -->
  <!-- Javascript Leaflet -->
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
  <!-- Akhir Javascript Leaflet -->

</head>

<body>
  <!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  <main>
    <section>
       <p>Ini paragraf</p>
    </section>
  </main>

  <footer>
    <p> © Framelian keren; 2020. All rights reserved. </p>
  </footer>

</body>

</html>

Oya, kalau masih baru tentang Javascript jangan lupa baca juga: Chapter 3 : Belajar bahasa pemrograman berbasis web – Javascript (Part 1)

Menyisipkan Leaflet ke dalam elemen body HTML

Tujuannya adalah untuk mengatur penempatan map nanti pada halaman web. Masukkan kode berikut ke dalam dokumen pada bagian <section></section>. Elemen paragrafnya dihapus, dan diganti dengan elemen baru kita

<div id="petaku"></div>

Nantinya peta yang kita buat akan ditampilkan melalui elemen div di atas. Elemen tersebut diberi dengan id sebagai identitas yang dikenali oleh program javascript kita.

Membuat style

Agar dapat ditampilkan dengan baik di halaman browser, elemen div tersebut kita atur stylenya. Buat sebuah folder bernama css. Kemudian di dalam folder tersebut buat sebuah file text baru bernama style.css

Masukkan kode CSS berikut ke dalam file style.css tersebut

#petaku { height: 480px; }

Sampai tahapan ini halaman kita masih kosong seperti pada gambar di bawah ini. Namun kita sudah bisa menambahkan peta sesuai keinginan kita.

Leafletjs tutorial - membuat peta online
Halaman kosong

Menambahkan peta online

Dalam contoh kali ini saya akan menampilkan peta dengan lokasi di salah satu bagian kota Bajawa. Pertama-tama kita akan melakukan inisialiasi peta dan mengatur tampilan sesuai dengan koordinat geografis dan level zoomnya.

Inisialisasi peta

Masukkan kode javascript berikut pada bagian akhir elemen body, tepat sebelum penutup tag </body>

   //...... Kode sebelumnya .....
   <script>
       var mymap = L.map('petaku').setView([-8.789645,120.9705248], 17); // setView([latittude,longitude],zoom) Kota Bajawa
   </script>
</body

Perhatikan bahwa panggilan setView juga mengembalikan objek peta — sebagian besar metode Leaflet bertindak seperti ini ketika mereka tidak mengembalikan nilai eksplisit, yang memungkinkan rantai metode seperti jQuery yang nyaman.

Menambahkan TileLayer Mapbox

Sampai pada tahapan ini, peta kita masih berupa kanvas kosong yang telah terinisialisasi seperti pada gambar berikut ini

leafletjs tutorial: membuat peta online
Map kosong

Agar peta dapat ditampilkan kita perlu menambahkan sebuah layer / lapisan yang disebut TileLayer. Fungsi dari TileLayer adalah untuk menampilkan citra peta. Dalam penggunaannya biasanya wajib mencantumkan pengaturan URL template TileLayer, teks atribusi, dan tingkat zoom maksimum layer.

Dalam contoh ini saya menggunakan mapbox/streets-v11 yang bisa diperoleh dari Mapbox Static Tiles API. Agar dapat menggunakannya, kita wajib memiliki token akses dari penyedia API tersebut. Token akses API Mapbox dapat diperoleh secara gratis di https://www.mapbox.com/ . Silakan daftar / signup di Mapbox, untuk memperoleh token akses.

Apabila sudah mendaftar, masuk ke halaman Account Mapbox di https://account.mapbox.com/ untuk melihat token akses pada website Mapbox. Apabila belum ada token, silakan buat token menggunakan tombol create a Token pada halaman tersebut.

Leafletjs tutorial: membuat peta online
Mengambil token Mapbox

Setelah token diperoleh, tambahkan baris berikut ke dalam kode kita:

// ...............Kode sebelumnya
// Menambahkan TileLayer
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 21,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: (masukkan token akses anda di sini)
    }).addTo(mymap);
// Akhir dari TileLayer
//Kode sesudahnya

Sampai tahap ini peta sudah dapat ditampilkan sesuai koordinat yang kita masukkan pada parameter inisialisasi map di atas. Pada tahap ini fungsi zoom, scroll, drag sudah bisa berfungsi. Selengkapnya seperti pada gambar berikut ini:

Leafletjs tutorial: membuat peta online
Map Kota Bajawa

Menambah fitur map

Setelah peta ditampilkan alangkah asyiknya apabila kita bisa menambahkan beberapa fungsionalitas pada peta tersebut. Misalnya menempatkan marka, menandai area dengan lingkaran maupun bentuk lainnya

Menambahkan marka

Untuk membuat marka kita cukup menyisipkan baris kode seperti berikut ini ke dalam kode program kita:

var marka = L.marker([-8.791072,120.971380]).addTo(mymap);

Dalam contoh kode di atas, saya membuat marka pada koordinat Latitude -8.791072 dan Longitude 120.971380.

Menambahan area berbentuk lingkaran dan poligon

Untuk membuat lingkaran kita dapat menambahkan kode mirip seperti marka dengan perbedaan di mana untuk membentuk lingkaran kita membutuhkan parameter radius

var lingkaran = L.circle([-8.789863,120.971100], {
        color: 'yellow',
        fillColor: '#ff7',
        fillOpacity: 0.5,
        radius: 20
    }).addTo(mymap);

Kemudian untuk membentuk poligon, kodenya seperti berikut :

var poligon = L.polygon([
        [-8.788197, 120.972250],
        [-8.788508, 120.972382],
        [-8.788254, 120.972865],
        [-8.787846, 120.972732]
    ]).addTo(mymap);

Hasilnya kira-kira seperti berikut ini:

Leafletjs tutorial: membuat peta online
Penanda dalam peta LeafletJS

Membuat Popup

Popup adalah salah satu metode untuk menampilkan pesan dalam halaman web. Kode sederhananya seperti berikut ini:

marka.bindPopup("<b>Hai!</b><br>Ini Lapangan Kartini Bajawa.").openPopup();
lingkaran.bindPopup("Kompleks BPBD Kabupaten Ngada.");
poligon.bindPopup("Kompleks Bekas Pasar Inpres.");

Silakan mencoba mengklik salah satu bidang objek yang telah dibuat di atas. Apabila dimasukkan dengan benar kira-kira tampilannya akan seperti berikut ini

Leafletjs tutorial: membuat peta online
Popup Leafletjs

Menangani event pada peta

Setiap kali sesuatu terjadi di Leaflet, misalnya pengguna mengklik marka atau perubahan zoom peta, objek yang sesuai mengirimkan event yang dapat kita manfaatkan dengan menggunakan fungsi. Ini memungkinkan kita untuk bereaksi terhadap interaksi pengguna.

Kode berikut ini akan menampilkan popup yang berisi pesan atau informasi tentang titik yang diklik oleh pengguna. Tambahkan baris berikut ini ke dalam kode kita:

  // .... Kode sebelumnya  
  var popup = L.popup();

    mymap.on('click', onMapClick);

    function onMapClick(e) {
        popup
            .setLatLng(e.latlng)
            .setContent("Anda memilih koordinat: " + e.latlng.toString() + " pada peta")
            .openOn(mymap);
    }
   //... Kode berikutnya

Silakan mencoba lakukan klik sembarang bidang pada peta di browser anda. Apabila kode dimasukkan dengan benar, maka tampilannya seperti pada gambar berikut ini :

Leafletjs tutorial: membuat peta online
Popup event pada LeafletJS

Kode selengkapnya seperti berikut:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Peta web menggunakan Leaflet</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
 <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="crossorigin=""></script>
</head>

<body>
  <!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  <main>
    <section>
      <div id="petaku"></div>
    </section>
  </main>

  <footer>
    <p> © Namaku; 2020. All rights reserved. </p>
  </footer>
  <script>
    var mymap = L.map('petaku').setView([-8.789645,120.9705248], 17);
    var marka = L.marker([-8.791072,120.971380]).addTo(mymap);
    var lingkaran = L.circle([-8.789863,120.971100], {
        color: 'yellow',
        fillColor: '#ff7',
        fillOpacity: 0.5,
        radius: 20
    }).addTo(mymap);
    var poligon = L.polygon([
        [-8.788197, 120.972250],
        [-8.788508, 120.972382],
        [-8.788254, 120.972865],
        [-8.787846, 120.972732]
    ]).addTo(mymap);

    marka.bindPopup("<b>Hai!</b><br>Ini Lapangan Kartini Bajawa.").openPopup();
    lingkaran.bindPopup("Kompleks BPBD Kabupaten Ngada.");
    poligon.bindPopup("Kompleks Bekas Pasar Inpres.");

    var popup = L.popup();

    mymap.on('click', onMapClick);

    function onMapClick(e) {
        popup
            .setLatLng(e.latlng)
            .setContent("Anda memilih koordinat: " + e.latlng.toString() + " pada peta")
            .openOn(mymap);
    }

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 21,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'pk.eyJ1Ijoid2lsbWFuYmhpZ3UiLCJhIjoiY2s4azdtcnd1MG9zOTNucW82OXduYmlidiJ9.lkrGgQ1kMpIv6RexRmIbFQ'
    }).addTo(mymap);

  </script>

</body>

</html>

Penutup

Leaflet adalah salah satu solusi untuk membuat pemetaan secara online selain Google Maps. Leaflet menggunakan OpenStreetMap yang sangat populer saat di mana sangat banyak perusahaan besar yang menggunakannya seperti Facebook. Pustaka ini mudah dipelajari, mudah untuk diintegrasikan pada platform apa saja dan aplikasi apa saja.

Pemanfaatan lebih lanjut untuk pengembangan Sistem Informasi Geografis

Untuk pengembangan Sistem Informasi Geografis (SIG) Leaflet layak untuk dipertimbangkan sebagai toolsnya. Seperti pada contoh di atas, kita bebas berkreasi memanfaatkan fitur-fitur dasar maupun advance sesuai kebutuhan. Sifatnya yang Open Source dan Free juga merupakan faktor yang layak dijadikan pertimbangan.

Leave a Reply