Tutorial Website GIS dengan Leaflet.js: Panduan Langkah demi Langkah – Geographic Information System (GIS) telah menjadi alat yang sangat berharga dalam menganalisis dan memvisualisasikan data spasial. Untuk membuat website GIS yang interaktif, Leaflet.js dapat menjadi pilihan yang sangat baik. Leaflet.js adalah sebuah pustaka JavaScript yang ringan dan mudah digunakan untuk membangun peta interaktif. Dalam panduan ini, kita akan menjelaskan langkah-langkah dalam membuat website GIS sederhana dengan Leaflet.js.
Sebelum memulai, pastikan Anda telah menginstal teks editor seperti Visual Studio Code dan menyiapkan sumber daya seperti peta atau data spasial yang akan ditampilkan.
Buat folder proyek baru dan buat file HTML untuk proyek Anda. Inisialisasikan proyek dengan menambahkan elemen dasar HTML dan tautan untuk pustaka Leaflet.js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web GIS dengan Leaflet.js</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
</head>
<body>
<!-- Konten akan ditambahkan di sini -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
// Kode JavaScript akan ditambahkan di sini
</script>
</body>
</html>
Tambahkan elemen div di dalam <body> untuk menampung peta Leaflet.
<!-- Di dalam <body> setelah <script> --> <div id="map" style="height: 500px;"></div>
Tambahkan kode JavaScript untuk mengonfigurasi peta dan menampilkannya.
// Di dalam <script>
var map = L.map('map').setView([-7.797068, 110.370529], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
Anda dapat menambahkan layer tambahan seperti layer GeoJSON untuk menampilkan data spasial.
// Di dalam <script>
// Contoh GeoJSON data
var geojsonFeature = {
"type": "Feature",
"properties": {
"name": "Contoh Lokasi",
"popupContent": "Ini adalah contoh lokasi."
},
"geometry": {
"type": "Point",
"coordinates": [110.370529, -7.797068]
}
};
L.geoJSON(geojsonFeature).addTo(map);
Anda dapat menambahkan interaktivitas seperti popup pada layer GeoJSON.
// Di dalam <script>
// Di dalam L.geoJSON(geojsonFeature).addTo(map);
function onEachFeature(feature, layer) {
if (feature.properties && feature.properties.popupContent) {
layer.bindPopup(feature.properties.popupContent);
}
}
L.geoJSON(geojsonFeature, {
onEachFeature: onEachFeature
}).addTo(map);
Simpan file HTML Anda dan buka dalam browser. Anda sekarang memiliki website GIS sederhana yang menampilkan peta interaktif menggunakan Leaflet.js.
Dengan mengikuti panduan ini, Anda dapat mulai menjelajahi berbagai fungsi dan kemungkinan yang ditawarkan oleh Leaflet.js dalam membangun aplikasi web GIS yang lebih kompleks. Selamat mencoba!
Terimakasih telah membaca artikel Tutorial Website GIS dengan Leaflet.js: Panduan Langkah demi Langkah semoga bermanfaat bagi anda. Jika Anda membutuhkan jasa pembuatan website GIS bisa menghubungi kami melalui nomor Whatsapp 087823179122. Terimakasih
Di tengah persaingan industri konstruksi yang semakin ketat, website telah menjadi salah satu aset digital…
Di era digital tahun 2026, website sekolah bukan lagi sekadar pelengkap, tetapi sudah menjadi kebutuhan…
Di tahun 2026, website company profile menjadi salah satu kebutuhan utama bagi perusahaan yang ingin…
Di era digital seperti sekarang, website bukan lagi kebutuhan tambahan, melainkan aset penting untuk bisnis.…
Ebook Cuan dari Rumah - Ingin memulai bisnis online tetapi masih bingung harus menjual produk…
Download Aplikasi SPPD Basis Web PHP - Apakah instansi atau perusahaan Anda masih menggunakan Microsoft…