GeoSIS ID

2016-04-30 02:51:00

LEAFLET JAVASCRIPT

Leaflet JavaScript atau di singkat (LaefletJS) merupakan perpustakaan JavaScript yang bersifat Open Source. LeafletJS pertama kali dirilis oleh Vladimir Agafonkin pada tahun 2011. Library ini khusus digunakan untuk membangun aplikasi pemetaan berbasis web, memdukung sebagian besar mobile dan desktop platform.

Leaflet memungkinkan seorang tanpa latar belakang GIS (geographic Information System) mampu menampikan peta web ubin pada server publik dengan mudah. Terdapat banyak plugin yang dapat digunakan untuk menambahkan fitur-fitur tambahan pada peta web.

Sebelum menampilkan peta web dengan leaflet, kita diharuskan mengunduh paket LeafletJS dan menyimpannya di PC yang akan digunakan.
- LeafletJS
Sebagai contoh, kita akan menampilkan peta web dengan adanya pilihan basemap. Untuk menambahkan fungsi pilihan basemap, download plugin berikut ini :
- Leaflet Providers Master
Apabila file unduhan di atas di simpan di XAMPP > htdocs > WEBGIS > Latihan-Leaflet, maka kita dapat membuat contoh syntax untuk menampilkan peta web sebagai berikut :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LATIHAN LEAFLET</title>

<!-- memanggil CSS di dalam folder leaflet -->
<link rel="stylesheet" href="leaflet/leaflet.css" />
<style type="text/css">
html{
 height:100% 
}
body{
 height:100%; 
 margin: 0; 
 padding: 0;
}
#map{
 height:100% 
} 
</style>

<!-- memanggil JS di dalam folder leaflet dan leaflet-prviders-master -->
<script src="leaflet/leaflet.js"&gt;&lt;/script>
<script src="leaflet-providers-master/leaflet-providers.js"></script>
</head>
<body>
<div id="map"> 
<script>

<!-- mengatur koordinat titik tengah &amp; zoom level peta yang akan di tampilkan -->
var map = L.map('map').setView([-1.889306,117.917266], 5); 

<!-- menambahkan pilihan basemap peta -->             
var baseLayers = { 

<!-- ini merupakan basemap default yang akan ditampilkan -->
  'Esri NatGeoWorldMap': L.tileLayer.provider('Esri.NatGeoWorldMap').addTo(map), 

<!-- ini merupakan pilihan basemap yang tersedia -->
  'Esri.WorldTopoMap': L.tileLayer.provider('Esri.WorldTopoMap'),
  'Esri WorldStreetMap': L.tileLayer.provider('Esri.WorldStreetMap'),
  'Esri DeLorme': L.tileLayer.provider('Esri.DeLorme'),   
  'Esri WorldImagery': L.tileLayer.provider('Esri.WorldImagery'),
  'Esri WorldTerrain': L.tileLayer.provider('Esri.WorldTerrain'),
  'Esri WorldShadedRelief': L.tileLayer.provider('Esri.WorldShadedRelief'),
  'Esri WorldPhysical': L.tileLayer.provider('Esri.WorldPhysical'),
  'Esri OceanBasemap': L.tileLayer.provider('Esri.OceanBasemap'),
  'Esri WorldGrayCanvas': L.tileLayer.provider('Esri.WorldGrayCanvas'),
  'Thunderforest Landscape': L.tileLayer.provider('Thunderforest.Landscape'),       
  'MapQuest Aerial': L.tileLayer.provider('MapQuestOpen.Aerial'),         
  'Stamen Watercolor': L.tileLayer.provider('Stamen.Watercolor'),
};

<!-- memunculkan tool untuk memilih basemap -->
L.control.layers(baseLayers,{}).addTo(map);
</script>
</div>
</body>
</html>

Copy syntax di atas ke dalam text-editor yang digunakan (bisa pakai notepad++, sublime-text, atau software sejenis lainnya). Simpan dalam format html di XAMPP > htdocs > WEBGIS > Latihan-Leaflet, dengan nama index.html. Atau apabila file di atas di simpan di dalam folder biasa, pastikan folder plugin leaflet yang sebelumnya telah di unduh di simpan di folder yang sama juga.Jalankan file index.html dengan browser yang digunakan (wajib ada koneksi internet). Setelah dijalankan hasilnya akan seperti berikut :

Gambar 1 - Peta Web Dengan LeafletJS

Gambar 2 - Pilihan Basemap yang Tersedia

Demikian penjelasan singkat dari Library LeafletJS. Artikel berikutnya kami akan mencoba membuat mempraktekan cara pembuatan WebGIS sederhana dengan menggunakan LeafletJS.

Artikel Terkait :

LEAFLET JAVASCRIPT

Share This Post

Join our newsletter!