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.
index.php (File utama untuk menampilkan peta).style.css (File CSS untuk styling tambahan).script.js (File JavaScript untuk mengatur logika peta).<!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> <div> untuk menampilkan 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); L.map() untuk membuat peta.const marker = L.marker([-7.797068, 110.370529]).addTo(map);
marker.bindPopup("<b>Selamat Datang!</b><br>Ini adalah lokasi kami.").openPopup(); locations di MySQL dengan kolom: id, name, latitude, longitude, description.<?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);
});
}); body { font-family: Arial, sans-serif; }
h1 { text-align: center; color: #333; }
#map { margin: 20px auto; border: 2px solid #ccc; } 
<!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> index.html.index.html di browser (Chrome, Firefox, dll.).Terimakasih telah membaca artikel Membuat Peta Lokasi Sederhana dengan PHP dan Leaflet JS, semoga bermanfaat!
If you're searching for the latest Citrix Workspace download, you've come to the right place.…
If you're looking for the UPS WorldShip download, you've come to the right place. UPS…
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.…