Belajar LeafletJS #1 Pengenalan LeafletJS dan Menampilkan Peta

Leaflet.js merupakan library atau perpustakaan kode javascript open source yang berguna untuk membangun aplikasi peta berbasis web (webgis) yang sederhana, interaktif dan ringan. Leaflet.js support dengan platform mobile dan platform desktop, HTML5 dan CSS3 serta OpenLayer dan Google Maps API yang merupakan library javascript untuk membangun aplikasi peta yang sangat popular saat ini.

Dengan memanfaatkan leaflet, developer yang tidak memiliki latar belakang GIS pun dapat dengan mudah menampilkan peta interaktif berbasis web pada server. Leaflet mampu menampilkan layer dari file geojson, memberi style dan membuat layer yang interaktif seperti menampilkan marker yang menampilkan popup informasi ketika di klik.

Berikut ini yang dapat kalian lakukan dengan LeafletJS:

  • Leaflet JavaScript library memungkinkan kita menggunakan lapisan/layer seperti Tile layers, WMS, Markers, Popups, Vector layers (polylines, polygons, circles, dll.), Image overlays dan GeoJSON.
  • Kalian juga dapat berinteraksi dengan peta Leaflet dengan menyeret peta, memperbesar (zoom) (dengan mengklik dua kali atau, menggulir mouse), menggunakan keyboard, menggunakan event handling, dan dengan menyeret marker (penanda).
  • Leaflet.js mendukung browser seperti Chrome, Firefox, Safari 5+, Opera 12+, IE 7–11 di desktop dan, browser seperti Safari, Android, Chrome, Firefox untuk ponsel.

Menampilkan Peta dengan LeafletJS

Untuk lebih memahami tentang LeafletJS, pada tutorial ini kita akan mencoba menampilkan peta menggunakan Library Leaflet.js. Kalian bisa mengikuti langkah-langkah berikut ini:

Langkah 1 – Gunakan Web Editor seperti Notepad++ atau Sublime Text, dan buat struktur dasar HTML lalu simpan dengan nama latihan_leafletjs.html.

<!DOCTYPE html>
<html>
<head>
	<title>Menampilkan Peta dengan LeafletJS</title>
</head>
<body>
………
</body>
</html>

Langkah 2 – Indluce File Leaflet CSS pada bagian head.

<head>
	<title>Menampilkan Peta dengan LeafletJS</title>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
</head>

Langkah 3 – Include File Leaflet JS setelah Leaflet CSS

<head>
	<title>Menampilkan Peta dengan LeafletJS</title>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
</head>

Langkah 4 – Buat sebuah div elemen untuk menmpatkan peta dengan id yang diinginkan.

<body>
	<div id="peta"></div>
</body>

Langkah 5 – Atur tinggi dan lebar dari area peta dengan CSS (diantara tag head, di bawah include Javascript).

<head>
	…………
	<style type="text/css">
		#peta{
			height:100vh;
		}
	</style>
</head>

Langkah 6 – Membuat Map Options untuk menentukan titik tengah peta dan nilai zoom.

<body>
	<div id="peta"></div>

	<script type="text/javascript">
		var mapOptions = {
			center: [-3.7973471,102.2657887],
			zoom: 13
		} 
	</script>
</body>

Langkah 7 – Membuat Objek Peta dan menampilkannya pada area <div> yang telah disiapkan.

<script type="text/javascript">
	var mapOptions = {
		center: [-3.7973471,102.2657887],
		zoom: 13
	}
var peta = new L.map('peta', mapOptions);
</script>

Langkah 8 – Membuat Layer Peta.

<script type="text/javascript">
	var mapOptions = {
		center: [-3.7973471,102.2657887],
		zoom: 13
	}

	var peta = new L.map('peta', mapOptions);
	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: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
	}).addTo(peta);
</script>

Dari langkah 1 sampai langkah 8 dalam menampilkan peta dengan leaflet.js, menghasilkan script lengkap seperti ini:

<!DOCTYPE html>
<html>
<head>
	<title>Menampilkan Peta dengan LeafletJS</title>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
	<style type="text/css">
		#peta{
			height:100vh;
		}
	</style>
</head>
<body>
	<div id="peta"></div>

	<script type="text/javascript">
		var mapOptions = {
			center: [-3.7973471,102.2657887],
			zoom: 13
		}

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

		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: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
		}).addTo(peta);

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

Jika kalian menjalankan file latihan_leafletjs.html di browser (seperti Chrome atau Firefox) dan komputer kalian terkoneksi ke internet, maka akan menampilkan peta seperti gambar berikut ini.

Selamat Belajar LeafletJS #1 – Pengenalan LeafletJS dan Menampilkan Peta, semoga ada manfaatnya.

4 thoughts on “Belajar LeafletJS #1 Pengenalan LeafletJS dan Menampilkan Peta”

  1. cara mengubah peta yang ditampilka gimana ya?? kalo itu kan yg ditiampilin map bengkulu. nah kalo misal mau nampilin peta Palembang, apa yang diubah ya??

  2. kalo saya pake token punya mas bisa, tapi kalo saya ganti dengan token sya sendiri kenapa gak bisa tampil ya mas? kemudian yg ID nya itu menandakan style petanya kan ya? kalo sama2 mapbox.streets gak usah di ganti2 lgi ya id nya?

    mohon pencerahannya

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *