Pada artikel sebelumnya kita telah berkenalan dengan Leaflet JS, mulai dari menentukan koordinat latitude dan longitude sampai membuat marka atau penanda. Untuk lebih jalasnya dapat dibaca pada postingan https://framelian.com/leafletjs-tutorial-membuat-peta-online-dengan-mudah-hanya-pakai-notepad/.
Dalam artikel ini kita akan mencoba membuat sebuah Sistem Informasi Geografis sederhana. Contoh yang saya gunakan dalam artikel ini adalah membuat informasi peta lokasi tower. Saya masih menggunakan HTML dan javascript sehingga sistem ini belum memiliki fitur menyimpan data atau bersifat statis.
Fitur yang digunakan dalam sistem informasi ini hanya berisi fitur ikon kustom. Kita akan menggunakan ikon tower atau menara telekomunikasi
Table of Contents
Membuat ikon tower kustom Leaflet
Dalam aplikasi ini kita membutuhkan sebuah ikon sebagai representasi simbol tower untuk menggantikan ikon marka bawaan Leafletjs.
Berikut contoh ikon yang saya buat sendiri :
Anda bebas membuat atau mengkreasikan sendiri ikon custom sesuai dengan selera anda.
Marka dengan ikon menara di atas nantinya akan dipasangkan pada koordinat di lokasi menara-menara.
Menyiapkan dokumen HTML
Langkah berikutnya tentu saja menyiapkan template dokumen dasar HTML agar kode-kode leaflet kita nantinya bisa dijalankan di browser.
Membuat file index.html
Buat sebuah file dengan nama index.html dengan editor kode kesayangan anda. Masukkan kode html seperti berikut ini:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Sistem Informasi Geografis Menara Telekomunikasi</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/style.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>
<div id="petaku"></div>
</section>
</main>
<footer>
<p> Hak cipta © Framelian 2020. All rights reserved. License GNU-GPLv3</p>
</footer>
</body>
</html>Menambah style pada html
Buat sebuah folder baru pada folder kerja anda, dan beri nama css. Kemudian buatlah sebuah file baru dan beri nama style.css . Buka file style.css kemudian masukkan kode seperti berikut ini:
#petaku {
height: 480px;
}Menambah tag pemanggil Leafletjs
Tambahkan kode berikut ke dalam bagian akhir pada tag <head>.
// ........Kode sebelumnya
<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>
//.........Kode sesudahnyaKemudian tambahkan kode javascript pada bagian paling akhir tag body, tepat sebelum penutup tag.
<script>
// Kode javascript akan diletakkan di sini
</script>Mendefinisikan Leaflet untuk membuat Sistem Informasi Geografis
Tambahkan kode inisialisasi leaflet pada tag script seperti pada kode berikut ini:
var petaku = L.map('petaku').setView([-8.789645,120.9735248], 16);Tile Layer mapbox leafletjs
Tile Layer yang saya gunakan adalah mapbox. Untuk dapat menggunakan tilelayer mapbox, dapatkan token gratisnya dengan mendaftar di website resminya dan copas token di https://account.mapbox.com/
Masukkan kode untuk inisialisasi 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: {{ isikan kode token akses dari mapbox }}
}).addTo(petaku);Menampilkan data menara telekomunikasi
Buat sebuah folder baru bernama img. Kemudian taruh file ikon menara di dalam folder tersebut agar ikon tersebut dapat digunakan kemudian. Dalam contoh ini file ikon menara saya beri nama tower-osm.png. Saya menyarankan untuk menggunakan gambar dengan format .png karena file png memiliki fitur transparan sehingga tampilannya lebih oke.
Buka kembali file index.html, kemudian tambahkan kode berikut untuk membuat variabel ikon yang akan ditampilkan pada sistem informasi geografis data tower.
var TowerCredo = L.icon({
iconUrl: 'img/tower-osm.png',
iconSize: [30, 45], // size of the icon
iconAnchor: [15, 45], // point of the icon which will correspond to marker's location
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
var TowerSMPN1 = L.icon({
iconUrl: 'img/tower-osm.png',
iconSize: [30, 45], // size of the icon
iconAnchor: [15, 45], // point of the icon which will correspond to marker's location
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
var TowerTelkom = L.icon({
iconUrl: 'img/tower-osm.png',
iconSize: [30, 45], // size of the icon
iconAnchor: [15, 45], // point of the icon which will correspond to marker's location
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});Kemudian tambahkan kode untuk menampilkan variabel-variabel ikon menara tersebut di dalam peta:
L.marker([-8.786195, 120.973341], {icon: TowerCredo}).addTo(petaku).bindPopup("Tower Credo cafe");
L.marker([-8.789579, 120.973099], {icon: TowerSMPN1}).addTo(petaku).bindPopup("Tower SMPN 1 Bajawa");
L.marker([-8.787376, 120.975841], {icon: TowerTelkom}).addTo(petaku).bindPopup("Tower PT.Telkom Bajawa");Kode lengkap leafletjs tutorial ini seperti berikut :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Sistem Informasi Geografis Menara Telekomunikasi</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/style.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> © Framelian 2020. All rights reserved. </p>
</footer>
<script>
var petaku = L.map('petaku').setView([-8.789645,120.9735248], 16);
var TowerCredo = L.icon({
iconUrl: 'img/tower-osm.png',
iconSize: [30, 45], // size of the icon
iconAnchor: [15, 45], // point of the icon which will correspond to marker's location
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
var TowerSMPN1 = L.icon({
iconUrl: 'img/tower-osm.png',
iconSize: [30, 45], // size of the icon
iconAnchor: [15, 45], // point of the icon which will correspond to marker's location
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
var TowerTelkom = L.icon({
iconUrl: 'img/tower-osm.png',
iconSize: [30, 45], // size of the icon
iconAnchor: [15, 45], // point of the icon which will correspond to marker's location
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
L.marker([-8.786195, 120.973341], {icon: TowerCredo}).addTo(petaku).bindPopup("Tower Credo cafe");
L.marker([-8.789579, 120.973099], {icon: TowerSMPN1}).addTo(petaku).bindPopup("Tower SMPN 1 Bajawa");
L.marker([-8.787376, 120.975841], {icon: TowerTelkom}).addTo(petaku).bindPopup("Tower PT.Telkom Bajawa");
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: {{ token mapbox }}
}).addTo(petaku);
</script>
</body>
</html>
Download kode leafletjs tutorial membuat sistem informasi geografis sederhana
Kode dalam tutorial ini dapat diunduh di repository Github saya: https://github.com/Framelian/simenara
