Membuat Peta Pada LeafletJS Dengan PHP dan MySQL

Dipublikasikan oleh El Cicko pada

membuat peta pada leafletjs dengan php dan mysql

Ok, masih lanjutan dari artikel sebelumnya! kali ini kita akan membuat peta pada LeafletJS dengan PHP dan MySQL. Ternyata untuk membuat marker dari database pada LeafletJS ini sangat mudah.

Database

Pertama kita siapkan terlebih dahulu database yang akan kita buat untuk demo pada tutorial kali ini.

Buat database baru dengan nama ‘leaflet‘ dan jalankan query berikut ini.

DROP TABLE IF EXISTS `warung`; 
CREATE TABLE `warung` 
(`id` int(11) NOT NULL AUTO_INCREMENT, 
`nama_warung` varchar(250) NOT NULL, 
`latitude` text NOT NULL, 
`longitude` text NOT NULL, PRIMARY KEY (`id`)) 
ENGINE=InnoDB DEFAULT CHARSET=latin1; 

INSERT INTO `warung` (`id`, `nama_warung`, `latitude`, `longitude`) 
VALUES 
(1,'Warung Sudi Mampir','-6.89344','107.6125'), 
(2,'Warung Samara Pawon','-6.88321','107.60259'), 
(3,'Warung Sindang Rasa','-6.91683','107.61842'), 
(4,'Warung Pemadam Kelaparan','-6.89834','107.6369');

Script

Jika databasenya sudah siap sekarang kita akan membuat script untuk membuat peta pada LeafletJS dengan PHP, ketikkan script berikut ini di text editor kamu.

<html>
<head>
<title></title>
<script src="dist/leaflet.js"></script>
<script>
function peta_awal() {
  // posisi default peta saat diload
  // koordinat dan zoom view peta 
  var map = L.map('map').setView([-6.92202, 107.60645], 12);
  L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>, Modified © <a href="https://elcicko.com">ElCickoBlog</a>'
  }).addTo(map);

  <?php
  require ('config.php');
  
  // query
  $sql = "SELECT * from `warung`";
  $data = mysql_query($sql);
  
  $js = '';
  
  // looping script js ini sesuai dengan jumlah lokasi yang ada pada database
  while($row = mysql_fetch_assoc($data)) {
    $js .= 'L.marker(['.$row['latitude'].', '.$row['longitude'].']).addTo(map).bindPopup("<b>'.$row['nama_warung'].'</b>");';
  }
  
  // menampilkan script js hasil dari looping diatas
  echo $js;
  ?>
  var popup = L.popup();
}
</script>
</head>
<body>
<h3>Peta Leaflet - PHP & MySQL</h3>
<div id="map" style="width: 100%; height: 600px;"></div>
</body>
</html>

Nah, dari script diatas dijelaskan bahwa saya menggunakan script php untuk melakukan generate pada script javascriptnya agar dapat di-looping berdasarkan jumlah lokasi yang ada pada Database.

Sebenarnya cara ini saya gunakan karena saya masih belum tahu bagaimana caranya untuk menampilkan marker menggunakan JSON.

Dari script diatas, output yang dihasilkan seharusnya seperti dibawah ini

Membuat Peta Pada LeafletJS Dengan PHP dan MySQL - 1

Sekian dulu tutorial dari saya tentang cara membuat peta pada LeafletJS dengan PHP dan MySQL. selamat mencoba dan semoga bermanfaat

download-button

El Cicko

Nama saya Riky Fahri Hasibuan, Saya yang biasa nulis di blog ini. Blog ini adalah sarana dokumentasi dari apa yang saya kerjakan dan tidak ada salahnya juga saya sebarkan. Jika artikel di blog bermanfaat, kamu bisa memberikan apresiasi pada blog ini dengan memberikan donasi pada blog ini.

8 Komentar

akang · Mei 21, 2014 pada 1:07 am

mas cara membuat marker yang apa bila kita klik pada peta google map maka muncul kordinat dan nama alamatnya itu gimana caranya tanpa perlu kita search…
jadi pas kita klik kita tau nama alamat yg kita klik itu beserta kordinatnya..mohon pencerahanya mas.
TKS.

    El Cicko · Mei 22, 2014 pada 2:11 pm

    sebenernya bisa, dari data yg diambil dari OpenstreetMap itu nanti outputnya JSON, nah tinggal diambil aja beberapa tag yang diperlukan…mungkin next posting deh ya mas

      Fardia · September 10, 2014 pada 11:59 pm

      Mas mohon bantuannya, saya sudah download program ini tetapi peta nya tidak bisa ditampikan.

      Berto · Februari 25, 2020 pada 2:00 pm

      mas tolong klik marker infor beserta alamat dan nama tempat

Miez · April 16, 2015 pada 11:35 am

wah mantap ni gan.
punya saya membuat aplikasi peta dengan php dan mysql juga gan.
tapi cuman dengan gambar, di gambar tersebut bisa kita buat titik lokasi gan.
di sini ni.
http://takengonscript.blogspot.com/2015/03/cara-membuat-aplikasi-peta-dengan-php.html

Dinda Bestaria · Juni 3, 2016 pada 10:11 am

Terima kasih gan, sangat bermanfaat

rizkianugrah89 · Juni 17, 2016 pada 2:55 pm

mas kenapa error ya ? peta tidak nampil. masalahnya d mna ya ? namun jika saya membuang fungsi <?php peta bisa muncul. sepertinya tidak mau memanggil dataase

Membuat Map Sederhana Dengan LeafletJS · November 28, 2019 pada 3:08 am

[…] Kategori Tutorial LeafletJS Tag gis, leafletjs, map Tinggalkan komentar Navigasi TulisanKostumisasi Tampilan Google MapsMembuat Peta Pada LeafletJS Dengan PHP dan MySQL […]

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *