Press "Enter" to skip to content

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

7 Comments

  1. akang akang Mei 21, 2014

    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 El Cicko Post author | Mei 22, 2014

      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 Fardia September 10, 2014

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

  2. Dinda Bestaria Dinda Bestaria Juni 3, 2016

    Terima kasih gan, sangat bermanfaat

  3. rizkianugrah89 rizkianugrah89 Juni 17, 2016

    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

  4. […] 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 *