Membuat WebGIS Tanpa Coding (Part 1)

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

Pencarian Lokasi(Geosearch) Menggunakan Leaflet (Part 2)

Sesuai dengan tutorial sebelumnya, kali ini saya akan menunjukkan cara untuk menangkap koordinat hasil geocoding melalui plugin geosearch.

Sebelumnya download l.control.geosearch.js yang sudah saya edit

Setelah itu, overwrite file l.control.geosearch.js yang ada sebelumnya dengan file yang di atas.
Lokasi nya secara default berada pada src/js/l.control.geosearch.js

Setelah itu buat function baru di luar function initialize yang telah dibuat sebelumnya seperti berikut:



Jalankan file, coba cari lokasi dan hasilnya akan menjadi seperti berikut

Geosearch plugin leaflet
Geosearch dengan popup lokasi
variabel latitude dan longitude pada function showlokasi diatas adalah latitude dan longitude (koordinat) dari marker yang ada. Pengembangan lebih lanjut dari aplikasi bisa menggunakan latitude dan longitude yang telah didapat.
Selamat Mencoba, GBU

Pencarian Lokasi(Geosearch) Menggunakan Leaflet

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

Leaflet Awesome Marker

Setelah beberapa bulan tidak posting tutorial baru, akhirnya saya meniatkan diri untuk menulis tutorial lagi. fuih..

Langsung saja, tutorial kali ini kita akan mempercantik marker yang ada pada leaflet menggunakan plugin awesome marker, contoh marker yang bisa kita buat adalah seperti berikut:
From https://github.com/lvoogdt/Leaflet.awesome-markers
Lebih menarik bukan??

Untuk membuat marker yang seperti gambar diatas cukuplah mudah.
Pertama, tentu saja download dulu bahan-bahannya


Include semua plugin yang ada di dalam project yang kita buat.
dan code sederhananya kurang lebih seperti ini..

note: ganti scrip dengan script
simpan dan jalankan, hasilnya akan menjadi seperti ini,

awesome marker tutorial

Jika diperhatikan icon yang kita buat tadi dapat dibuat dengan menggunakan bantuan font awesome, sebenarnya kita bisa menggunakan twitter bootstrap juga untuk jenis icon lainnya. Silakan lihat dokumentasi leaflet awesome marker untuk mencobanya.

Terimakasih, GBU..

Menggunakan Filter (Where Clause) Pada Geoserver

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

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
<PropertyIsEqualTo>
<PropertyIsNotEqualTo>
<PropertyIsLessThan>
<PropertyIsLessThanOrEqualTo>
<PropertyIsGreaterThan>
<PropertyIsGreaterThanOrEqualTo>
<PropertyIsLike>
<PropertyIsNull>
<PropertyIsBetween>

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. .
filter geoserver
Semoga Bermanfaat, GBU


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

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

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:
tematik indonesia leaflet

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

tematik indonesia leaflet

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

tematik indonesia

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


Cara Menggunakan Kalkulator Pada Buku Saku Statistik

Pilih Menu Kalkulator
Jika Belum Pernah Menginput data pada variabel, masukkan terlebih dahulu datanya, kita bebas memilih variabel mana yang akan digunakan untuk menyimpn

 Input Datanya, jika sudah pilih simpan untuk menyimpan datanya, jika tidak dipilih maka data yang diinput tidak akan disimpan.

 Data bisa juga di edit, pilih data nomor berapa lalu edit valuenya

Sekarang silakan pilih menu Deskriptif, maka akan keluar tampilan memilih variabel seperti berikut, pilih variabel yang ada isinya, atau sebelumnya telah anda input datanya.

 Klik OK, lalu akan keluar hasilnya seperti ini.
 Sekarang coba pilih menu regresi korelasi, maka akan keluar tampilan untuk memilih 2 variabel, pastikan 2 variabel tersebut memiliki jumlah data/N yang sama.
 Klik OK maka hasilnya akan seperti berikut
 Silakan coba pilih menu SUM, maka akan keluar pilihan untuk memilih 1 atau 2 variabel
 Jika Yang dipilih satu variabel maka hasilnya seperti ini.
 Jika yang dipilih 2 variabel maka hasilnya akan seperti berikut, ingat, jumlah data tiap variabel harus sama

Sekian, Semoga bermanfaat, GBU

Tutorial Voice Recognition dan Text To Speech Android

Holla,
kali ini kita akan belajar untuk membuat voice recognition dan text to speech app di android, buat yang belum tau apa arti dari kedua hal berikut, akan saya jelaskan sedikit. .

Voice Recognition : Adalah proses pengenalan suara ke dalam bentuk text. .
Text To Speech : Adalah proses pembacaan suatu kata, jadi misalnya ada suatu tulisan maka device akan membaca tulisan itu dengan bersuara. .


Tutorial Voice Recognition dan Text To Speech Android

Pertama-tama tentunya kita buat dulu project android nya. .
Jika project android sudah dibuat, berikut xml tampilan dari main layoutnya. .

dan berikut kode java nya, saya langsung meletakkan nya pada main activity agar mudah


Sedikit penjelasan tentang fungsi dari tiap baris kode yang ada sudah saya sediakan di atas. .
Sekarang coba kita jalankan aplikasi yang sudah dibuat, jika xml di atas benar maka tampilannya akan seperti berikut

speech to text android
Tampilan awal aplikasi sederhana kita
ketik kalimat lalu tekan tombol say it untuk mengubahnya menjadi speech

voice recognition android
Jika tombol yang bergambar microphone ditekan maka device akan segera merekam suara
hasil rekaman akan di tampilkan dalam bentuk tulisan di bawah tombol\

Jangan lupa pastikan text to speech terinstall pada HH android yang digunakan untuk membuat aplikasi ini. .
Semoga bermanfaat, GBU

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

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

Menggunakan AppWraper dari Vserv untuk Monetize Aplikasi

Holla, kali ini saya akan membagikan pengalaman yang baru saja saya coba yaitu menampilkan iklan dari Vserv menggunakan AppWraper. .
Saya mengetahui tentang vserv ketika mengikuti acara Intel beberapa saat lalu, di acara itu dijelaskan bahwa kita bisa dengan mudah memasang iklan dengan menggunakan AppWraper. .

Menggunakan AppWraper dari Vserv untuk Monetize Aplikasi

Pertama-tama kita daftar terlebih dahulu ke http://www.vserv.mobi/ , kita bisa menggunakan google+ ataupun facebook id untuk login. .

Setelah itu kita bisa membuat add zone baru, ikuti petunjuk yang ada disana , konfigurasikan sesuai dengan aplikasi anda. 
vserv add zone


Setelah itu kita bisa download appwraper nya. .oh iya saya sekarang akan lebih spesifik menjelaskan untuk memasang iklan spesifik pada platform android, mungkin untuk yang lain tidak begitu berbeda.

Extract Appwraper, disini saya akan menjelaskan cara yang menurut saya lebih mudah untuk memasang iklan, dibandingkan menggunakan GUI.jar saya lebih suka menggunakan Vservappwrapperandroid.exe.

Pertama-tama buka folder conf untuk menkonfigurasi aplikasi appwrappernya dalam memasang iklan, berikut konfigurasinya di config.txt

blockAds=false
cache=true
codeSigning=self
keyStoreName=**Nama Keystore Android anda
aliasName=**Alias Name
storePassword=**Password Store
keyPassword=**Password Key
deleteRawAppsOnSuccess=false
locationAds=true
moveNonApkResources=false
showAt=both
viewMandatory=false
wrapAnalytics=false
wrapFirstLaunchNotifier=false
zoneId=**Zone Id anda
staticAdPosition_start=0
staticAdPosition_end=0
staticAdOnlyOnFailure_start=false
staticAdOnlyOnFailure_end=false

Perhatikan huruf yang dicetak tebal dengan diawali tanda **, tambahkan jika belum ada dalam file config.txt dan sesuaikan dengan aplikasi anda. Zone Id didapat ketika anda menambahkan iklan pada dashboard ketika selesai add zone tadi.

Oh iya, jangan lupa juga letakkan keystore android anda pada folder CodeSigning yang ada pada folder AppWrapper.

Letakkan juga aplikasi yang akan anda pasang iklannya di folder RawApps.

appwrapper

Setelah itu jalankan VservAppWrapperAndroid.exe untuk memulai proses pemasangan iklan.
Akan keluar tampilan command line, dan jika success akan ada pemberitahuannya, Jika Success maka aplikasi yang sudah dipasang iklannya akan berada pada folder WrappedApps

Sekian pengalaman saya kali ini, semoga bermanfaat, GBU