Cara menggunakan source code map php

Assalamu'alaikum wr. wb.

Selamat sore. Kali ini saya akan mendemokan kembali aplikasi yang lain, yaitu aplikasi Sistem Informasi Geografis / GIS untuk Pemetaan Lokasi SMK di Kabupaten Pati dengan menggunakan Bootstrap, PHP ekstensi PDO [PHP 7] , database MariaDB [versi baru MySQL], dan Google Maps API. Aplikasi ini masih lumayan simple, tetapi siapa tau bisa memberikan sedikit referensi kepada teman-teman yang kebetulan sedang mengerjakan tugas yang sama.

Kira-kira tampilan peta nya seperti ini [titik maps nya dinamis sesuai database].

OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', maxZoom: 20, id: 'mapbox/streets-v11', //menggunakan peta model streets-v11 kalian bisa melihat jenis-jenis peta lainnnya di web resmi mapbox tileSize: 512, zoomOffset: -1, accessToken: 'your.mapbox.access.token' }].addTo[mymap];

Lalu save project dan coba jalankan di browser, maka hasilnya akan tampak seperti gambar di bawah ini. Selanjutna kita akan membuat fungsi popup saat peta diklik dan untuk form input yang ada di sebelah kiri halaman belum dapat berfungsi karena file prosesnya belum kita buat.

Tampilan peta

5. Buat Fungsi Untuk Memunculkan Popup Latitude dan Longitude

Copy script di bawah ini dan pastkan tepat sebelum tag paling terakhir pada file index.php.

        


 // buat variabel berisi fugnsi L.popup 
    var popup = L.popup[];

    // buat fungsi popup saat map diklik
    function onMapClick[e] {
        popup
            .setLatLng[e.latlng]
            .setContent["koordinatnya adalah " + e.latlng
                .toString[]
                ] //set isi konten yang ingin ditampilkan, kali ini kita akan menampilkan latitude dan longitude
            .openOn[mymap];

        document.getElementById['latlong'].value = e.latlng //value pada form latitde, longitude akan berganti secara otomatis
    }
    mymap.on['click', onMapClick]; //jalankan fungsi

Lalu save project kalian dan coba jalankan di browser, maka hasilnya akan tampak seperti gambar di bawah ini. Coba kalian klik di sembarang tempat pada bagian peta maka sebuah popup dengan info latitude dan longitude akan muncul. 

Kalian juga coba perhatikan form input yang ada di samping halaman, form tersebut akan berganti secara dinamis ketika kita mengklik suatu tempat di dalam peta. data tersebut akan kita gunakan nantinya untuk memberikan marker pada sebuah peta.

Tes popup tampil latitude, longitude

Dan untuk form input yang berada di sebelah kiri halaman belum dapat berfungsi karena file prosesnya belum kita buat.File proses akan kita buat pada tahap ke-7

6. Buat Fungsi Untuk Memunculkan Data Lokasi dari Database

Selanjutnya, untuk dapat menampilkan data lokasi seperti nama tempat, kategori tempat, dan keterangan tempat maka kita perlu menambahkan script berikut ini tepat sebelum tag paling akhir pada file index.php.

 //melooping data menggunakan while

    //menggunakan fungsi L.marker[lat, long] untuk menampilkan latitude dan longitude
    //menggunakan fungsi str_replace[] untuk menghilankan karakter yang tidak dibutuhkan
    L.marker[[]].addTo[mymap]

            //data ditampilkan di dalam bindPopup[ data ] dan dapat dikustomisasi dengan html
            .bindPopup[``]

Jika dijalankan, maka hasilnya akan sama seperti proses sebelumnya. Penambahan fungsi pada step kali ini akan menampilkan data yang didapatkan dari database, tapi karena datanya belum ada maka peta tidak menampilkan tanda[marker] apapun.

7. Terakhir!, Buat File proses.php

Tahap terakhir dari tutorial ini adalah membuat file proses dan isinya. File proses ini berfungsi untuk menyimpan data yang kita kirimkan dari form. Buatlah sebuah file baru dengan nama proses.php lalu isi file tersebut dengan script di bawah ini.

 //melooping data menggunakan while

        //menggunakan fungsi L.marker[lat, long] untuk menampilkan latitude dan longitude
        //menggunakan fungsi str_replace[] untuk menghilankan karakter yang tidak dibutuhkan
        L.marker[[]].addTo[mymap]

                //data ditampilkan di dalam bindPopup[ data ] dan dapat dikustomisasi dengan html
                .bindPopup[``]


        

    

proses.php