Membuat Peta Lokasi Sederhana dengan PHP dan Leaflet JS: Menampilkan Marker dan Informasi Lokasi

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
1. 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.
2. Mudah Digunakan:
  - API yang sederhana dan dokumentasi yang lengkap.
  - Cocok untuk pemula maupun pengembang berpengalaman.
3. Interaktif:
  - Mendukung zoom, drag, dan interaksi pengguna lainnya.
  - Memungkinkan penambahan marker, popup, dan layer interaktif.
4. 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.
5. Ekstensif:
  - Banyak plugin tersedia untuk menambahkan fitur seperti clustering, heatmap, routing, dll.
  - Komunitas yang aktif dan terus berkembang.
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.

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 locations di MySQL dengan kolom: id, name, latitude, longitude, description.
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.
Buka di Browser:
- Buka file index.html di browser (Chrome, Firefox, dll.).
- Anda akan melihat peta dengan marker di Yogyakarta.