ngode.in: webgis

Membuat WebGIS Tanpa Coding

3:06 PM

Kebanyakan orang berpikir membuat suatu webgis itu rumit karena membutuhkan keahlian pemrograman tertentu yang harus dipelajari dan dihapal selama bertahun tahun :D

Pada tutorial ini akan dijelaskan cara yang cukup mudah untuk membuat suatu webgis sederhana, kita hanya perlu menggunakan software QGIS yang tersedia secara free dan open source. Untuk karena itu terlebih dahulu kita harus menginstal software QGIS pada komputer kita.

Untuk download installer QGIS bisa langsung ke website aslinya di http://www.qgis.org/en/site/

Buat yang belum tau apa itu QGIS, QGIS adalah sebuah software yang berguna untuk membuat, mengedit, memvisualisasi, analisi dan menyajikan informasi geospasial.

Untuk webgis yang akan kita buat nanti menggunakan bantuan plugin QGIS yang bernama qgis2leaf. Qgis2leaf adalah plugin yang berguna untuk melakukan export peta yang dibuat di QGIS menjadi suatu webgis yang berbasis leaflet (Untuk apa itu leaflet bisa dilihat pada tutorial-tutorial saya sebelumnya).

Berikut langkah-langkah dalam membuat webgis nya.

Pertama-tama tentu anda harus menginstall software QGIS yang telah didownload tadi. Setelah itu buka QGIS desktop dan instal plugin qgis2leaf dengan klik pada menu plugin-Manage and install plugin.

Plugin - Manage and install plugin

Search plugin qgis2leaf, lalu install plugin

search qgis2leaf lalu install

Karena saya sudah menginstall plugin ini sebelumnya jadi tidak muncul pilihan install plugin nya.. :D

Jika proses instalasi terkendala karena ada proxy, bisa diatur pada menu Setting-Options-Network.

Setelah itu kita buat peta nya, sekarang kita akan membuat peta sederhana provinsi indonesia. Untuk SHP provinsi nya bisa googling sendiri, banyak sekali yang telah menyediakan secara gratis.

Jika sudah ada SHP nya kita masukkan ke software QGIS kita, lihat pada menu toolbar di sebelah kiri dan pilih add vector layer

add vector layer

Browse file SHP provinsi indonesia yang telah di download

browse shp

Setelah itu lihat menu di bagian atas,pilih web -> qgis2leaf

menggunakan plugin qgis2leaf

Ketika masuk ke window qgis2leaf, kita dapat mengatur properties dari webgis yang akan kita buat.

qgis2leaflet window

Klik Get Layers, untuk mendapatkan layer yang telah kita masukkan sebelumnya pada software QGIS. Untuk frame width/heights kita gunakan full screen terlebih dahulu, atur Output Project Folder, Webmap name, title, dan subtitle sesuai keinginan anda. Klik OK untuk melakukan export peta QGIS ke WebGIS Leaflet. Dan Hasilnya kurang lebih akan seperti berikut

Mudah bukan, peta webgis hasil export tersebut sudah memiliki fungsi show/hide layer dan juga bisa menampilkan informasi yang ada pada polygon (shp yang kita masukkan sebelumnya) ketika provinsi tertentu di klik.

Sekian tutorial kali ini, semoga bermanfaat,

bersambung,..

GBU

credit to : Ujaval Gandhi Website

GIS

Pencarian Lokasi(Geosearch) Menggunakan Leaflet (Part 2)

8:40 AM

GIS

Pencarian Lokasi(Geosearch) Menggunakan Leaflet

3:32 PM

Kali ini saya akan memperkenalkan plugin leaflet yang bernama Geosearch, plugin ini dapat digunakan untuk mencari lokasi berdasarkan alamat tertentu atau lebih dikenal dengan nama geocoding.

Sebelum itu pastikan anda sudah mempunyai file leaflet dan juga plugin geosearch nya

Leaflet dapat di download di http://leafletjs.com

Dan untuk plugin Geosearch bisa langsung download di https://github.com/smeijer/L.GeoSearch

Secara default kita bisa menggunakan beberapa geocoding service yang disediakan oleh plugin ini, antara lain adalah Esri, Google Maps, dan OpenStreetMap. Untuk tutorial kali ini saya akan memberikan contoh dengan menggunakan geocoding service dari Google Maps, untuk yang lain bisa dicoba sendiri.

Untuk menggunakan plugin ini tentunya pertama kita harus include plugin ini di project leaflet kita.

Css:

<link rel="stylesheet" href="geosearch/src/css/l.geosearch.css" />

js:

<script src="geosearch/src/js/l.control.geosearch.js"></script>

<script src="geosearch/src/js/l.geosearch.provider.google.js"></script>

Sesuaikan link dari file css dan js di atas dengan letak dan nama file plugin Leaflet.Geosearch anda. Selain itu bisa kita lihat juga pada baris ke dua script include bahwa kita menggunakan provider dari google, untuk yang lainnya bisa anda coba sendiri.

Untuk menambahkan plugin ini supaya terlihat di dalam peta cukup gunakan script berikut:

new L.Control.GeoSearch({

provider: new L.GeoSearch.Provider.Google(),

position: 'topcenter',

showMarker: true

}).addTo(map);

Untuk kode lengkap sampai dengan menampilkan peta adalah sebagai berikut:

dan untuk hasilnya kurang lebih seperti berikut:

Cukup mudah bukan, next tutorial masih akan membahas plugin ini, yaitu cara mengetahui koordinat dari marker yang ditampilkan oleh plugin geosearch, tujuannya supaya nantinya koordinat yang ada dapat digunakan untuk pengembangan lebih lanjut seperti routing, penyimpanan alamat, dan lain sebagainya.

nb: jika ada kesalahan pada kodingan lengkapnya bisa diperbaiki sendiri untuk belajar. Ganti scrip dengan script

Sekian, GBU

GIS

Leaflet Awesome Marker

8:33 AM

GIS

Menggunakan Filter (Where Clause) Pada Geoserver

10:45 AM

Dalam Structured Query Language(SQL) kita mengenal adanya WHERE clause ketika melakukan query. WHERE clause biasa digunakan jika kita ingin memberikan kondisi tertentu terhadap query yang kita lakukan. Sama dengan SQL, Filter pada geoserver digunakan ketika kita ingin memberikan kondisi tertentu terhadap data yang ingin kita tampilkan. .

Misal, kita memiliki data peta kabupaten di seluruh indonesia, maka logika yang tepat untuk menampilkan peta kabupaten yang berada di provinsi daerah istimewa Yogyakarta adalah. .

Tampilkan peta jika memiliki kode provinsi sama dengan 34 (kode BPS untuk Provinsi DIY)

Dalam tutorial kali ini saya hanya akan memberikan contoh Comparison Operator saja, jenis Filter yang lain saya belum begitu paham dan mungkin bisa dibaca-baca sendiri di dokumentasi geoservernya. .

http://docs.geoserver.org/latest/en/user/styling/sld-reference/filters.html

Menggunakan Filter (Where Clause) Pada Geoserver

Comparison operator digunakan untuk memberikan kondisi terhadap non-spatial atribute terhadap setiap feature yang ada, berikut beberapa contoh Comparison Operator

Cara menggunakan untuk yang <PropertyIsEqualTo> adalah seperti berikut:


<PropertyIsEqualTo>

<PropertyName>NAME</PropertyName>

<Literal>New York</Literal>

</PropertyIsEqualTo>

Sekarang langsung saja ke contoh penggunaannya, sama seperti contoh sebelumnya, kita akan menampilkan peta kabupaten kota Yogyakarta saja. Maka URL WFS nya adalah

http://localhost:4321/geoserver/belajar/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=belajar:kabupaten&outputFormat=json&filter=<PropertyIsEqualTo><PropertyName>PROVNO<PropertyName><Literal>34</Literal></PropertyIsEqualTo>

pada URL diatas saya merequest Web Feature Service (WFS) dari workspace belajar dan layer kabupaten, dalam layer kabupaten terdapat nama atribut PROVNO dan Literal berisi value dari PROVNO yang akan kita cari. .(34 adalah kode DIY)

Silakan coba Filter diatas pada browser anda, tentunya data peta kabupaten dan workspace geoserver sebelumnya sudah disiapkan dan disesuaikan, maka outputnya jika benar akan menjadi seperti di bawah ini. .

Semoga Bermanfaat, GBU

GIS

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

4:06 PM

Setelah sekian lama akhirnya nulis juga part 2 nya, hhe. .

Tutorial ini adalah lanjutan dari tutorial sebelumnya, . .

PART 1

Sekarang kita akan membuat peta kita tampak lebih menarik lagi dengan menambahkan beberapa plugin leaflet. .

Membuat Peta Tematik Menggunakan Geoserver, MySQL, dan Leaflet

Yang akan kita tambahkan dalam tutorial kali ini adalah sebagai berikut:

Inset peta
Geosearch
Pemilihan Base Map (Layer Provider)
Style

Silakan download terlebih dulu plugin-plugin nya di sini

https://github.com/smeijer/L.GeoSearch

https://github.com/Norkart/Leaflet-MiniMap

https://github.com/leaflet-extras/leaflet-providers

Copy dan extract file-file diatas di folder project kita. .

Setelah itu kita panggil plugin-plugin di atas pada file javascript kita. .

<script src="geosearch/src/js/l.control.geosearch.js"></script>

<script src="geosearch/src/js/l.geosearch.provider.google.js"></script>

<script src="minimap/src/Control.MiniMap.js"></script>

<script src="provider/leaflet-providers.js"></script>

dan css nya. .

<link rel="stylesheet" href="geosearch/src/css/l.geosearch.css" />

<link rel="stylesheet" href="minimap/src/Control.MiniMap.css" />

Sesuaikan pemanggilan plugin dengan nama folder hasil extract

Setelah itu kita hapus dulu base map yang telah kita buat sebelumnya, hapus baris yang ada kata berikut:

Dan tambahkan baris berikut pada function initialize() untuk menampilkan plugin yang telah kita download dan panggil tadi

Jika sudah, maka hasilnya akan menjadi seperti berikut:

Kita bisa ganti-ganti peta dasarnya dengan mengklik di sebelah pojok kanan atas peta

Silakan cek juga geosearch nya bisa digunakan atau tidak, inset peta akan mengikuti lokasi aktif pada peta utama.

Jika dilihat-lihat, menurut saya warna polygon nya kurang mencolok mata, hhe, sekarang kita ubah style nya agar lebih bagus lagi (menurut saya) kalau menurut anda sudah bagus ya tidak apa-apa begitu saja. .

Supaya gampang, kita overwrite saja style lama yang kita buat sebelumnya. .

Ganti style lama menjadi seperti berikut

Selain itu sekalian juga kita buat fungsi untuk mengganti border polygon ketika mouse kita arahkan. .

Tambahkan function berikut di bawah style yang kita ganti tadi, sebelum function initialize()

Setelah itu, untuk memanggil function yang sudah kita buat maka tambahkan baris berikut pada function onEachFeature

Setelah itu coba kita lihat pada browser hasilnya akan seperti berikut

Lebih menarik bukan?? oh iya, saya diatas menggunakan base map nokia satelite, coba juga untuk mengarahkan mouse ke polygon-polygon provinsi untuk mengecek apakah fungsi highlight berjalan dengan baik

Sekian tutorial kali ini, semoga bisa dilanjutkan ke part 3 nya, query kabupaten dan desa di geoserver. .

Semoga bermanfaat, GBU

GIS

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

Cara Install Geoserver

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

http://sleepingtux.blogspot.com/2013/12/membuat-webgis-peta-puskesmas.html

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

http://sleepingtux.blogspot.com/2013/12/leaflet-alternatif-dalam-membuat-webgis.html

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

https://dl.dropboxusercontent.com/u/47464119/batas%20administrasi.rar

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

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

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,

Membuat WebGIS Tanpa Coding

Pencarian Lokasi(Geosearch) Menggunakan Leaflet (Part 2)

Pencarian Lokasi(Geosearch) Menggunakan Leaflet

Leaflet Awesome Marker

Menggunakan Filter (Where Clause) Pada Geoserver

Menggunakan Filter (Where Clause) Pada Geoserver

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

PART 1

Membuat Peta Tematik Menggunakan Geoserver, MySQL, dan Leaflet

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

Menambahkan inset, geosearch, dan pemilihan layer

Membuat WebGIS Menggunakan YII (Part 3-Legenda)

Membuat WebGIS Menggunakan YII (Part 2-Peta Tematik)

PART 1-MENAMPILKAN PETA

Membuat WebGIS menggunakan YII (Part1-Menampilkan Peta)

Follow Us

Labels

Popular Posts

recent posts

Recent Comments

Blog Archive

adsense ngode.in

Instagram