Membuat Peta Lokasi Sederhana dengan PHP dan Leaflet JS: Menampilkan Marker dan Informasi Lokasi
Categoriestutorial website
Anda ingin Membuat Peta Lokasi Sederhana dengan PHP dan Leaflet JS? Saya akan menjelaskan secara detail dan mudah agar anda bisa mengerti setiap detail kode yang dibuat. simak selengkapnya artikel ini.
1. Pendahuluan
- Apa itu GIS?
Geographic Information System (GIS) atau Sistem Informasi Geografis (SIG) adalah sistem yang dirancang untuk mengumpulkan, menyimpan, menganalisis, dan memvisualisasikan data yang terkait dengan lokasi geografis. GIS menggabungkan data spasial (berbasis lokasi) dengan data atribut (informasi deskriptif) untuk memberikan pemahaman yang lebih mendalam tentang pola, hubungan, dan tren yang terkait dengan geografi. - Apa itu Leaflet JS?Leaflet JS adalah library JavaScript open-source yang ringan dan powerful untuk membuat peta interaktif yang dapat disematkan di website. Dikembangkan oleh Vladimir Agafonkin, Leaflet dirancang untuk menjadi sederhana, cepat, dan mudah digunakan, sambil tetap menyediakan fungsionalitas yang lengkap untuk menampilkan dan memanipulasi peta.
Fitur Utama Leaflet JS
- Ringan dan Cepat:
- Ukuran file kecil (sekitar 42 KB untuk versi minified) sehingga cepat di-load.
- Performa yang optimal bahkan untuk peta dengan banyak data.
- Mudah Digunakan:
- API yang sederhana dan dokumentasi yang lengkap.
- Cocok untuk pemula maupun pengembang berpengalaman.
- Interaktif:
- Mendukung zoom, drag, dan interaksi pengguna lainnya.
- Memungkinkan penambahan marker, popup, dan layer interaktif.
- Fleksibel:
- Dapat diintegrasikan dengan berbagai sumber data peta (tile layer) seperti OpenStreetMap, Mapbox, Google Maps, dll.
- Mendukung format data geospasial seperti GeoJSON, KML, dan lainnya.
- Ekstensif:
- Banyak plugin tersedia untuk menambahkan fitur seperti clustering, heatmap, routing, dll.
- Komunitas yang aktif dan terus berkembang.
- Ringan dan Cepat:
- Tujuan Tutorial
Membuat peta sederhana yang menampilkan lokasi tertentu dengan marker dan popup informasi.
2. Persiapan
- Tools yang Dibutuhkan:
- Text Editor (VS Code, Sublime Text, dll.)
- XAMPP atau server lokal untuk menjalankan PHP.
- Browser modern (Chrome, Firefox, dll.).
- File yang Akan Dibuat:
index.php(File utama untuk menampilkan peta).style.css(File CSS untuk styling tambahan).script.js(File JavaScript untuk mengatur logika peta).
3. Membuat Peta Dasar dengan Leaflet JS
- Mengatur Struktur HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Peta Lokasi Sederhana</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
#map { height: 500px; }
</style>
</head>
<body>
<h1>Peta Lokasi Sederhana</h1>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="script.js"></script>
</body>
</html>
- Menambahkan Leaflet JS:
- Menjelaskan cara mengimpor library Leaflet JS melalui CDN.
- Membuat elemen
<div>untuk menampilkan peta.
- Inisialisasi Peta:
// script.js
const map = L.map('map').setView([-7.797068, 110.370529], 13); // Koordinat dan zoom level
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
-
- Menjelaskan fungsi
L.map()untuk membuat peta. - Menambahkan tile layer dari OpenStreetMap.
- Menjelaskan fungsi
4. Menambahkan Marker dan Popup Informasi
- Menambahkan Marker:
const marker = L.marker([-7.797068, 110.370529]).addTo(map);
-
- Menjelaskan cara menambahkan marker di koordinat tertentu.
- Menambahkan Popup Informasi:
marker.bindPopup("<b>Selamat Datang!</b><br>Ini adalah lokasi kami.").openPopup();
-
- Menjelaskan cara menambahkan popup informasi yang muncul saat marker diklik.
5. Menyimpan Data Lokasi dengan PHP (Opsional)
- Membuat Database Sederhana:
- Membuat tabel
locationsdi MySQL dengan kolom:id,name,latitude,longitude,description.
- Membuat tabel
- Mengambil Data dari Database:
<?php
$conn = new mysqli('localhost', 'root', '', 'gis_db');
$query = $conn->query("SELECT * FROM locations");
$locations = $query->fetch_all(MYSQLI_ASSOC);
echo json_encode($locations);
?>
Menampilkan Data di Peta:
fetch('data.php')
.then(response => response.json())
.then(data => {
data.forEach(location => {
L.marker([location.latitude, location.longitude])
.bindPopup(`<b>${location.name}</b><br>${location.description}`)
.addTo(map);
});
});
6. Menambahkan Styling dan Interaksi Tambahan
- Menambahkan CSS untuk Mempercantik Tampilan:
body { font-family: Arial, sans-serif; }
h1 { text-align: center; color: #333; }
#map { margin: 20px auto; border: 2px solid #ccc; }
- Menambahkan Fitur Zoom dan Interaksi:
- Menjelaskan cara mengatur zoom level dan interaksi peta.
7. Kesimpulan
- Ringkasan:
- Anda telah berhasil membuat peta sederhana dengan Leaflet JS dan PHP.
- Menambahkan marker dan popup informasi.
- Opsional: Menampilkan data dari database.
- Saran Pengembangan:
- Menambahkan fitur seperti clustering, geocoding, atau heatmap.
- Mengintegrasikan API eksternal untuk data real-time.
Contoh Hasil Akhir:
Contoh source lengkap :
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Peta Lokasi Sederhana</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #333;
margin-top: 20px;
}
#map {
height: 500px;
width: 90%;
margin: 20px auto;
border: 2px solid #ccc;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>Peta Lokasi Sederhana</h1>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
// Inisialisasi peta
const map = L.map('map').setView([-7.797068, 110.370529], 13); // Koordinat Yogyakarta
// Menambahkan tile layer dari OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Menambahkan marker
const marker = L.marker([-7.797068, 110.370529]).addTo(map);
// Menambahkan popup informasi
marker.bindPopup("<b>Selamat Datang di Yogyakarta!</b><br>Ini adalah kota budaya dan pendidikan.").openPopup();
</script>
</body>
</html>
2. Cara Menjalankan
- Simpan Kode:
- Buat file baru dengan nama
index.html. - Salin dan tempel kode di atas ke dalam file tersebut.
- Buat file baru dengan nama
- Buka di Browser:
- Buka file
index.htmldi browser (Chrome, Firefox, dll.). - Anda akan melihat peta dengan marker di Yogyakarta.
- Buka file
Terimakasih telah membaca artikel Membuat Peta Lokasi Sederhana dengan PHP dan Leaflet JS, semoga bermanfaat!
