M5 - Laporan - Leonard Eka Satya Nugraha - 481383

LAPORAN PRAKTIKUM SIG berbasis Web
LEAFLET.JS
Dosen Pengampu: Hidayat Panuntun, S. T., M. Eng., D. Sc.
dibuat oleh:
Leonard Eka Satya Nugraha
21/481383/SV/19769
PROGRAM SARJANA TERAPAN

TEKNOLOGI SURVEI DAN PEMETAAN DASAR
SEKOLAH VOKASI
UNIVERSITAS GADJAH MADA
YOGYAKARTA
2023
1
DAFTAR ISI
1. JUDUL ........................................................................................................................................................ 3
2. TUJUAN..................................................................................................................................................... 3
3. WAKTU dan TEMPAT ........................................................................................................................... 3
4. ALAT dan BAHAN .................................................................................................................................. 3
5. LANGKAH KERJA dan HASIL ........................................................................................................... 4
6. KESIMPULAN .......................................................................................................................................43
DAFTAR PUSTAKA .....................................................................................................................................44
2
1. JUDUL
Leaflet.JS
2. TUJUAN
a. Mahasiswa mampu memahami konsep dasar Leaflet.js.

b. Mahasiswa mampu membuat dan menampilkan peta berbasis TILE pada halaman web.
3. WAKTU dan TEMPAT
Waktu : Senin, 13 Maret 2023

Tempat : Lab. GP 01
4. ALAT dan BAHAN
Laptop ASUS Vivobook 14

Mouse ROBOT Model: M310
Software Microsoft Word 2019
Software Visual Studio Code
Modul Praktikum SIG Berbasis Web #5
3
5. LANGKAH KERJA dan HASIL
a. Menampilkan Peta pada halaman web

Berikut adalah langkah sederhana untuk menampilkan peta pada halaman web:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet sample</title>
<link rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
<script
src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="width:900px;height:780px;"></div>
<script>
var mapOptions = {center:[ -7.774888, 110.374554], zoom:
18};
var map = new L.map('map', mapOptions);
var layer = new
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer);
</script>
</body>
</html>
Hasil:
4
b. Tampilan Full Screen
Berikut ini merupakan contoh script yang digunakan untuk membuat tampilan peta full
screen 1 halaman web penuh.
<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
/>
<style>
body{
padding:0;
margin:0;
}
html,body,#map{
height: 100%;
width: 100%
}
</style>
</head>
<body>
<div id="map"></div>
<script
src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js">
</script>
<script>
var map=L.map('map').setView([-7.305421,110.059838],7);
mapLink=
'<a href="http://opensteetmap.org">OpenSteetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
attribution:'Map data©'+mapLink,
maxZoom: 18,
}).addTo(map);
</script>
</body>
</html>
Hasil:
5
Script tersebut akan menampilkan sebuah peta OpenStreetMap. Posisi tampilan peta akan
diatur pada koordinat [-7.305421, 110.059838] dengan tingkat zoom sebesar 7. Script
tersebut juga mengatur tampilan halaman web agar penuh (fullscreen).
c. Leaflet MAP providers.

Selain openstreetmap, leafletJS juga bisa menampilkan layer lain dari berbagai penyedia
layanan peta online. Untuk melakukannya, pengguna cukup menuliskan URL dari peta yang
akan digunakan pada kolom TileLayer.
1) Mapnik
Hasil:
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
/>
<style>
body{
padding:0;
margin:0;
}
html,body,#map{
6
height: 100%;
width: 100%
}
</style>
</head>
<body>
<script
</script>
<script>
mapLink=
L.tileLayer(
maxZoom: 18,
}).addTo(map);
</script>
</body>
</html>
Hasil:
2) DE
<!DOCTYPE html>
<html>
<head>
<link
7
rel="stylesheet"
/>
<style>
body{
padding:0;
margin:0;
}
html,body,#map{
height: 100%;
width: 100%
}
</style>
</head>
<body>
<script
</script>
<script>
mapLink=
L.tileLayer(
'http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.
png',{
maxZoom: 18,
}).addTo(map);
</script>
</body>
Hasil:
8
3) France
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
/>
<style>
body{
padding:0;
margin:0;
}
html,body,#map{
height: 100%;
width: 100%
}
</style>
</head>
<body>
<script
</script>
<script>
9
mapLink=
L.tileLayer(
'http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png'
,{
maxZoom: 18,
}).addTo(map);
</script>
</body>
Hasil:
4) Hot
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
/>
<style>
body{
padding:0;
margin:0;
}
html,body,#map{
height: 100%;
width: 100%
10
}
</style>
</head>
<body>
<script
</script>
<script>
mapLink=
L.tileLayer(
'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',{
maxZoom: 18,
}).addTo(map);
</script>
</body>
Hasil:
5) BZH
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
11
/>
<style>
body{
padding:0;
margin:0;
}
html,body,#map{
height: 100%;
width: 100%
}
</style>
</head>
<body>
<script
</script>
<script>
mapLink=
L.tileLayer(
'http://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png',{
maxZoom: 18,
}).addTo(map);
</script>
</body>
Hasil:
12
6) Arcgisonline
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
/>
<style>
body{
padding:0;
margin:0;
}
html,body,#map{
height: 100%;
width: 100%
}
</style>
</head>
<body>
<script
</script>
<script>
mapLink=
13
L.tileLayer(
'https://server.arcgisonline.com/ArcGIS/rest/services/Worl
d_Street_Map/MapServer/tile/{z}/{x}/{y}.png',{
maxZoom: 18,
}).addTo(map);
</script>
</body>
</html>
Hasil:
7) Topomap
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
/>
<style>
body{
padding:0;
margin:0;
}
html,body,#map{
height: 100%;
14
width: 100%
}
</style>
</head>
<body>
<script
</script>
<script>
mapLink=
L.tileLayer(
'http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',{
maxZoom: 18,
}).addTo(map);
</script>
</body>
</html>
Hasil:
8)
d. Marker
Berikut adalah contoh tampilan peta pada script HTML seluruhnya.
<!DOCTYPE html>
<html>
15
<head>
<title>Leaflet Sample</title>
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
</head>
<body>
<div id="map" style="width: 1200px; height: 580px"></div>
<script>
// Creating map options
var mapOptions = {
center: [-7.62881, 110.401905],
zoom: 15
}
// Creating a map object
var map = L.map('map', mapOptions);
// Creating a Layer object
var layer =
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// Adding layer to the map
layer.addTo(map);
// Creating a marker
var marker = L.marker([-7.62881, 110.401905]);
// Adding marker to the map
marker.addTo(map);
</script>
</body>
</html>
Hasil:
Script di atas menghasilkan tampilan peta dengan menggunakan marker (point) yang
menunjukkan koordinat (-7.62881, 110.401905).
16
Contoh dengan modifikasi koordinat marker dan mapcenter dengan koordinat daerah
kelahiran asal:
Daerah Desa Karanglo, Kecamatan Tawangmangu, Kabupaten Karanganyar, Jawa Tengah
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Sample</title>
crossorigin="" />
</head>
<body>
<script>
var mapOptions = {
center: [-7.665260, 111.089058],
zoom: 15
}
var map = L.map('map', mapOptions);
var layer =
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
17
layer.addTo(map);
var marker = L.marker([ -7.665260, 111.089058]);
marker.addTo(map);
</script>
</body>
</html>
Hasil:
e. PopUp
Berikut adalah tampilan keseluruhan script HTML-nya:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet sample</title>
href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
<script
</head>
<body>
<div id="map" style="width:1200px; height:580px"></div>
<script>
var mapOptions = {
center: [-7.7743, 110.3746],
18
zoom: 15
};

var map = new L.map('map', mapOptions);

var layer = new
L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

var marker = L.marker([-7.7743, 110.3746]);
// Adding popup to the marker

marker.bindPopup("Haii newbie LeafletJS");

marker.addTo(map);
</script>
</body>
</html>
Hasil:
Script di atas menunjukkan tampilan peta dengan menggunakan marker pada koordinat (-
7.7743, 110.3746) akan dibuat dan diberi popup dengan teks "Haii newbie LeafletJS".
f. Marker Options
<!DOCTYPE html>
19
<html>
<head>
<title>Marker Options Example</title>
href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
<script
</head>
<body>
<div id="map"style="width:900px;height:580px"></div>
<script>
//Creating map options
var mapOptions={
center:[-7.7743, 110.3746],
zoom:18
}
//Creating a map object
var map=new L.map('map',mapOptions);
//Creating a Layer object

var layer=new
//Adding layer to map

//Creating a Marker
var markerOptions={
title:"Lokasiku",
clickable:true,
draggable:true
}
var marker = L.marker([-7.7743, 110.3746],markerOptions);

marker.addTo(map);
</script>
</body>
</html>
Hasil:
20
g. Marker Custom Icons
<!DOCTYPE html>
<html>
<head>
<title>Marker Options Example</title>
<script
</head>
<body>
<script>
var mapOptions={
center:[-7.905421, 110.059838],
zoom:13
}

var layer=new
//Adding layer to the map

//Icon options
21
var iconOptions={
iconUrl:'https://image.flaticon.com/icons/svg/2114/2114767.sv
g',
iconSize:[75,57]
}
//Creating a custom icon
var customIcon=L.icon(iconOptions);
//Creating Marker Options

var markerOptions={
title:"Lokasi bandara baru",
clickable: true,
icon:customIcon
}
var marker = L.marker([-7.905421, 110.059838],markerOptions);
//Adding popup to the marker

marker.bindPopup('Yogyakarta International
Airport').openPopup();

marker.addTo(map);
</script>
</body>
</html>
Hasil:
h. Multiple marker
22
Hasil:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script
<script>
var planes=[
["Titik 1",-40.9949,174.50808],
["Titik 2",-41.30269,173.63696],
["Titik 3",-41.49413,173.5421],
["Titik 4",-40.98585,174.50659],
["Titik 5",-40.93163,173.81726],
["Titik 6",-41.5183,174.78081],
["Titik 7",-41.42079,173.5783],
["Titik 8",-42.08414,173.96632],
["Titik 9",-41.51285,173.53274]
];
mapLink=
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
attibution:'©'+mapLink+'Contributors',
maxZoom:18,
}).addTo(map);
for(var i=0;i<planes.length;i++){
marker=new L.marker([planes[i][1],planes[i][2]])
.bindPopup(planes[i][0])
.addTo(map);
}
</script>
</body>
</html>
Hasil:
23
i. Menambahkan garis
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Polygons</title>
<script
</head>
<body>
<script>
var mapOptions={
center:[-41.2858,174.78682],
zoom:14
}

var layer=new
24
//Creating latlng object

var latlngs=[
[-41.286,174.796],
[-41.281,174.786],
[-41.279,174.776],
[-41.290,174.775],
[-41.292,174.788]
];
//Creating a polygon
var polygon=L.polygon(latlngs,{color:'red'});
//Adding to polygon to map

polygon.addTo(map);
</script>
</body>
</html>
Hasil:
• Persegi panjang
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Rectangle</title>
25
<script
</head>
<body>
<script>
var mapOptions={
center:[16.506174,80.648015],
zoom:7
}

var layer=new


var latlngs=[
[17.342761,78.552432],
[16.396553,80.727725],
];
//Creating rectOptions
var rectOptions={color:'Red',weight:1}
//Creating a rectangle
var rectangle=L.rectangle(latlngs,rectOptions);
//Adding rectangle to map

rectangle.addTo(map);
</script>
</body>
</html>
Hasil:
26
Rectangle yang memutari GSP UGM:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Rectangle GSP</title>
<script
</head>
<body>
<script>
var mapOptions={
center:[ -7.770150,110.377920],
zoom:17
}
27
var layer=new


var latlngs=[
[ -7.769539,110.377312],
[ -7.769908,110.378683],
[ -7.772264,110.378026],
[ -7.771768,110.376610]
];
//Creating rectOptions
var rectOptions={color:'Red',weight:1}
//Creating a rectangle
var rectangle=L.rectangle(latlngs,rectOptions);
//Adding rectangle to map

rectangle.addTo(map);
</script>
</body>
</html>
Hasil:
• Lingkaran
<!DOCTYPE html>
28
<html>
<head>
<script
</head>
<body>
<script>
var mapOptions={
center:[-7.905421,110.059838],
zoom:10
}

var layer=new

//Center of the Circle

var circleCenter=[-7.905421,110.059838];
//Circle options
var circleOptions={
color:'red',
fillColor:'#f03',
fillOpacity:0
}
//Creating a circle
var circle=L.circle(circleCenter,5000,circleOptions);
//Adding circle to the map

circle.addTo(map);
</script>
</body>
</html>
29
Hasil:
j. Event Handling
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Polygon</title>
<script
</head>
<body>
<script>
var mapOptions={
center:[-7.905421,110.059838],
zoom:10
}
30
var layer=new

map.om("click",function(e){
new L.Marker([e.latlng.lat,e.latlng.lng]).addTo(map);
})
</script>
</body>
</html>
Hasil:
k. Skala
<!DOCTYPE html>
<html>
<head>
<script
</head>
<body>
<script>
var mapOptions={
31
center:[-7.905421,110.059838],
zoom:10
}

var layer=new

//Creating scale control

var scale= L.control.scale();
//Adding scale control to the map

scale.addTo(map);
</script>
</body>
</html>
Hasil:
l. Menampilkan pilihan jenis peta

<!DOCTYPE html>
<html>
<head>
32
<meta charset="utf-8" />
crossorigin="" />
</head>
<body>
<script>
var osmLink = '<a
href="http://openstreetmap.org">OpenStreetMap</a>',
thunLink = '<a href="http://thunderforest.com/">Thunderforest</a>';
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© '+osmLink+' Contributors',
landUrl =
'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
thunAttrib = '© '+osmLink+' Contributors & '+thunLink;
var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
landMap = L.tileLayer(landUrl, {attribution: thunAttrib});
var map = L.map('map', {
layers: [osmMap] // only add one!
}).setView([-7.305421, 110.059838], 7);
var baseLayers = {
"OSM Mapnik": osmMap,
"Landscape": landMap
};
L.control.layers(baseLayers).addTo(map);
</script>
</body>
</html>
Hasil:
33
m. Leaflet plugin
<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet</title>
/>
href="https://cdn.jsdelivr.net/gh/k4r573n/leaflet-control-osm-
geocoder/src/Control.OSMGeocoder.css" />
34
</head>
<body>
<div id="map" style="width:1100px;height:800px"></div>
<script
<script src="https://cdn.jsdelivr.net/gh/k4r573n/leaflet-control-
osm-geocoder/src/Control.OSMGeocoder.js"></script>
<script>
var map = L.map('map').setView([-7.805421, 110.379838], 13);
var mapLink = '<a
href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
, {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
var osmGeocoder = new L.Control.OSMGeocoder({

collapsed: false,
position: 'bottomright',
text: 'Cari',
});
map.addControl(osmGeocoder);
</script>
</body>
</html>
Hasil:
Tugas:
35
1. Dengan menggunakan marker, buatlah peta persebaran lokasi: (a) kantong parkir sepeda UGM
di UGM, (b) Tempat makan di sekitar area SV UGM (Sendowo dan sekitarnya). Gunakan
simbolisasi yang berbeda-beda untuk tiap marker yang digunakan.
Jawab:
a. Pos parkir sepeda UGM
<!DOCTYPE html>
<html>
<head>
<title>Pos parkir</title>
</head>
<body>
<script
<script>
var planes=[
["Titik Parkir 1", -7.769417,110.377480],
["Titik Parkir 2",- -7.771587,110.378540],
["Titik Parkir 3", -7.774606,110.374440],
["Titik parkir 4", -7.771310,110.375803],
["Titik Parkir 5", -7.768294,110.375836],
["Titik Parkir 6", -7.768017,110.376817],
["Titik Parkir 7", -7.775258,110.380006],
["Titik parkir 8", -7.768603,110.386645],
["Titik Parkir 9", -7.766601,110.382535],
["Titik Parkir 10", -7.770403,110.381781],
["Titik Parkir 11", -7.764645,110.377439],
["Titik Parkir 12", -7.766175,110.374506]
];
var map=L.map('map').setView([ -7.770150,110.377920],8);
mapLink=
L.tileLayer(
maxZoom:18,
}).addTo(map);
36
.addTo(map);
}
</script>
</body>
</html>
Hasil:
b. Tempat makan sekitar SV UGM

<!DOCTYPE html>
<html>
<head>
<title>Tempat Makan Sekitar Area SV UGM</title>
</head>
<body>
<script
<script>
var planes=[
["Tempat Makan 1",-7.7754, 110.3728],
["Tempat Makan 2",-7.7768, 110.3739],
["Tempat Makan 3",-7.7770, 110.3741],
["Tempat Makan 4",-7.7759, 110.3746],
["Tempat Makan 5",-7.7726, 110.3724],
["Tempat Makan 6",-7.7766, 110.3742],
["Tempat Makan 7",-7.7763, 110.3724],
37
["Tempat Makan 8",-7.7735, 110.3728]
];
var map=L.map('map').setView([ -
7.774637721423318,110.3740340171671],14);
mapLink=
L.tileLayer(
maxZoom:18,
}).addTo(map);
.addTo(map);
}
</script>
</body>
</html>
Hasil:
2. Buatlah polygon yang memutari Gedung Departemen Teknologi Kebumian SV UGM!

Jawab:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Polygons DTK</title>
38
<script
</head>
<body>
<script>
var mapOptions={
center:[-7.774615,110.373955],
zoom:18
}

var layer=new


var latlngs=[
[ -7.774489,110.374344],
[ -7.774521,110.374543],
[ -7.774674,110.374742],
[ -7.774951,110.374645],
[ -7.775183,110.374532],
[ -7.775021,110.374127],
[ -7.774788,110.374185]
];

polygon.addTo(map);
</script>
</body>
</html>
</script>
39
Hasil:
3. Buatlah overlay polygon yang meliputi semua fakultas di UGM.

Jawab:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Polygons Fakultas UGM</title>
<script
</head>
<body>
<script>
var mapOptions={
center:[ -7.770150,110.377920],
zoom:14
}

var layer=new
40

var latlngs=[
[ -7.776629,110.372128],
[ -7.776764,110.373027],
[ -7.776979,110.373960],
[ -7.775969,110.374300],
[ -7.776133,110.375713],
[ -7.776013,110.376393],
[ -7.776135,110.379202],
[ -7.776521,110.380011],
[ -7.772216,110.381601],
[ -7.772345,110.382586],
[ -7.771325,110.383191],
[ -7.769963,110.383469],
[ -7.770361,110.385300],
[ -7.770662,110.386611],
[ -7.768151,110.387504],
[ -7.767139,110.384845],
[ -7.766746,110.384155],
[ -7.766127,110.382623],
[ -7.766584,110.381440],
[ -7.765747,110.378508],
[ -7.763737,110.379416],
[ -7.762388,110.374241],
[ -7.763542,110.371257],
[ -7.764788,110.371133],
[ -7.765827,110.369898],
[ -7.768145,110.371313],
[ -7.767169,110.372820],
[ -7.767206,110.374451],
[ -7.772626,110.372308],
[ -7.774845,110.371823],
[ -7.775253,110.372725]
];

polygon.addTo(map);
</script>
</body>
41
</html>
</script>
Hasil:
42
6. KESIMPULAN
Pada praktikum pada kali ini dapat diperoleh kesimpulan sebagai berikut:
1. Leaflet adalah sebuah pustaka JavaScript yang digunakan untuk membuat peta interaktif di
web. Pustaka ini dapat digunakan dengan mudah dan fleksibel.
2. Peta yang dibuat dengan Leaflet dapat diberi berbagai macam tampilan, seperti tampilan street
view, satellite, terrain, dan masih banyak lagi. Leaflet menyediakan banyak sekali fitur dan
fungsi untuk mempermudah pembuatan peta interaktif, seperti fitur zoom in dan zoom out,
fitur marker, fitur polyline, dan masih banyak lagi.
3. Leaflet juga memiliki plugin-plugin yang dapat digunakan untuk menambahkan fitur-fitur
tambahan pada peta interaktif yang dibuat.
4. Pada praktikum Leaflet javascript map, kita belajar cara membuat peta interaktif sederhana
dengan menggunakan Leaflet. Kita dapat memasukkan data koordinat dan informasi pada
setiap titik pada peta.
5. Pada praktikum tersebut, kita juga belajar bagaimana cara menambahkan layer pada peta dan
menampilkan data GeoJSON pada peta Leaflet.
6. Dalam pembuatan peta interaktif dengan Leaflet, perlu diingat bahwa tampilan peta dan
interaksi pengguna dengan peta harus dipertimbangkan dengan baik agar dapat memberikan
pengalaman pengguna yang baik.
43
DAFTAR PUSTAKA
Edler, D., & Vetter, M. (2019). The simplicity of modern audiovisual web cartography: An example
with the open-source javascript library leaflet. js. KN-Journal of Cartography and Geographic Information, 69,
51-62.
Horbiński, T., & Lorek, D. (2022). The use of Leaflet and GeoJSON files for creating the interactive
web map of the preindustrial state of the natural environment. Journal of Spatial Science, 67(1), 61-77.
Wang, L., Pi, R., Zhou, X., & Zhou, H. (2015, November). The construction of off-line map based
on OpenStreetMap and leaflet. In 4th International Conference on Computer, Mechatronics, Control and
Electronic Engineering (pp. 1471-1475). Atlantis Press.
44

M5 - Laporan - Leonard Eka Satya Nugraha - 481383

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

M5 - Laporan - Leonard Eka Satya Nugraha - 481383

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTIKUM SIG berbasis Web

PROGRAM SARJANA TERAPAN

a. Mahasiswa mampu memahami konsep dasar Leaflet.js.

3. WAKTU dan TEMPAT

Waktu : Senin, 13 Maret 2023

4. ALAT dan BAHAN

Laptop ASUS Vivobook 14

a. Menampilkan Peta pada halaman web

c. Leaflet MAP providers.

// Creating a map object

// Creating a Layer object

// Adding layer to the map

// Adding popup to the marker

// Adding marker to the map

//Creating a Layer object

//Adding layer to map

// Adding marker to the map

//Creating a Layer object

//Adding layer to the map

//Creating Marker Options

//Adding popup to the marker

// Adding marker to the map

//Creating a Layer object

//Adding layer to the map

//Creating latlng object

//Adding to polygon to map

//Creating a Layer object

//Adding layer to the map

//Creating latlng object

//Adding rectangle to map

//Creating a Layer object

//Adding layer to the map

//Creating latlng object

//Adding rectangle to map

//Creating a Layer object

//Adding layer to the map

//Center of the Circle

//Adding circle to the map

//Creating a Layer object

//Adding layer to the map

//Creating a Layer object

//Adding layer to the map

//Creating scale control

//Adding scale control to the map

l. Menampilkan pilihan jenis peta

var osmGeocoder = new L.Control.OSMGeocoder({

b. Tempat makan sekitar SV UGM

2. Buatlah polygon yang memutari Gedung Departemen Teknologi Kebumian SV UGM!

//Creating a Layer object

//Adding layer to the map

//Creating latlng object

//Adding to polygon to map

3. Buatlah overlay polygon yang meliputi semua fakultas di UGM.

//Creating a Layer object

//Adding layer to the map

//Creating latlng object

//Adding to polygon to map

Anda mungkin juga menyukai