Membuat WebGIS Peta Puskesmas Gunungkidul Menggunakan Leaflet dan Geoserver

8:20 AM

Setelah sebelumnya saya menjelaskan panjang lebar tentang apa itu leaflet dan apa itu geoserver (Lihat postingan Leaflet, Geoserver, dan Installasi Geoserver). Sekarang mari kita membuat suatu WebGIS dengan menggunakan Leaflet dan Geoserver itu sendiri.

Membuat WebGIS Peta Puskesmas Gunungkidul Menggunakan Leaflet dan Geoserver

WebGIS yang akan kita buat adalah peta Puskesmas di Kabupaten Gunungkidul, WebGIS yang akan kita buat ini memiliki spesifikasi seperti berikut:
  1. Menampilkan marker/pin pada lokasi Puskesmas di Kabupaten Gunungkidul.
  2. Menampillkan Informasi Puskesmas ketika marker di klik.
  3. Melakukan Geocoding terhadap lokasi user.
  4. Memberikan informasi rute terhadap user jika ingin ke puskesmas tertentu.
  5. Menampilkan Polygon Kecamatan di Gunungkidul
Setelah kita tahu spesifikasi yang kita buat, mari sekarang kita belajar bagaimana sistem tersebut bisa berjalan.
Semua data yang kita butuhkan akan kita upload ke Geoserver dalam bentuk SHP, Geoserver lalu akan memberikan service terhadap aplikasi kita dalam bentuk JSON (Bukan SHP lagi). Aplikasi yang menerima data dalam bentuk JSON lalu akan menerjemahkan data-data tersebut menjadi bentuk peta.

Karena semua data disimpan dalam Geoserver, maka pertama yang kita lakukan adalah melakukan upload terhadap data yang kita miliki. Download data yang akan kita gunakan terlebih dahulu jika belum ada.

Setelah kita memiliki datanya, langsung saja kita masuk ke admin page dari Geoserver lalu login
Sekarang mari kita buat workspace baru supaya tidak bingung ketika bekerja dengan banyak SHP.
Workspace -> Add new Workspace
Create Workspace Geoserver
Isi Name dan Namespace URI dengan Latihan, lalu centang Default Workspace supaya nanti kita tidak perlu mengatur lagi workspace kita ketika melakukan upload data. Klik Submit

Setelah itu kita masuk ke Stores -> Add new stores
Pilih Vector Data Sources -> Shapefile
New Vector Data Sourcer Geoserver




Sekarang kita beri nama Data SHP yang kita upload,
Untuk yang puskesmas kita isi Data Source Name nya dengan Puskesmas, anda boleh tidak mengisi description, lalu Browse ke File AlamatPuskesmas yang telah di download tadi untuk mengisi Shapefile Location.
Untuk yang polygon kecamatan juga sama, isi saja Data Source Name nya menjadi KecamatanGK, dan jangan lupa juga untuk mengisi Shapefile Location.
Setelah di Save maka tampilan nya akan menjadi seperti berikut.
New Layer Geoserver







 Klik publish.

New Layer Geoserver











Isi Declared SRS dengan EPSG:4326, SRS Handling dengan Reproject Native to Declared, Compute from Data, Compute from Native Bounds, klik save


Geoserver

Setelah upload kedua data maka tampilannya akan seperti diatas.
Untuk melihat preview layer nya kita bisa melihat melalui Layer Preview -> Klik OpenLayer pada alamatpuskesmas dan anda bisa melihat tampilan berikut.
openlayer geoserver



















Data yang akan kita gunakan dalam bentuk JSON, yang bisa diakses dengan memilih format All Formats->Application/JSON

Saya tidak tahu kenapa JSON yang ada tidak bisa langsung di request menggunakan AJAX dengan JSONp, jadi saya menggunakan php proxy untuk mengakalinya. Berikut kode php proxy nya.
Tentu saja kita harus memiliki Web Server Lokal untuk menggunakan PHP di PC sendiri, buat file webGIS untuk project kita.

save php proxy berikut dengan nama proxypuskesmas.php dan proxykec.php
Jangan lupa untuk mengganti url diatas dengan url masing-masing dari output json milik anda pada Geoserver, selain itu hapus maxFeature=50 yang ada pada url.
Setelah itu jika kita coba proxy yang kita buat berjalan atau tidak dengan mengakses url proxy milik kita pada browser
JSON Proxy Geoserver



















Jika kita bisa melihat format JSON pada browser kita berarti PHP proxy kita berhasil.
:)
Mari sekarang kita munculkan peta pada browser menggunakan leaflet.
Buat index.html pada folder webGIS yang kita buat, dan kodingannya adalah seperti berikut.


Oh iya, kita menggunakan MapQuest sebagi base map kita, jadi silakan mendaftar di mapquest untuk mendapatkan API Key nya, selain itu kita juga menggunakan library JQuery untuk memudahkan dalam menggunakan AJAX.
Berikut hasil dari kode yang kita buat diatas, perhatikan syntax pemanggil external jacascript, ganti dengan backslash dibagian belakangnya, saya tidak bisa menampilkan syntak disini jika pentutup javascript tidak diganti.
leaflet geoserver
Peta diatas sudah bisa menampilkan marker puskesmas, polygon kecamatan gunungkidul, zoom in dan zoom out juga sudah ada.
Sekian tutorial kali ini, untuk fitur yang belum ada akan dilanjutkan pada tutorial berikutnya. .

Membuat WebGIS Peta Puskesmas Gunungkidul Menggunakan Leaflet dan Geoserver (Part 2)

:)
Semoga Bermanfaat, GBU

You Might Also Like

41 comments

  1. mas, file shp-nya kok gak bisa diload di map server ya?

    ReplyDelete
  2. engga bisa di load nya gimana mas?
    saya juga belum pernah pake map server.. tapi saya cek pake geoserver sama QGIS baik-baik saja tuh

    ReplyDelete
    Replies
    1. file shp nya tidak disertai dengan shx dan dbf mas

      Delete
    2. mungkin bisa pakai data lain dulu. . belum sempat upload

      Delete
  3. mantep kang artikelnya, ane juga lagi lagi ada project buat peta kab . . sukses selalu : http://www.tutorhack.com/

    ReplyDelete
  4. https://dl.dropboxusercontent.com/u/47464119/Peta%20puskesmas.rar Ini file shp yang lengkap.. peta puskesmasnya

    ReplyDelete
  5. terima kasih atas info yang menarik ini. saya sudah coba implementasikan seperti petunjuk diatas, tapi di html file nya tidak keluar tampilan apapun... kalau untuk tahap sampai menampilkan .php nya sudah bisa... terima kasih

    ReplyDelete
    Replies
    1. coba lihat di console browser nya pake firebug di firefox atau console google chrome. .biasanya ada pesan errornya

      Delete
  6. pesan yang tampil seperti ini

    * GET http://beta.mapquestapi.com/sdk/leaflet/v0.1/mq-map.js?key=Fmjtd%7Cluur2q6y2l%2Crn%3Do5-9a2auw 503 (Service Unavailable) test.html:14

    * Uncaught ReferenceError: MQ is not defined

    saya masukkan Fmjtd%7Cluur2q6y2l%2Crn%3Do5-9a2auw dari AppKey MapQuestnya...

    terima kasih :)

    ReplyDelete
    Replies
    1. kayaknya mapquest nya ada yang ganti d. . tempat saya juga engga bisa
      coba pake ini aja buat base map nya gan. .
      var map = L.map('map').setView([-1.889306,114.697266], 5);
      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
      }).addTo(map);

      yang map di atas itu dihapus aja semua satu variabel, diganti sama ini

      Delete
    2. This comment has been removed by the author.

      Delete
    3. http://{s}.tile.osm.org/{z}/{x}/{y}.png ambil link nya aja yang jadi image ini,.

      Delete
  7. Berhasil, Terima Kasih banyak...
    :D

    ReplyDelete
  8. " Data yang akan kita gunakan dalam bentuk JSON, yang bisa diakses dengan memilih format All Formats->Application/JSON " <--- Opsi itu ada dimana ya mas? Saya cari2 di menu Geoserver koq gak nemu?

    ReplyDelete
    Replies
    1. ~login dulu kalo belum login
      ~cari menu layer preview di sebelah kiri. .
      ~di sebelah kanan di dalam tabel Layer Preview ada All Format
      ~di bagian WFS ada application/json

      Delete
    2. Sipp mas udah bisa dapet JSON-nya.
      Berikutnya masih bingung di bagian ini mas :

      "Oh iya, kita menggunakan MapQuest sebagi base map kita, jadi silakan mendaftar di mapquest untuk mendapatkan API Key nya, selain itu kita juga menggunakan library JQuery untuk memudahkan dalam menggunakan AJAX." <--- sudah daftar tapi bagaimana cara mendapatkan API Key-nya dan cara memasukkanya ke tutorial ini?

      Mohon bimbingannya ya mas, maklum saya baru belajar bikin webgis.
      Terimakasih sebelumnya.

      Delete
    3. var map = L.map('map').setView([-1.889306,114.697266], 5);
      L.tileLayer('http://%7Bs%7D.tile.osm.org/%7Bz%7D/%7Bx%7D/%7By%7D.png', {
      attribution: '© OpenStreetMap contributors'
      }).addTo(map);

      pake ini aja mas base map nya, engga perlu api key,. .

      Delete
  9. " ambil link nya aja yang jadi image ini "
    image yang mana mas ?
    terus maksd base map nya itu seperti apa ?

    ReplyDelete
    Replies
    1. ar map = L.map('map').setView([-1.889306,114.697266], 5);
      L.tileLayer('', {
      attribution: '© OpenStreetMap contributors'
      }).addTo(map);

      base map itu peta dasar. .

      Delete
  10. maaf mas sy lagi coba,tapi saat mau di publish & sdah disetting sesuai diatas pada saat save ada error begini :

    Oops, something went wrong...

    Sorry, something unexpected happened on the server.

    Here's an error report you can include in a JIRA bug report about this issue:
    org.apache.wicket.WicketRuntimeException: Method onFormSubmitted of interface org.apache.wicket.markup.html.form.IFormSubmitListener targeted at component [MarkupContainer [Component id = resource]] threw an exception at org.apache.wicket.RequestListenerInterface.invoke(RequestListenerInterface.java:193) at org.apache.wicket.request.target.component.listener.ListenerInterfaceRequestTarget.processEvents(ListenerInterfaceRequestTarget.java:73) at org.apache.wicket.request.AbstractRequestCycleProcessor.processEvents(AbstractRequestCycleProcessor.java:92) at org.apache.wicket.RequestCycle.processEventsAndRespond(RequestCycle.java:1250) at org.apache.wicket.RequestCycle.step(RequestCycle.java:1329) at org.apache.wicket.RequestCycle.steps(RequestCycle.java:1436) at org.apache.wicket.RequestCycle.request(RequestCycle.java:545) at org.apache.wicket.protocol.http.WicketFilter.doGet(WicketFilter.java:484) at org.apache.wicket.protocol.http.WicketServlet.doPost(WicketServlet.java:160) at javax.servlet.http.HttpServlet.service(HttpServlet.java:727) at javax.servlet.http.HttpServlet.service(HttpServlet.java:820) at org.springframework.web.servlet.mvc.ServletWrappingController.handleRequestInternal(ServletWrappingController.java:159) at org.springframework.web.servlet.mvc.AbstractController.handleRequest(AbstractController.java:153) at org.springframework.web.servlet.mvc.SimpleControllerHandlerAdapter.handle(SimpleControllerHandlerAdapter.java:48) at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:923) at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:852) at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:882) at org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:789) at javax.servlet.http.HttpServlet.service(HttpServlet.java:727) at javax.servlet.http.HttpServlet.service(HttpServlet.java:820) at org.mortbay.jetty.servlet.ServletHolder.handle(ServletHolder.java:487) at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1093) at org.geoserver.filters.ThreadLocalsCleanupFilter.doFilter(ThreadLocalsCleanupFilter.java:27) at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1084) at org.geoserver.filters.SpringDelegatingFilter$Chain.doFilter(SpringDelegatingFilter.java:74) at org.geoserver.wms.animate.AnimatorFilter.doFilter(AnimatorFilter.java:70) at org.geoserver.filters.SpringDelegatingFilter$Chain.doFilter(SpringDelegatingFilter.java:70)
    ........


    kira2 salahnya apa mas ?

    ReplyDelete
    Replies
    1. maaf, saya juga kurang tau, belum pernah menemukan kesalahan seperti itu. .
      mungkin bisa di cek lagi di file shp, proyeksi peta, atau di bound nya. .terimakasih

      Delete
  11. var map = L.map('map').setView([-1.889306,114.697266], 5);
    L.tileLayer('', {
    attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    utk koding yg diatas diletakkan dimana mas?
    apakah masih harus mendaftar di mapquest setelah pakai koding di atas untuk mendapatkan API KEYnya?

    sya masih kendala saat menampilkan peta di htmlnya mas

    ReplyDelete
    Replies
    1. diletakkan di tempat yang sama dengan bagian memanggil peta mapquest. .

      tidak perlu API key lagi karena base map nya bukan menggunakan mapquest. .
      terimakasih.

      Delete
  12. gan boleh minta sorce code web gis nya ga yg pake google maps..
    yg kira-kira udh full jadi untuk input dan outputnya..mohon dikirim ke email sya ya nie emailnya : viebiant_levina@yahoo.co.id

    ReplyDelete
  13. mantaaap gan,,terima kasih banyak ya gan untuk infonya

    ReplyDelete
  14. Mas kalau di tiap puskesmas di tambahin foto gmana caranya ??

    ReplyDelete
    Replies
    1. di bindpopup tambahin aja kode html img src, html biasa buat nambahin image

      Delete
  15. "Tentu saja kita harus memiliki Web Server Lokal untuk menggunakan PHP di PC sendiri, buat file webGIS untuk project kita."

    bang untuk web server lokal cara bikinnya gmn yaa? maklum nubi,... baru ngikutin mentok sampe bkin ke file json,....

    ReplyDelete
    Replies
    1. Web Server Lokal itu buat ngejalanin file PHP nya..
      coba cari tutorail cara install XAMPP atau WAMP..

      Delete
  16. This comment has been removed by the author.

    ReplyDelete
  17. mas, dalam Qgis ada plugins yang mengkonversi kedalam leaflet. pertanyaannya, bagaimana kemudian leaflef webmap tersebut dapat dipublish kedalam website yang menggunakan CMS joomla / wordpress? kira-kira bisa bikin tutorialnya gak?

    ReplyDelete
  18. mas,klo data marker puskesmas nya d simpan di database SQL, caranya gmna ya agar bisa tampil ?
    terimakasih....

    ReplyDelete
  19. Terima kasih Mas. Ide proxy-nya, mengatasi masalah cors antara client ol3 dan server pada geoserver yang sama alami beberapa hari ini.

    ReplyDelete
    Replies
    1. ya sama2, coba gunakan autentikasi untuk keamanan data

      Delete
  20. var myStyle = {
    //warna
    "color": "#00ff00",
    //transparasi
    "opacity": 0.1,
    //tebal garis
    "weight": 4,


    gan itu emang pake tanda kutip dua ya? kok punya ane gak muncul ya? atau gara2 port geoserver sama server lokalnya beda? momhon pencerahannya gan

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. This comment has been removed by the author.

      Delete
    3. This comment has been removed by the author.

      Delete
    4. basemap udah muncul gan, tapi layer kecamatan sama titik puskesmas nya masih belum muncul. padahal script ane udah sama kaya agan yg di atas.. mohon pencerahannya gan

      Delete
  21. gan kalau misal mau nambah data puskesmas tp ngambilnya dari database sql itu gmn caranya?

    ReplyDelete
  22. maaf mas mau tanya soalnya masih awan soal geoserver, itu nulias codingannya pake aplikasi apa mas?

    ReplyDelete