Membuat WebGIS Peta Puskesmas Gunungkidul Menggunakan Leaflet dan Geoserver

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

41 comments

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

Reply

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

Reply

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

Reply

file shp nya tidak disertai dengan shx dan dbf mas

Reply

mungkin bisa pakai data lain dulu. . belum sempat upload

Reply

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

Reply

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

Reply

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

Reply

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 :)

Reply

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

Reply
This comment has been removed by the author.

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

Reply

Berhasil, Terima Kasih banyak...
:D

Reply

" 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?

Reply

~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

Reply

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.

Reply

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

Reply

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

Reply

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

base map itu peta dasar. .

Reply

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 ?

Reply

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

Reply

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

Reply

diletakkan di tempat yang sama dengan bagian memanggil peta mapquest. .

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

Reply

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

Reply

mantaaap gan,,terima kasih banyak ya gan untuk infonya

Reply

Mas kalau di tiap puskesmas di tambahin foto gmana caranya ??

Reply

"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,....

Reply

di bindpopup tambahin aja kode html img src, html biasa buat nambahin image

Reply

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

Reply
This comment has been removed by the author.

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?

Reply

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

Reply

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

Reply

ya sama2, coba gunakan autentikasi untuk keamanan data

Reply

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

Reply
This comment has been removed by the author.
This comment has been removed by the author.
This comment has been removed by the author.

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

Reply

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

Reply

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

Reply

Post a Comment