ngode.in: 2014

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

Android

Cara Menggunakan Kalkulator Pada Buku Saku Statistik

11:42 PM

Android

Tutorial Voice Recognition dan Text To Speech Android

3:24 PM

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,

Menambahkan inset, geosearch, dan pemilihan layer

semoga bermanfaat, GBU. .

Android

Menggunakan AppWraper dari Vserv untuk Monetize Aplikasi

10:18 AM

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.

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.

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

alpro

Facing the Error

8:11 AM

Seringkali kita menghadapi error ketika mengerjakan suatu aplikasi atau project. .

yang menjadi pertanyaan ketika menghadapi suatu error pasti adalah bagaimana cara memperbaikinya. .

"how to fix this!!??"

dan yang paling menyebalkan adalah ketika kita mencoba memperbaiki error yang ada, yang terjadi malah semakin banyak error dalam aplikasi kita sehingga aplikasi yang ada tidak dapat di run..

saya pernah membuat aplikasi atau project dalam beberapa bahasa antara lain java, javascript dan php. Ketiga bahasa tersebut memiliki cara yang hampir sama (menurut saya) untuk melakukan pencarian error sehingga dapat diperbaiki. .

menurut wikipedia, error yang bisa menyebabkan bug di suatu aplikasi biasanya terjadi karena beberapa hal berikut:
perhitungan pembagian 0

loop yang tidak terhingga

mengunakan variabel yang belum di inisialisasi

kesalahan penulisan bahasa pemrograman\

dll yang dapat dilihat pada http://en.wikipedia.org/wiki/Software_bug

Menurut saya yang dapat kita lakukan ketika menemukan error dalam aplikasi kita adalah sebagai berikut:

Biasanya dalam console IDE yang kita gunakan dalam membuat suatu aplikasi akan menunjukkan di mana letak error nya (pada line berapa) kita bisa langsung menuju line tersebut dan mengidentifikasi dimana letak error nya
Jika error line yang ada tidak menunjukkan error yang sebenarnya kita bisa menggunakan fitur print pada bahasa pemrograman yang ada. Biasanya jika kita melakukan print terhadap suatu kata dan kata itu akan muncul di console atau aplikasi, biasanya line di atas kode print tersebut benar, lakukan terus hingga di temui suatu error.
Jika masih belum bisa juga kita bisa bertanya di website favorite programmer yaitu di http://stackoverflow.com/ , banyak sekali resource problem error disana yang sudah di selesaikan oleh komunitas yang ada. Atau jika belum terselesaikan juga kita bisa bertanya pada google. .

Penyelesaian suatu error juga tidak terlepas dari pengalaman seorang programmer, semakin sering programmer memberikan challange terhadap diri sendiri dengan mengerjakan banyak aplikasi dan project, maka semakin cepat pula dia dapat mengidentifikasi dan menyelesaikan suatu error. .

Sumber : www.lindsaygcox.co.uk

GIS

Membuat WebGIS Menggunakan YII (Part 3-Legenda)

10:03 AM

GIS

Membuat WebGIS Menggunakan YII (Part 2-Peta Tematik)

4:17 PM

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

Cara Menggunakan Kalkulator Pada Buku Saku Statistik

Tutorial Voice Recognition dan Text To Speech Android

Tutorial Voice Recognition dan Text To Speech Android

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

Menambahkan inset, geosearch, dan pemilihan layer

Menggunakan AppWraper dari Vserv untuk Monetize Aplikasi

Menggunakan AppWraper dari Vserv untuk Monetize Aplikasi

Facing the Error

Membuat WebGIS Menggunakan YII (Part 3-Legenda)

Membuat WebGIS Menggunakan YII (Part 2-Peta Tematik)

PART 1-MENAMPILKAN PETA

Follow Us

Labels

Popular Posts

recent posts

Recent Comments

Blog Archive

adsense ngode.in

Instagram