Membuat Peta Sebaran Covid19 di Indonesia dengan PHP dan LeafletJs

Share:
Membuat Peta sebaran covid 19 di Indonesia
Halo semuanya, kembali lagi di sahretech. Pada kesempatan yang berbahagia kali ini saya akan berbagi tutorial keren, yaitu bagaimana cara membuat peta sebaran covid 19 di Indonesia dengan disertia marker. Penasaran?, ayo ikuti selengkapnya berikut ini.



Pada tutorial kali ini kita akan membuat sebuah halaman yang menampilkan peta Indonesia. Di dalam peta tersebut terdapat marker yang jika diklik maka akan menampilkan popup berisi nama daerah, jumlah kasus positif, jumlah sembuh, jumlah dirawat, dan jumlah meninggal.

Tools dan teknologi yang akan digunakan adalah bahasa php, data json covid 19 resmi dari pemerintah dan library peta leafletjs. Untuk hasil akhir dari tutorial ini bisa langsung kalian lihat di bagian paling bawah artikel. Selain itu, saya juga membahas artikel lain terkait data covid 19 yang tidak kalah seru, berikut ini beberapa link tutorialnya.

Baca Artikel Lain ✨
📰 1. Cara Membuat Line Chart dengan php dan Data Covid 19 read more
📰 2. Membuat Diagram Batang Chart Js, Php dan Data Api Corona Indonesia read more
📰 3. Download Aplikasi Pantau Covid 19 Indonesia dan Tutorial Cara Mengambil Data Corona dengan CURL read more


Membuat Peta Sebaran Covid19 di Indonesia dengan php & LeafletJS

1. Buatlah sebuah folder baru di dalam htdocs dengan nama peta-covid atau bebas. Lalu buatlah sebuah file baru di dalamnya dengan nama index.php. Kemudian copy dan paste script di bawah ini ke dalam file tersebut.
    

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Latihan Membuat Peta</title> <!-- leaflet css --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" /> <!-- bootstrap cdn --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <style> /* ukuran peta */ #mapid { height: 600px; } </style> </head> <body> <div class="container mt-5"> <nav class="navbar navbar-light bg-light mb-4"> <span class="navbar-brand mb-0 h1"> Data Sebaran Corona Per Provinsi</span> </nav> <div id="mapid"></div> </div> <!-- leaflet js --> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> <script> // set lokasi latitude dan longitude, lokasinya Indonesia, 5 adalah ukuran peta var mymap = L.map('mapid').setView([-2.548926, 118.0148634], 5); //setting maps menggunakan api mapbox bukan google maps, daftar dan dapatkan token L.tileLayer( 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmFiaWxjaGVuIiwiYSI6ImNrOWZzeXh5bzA1eTQzZGxpZTQ0cjIxZ2UifQ.1YMI-9pZhxALpQ_7x2MxHw', { attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', 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); </script> </body> </html>


Ok, jika file tersebut di buka di browser maka akan menampilkan peta Indonesia seperti gambar di bawah ini. Pada tahap selanjutnya kita akan menggunakan data asli untuk memberikan marker ke dalam peta tersebut.
Cara Membuat Peta Sebaran Covid 19 dengan Leaflet JS
Tampilan Peta Indonesia


2. Selanjtunya tambahkan script ini, di bawah tag <body>. Script ini berfungsi untuk mengambil data json covid 19 menjadi data array yang nantinya bisa kita tampilkan dengan teknik looping.

    

<?php //inisialisai curl untuk digunakan $curl = curl_init(); //set URL curl_setopt($curl, CURLOPT_URL, "https://data.covid19.go.id/public/api/prov.json"); //kembalikan nilai menjadi string curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); //eksekusi curl dan masukan data ke dalam variabel output $output = curl_exec($curl); curl_close($curl); //simpan output ke dalam variabel data $data = json_decode($output, true); ?>



3. Selanjutnya kita perlu menambahkan script di bawah ini di atas tag </script>, script di bawah ini berfungsi untuk menampilkan semua marker menurut provinsi dan membuat popup yang dikusto menggunakan html
    

<?php foreach ($data['list_data'] as $value) { ?> L.marker([ <?php echo $value['lokasi']['lat']; ?>, <?php echo $value['lokasi']['lon']; ?> ] ).addTo(mymap) //data ditampilkan di dalam bindPopup( data ) dan dapat dikustomisasi dengan html .bindPopup( //ini adalah popup yang telah dikustom dengan html ` <?php echo ' <p>'.$value['key'].'</p> <table style="width: 100%; font-size: 10px;" class="table table-borderless table-striped"> <tr> <td>JUMLAH KASUS</td> <td>'.$value['jumlah_kasus'].'</td> </tr> <tr> <td>JUMLAH SEMBUH</td> <td>'.$value['jumlah_sembuh'].'</td> </tr> <tr> <td>JUMLAH MENINGGAL</td> <td>'.$value['jumlah_meninggal'].'</td> </tr> <tr> <td>JUMLAH DIRAWAT</td> <td>'.$value['jumlah_dirawat'].'</td> </tr> </table> '; ?>` ) <?php } ?>



Jika kalian merasa kesulitan dengan penjelasan dan cara paste kodenya. Di bawah ini adalah script penuh yang bisa kalian langsung jalankan.
    

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Latihan Membuat Peta</title> <!-- leaflet css --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" /> <!-- bootstrap cdn --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <style> /* ukuran peta */ #mapid { height: 600px; } </style> </head> <body> <?php //inisialisai curl untuk digunakan $curl = curl_init(); //set URL curl_setopt($curl, CURLOPT_URL, "https://data.covid19.go.id/public/api/prov.json"); //kembalikan nilai menjadi string curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); //eksekusi curl dan masukan data ke dalam variabel output $output = curl_exec($curl); curl_close($curl); //simpan output ke dalam variabel data $data = json_decode($output, true); ?> <div class="container mt-5"> <nav class="navbar navbar-light bg-light mb-4"> <span class="navbar-brand mb-0 h1"> Data Sebaran Corona Per Provinsi</span> </nav> <div id="mapid"></div> </div> <!-- leaflet js --> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> <script> // set lokasi latitude dan longitude, lokasinya adalah Indonesia, 5 adalah besar peta var mymap = L.map('mapid').setView([-2.548926, 118.0148634], 5); //setting maps menggunakan api mapbox bukan google maps, daftar dan dapatkan token L.tileLayer( 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmFiaWxjaGVuIiwiYSI6ImNrOWZzeXh5bzA1eTQzZGxpZTQ0cjIxZ2UifQ.1YMI-9pZhxALpQ_7x2MxHw', { attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', 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); <?php foreach ($data['list_data'] as $value) { ?> L.marker([ <?php echo $value['lokasi']['lat']; ?>, <?php echo $value['lokasi']['lon']; ?> ] ).addTo(mymap) //data ditampilkan di dalam bindPopup( data ) dan dapat dikustomisasi dengan html .bindPopup(` <?php echo ' <p>'.$value['key'].'</p> <table style="width: 100%; font-size: 10px;" class="table table-borderless table-striped"> <tr> <td>JUMLAH KASUS</td> <td>'.$value['jumlah_kasus'].'</td> </tr> <tr> <td>JUMLAH SEMBUH</td> <td>'.$value['jumlah_sembuh'].'</td> </tr> <tr> <td>JUMLAH MENINGGAL</td> <td>'.$value['jumlah_meninggal'].'</td> </tr> <tr> <td>JUMLAH DIRAWAT</td> <td>'.$value['jumlah_dirawat'].'</td> </tr> </table> '; ?>` ) <?php } ?> </script> </body> </html>


Ok, semua tahapan sudah kita lalui saatnya melakukan uji coba. Jalankan project ini dengan menggunakan browser kesayangan kalian. Jika berhasil maka tampilannnya akan tampak seperti ini. 
Membuat Peta Sebarang Covid 19 di Indonesia dengan php dan Leaflet JS
Hasil Akhir Project



Gimana susah atau mudah guys?, sekian tutorial kita kali ini tentang cara membuat peta sebaran covid 19 di Indonesia dengan php dan leaflet js. Semoga bermanfaat, jika ada kesulitan silahkan tanya di kolom komentar atau tanya langsung di fanspage sahretech. Sekian dan terima kasih





No comments

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik