republiccode – Leaflet Js library opensource serta mudah digunakan, berguna untuk membuat debuah peta pada Sistem Informasi Geografis. Membuat Peta Dengan Library Leaflet Js sangat mudah, tersedia berbagai contoh, tutorial dan plugin.
kunjungi https://leafletjs.com/examples.html
untuk membaca Quick Start Guide dapat masuk langsung pada situs resmi leaflet .
langkah pertama membuat sebuah folder pada server, kasus kali ini penulis memberi nama folder “contoh_peta”
penulis menggunakan XAMPP, untuk pengerjaan wajib menjalankan Apache pada tahap ini.
buat sebuah file ekstensi PHP dengan nama peta.php,
pastikan kalian telah paham dengan bahasa PHP dan cara menjalankannya pada server WEB. kalian dapat mengunjungi artikel pembuka dari sesi pembuatan Peta Dengan Library Leaflet Js membuat aplikasi web gis dengan php dan Leaflet JS
agar menampilkan sebuah peta bagian indonesia, harus memiliki latitude dan longitude, untuk mendapatkan data latitude dan lognitude, dapat menggunakan google maps.
sebagai contoh, saya ingin menampilkan peta indonesia bagian kalimantan. cari di google maps, kalimantan selatan.
bagian link adress terdapat latitude dan longitude
“-3.9372941,114.775563” ditampilkan pada link address, disebut latitude dan longitude. -3.9372941 disebut titik koordinat latitude dan 114.775563 disebut titik koordinat longitude.
simpan kedua titik tersebut, masukkan kedalam code
karena kita menggunakan leaflet, perlu load script dan css leaflet.
dalam bagian head masukkan code untuk load aset leaflet js
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
dalam bagian tag body tuliskan code, untuk menampilkan peta
<div id="mapid" style="width: 600px; height: 400px;"></div>
untuk mengatur menampilkan dan tampilan/view peta masukkan code
var mymap = L.map('mapid').setView([-3.9372941, 114.775563], 10);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
pada code
“setView([-3.9372941, 114.775563], 10);”
Bagian untuk set view peta sesuai latitude dan longitude. ganti dengan latitude dan longitude yang telah disimpan, dan bagian terakhir angka 10 adalah skala zoom peta.
code lengkap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<title>Peta</title>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid').setView([-3.9372941, 114.775563], 10);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
</script>
</body>
</html>
hasil
