Membuat Peta Tematik Menggunakan Geoserver, MySQL, dan Leaflet (Peta Jumlah Penduduk) PART 1

9:23 PM

Kali ini kita akan membuat peta jumlah penduduk indonesia menggunakan Geoserver, MySQL, dan Leaflet. Untuk yang belum mengerti cara untuk menginstall geoserver, silakan baca postingan saya sebelumnya


Dan berikut cara untuk membuat workspace,store data shp nya dan membuat php proxy untuk outpun json pada WFS nya.,


Dan kalau masih belum tau Leaflet itu apa bisa baca juga postingan berikut:


Ok, jika sudah siap kita bisa siapkan peta nya, dapat di download di sini


Pertama tentunya kita buat workspacenya dan store data shp nya. .
tempat saya workspace nya saya beri nama indonesia dan store layer nya saya sesuaikan menjadi seperti ini
Layer Preview Geoserver

Jangan lupa juga proyeksi nya gunakan WGS84, jika sudah dicek satu per satu dan ada hasilnya mari sekarang kita buat proxy server nya untuk memanggil peta.
proxy di atas agak berbeda dengan postingan saya sebelumnya karena saya menggunakan filter dan 3 proxy sekaligus dijadikan dalam satu file php.

Sekarang kita siapkan data sql nya. .

Setelah download import data sql nya, nama database nya adalah sensus, disarankan menggunakan command sql langsung di command line, atau jika ingin menggunakan phpmyadmin rubah maximal upload size nya. .

Sekarang kita sediakan service php yang untuk memanggil database. Data yang kita punya adalah by desa sedangkan pada part 1 ini kita hanya akan belajar sampai pada level provinsi dulu, oleh karena itu kita harus melakukan pengelompokkan desa-desa tersebut berdasarkan provinsi nya dan juga menjumlahkan jumlah penduduk tiap desa tersebut berdasarkan provinsi.
Berikut kode php yang akan kita gunakan, simpan dengan nama datasql.php


Silakan test proxy dan service yang sudah dibuat tadi dengan dibuka melalui browser, jika muncul data-data provinsi yang berformat json, maka langkah yang dilakukan sudah benar.
Jika kita sudah mempunyai service php yang memanggi data peta dan data sensus maka step berikutnya adalah menampilkan nya menggunakan leaflet.
jangan lupa juga memanggil library leaflet yang sudah kita download, selain leaflet saya juga menggunakan library jquery untuk memudahkan pekerjaan. .
<title>Peta Jumlah Penduduk Indonesia</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
    #map{ height: 100% } 
</style>
<link rel="stylesheet" href="leaflet/leaflet.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="leaflet/leaflet-src.js"></script>
Letakkan kode diatas pada head html anda. .
Berikut kode javascript yang digunakan untuk menampilkan peta

Letakkan kode diatas pada head html anda juga dan pada body html ubah menjadi seperti berikut
<body onload="initialize()">

<div id="map"></div>

</body>

Ketiga baris html diatas digunakan untuk memanggil function initialize() pertama kali ketika halaman di load. .
Sekarang kita test peta tematik jumlah penduduk indonesia yang kita buat pada browser. .

geoserver leaflet tematik indonesia


Jika muncul peta seperti diatas maka langkah yang dilakukan pada tutorial part 1 ini sudah benar, silakan klik provinsi tertentu untuk mengecek apakah popup info window nya keluar atau tidak. .

Sekian tutorial kali ini, silakan lanjutkan ke part berikutnya,

Menambahkan inset, geosearch, dan pemilihan layer 

semoga bermanfaat, GBU. . 

You Might Also Like

15 comments

  1. Kok engga' bisa diunduh y petanya batas administratifnya?

    ReplyDelete
  2. iya, ga bisa di download petanya dr dropbox

    ReplyDelete
  3. mas peta dari dropboxnya tidak bisa di download apa ada saran karena kita mau coba, tks

    ReplyDelete
  4. Mantap gan..
    http://takengonscript.blogspot.com/2015/03/cara-membuat-aplikasi-peta-dengan-php.html

    ReplyDelete
  5. minta file administratifnya mas ,,, muhammadiqbalnoor@gmail.com

    ReplyDelete
    Replies
    1. peta adminsitratif nya mungkin bisa googling dulu, saya belum sempat upload ulang karena banyak pekerjaan

      Delete
  6. mas ,,, mohon di jelasin yang function onEachFeature(feature, layer) ....

    ReplyDelete
    Replies
    1. function on Each Feature digunakan untuk mengiterasi setiap fitur dalam suatu layer. Misal Ada peta wilayah adminsitratif indonesia yang terdiri dari beberapa provinsi. nah untuk menentukan behavior atau event di setiap provinsi maka menggunakan fungsi ini.

      Misal pada kasus contoh diatas mewarnai provinsi berdasarkan jumlah penduduk.
      Secara mudah yang dilakukan program seperti ini:
      1.menggabungkan data dari geoserver dengan SQL berdasarkan kode provinsi
      2.Jika kode provinsi nya sudah sama maka dilakukan proses klasifikasi warna berdasarkan jumlah penduduk menggunakn if (jika penduduk kurang dari sekian maka warnannya ini, dll)
      Karena langkah diatas kode nya diletakkan pada on each feature maka pada setiap provinsi akan melakukan langkah2 diatas sehingga nanti muncul seperti gambar terakhir pada tutorial

      Delete
  7. mas cara menginstal leaflet gimna ya?

    ReplyDelete
    Replies
    1. tinggal panggil file external js biasa aja gan
      script src="leaflet/leaflet-src.js"></script

      Delete
  8. mas ,kode php buat datasql.php nya kok ga ada ya??

    ReplyDelete
  9. gan, itu di shp peta data atributnya apa aja ya itu?

    ReplyDelete
  10. ini udah bisa nampilin provinsi gan. untuk menampilkan yang kabupaten gimana? saya sudah coba tapi pas mau nampilin basemap malah gak muncul.
    url: 'http://localhost/tesskripsi_proxy/proxyjogja.php?id=2',
    type: 'POST',
    dataType: "json",

    ReplyDelete
  11. ngetik scriptnya pake aplikasi apa itu gan?
    maaf masih newbie

    ReplyDelete
  12. mas boleh minta file SQL nya,...
    kalau boleh lansung kirim ke muamar.ikhsan19@gmail.com

    ReplyDelete