Membuat Peta Pada LeafletJS Dengan PHP dan MySQL

leaflet-logoOk, masih lanjutan dari artikel sebelumnya! kali ini kita akan membuat peta pada LeafletJS dengan PHP dan MySQL. Ternyata untuk membuat marker dari database pada Leaflet ini ga susah-susah amat koq.

LeafletJS Dengan PHP dan MySQL #Database

Pertama kita siapin dulu databasenya…perlu diingat bahwa struktur database ini bakal dipake pada tutorial Leaflet selanjutnya, jadi simpen baik-baik ya 😀

Buat  Database baru dengan nama ‘leaflet’ dan masukkan 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');

LeafletJS Dengan PHP dan MySQL #Database

Kalo databasenya udah siap sekarang kita buat script PHPnya, ketikkan script berikut ini di texteditor kamu

<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);
    // ini adalah copyright, bisa dicopot tapi lebih baik kita hargai sang penciptanya ya :)
    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>

<h3>Peta Leaflet - PHP &amp; MySQL</h3>
<div id="map" style="width: 100%; height: 600px;"></div>

Nah, dari script diatas dijelasin bahwa saya pake script php untuk generate script javascriptnya agar dapat di-looping berdasarkan jumlah lokasi yang ada pada Database. Sebenernya cara ini saya pake karena saya masih belum tahu gimana caranya buat nampilin markernya pake JSON biar ga terlalu berat, mungkin tutorial ke depan saya coba ulik lagi caranya.

Dari script diatas, output yang dihasilkan seharusnya seperti dibawah ini

LeafletJS Dengan PHP dan MySQL

Mudahkan? selamat mencoba dan semoga bermanfaat 😀

download-button

 

 

6 pemikiran pada “Membuat Peta Pada LeafletJS Dengan PHP dan MySQL”

  1. 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.

Tinggalkan komentar