Modul 1 Dasar Pemrograman Leaflet

Dasar Pemrograman
Leaflet.js
Hands-on Labs 1
I Made Arsa Suyadnya

Program Studi Teknik Elektro, FT - UNUD
2 Dasar Pemrograman Leaflet.js
A. Leaflet.js
Leaflet.js adalah pustaka/librari JavaScript open-source yang menyediakan kode untuk

membuat peta web interaktif yang mobile-friendly. Librari Leaflet.js juga memliki
dokumentasi API yang tersusun dengan baik, selain itu library ini juga memiliki ukuran
file kecil tetapi dikemas dengan berbagai fitur dan dapat menggunakan dengan plugin
tambahan.
Pada tutorial ini kita akan menggunakan Leaflet.js untuk menampilkan peta pada web.
B. Menampilkan Peta Menggunakan Leaflet di Web
Adapun beberapa tahapan yang dilakukan untuk menampilkan peta di dalam Web dengan
Leaflet.js adalah sebagai berikut.
1. Membuat sebuah dokumen HTML dasar, seperti berikut.
<!DOCTYPE html>
<html>
<head>
<title>WebGIS Leaflet Contoh 1</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<script>
</script>
</body>
</html>
2. Menambahkan referensi ke Leaflet CSS dan library JavaScript
Untuk memanfaatkan Leaflet, kita perlu mereferensikan file CSS dan JavaScript di file
HTML. Anda dapat mereferensikan file Leaflet (https://leafletjs.com/download.html) yang
dihosting atau mengunduh salinan, menghostingnya secara lokal, dan merujuknya.
Dalam hal ini, akan dilakukan dengan mereferensikan file yang di-host. Untuk
melakukannya, masukkan kode berikut ke bagian <head> pada halaman HTML:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"

integrity="sha512-
xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-
gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
3. Menambahkan tag <div> sebagai kontainer untuk menampilkan peta dan style CSS.
Buat elemen <div> dengan id "map-canvas" untuk memuat peta dengan menambahkan
kode berikut ke HTML <body>:
<div id="map-canvas"></div>
Untuk membuat peta yang berukuran full halaman, tambahkan kode CSS berikut di
antara tag <style> di bagian <head> pada halaman HTML:
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { width: 100%; height: 100%; }
</style>
4. Selanjutnya menambahkan kode JavaScript untuk setting penampilan peta
<script type="text/javascript">
// Creating map options

var mapOptions = {
center: [-8.64778,115.211563],
zoom: 13
}
// Creating a map object

var map = new L.map('map-canvas', mapOptions);
// Creating a Layer object

// Data provider
var providerUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var providerAttrib = 'Map data © <a
href="https://openstreetmap.org">OpenStreetMap</a> contributors';
// Layer
var providerLayer = new L.TileLayer(providerUrl, {
minZoom: 4,
maxZoom: 20,
attribution: providerAttrib
});
// Adding layer to the map

map.addLayer(providerLayer);
</script>
Penjelasan Kode:

var mapOptions = {
center: [-8.64778,115.211563],
zoom: 13
}

Bagian ini digunakan untuk membuat objek peta, dimana properti dari peta ditulis
dalam variabel mapOptions, terdiri dari center adalah properti untuk mengatur posisi
tengah peta saat pertama kali ditampilkan dan zoom adalah tingkat skala peta ketika
pertama kali ditampilkan. Selanjutnya untuk membuat objek peta pada variabel map
maka menggunakan perintah new L.map() dengan melewatkan parameter id dari
elemen div (tempat peta ditampilakn), yakni 'map-canvas' dan parameter mapOptions yang
telah didefinisikan sebelumnya.

// Data provider
var providerAttrib = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a>
contributors';
Bagian ini digunakan untuk menambahkan layer objek (tile layer) dalam hal ini akan
menggunakan OpenStreetMap tile, dimana nantinya tidak hanya OpenStreetMap saja
yang bisa digunakan, tapi juga tile provider yang lain (https://leaflet-
extras.github.io/leaflet-providers/preview/index.html)
// Layer
minZoom: 4,
maxZoom: 20,
});
Bagian ini untuk membuat objek tile tersebut dengan melewatkan data-data provider
yang telah diset pada variabel sebelumnya, selain itu dapat pula ditambahkan atribut-
atribut/properti lainnya, seperti minZoom dan maxZoom.

Bagian ini digunakan untuk menambahkan tile layer tersebut ke peta.
Kode lengkap:
<!DOCTYPE html>
<head>
<title>WebGIS Leaflet Contoh 1</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"

integrity="sha512-
xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-
gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="map-canvas"></div>
<script type="text/javascript">

var mapOptions = {
center: [-8.64778,115.211563],
zoom: 13
}


// Data provider
var providerAttrib = 'Map data © <a
href="https://openstreetmap.org">OpenStreetMap</a> contributors';
// Layer
minZoom: 4,
maxZoom: 20,
});

</script>
</body>
</html>
*tersedia juga pada lampiran kode yang telah disertakan pada file contoh-01.html
C. Referensi
 Let's make some web maps using Leaflet.js!

https://joshuafrazier.info/leaflet-basics/
 Leaflet.js Essentials
Crickard, Paul. 2014. Leaflet.js Essentials. Packt Publishing
 Leaflet Tutorials
https://leafletjs.com/examples.html
 Leaflet API reference

https://leafletjs.com/reference-1.6.0.html
D. Latihan
1. Buatlah hosting dan domain pribadi menggunakan penyedia layanan hosting dan
domain gratis di internet.
2. Ketikkan kode HTML dan lengkapi pada contoh di atas dan kemudian jalankan kode
tersebut. Perhatikan apa yang dihasilkan dan bagaimana alur kode tersebut.
3. Cobalah kode yang disertakan pada folder tutorial ini, kemudian perhatikan apa yang
dihasilkan dan bagaimana alur kode tersebut.
E. Tugas
1. Buatlah sebuah objek peta pada OpenStreetMap dengan titik koordinat tengah peta:
-8.7467357,115.1668024 kemudian tambahkan sebuah draggable marker (penanda)
pada koordinat tersebut dan tampilkan sebuah Pop up berisi informasi koordinat ketika
marker tersebut dipindahkan dan ketika marker (penanda) tersebut di-klik maka
tampilkan informasi: “Ini adalah Marker”.
Ketentuan:
 Menggunakan format dokumen HTML 5
 Upload tugas anda pada web hosting pribadi dengan nama folder: “modul01” paling
lambat sehari sebelum kuliah minggu depan.
 Buatlah laporan pembahasan mengenai kode yang telah dibuat dan kemudian
upload laporan pembahasan tersebut pada folder: “modul01”, format file dalam pdf.
Catatan:
Pisahkan antara tugas dengan Google Maps dan Leaflet dengan membuat folder
masing-masing di dalam folder modul01).

Modul 1 Dasar Pemrograman Leaflet

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul 1 Dasar Pemrograman Leaflet

Diunggah oleh

Hak Cipta:

Format Tersedia

Dasar Pemrograman

I Made Arsa Suyadnya

Leaflet.js adalah pustaka/librari JavaScript open-source yang menyediakan kode untuk

B. Menampilkan Peta Menggunakan Leaflet di Web

1. Membuat sebuah dokumen HTML dasar, seperti berikut.

<title>WebGIS Leaflet Contoh 1</title>

2. Menambahkan referensi ke Leaflet CSS dan library JavaScript

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"

4. Selanjutnya menambahkan kode JavaScript untuk setting penampilan peta

// Creating map options

// Creating a map object

// Creating a Layer object

// Adding layer to the map

// Creating map options

// Creating a map object

// Creating a Layer object

// Adding layer to the map

Bagian ini digunakan untuk menambahkan tile layer tersebut ke peta.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"

// Creating map options

// Creating a map object

// Creating a Layer object

// Adding layer to the map

 Let's make some web maps using Leaflet.js!

 Leaflet API reference

Anda mungkin juga menyukai