LeafLet Mapbox

Obyektif:
- Menyalin access-token dari situs MapBox
- Menyiapkan CSS dan JS files dari Leaflet
- Menempatkan peta di halaman web
- Menciptakan marker, circle dan polygon di peta
- Menggunakan event 'click' untuk mengakses marker dan
circle
Daftar Isi

Leaflet Mapbox.......................................................................................1
Access-Token .....................................................................................1
Latitude dan Longitude ........................................................................1
Leaflet ............................................................................................3
Markers, circles and polygons .................................................................4
Popup .............................................................................................5
Mengendalikan Event ...........................................................................6
Tutorial ..............................................................................................7
Inisialisasi Map ...................................................................................9
Source Code: ...................................................................................11
File: css/peta.css ..............................................................................12
Tugas 1: ............................................................................................14
Tugas 2: ............................................................................................15
Leaflet Mapbox

Menampilkan peta (map) di Web merupakan hal yang relatif mudah bila
menggunakan library atau services dari pihak ketiga seperti dalam hal ini adalah
Leaflet. Library ini disiapkan untuk mengakses Mapbox openstreet, sehingga
akses program dilakukan dengan cara yang relatif lebih mudah ketimbang harus
memprogramkan dari nol. Penggunaan software ini adalah gratis (lihat batasan
penggunaan software pada https://leafletjs.com)

Access-Token
Untuk dapat mengakses peta di MapBox diperlukan 'access-token' yang harus
diambil dari situs Mapbox. Untuk mudahnya dapat di-google "mapbox access
token" untuk dapat langsung ke halaman token tersebut. Bila belum mempunyai
account, registrasi account baru dengan password.

Salin access-token tersebut ke file editor. Access-token ini akan dibutuhkan

dalam program untuk menampilkan map openstreet tersebut.

Latitude dan Longitude

Adalah unit yang merepresentasikan koordiant pada sistem geografi, merupakan

identitas sebuah lokasi seperti juga alamat sebuah jalan. Setiap tempat diatas
bumi dapat dispesifikasikan dengan koordinat latitude dan longitude.

Kedua latitude dan longitude diukur dalam derajat (degree) yang kemudian

dibagi dalam menit dan detik.

1 |© 2018 INIXINDO - Leaflet - Maxbox

 Identifikasikan angka latitude dan logitude, apakah positif atau negatif. Untuk
latitude, baris utara equator adalah positif, sedangkan baris selatan adalah
negatif. Sedangkan untuk longitude bagian timur prime meridian adalah
positif, sedangkan bagian barat adalah negatif.

• Contoh: latitude 15.23456 adalah baguan utara dari equator, sedangkan

-15.23456 adalah bagian selatan equator.
• Contoh: longitude 30.67890adalah timur prime meridian dan -30.67890
adalah sebelah barat.

sumber: https://www.ubergizmo.com/how-to/read-gps-coordinates/

Untuk melihat koordinat dari Google Map, klik kanan pada map, kemudian pilih
submenu "what's here", setelah dipilih, info lokasi akan muncul.

2 |© 2018 INIXINDO - Leaflet - Maxbox

Leaflet
Leaflet adalah library yang mempermudah akses ke Mapbox untuk mendapatkan
openstreet map. Persiapkan File CSS dari Leaflet beserta dengan JavaScript:

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

leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/
l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>

JavaScript (diletakkan setelah CSS).

<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCN
s8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>

Siapkan style untuk penempatan map, dengan tinggi 'fixed' dalam pixel.

<style>
#mapid { height: 180px; }
</style>

Pada body html, buat <div> untuk penempatan peta yang akan dibaca.

<div id="mapid"></div>

Tentukan koordinat longitude dan langitude , dalam contoh ini diambil koordinat
Legian, sebuah daerah di Bali. Dari Google Map diketahui bahwa koordinatnya
adalah :
[-8.701660,115.169856]

3 |© 2018 INIXINDO - Leaflet - Maxbox

 Inisialisasi denga zoom-level 13, dan letakkan map tersebut pada elemen
'#mapid'.

var mymap = L.map('mapid').setView([-8.701660,115.169856], 13);

Metode setView memberikan nilai balik berupa obyek map.

Menciptakan tile layer memerlukan setting template URL untuk penempatan
peta (dalam bentuk image), teks atribut dan maximum level zoom dari layer
tersebut.

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?
access_token={accessToken}', {
attribution: 'Map data &copy; <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: 18,
id: 'mapbox.streets',
accessToken: 'your.mapbox.access.token'
}).addTo(mymap);

Ganti 'your.mapbox.access.token' dengan token yang sudah disimpan dalam

editor teks sebelumnya.

Markers, circles and polygons

Selain lapisan awal map , bisa ditambahkan marker, polylines, polygons, circles,
and popups. Contoh membuat marker:

var marker = L.marker([-8.701660,115.169856]).addTo(mymap);

4 |© 2018 INIXINDO - Leaflet - Maxbox

 Cara yang sama digunakan untuk menambahkan circle (kecuali ada radius dalam
meter pada argumen kedua.

var circle = L.circle([-8.701660,115.169856], {

color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(mymap);

Atau menambah polygon:

var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mymap);

Popup
Popup diguankan sebagai informasi yang muncul pada saat marker atau circle
dipilih melalui mouse-klik.

Info bisa didapat langsung pada saat inisialisasi dengan menggunakan metode
openPopup().

marker.bindPopup("<b>Resto top disini/b><br>yes!").openPopup();

circle.bindPopup("Ini sebuah circle.");
polygon.bindPopup("Ini sebuah polygon.");

Metode bindPopup() menyiapkan popup dengan konten dalam format HTML.

Popup bisa juga dilakukan dengan cara berikut:

var popup = L.popup()

.setLatLng([-8.703315, 115.168869])
.setContent("Restoran terbaik disini.")
.openOn(mymap);

Metode openOn (bukan addTo) secara otomatis melakukan 'closing' dari popup

sebelumnya yang (mungkin) terbuka.

5 |© 2018 INIXINDO - Leaflet - Maxbox

Mengendalikan Event
Event yang dimaksud adalah klik-mouse pada marker, atau perubahan level
zoom. Setiap kali hal tersebut dilakukan, maka event tersebut akan mentriger
obyek untuk menjalankan program tertentu (callback program).

function onMapClick(e) {
console.log("Peta diklik pada posisi " + e.latlng);
}

mymap.on('click', onMapClick);

Event ini akan menyampaikan pesan melalui console.log melaporkan posisi lokasi
yang dipilih (diklik). Program berikut menampilkan popup ketimbang
console.log.
var popup = L.popup();

function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("Lokasi yang dipilih: " + e.latlng.toString())
.openOn(mymap);
}

mymap.on('click', onMapClick);

6 |© 2018 INIXINDO - Leaflet - Maxbox

Tutorial

Ikut langkah demi langkah petunjuk berikut ini, semoga berhasil !

Persiapkan lebih dahulu folder dibawah public.

$ cd $HOME
$ cd public
$ mkdir project2 (kalau belum ada)
$ cd project2
$ mkdir css (untuk peta.css)
$ mkdir js (untuk peta.js)
$ (text-editor) peta.html

Hasil:

$HOME ------public
|
+ project1
|
+ project2
| peta.html
+ css --- peta.css
+ js --- peta.js
|

1. Ubah file css - peta.css dengan niali berikut:

Agar halaman web menjadi responsif, panjang dan lebar layar harus dikuasi
sepenuhnya sebagai width dan height. File css ditempatkan pada folder css .

html, body, #map {

height: 100%;
width: 100vw;
}

2. Hilangkan nilai default padding dan margin.

body {
padding: 0;
margin: 0;
}

7 |© 2018 INIXINDO - Leaflet - Maxbox

 3. Siapkan file peta.html:

Jangan lupa dengan meta tag viewport untuk mobile sebagai baris pertama di
<html> <head> . Sertakan file css/mystyle.css sebagai link.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/peta.css">
</head>

4. Sertakan file *.css dan *.js dari Leaflet pada peta.html

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

leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/
l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>

5. JavaScript (diletakkan setelah CSS).

<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCN
s8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>

6. Selanjutnya di peta.html siapkan tempat untuk map, untuk gambar dan untuk
review dengan menggunakan CSS-Grid:

<body>
<div class='container'>
<div class='peta' id='mapid'> </div>
<div class='gambar'>
Gambar Disini
</div>
<div class='review'>Tulis review disini</div>
</div>

</body>

7. Siapkan file css/petas.css dengan CSS-Grid. Warna hanya digunakan sebagai

alat debugging (visual). Siapkan gambar awal untuk ditampilkan pada class
gambar.

.container {
display: grid;
height: 100%;
grid-gap: 4px;
grid-template-columns: repeat(8,1fr);

8 |© 2018 INIXINDO - Leaflet - Maxbox

 grid-template-rows: 60% 40%;
}
.peta {
grid-column: 1/-1;
}

.gambar {
background: green;
grid-column: 1/6;
}
.review {
background: yellow;
grid-column:6/-1;
}

1/-1 mempunyai arti, tempati dari kolom pertama hingga kolom terakhir. Angka
minus 1 ini menggambarkan kolom akhir (last-column) yang memudahkan desain
jika jumlah cell berubah. Bila itu terjadi, komponen tersebut tidak terpengaruh.

Dari CSS-Grid tersebut terbaca bahwa baris pertama diberikan untuk peta,
sedangkan baris kedua dibagi antara gambar dan review dengan proposi 6/8 dan
2/8 . Bila diinginkan ubah kompsisi ini menjadi 5/8 dan 3/8.

Inisialisasi Map
Map diinisialisasi dengan menggunakan JavaScript:

<script>
let mymap = L.map('mapid').setView([-8.701660,115.169856], 14);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?
access_token={accessToken}', {
attribution: 'Map data &copy; <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: 20,
id: 'mapbox.streets',
accessToken:
'pk.eyJ1IjoiaWZpa2FyaWZpbiIsImEiOiJjamxndm83cTQwZjYwM3BvMHBma3dndGJq
In0.6LyWJiWv-yvp7mNPbyeb'
}).addTo(mymap);
</script>

Perhatikan bahwa accessToken di "copy paste" dari situs public Mapbox.com yang
sebelumnya telah disiapkan.

9 |© 2018 INIXINDO - Leaflet - Maxbox

 Variable mymap diciptakan untuk pemetaan dengan zoom-level=14. Semakin
kecil nilainya, semakin besar zooming-nya. Nilai MaxZoom adalah 20.
Sesuaikan nilai zoom-level tersebut dengan nilai yang dianggap ideal.

Parameter 'map-id' menentukan posisi peta di HTML (pada elemen div).

Metode setView manampilkan peta pada posisi latitude dan longitude.
Mencari koordinat awal bisa menggunakan Google Map, kemudian klik kanan,
dan pilih 'what is here', setelah itu dapat dilihat koordinat. Salin koordinat
tersebut dalam format [latitude,longitude].

Kunci utama dalah accessToken yang diambil dari situs MapBox.

Googling dengan "access token Mapbox", maka akan diberikan referensi ke situs
tersebut. Link tersebut adalah:

"https://www.mapbox.com/account/access-tokens"

8. Salin token tersebut dengan memilih icon di sebelah kanan, dan selipkan
pada:

accessToken: "pkxxxxxx ---- access token Mapbox ---- xxxxx" , lihat contoh
diatas sebelumnya. Token diawali dengan "pk ..." .

Hasil setring Obyek ini kemudian diaktifkan ke mapid melalui metode

addTo(mymap).

10 |© 2018 INIXINDO - Leaflet - Maxbox

Source Code:
peta.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0, user-scalable=no" />

<link rel="stylesheet" type="text/css" href="css/peta.css">

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

leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/
l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>

11 |© 2018 INIXINDO - Leaflet - Maxbox

<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-
nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbC
aA4lKTIWjDXZxflOcA==" crossorigin=""></script>

</head>
<body>
<div class='container'>
<div class='peta' id='mapid'> </div>
<div class='gambar'>
Gambar disini
</div>
<div class='review'>
Tulis review disini
</div>
</div>
<script>
var mymap = L.map('mapid').setView([-8.701660,115.169856], 14);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?
access_token={accessToken}', {
attribution: 'Map data &copy; <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: 20,
id: 'mapbox.streets',
accessToken:
'pk.eyJ1IjoiaWZpa2FyaWZpbiIsImEiOiJjamxndm83cTQwZjYwM3BvMHBma3dndGJq
In0.6LyWJiWv-yvp7mNPbyebYA'
}).addTo(mymap);

</script>
</body>
</html>

File: css/peta.css

html, body, #map {

height: 100%;
width: 100vw;
}

body {
padding: 0;
margin: 0;
}

.container {
display: grid;

12 |© 2018 INIXINDO - Leaflet - Maxbox

 height: 100%;
grid-gap: 4px;
grid-template-columns: repeat(8,1fr);
grid-template-rows: 60% 40%;
}
.peta {
grid-column: 1/-1;
}

.gambar {
background: green;
grid-column: 1/6;
}
.review {
background: yellow;
grid-column:6/-1;
}

13 |© 2018 INIXINDO - Leaflet - Maxbox

Tugas 1:

Pilih satu map lokasi Anda, dapatkan

koordinat longitude dan langitude
(melalui Google Map, klik kanan lokasi
tersebut, dan pilih "What's here", akan
menampilkan koordinat). Ingat,
koordinat program dibawah ini hanyalah
contoh yang harus diganti (jangan copy
paste lokasi !) :)

Buat file baru pada folder js, namakan

file tersebut peta.js.

Kemudian link file tersebut dari

peta.html, letakkan pada akhir file html
tersebut sebelum </body>.

File: peta.html

</script>
<script src="js/peta.js">
</script>
</body>
</html>

Edit file js/peta.js sebagai berikut:

let lokasi = [-6.221028, 106.791434];

let sponsor = "Restoran Spanyol";

Tulis lokasi ini sebagai marker, sehingga apabila dipilih, maka pesan sponsor
keluar.

Checkpoint
Program berhasil menampilkan marker, dan bila di-click, akan
menampilkan pesan sponsor.

Petunjuk

Gunakan teknik coding berikut:

let marker= L.marker(lokasi).addTo(mymap)

.bindPopup(sponsor);

14 |© 2018 INIXINDO - Leaflet - Maxbox

Tugas 2:

Tambahkan marker menjadi 5 buah dan simpan dalam Array places dengan
menggunakan format JSON.

let places= [
{"lokasi": [-6.221028, 106.791434], "sponsor" : "Restoran
Spanyol"},
{"lokasi": [-6.219912, 106.791239], "sponsor" : "Warung Kopi"},
{"lokasi": [-6.220529, 106.789848], "sponsor" : "Depot Ikan
Bakar"},
{"lokasi": [-6.222977, 106.789152], "sponsor" : "Gudang STEAK"},
{"lokasi": [-6.222043, 106.791070], "sponsor" : "Seafood!!"}
];

Variable places adalah array yang berisi JSON obyek, dengan properti location
dan sponsor.

Contoh handling array untuk menjadi marker:

for (var p of places) {

var marker=
L.marker(p.lokasi).addTo(mymap)
.bindPopup(p.sponsor);
}

15 |© 2018 INIXINDO - Leaflet - Maxbox

 Tugas 3 dan seterusnya akan menyusul, berbasis tugas 1 dan 2. Tugas ke tiga
akan menampilkan gambar dan review pada ruang yang sudah disediakan.

<div class='container'>
<div class='peta' id='mapid'>
</div>
<div class='gambar' id='gmb'>
Gambar disini
</div>
<div class='review' id='review'>
Tulis review disini
</div>
</div>

Tugas ke 3 akan diberikan jika tugas 1 dan 2 sudah selesai (minggu depan).

16 |© 2018 INIXINDO - Leaflet - Maxbox