WebGIS Peta Interaktif Jumlah Penduduk

Membuat Peta Interaktif

Jumlah Penduduk Indonesia

Pada era internet sekarang ini, WebGIS memegang peranan

penting dalam visualisasi data. Dengan menggunakan peta

yang terhubug pada jaringan internet, maka informasi yang ada

akan menjadi lebih mudah dibaca dan disebarkan kepada

masyarakat.

Membuat WebGIS

Provinsi

Indonesia

Menggunakan

Google Maps

1 | h t t p : / / s l e e p i n g t u x . b l o g s p o t . c o m

Daftar Isi

GOOGLE MAPS 2

MEMBUAT WEBGIS PROVINSI INDONESIA MENGGUNAKAN GOOGLE MAPS

JAVASCRIPT V3 API 2

HELLO WORLD 3

MENAMPILKAN POLYGON PROVINSI INDONESIA 6

MASHUP DATA GOOGLE FUSION TABLE DAN SQL 10

MENAMPILKAN PETA TEMATIK 12

SELECT LAYER BY PULAU 17

MENAMPILKAN INFO PROVINSI 20

MEMPERINDAH TAMPILAN 22


Google Maps

Membuat WebGIS Provinsi Indonesia Menggunakan

Google Maps Javascript V3 API

Google Maps Javascript V3 API merupakan layanan dari Google Maps

yang memungkinkan kita untuk memasang peta pada web dengan

menggunakan fitur-fitur dan data yang disediakan oleh Google Maps. Kita

bisa dengan mudah menggunakan peta yang disediakan Google Maps,

sehingga akan memberi kemudahan pada user yang menggunakan peta

karena saat ini masyarakat sudah sangat terbiasa menggunakan Google

Maps dalam keseharian hidup mereka.

Dalam buku ini akan dijelaskan bagaimana untuk membuat suatu

WebGIS menggunakan bantuan Google Maps Javascript V3 API. Kenapa

saya sebutkan Google Maps Javascript V3 API, adalah karena Google

menyediakan juga Google Maps Android API dimana juga merupakan

layanan peta dari Google yang memudahkan kita untuk mengakses peta

menggunakan smartphone.

Sebelum kita membuat suatu WebGIS, mari kita definisikan terlebih

dahulu fungsi apa saja yang aka nada pada WebGIS kita kali ini.

Menampilkan Base Map

Menampilkan Polygon Provinsi

Menampilkan Info Window

Menampilkan Select Provinsi

Mengambil dan Menampilkan Data SQL

Memberi Warna Pada Polygon Provinsi

Menampilkan Legenda

Dan tools yang diperlukan dalam membuat WebGIS menggunakan Google

Maps Javascript API adalah sebagai berikut:

Text Editor : Disini saya menggunakan Notepad++

Browser : Disini saya menggunakan Mozilla Firefox dan Google

Chrome

Peta Provinsi Indonesia dalam format KML

Web Server Local (saya menggunakan paket XAMPP)

Jika tools dan bahan yang dibutuhkan sudah siap, sekarang mari kita buat

WebGIS Provinsi Indonesia


Hello World

Dalam belajar membuat sesuatu yang berhubungan dengan bahasa

pemrograman, pertama kali biasanya kita membuat suatu Hello World

dengan bahasa pemrograman tertentu. Jika kita belajar Google Maps, kita

membuat Hello World dengan menampilkan peta dari Google Maps itu

sendiri.

Untuk menampilkan peta dari Google Maps Javascript API kita perlu untuk

mendapatkan API key. API key digunakan untuk mengakses peta dan fitur

yang disediakan oleh Google Maps. Untuk mendapatkannya ikuti langkah

berikut:

Kunjungi Google APIs Console di https://code.google.com/apis/console

setelah itu login dengan Google Account anda.

Pilih APIs & auth pada menu sebelah kiri, Setelah itu pilih APIs

Anda akan melihat list API yang disediakan Google, pilih Google

Maps API v3 lalu aktifkan.

Pilih credentials pada menu sebelah kiri, setelah itu klik Create New

Key Anda akan melihat bagian Simple API Access, yang akan

digunakan nanti adalah Key for browser apps.

Bagian yang berwarna hijau adalah API Key yang akan anda

gunakan nanti.

https://code.google.com/apis/console


Setelah itu mari kita buka Text Editor kita untuk memulai coding, isikan

kode berikut pada Text Editor anda

<!DOCTYPE html>

<html>

<head>

<title>Peta Provinsi</title>

<meta name="viewport" content="initial-scale=1.0, user-

scalable=no" />

<style type="text/css">

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 }

#map_canvas { height: 100% ; width: 100%}

</style>

<script type="text/javascript"

src="https://maps.googleapis.com/maps/api/js?key=API Key

Anda&sensor=false">

</script>

<script type="text/javascript">

function initialize() {

var mapOptions = {

center: new google.maps.LatLng(-6.224521,106.840553),

zoom: 5,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new

google.maps.Map(document.getElementById("map_canvas"),

mapOptions);

}

</script>

</head>

<body onload="initialize()">

<div id="map_canvas"></div>

</body>

</html>

Simpan kode diatas dengan nama index.html pada folder web server lokal

anda, setelah itu jalankan dengan menggunakan browser anda. Berikut

tampilan kode diatas pada browser Google Chrome.


Sekarang mari kita belajar apa arti kode yang kita buat tadi.




#map_canvas { height: 100% ; width: 100%}

</style>

Kode diatas adalah kode CSS yang digunakan untuk mengatur tampilan

peta. #map_canvas digunakan untuk mendefinisikan tempat dimana map

ditampilkan, pada kode diatas map akan ditampilkan dengan tinggi 100%

yaitu memuhi body dari halaman html, atau dengan kata lain memenuhi

layar browser.


src="https://maps.googleapis.com/maps/api/js?key=API Key

Anda&sensor=false">

</script>

Kode diatas digunakan untuk memanggil API dari Google Maps itu sendiri.

Isi key dengan browser key yang telah anda buat tadi, peta tidak akan tampil

jika anda tidak memasukkan API key anda. Sensor digunakan untuk

mendeteksi apakah aplikasi diakses pada device yang memiliki sensor lokasi

atau tidak, karena saya asumsikan kita menggunakan laptop, maka sensor

saya isi false.



var mapOptions = {

center: new google.maps.LatLng(-3.337954,117.320251),

zoom: 5,


};

var map = new


mapOptions);

}

</script>

Disini kita melihat suatu fungsi javascript yang bernama initialize(). Fungsi

Initialize merupakan fungsi pertama yang dipanggil ketika halaman web

diload, perhatikan kode html berikut: <body onload="initialize()">

Variabel mapOptions digunakan untuk menampung opsi dari peta yang akan

kita tampilkan. Berikut penjelasan dari beberapa opsi yang kita gunakan

diatas.

center : digunakan untuk menentukan titik tengah peta ketika peta di

munculkan.

zoom : digunakan untuk mengatur cakupan peta itu sendiri. Semakin

besar zoom nya, semakin kecil dan detail cakupan peta tersebut.

mapTypeId : digunakan untuk mengatur tipe peta default.


MapType yang kita buat pada peta secara default adalah RoadMap (Peta

Jalan), sebenarnya ada beberapa pilihan tipe peta yang dapat kita gunakan,

berikut macam tipe peta yang dapat kita gunakan.

MapTypeId.ROADMAP menampilkan road map view sebagai default

MapTypeId.SATELLITE menampilkan Google Earth satelite images

MapTypeId.HYBRID menampilkan gabungan dari normal dan satelite

view

MapTypeId.TERRAIN menampilkan peta beserta terrain information

setTilt menampilkan 45 degree imagery

var map = new google.maps.Map(document.getElementById("map_canvas"),

mapOptions);

Variabel diatas digunakan untuk memunculkan peta pada halaman browser

anda. Kode diatas digunakan untuk create peta pada element map_canvas

menggunakan opsi yang disimpan pada variabel mapOptions. Untuk lebih

jelasnya tentang element map_canvas, lihat kode html berikut:


Menampilkan Polygon Provinsi Indonesia

Sekarang kita akan menampilkan Polygon Provinsi di Indonesia.

Polygon ini ditampilkan supaya kita bisa melihat lebih jelas dari batas-batas

provinsi yang ada di Indonesia.

Untuk menampilkan di Google Maps, kita bisa menggunakan dua

cara; yang pertama adalah dengan melakukan hosting terhadap file

KML(Keyhole Markup Language) sehingga polygon dapat terbaca oleh semua

orang; dan yang kedua adalah melakukan upload di Google Fusion Table.

Setelah saya mencoba mencari-cari di Internet dan StackOverFlow,

cara yang paling efisien dan efektif ternyata menggunakan Google Fusion

Table karena sudah Terintegrasi dengan google maps seghingga lebih mudah

dan cepat digunakan nantinya.

Untuk bisa mengakses Polygon yang berada di Google Fusion Table

tentunya kita harus melakukan upload terlebih dahulu terhadap file KML

nya.

Jika belum silakan download disini

http://goo.gl/AoO9LO

Setelah itu kita masuk kea kun Google Drive kita, kenapa Google Drive?

Karena Google Fusion Table merupakan bagian dari Google Drive

http://goo.gl/AoO9LO


Setelah kita berhasil masuk menggunakan akun Google kita. Kita buat dulu

file Fusion Table nya dengan cara seperti diatas. CreateFusion Table

Setelah itu akan muncul window baru, Choose File dan arahkan pada File

KML yang telah kita siapkan tadi. Ikuti petunjuk yang ada (Next next aja)


Setelah berhasil kita upload KML kita. Silakan cek petanya, pilih tab Map Of

Geometry , jika belum keluar polygonnya silakan pilih toolsselect

location(pilih geometry)

Dan hasilnya pada Google Fusion Table kita adalah seperti berikut

Sudah muncul bukan? Tapi tentunya tidak seperti ini yang kita inginkan,

karena kita ingin menampilkan polygon tidak melalui web app dari Google,

tapi dari web app kita sendiri.


Tambahkan kode berikut pada index.html yang telah kita buat sebelumnya

var layer = new google.maps.FusionTablesLayer({

query: {

select: 'geometry',

from: '12s5oKFfyL-

G_orulSQXuqGvzMGr85H2p6YI5nRM',

}

});

layer.setMap(map);

Script diatas digunakan untuk menampilkan Fusion Table Layer pada

Google Maps. Script diatas dapat dibaca seperti berikut, tampilkan Google

Maps Fusion Table Layer dengan Polygon ‘geometry’ (nama kolom yang

menyimpan latitude longitude/garis lintang bujur) dari tabel dengan kode

seperti diatas. Kode tabel dapat diperoleh dengan cara

FileAbout This TableLihat Bagian ID

Atau dapat juga dengan cara melihat Parameter Get doc id pada URL

browser anda, lihat bagian yang saya warnai merah dibawah.

https://www.google.com/fusiontables/data?docid=12s5oKFfyL-

G_orulSQXuqGvzMGr85H2p6YI5nRM#map:id=3

Selain itu jangan lupa set Data pada Fusion Table anda menjadi public,

karena data yang ada tidak bisa diakses jika kita Share Settingnya masih

private.

Klik Button Share yang ada di pojok kanan atas, lalu akan muncul tampilan

seperti berikut:


Change dari private menjadi public.

Dan mari kita lihat di aplikasi WebGIS kita.

Sudah muncul polygonnya dan kita juga sudah ada fitur info window yang

akan muncul ketika kita klik polygon salah satu provinsi tertentu.

Mashup Data Google Fusion Table dan SQL

Kita tidak akan hanya menampilkan polygon dari Fusion Table saja, tetapi

kita juga akan menampilkan suatu Peta Tematik yang memiliki beberapa

warna. Berikut contoh peta yang akan kita buat pada step ini.


Peta Tematik diatas adalah Peta Tematik yang menunjukkan jumlah

penduduk Indonesia. Berikut pembagiannya:

< 3 juta : warna hijau

3-6 juta : warna kuning

>6 juta : warna merah

Jumlah penduduk yang digunakan untuk membedakan warna dari polygon

diatas akan kita simpan pada database MySQL. Pembagian diatas saya

hanya gunakan sebagai contoh.

Silakan import data SQL jumlah penduduk berikut :

http://goo.gl/y8oBxY

Setelah di import, kita tidak bisa langsung mengakses data tersebut

menggunakan javascript, kita perlu membuat suatu service PHP yang

menjembatani antara SQL dan aplikasi.

Berikut kode PHP yang kita buat.

<?php

$server = "localhost";

$username = "username database anda";

$password = "password database";

$database = "indonesia";

$con = mysql_connect($server, $username, $password) or die

("Could not connect: " . mysql_error());

mysql_query('SET CHARACTER SET utf8');

mysql_select_db($database, $con);

$sql = "SELECT * FROM penduduk";

$result = mysql_query($sql) or die ("Query error: " .

mysql_error());

$records = array();

while($row = mysql_fetch_assoc($result)) {

$records[] = $row;

}

mysql_close($con);

$data = "{\"provinsi\" : ".json_encode($records)."}";

echo $data;

?>

Kode PHP diatas mengubah output SQL yang kita miliki menjadi JSON

format yang dimengerti oleh bahasa Javascript.

Simpan dengan nama data.php lalu cek di browser untuk memastikan kode

PHP yang dibuat benar atau tidak. Jika benar maka akan keluar output

JSON seperti berikut:

http://goo.gl/y8oBxY


Menampilkan Peta Tematik

Setelah kita mempunyai service berbentuk PHP yang dapat kita akses,

sekarang kita dapat langsung memanggil data SQL yang kita simpan.

Dengan memanfaatkan kolom jumlah penduduk yang ada pada data kita,

kita akan membedakan warna dari tiap polygon berdasarkan kriteria jumlah

penduduk.

Tambahkan script berikut pada fungsi initialize:

$.ajax({

type:'GET',

url:'data.php',

dataType:'json',

success: function(data) {

var min="";

var med="";

var max="";

var style;

var provinsi,ibukota,jumlah;

for(var i=0;i<data.provinsi.length;i++)

{

jumlah=data.provinsi[i].jumlah;

kode=data.provinsi[i].kode;

if(jumlah<=3000000)

{

min+=kode+",";

}

else if(jumlah>3000000&&jumlah<6000000)

{

med+=kode+",";

}

else if(jumlah>=6000000)


{

max+=kode+",";

}

}

fusiontablelayer(min,med,max);

}

});

Fungsi script diatas adalah untuk memanggil data dari SQL yang kita miliki,

tentu saja dengan bantuan Service yang kita buat menggunakan PHP.

$.ajax({

type:'GET',

url:'data.php',

dataType:'json',


Script ajax diatas menggunakan jQuery library, jadi jangan lupakan script

berikut di Head HTML anda

<script

src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script

>

Kembali ke script ajax yang ada diatas, url digunakan untuk memanggil file

Service PHP yang kita buat tadi, dan dataType adalah jenis data yang kita

inginkan. Data JSON yang diperoleh dari data.php akan disimpan pada

variabel data yang terdapat pada bagian success.

var min="";

var med="";

var max="";

var provinsi,ibukota,jumlah;

Variabel diatas digunakan untuk menyimpan data yang kita perlukan nanti.

Variabel min digunakan untuk menyimpan kode wilayah yang penduduknya

kurang dari 3 juta, variabel med digunakan untuk menyimpan kode wilayah

yang penduduknya 3-6 juta dan variabel max tentunya untuk menyimpan

kode wilayah yang penduduknya lebih dari 6 juta. Kode dibawah ini yang

digunakan untuk menyimpan kode wilayah berdasarkan pembagian jumlah

penduduknya.


{



if(jumlah<=3000000)

{

min+=kode+",";

}

else if(jumlah>3000000&&jumlah<6000000)

{


med+=kode+",";

}


{

max+=kode+",";

}

For diatas digunakan untuk melakukan iterasi terhadap seluruh data JSON

yang didapat. Statements if else tentu saja digunakan untuk membagi kode

wilayah berdasarkan jumlah penduduk. Kode wilayah yang ada disimpan

pada suatu variabel dengan tipe data String (ex : 34,35,36,)

Kita juga melihat kode berikut:


Kode diatas digunakan untuk memanggil function fusiontablelayer, selain itu

kode ini juga mengirimkan data kode wilayah yang disimpan dalam variabel

min, med, dan max.

Untuk itu kita perlu menambahkan fungsi berikut:

function fusiontablelayer(kode1,kode2,kode3)

{

kode1=removeLastString(kode1);




query: {

select: 'geometry',

from: '12s5oKFfyL-


},

styles: [{

where: 'kode IN ('+kode1+')',

polygonOptions:{

fillColor:'#00FF00'

}

},{


polygonOptions:{

fillColor:'#FFFF00'

}

},{


polygonOptions:{

fillColor:'#FF0000'

}

}]

});

layer.setMap(map);

}

function removeLastString(kode)

{

kode = kode.substring(0,kode.length-1)+'';

return kode;


}

Kita melihat dua buah function pada kode sebelumnya. Fungsi pertama

digunakan untuk memanggil fusion table layer dan fungsi kedua digunakan

oleh fungsi fusion table layer untuk memanipulasi String. Function

removeLastString menghilangkan koma terakhir pada variabel min, med dan

max; koma terakhir perlu dihilangkan supaya sesuai dengan format yang

dibutuhkan untuk melakukan query ke Google Fusion Table Layer.


query: {

select: 'geometry',

from: '12s5oKFfyL-


},

styles: [{


polygonOptions:{

fillColor:'#00FF00'

}

},{


polygonOptions:{

fillColor:'#FFFF00'

}

},{


polygonOptions:{

fillColor:'#FF0000'

}

}]

});

layer.setMap(map);

Query diatas sama seperti sebelumnya, yang berbeda adalah disini sudah

menerapkan Style pada polygon. Fungsi where pada query google fusion table

adalah untuk menambahkan kondisi tertentu, jadi untu kondisi kode wilayah

tertentu maka ganti warna nya menjadi warna tertentu.

Silakan coba kita jalankan WebGIS yang telah dibuat. Jika kode yang dibuat

benar maka akan keluar tampilan seperti berikut:


Jika kita lihat peta diatas, tentunya kita tidak tahu apa arti dari warna

merah, kuning, dan hijau. Supaya user dapat mengerti arti warna diatas kita

dapat menambahkan suatu legenda. Kali ini kita akan menambahkan

legenda dibagian pojok kanan bawah peta.

Tambahkan function berikut pada kode javascript kita.

function legenda(controlDiv,map){

controlDiv.style.backgroundColor = 'white';

controlDiv.title = 'Legenda';

var isi1 = "<table class=\"table table-

condensed\"><th><td>Legenda</td></th>";

var isi2 = "<tr><td style=\"background-

color:#00FF00\"> </td><td><3 juta</td></tr>";


color:#FFFF00\"> </td><td>3-6 juta</td></tr>";


color:#FF0000\"> </td><td>>6 juta</td></tr>";

var isi5 = "</table>";

controlDiv.innerHTML = isi1+isi2+isi3+isi4+isi5;

}

Setelah itu tambahkan kode berikut pada akhir function initialize untuk

menampilkan legenda yang telah kita buat pada function legenda.

var homeControlDiv=document.createElement('div');

var homeControls=new legenda(homeControlDiv,map);

homeControlDiv.index = 1;

map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(homeCo

ntrolDiv);

Setelah itu jika kita jalankan pada browser akan muncul legenda seperti

berikut:


Select Layer By Pulau

Setelah kita bisa menampilkan peta tematik satu Indonesia, sekarang kita

akan menampilkan peta tematik per pulau. Pertama-tama tentunya kita

buat selector di HTML nya, kali ini untuk selector nya kita akan

menggunakan radio button.

Jika sebelumnya kita sudah mempunyai div yang berisi map_canvas,

tambahkan kode nya menjadi seperti berikut:

<div id="title"><center>

<h1>Jumlah Penduduk Indonesia 2010</h1>

</center></div>


<div id="sidebar">

<legend>Provinsi By Pulau</legend>

<input type="radio" name="pulau" value="Jawa">Jawa<br>

<input type="radio" name="pulau" value="Sumatera>

Sumatera</br>

<input type="radio" name="pulau" value="Kalimantan">

Kalimantan</br>

<input type="radio" name="pulau" value="Sulawesi">

Sulawesi</br>

<input type="radio" name="pulau" value="Papua">Papua</br>

<button onclick="initialize()">Show All</button>

<div id="showdata">

</div>

</div>

Disini kita memiliki dua buah div dengan id title dan sidebar. Title

digunakan untuk memberikan judul, dan sidebar digunakan sebagai tempat

untuk meleakkan checkbox.


Selain itu supaya tampilan peta nya terpartisi dengan baik, silakan ubah

kode style css yang berada pada head menjadi seperti berikut:



#title { height: 10%; width : 100%; }

#sidebar {height : 85% ; width : 20%; float : left}

#map_canvas { height : 85% ; width : 80%; float : right}

Jika kita jalankan, WebGIS kita akan terlihat seperti berikut:

Sekarang, kita akan membuat handler bagi checkbox yang sudah kita buat

pada javascript kita. Tambahkan kode berikut di luar fungsi manapun, tetapi

masih berada di dalam tag script.

$(document).ready(function(){

$('input[name="pulau"]').on('change', function(){

layer.setMap(null);

var value=$(this).val();

var jawa="31,32,33,34,35,36";

var sumatera="11,12,13,15,16,17,18,14";

var kalimantan="61,62,63,64";

var sulawesi="71,72,73,74,75,76";

var papua="91,94";

switch(value)

{

case "Jawa":

layerByPulau(jawa);

break;

case "Sumatera":

layerByPulau(sumatera);

break;

case "Kalimantan":


layerByPulau(kalimantan);

break;

case "Sulawesi":

layerByPulau(sulawesi);

break;

case "Papua":

layerByPulau(papua);

break;

default:

}

});

});

Kode diatas tentunya menggunakan bantuan JQuery di dalam

penulisannya. Secara singkat kode diatas mempunyai fungsi membaca nilai

atau value dari checkbox yang kita buat setiap terjadi perubahan (misal

checkbox Jawa di pilih, maka fungsi tersebut akan membaca value dari

checkbox Jawa), setelah mendapatkan value nya maka kode diatas akan

memanggil fungsi layerByPulau yang akan kita buat nanti.

var jawa="31,32,33,34,35,36";

var sumatera="11,12,13,15,16,17,18,14";


var sulawesi="71,72,73,74,75,76";

var papua="91,94";

Jangan bingung ketika melihat variabel diatas, variabel diatas digunakan

untuk menyimpan kode Provinsi di setiap pulau.

Sekarang kita akan buat function baru yang bernama layerByPulau, function

ini yang akan dipanggil oleh handler dari checkbox tadi.

Tambahkan function berikut pada tag javascript.

function layerByPulau(kodeWilayah)

{

layer = new google.maps.FusionTablesLayer({

query: {

select: 'geometry',

from: 'id fusion table',

where: 'kode IN ('+kodeWilayah+')',

},

options: {

suppressInfoWindows:true

},

styles: [{

where: 'kode IN ('+tampungKode1+')',

polygonOptions:{

fillColor:'#00FF00'

}

},{


polygonOptions:{

fillColor:'#FFFF00'

}


},{


polygonOptions:{

fillColor:'#FF0000'

}

}],

});

layer.setMap(map);

}

Kode diatas hampir sama dengan kode sebelumnya untuk memanggil fusion

table layer, kita hanya menambahkan kondisi pada query pertama. Selain itu

juga tambahkan tampungKode1/2/3 pada variabel javascript seperti berikut:

Pada awal tag javascript

var tampungKode1,tampungKode2,tampungKode3;

Dan pada awal function fusiontablelayer, setelah String koma (,) dihilangkan

tampungKode1=kode1;tampungKode2=kode2;tampungKode3=kode3;

Jika sudah kita bisa langsung jalankan WebGIS kita dan akan terlihat

sebagai berikut jika saya memilih pulau sumatera.

Menampilkan Info Provinsi

Sekarang kita akan menampilkan info provinsi yang berada pada data SQL

kita ke sidebar ketika salah satu polygon provinsi di pilih. Untuk bisa

menampilkan itu pertama kita hilangkan info window nya, pastikan ada

option berikut ketika memanggil fusiontable layer.


options: {


},

Setelah itu kita tambahkan event listener berikut setelah setiap kode

layer.setMap(map).

google.maps.event.addListener(layer,'click',function(e){showData(e

)});

Event listener diatas merupakan event yang muncul ketika layer fusion table

di click. Setelah layer di klik, maka function showData akan dipanggil,

tambahkan function showData berikut pada javascript yang kita buat.

function showData(e)

{

var kodeBPS=e.row['kode'].value;

var location=e.latLng;

$.ajax({

type:'GET',

url:'data.php',

dataType:'json',


var isi="";


{

if(data.provinsi[i].kode==kodeBPS)

{

isi+="<b>Provinsi :

</b>"+data.provinsi[i].provinsi+"</br>";

isi+="<b>Ibukota :

</b>"+data.provinsi[i].ibukota+"</br>";

isi+="<b>Jumlah Penduduk :

</b>"+data.provinsi[i].jumlah+" Jiwa</br>";

$('#showdata').html(isi);

infoWindow.setContent("<b>"+data.provinsi[i].provinsi+"</b>");

infoWindow.setPosition(location);

infoWindow.open(map);

}

}

}

});

}

Kode diatas fungsinya untuk mengambil dan menampilkan data SQL yang

terdapat pada database sesuai dengan layer polygon yang di klik. Selain itu

kode diatas juga digunakan untuk menampilkan info window pada peta yang

berisi nama provinsi saja. Tambahkan kode berikut untuk deklarasi

infoWindow pada bagian awal tag javascript.


var infoWindow = new google.maps.InfoWindow();

Jika kita coba jalankan WebGIS kita pada browser akan menjadi seperti

berikut:

Memperindah Tampilan

Sekarang kita akan sedikit memperindah tampilan dari peta kita

diatas, kita akan menggunakan twitter bootstrap 2.3; silakan langsung

download di website resmi dari twitter bootstrap atau bisa download di link

berikut:

http://goo.gl/p1RFXn

Extract file yang ada ke dalam folder yang sama dengan project yang kita

buat.

Setelah itu tambahkan kode berikut pada tag head

<link href="css/bootstrap.css" rel="stylesheet" media="screen">

<link href="css/bootstrap-responsive.css" rel="stylesheet"

media="screen">

Sesuaikan path css anda dengan tempat anda menyimpan css dari twitter

bootstrap tadi.

Selain itu tambahkan kode berikut sebelum tag penutup body.

<script src="js/bootstrap.js"></script>

Sesuaikan juga path nya sesuai tempat menyimpan file js dari twitter

bootstrap tadi.

http://goo.gl/p1RFXn


Berikut adalah kode lengkap yang kita buat dari awal sampai akhir, silakan

modifikasi untuk efektifitas dan penggunaan masing-masing

<!DOCTYPE html>

<html>

<head>

<title>Peta Provinsi</title>

<meta name="viewport" content="initial-scale=1.0, user-

scalable=no" />




#title { height: 10%; width : 100%; }

#sidebar {height : 85% ; width : 20%; float : left}

#map_canvas { height : 85% ; width : 80%; float :

right}

</style>


src="https://maps.googleapis.com/maps/api/js?key=APIKEYGooglemaps&

sensor=false">

</script>

<script

src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min

.js"></script>

<link href="css/bootstrap.css" rel="stylesheet"

media="screen">

<link href="css/bootstrap-responsive.css" rel="stylesheet"

media="screen">


var map,layer;

var tampungKode1,tampungKode2,tampungKode3;

var infoWindow = new google.maps.InfoWindow();


google.maps.visualRefresh = true;

var mapOptions = {

center: new google.maps.LatLng(-

3.337954,117.320251),

zoom: 5,


};

map = new


mapOptions);

$.ajax({

type:'GET',

url:'data.php',

dataType:'json',


var kel1,kel2,kel3;

var min="";

var med="";

var max="";

var jumlah,kode;


{




if(jumlah<=3000000)

{

min+=kode+",";

}

else

if(jumlah>3000000&&jumlah<6000000)

{

med+=kode+",";

}


{

max+=kode+",";

}

}


}

});

var homeControlDiv=document.createElement('div');

var homeControls=new legenda(homeControlDiv,map);

homeControlDiv.index = 1;

map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(homeCo

ntrolDiv);

}

function fusiontablelayer(kode1,kode2,kode3)

{




tampungKode1=kode1;tampungKode2=kode2;tampungKode3=kode3;


query: {

select: 'geometry',

from: 'id fusion table',

},

options: {


},

styles: [{


polygonOptions:{

fillColor:'#00FF00'

}

},{


polygonOptions:{

fillColor:'#FFFF00'

}

},{


polygonOptions:{

fillColor:'#FF0000'

}

}]

});


layer.setMap(map);


)});

}

function removeLastString(kode)

{

kode = kode.substring(0,kode.length-1)+'';

return kode;

}

//buat nambahin legenda

function legenda(controlDiv,map){

controlDiv.style.backgroundColor = 'white';

controlDiv.title = 'Legenda';

var isi1 = "<table class=\"table table-

condensed\"><th><td>Legenda</td></th>";


color:#00FF00\"> </td><td><3 juta</td></tr>";


color:#FFFF00\"> </td><td>3-6 juta</td></tr>";


color:#FF0000\"> </td><td>>6 juta</td></tr>";

var isi5 = "</table>";

controlDiv.innerHTML = isi1+isi2+isi3+isi4+isi5;

}

function layerByPulau(kodeWilayah)

{


query: {

select: 'geometry',

from: 'id fusion table ',

where: 'kode IN ('+kodeWilayah+')',

},

options: {


},

styles: [{


polygonOptions:{

fillColor:'#00FF00'

}

},{


polygonOptions:{

fillColor:'#FFFF00'

}

},{


polygonOptions:{

fillColor:'#FF0000'

}

}],

});

layer.setMap(map);


)});


}

function showData(e)

{

var kodeBPS=e.row['kode'].value;

var location=e.latLng;

$.ajax({

type:'GET',

url:'data.php',

dataType:'json',


var isi="";


{

if(data.provinsi[i].kode==kodeBPS)

{

isi+="<b>Provinsi :

</b>"+data.provinsi[i].provinsi+"</br>";

isi+="<b>Ibukota :

</b>"+data.provinsi[i].ibukota+"</br>";

isi+="<b>Jumlah Penduduk :

</b>"+data.provinsi[i].jumlah+" Jiwa</br>";

$('#showdata').html(isi);

infoWindow.setContent("<b>"+data.provinsi[i].provinsi+"</b>");

infoWindow.setPosition(location);

infoWindow.open(map);

}

}

}

});

}

$(document).ready(function(){

$('input[name="pulau"]').on('change', function(){

layer.setMap(null);

var value=$(this).val();

var jawa="31,32,33,34,35,36";

var sumatera="11,12,13,15,16,17,18,14";


var sulawesi="71,72,73,74,75,76";

var papua="91,94";

switch(value)

{

case "Jawa":

layerByPulau(jawa);

break;

case "Sumatera":

layerByPulau(sumatera);

break;

case "Kalimantan":

layerByPulau(kalimantan);

break;

case "Sulawesi":

layerByPulau(sulawesi);

break;

case "Papua":

layerByPulau(papua);

break;

default:


}

});

});

</script>

</head>

<body onload="initialize()">

<div id="title"><center><h1>Jumlah Penduduk Indonesia

2010</h1></center></div>


<div id="sidebar">

<legend>Provinsi By Pulau</legend>

<input type="radio" name="pulau" value="Jawa">Jawa<br>

<input type="radio" name="pulau"

value="Sumatera">Sumatera</br>

<input type="radio" name="pulau" value="Kalimantan"

>Kalimantan</br>


value="Sulawesi">Sulawesi</br>


value="Papua">Papua</br></br>

<button onclick="initialize()" class="btn btn-

primary">Show All</button>

</br></br>

<pre>

<div id="showdata">

</div>

</pre>

</div>

<script src="js/bootstrap.js"></script>

</body>

</html>

Dan berikut adalah tampilan WebGIS yang telah selesai kita buat.

Sekian tutorial kita kali ini, semoga bermanfaat.

Documents

WebGIS Peta Interaktif Jumlah Penduduk