WebGIS Peta Interaktif Jumlah Penduduk

(1)

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

(2)

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

(3)

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

(4)

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.

(5)

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>

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% ; width: 100%} </style>

src="https://maps.googleapis.com/maps/api/js?key=API Key Anda&sensor=false">

</script>

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.

(6)

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

body { height: 100%; margin: 0; padding: 0 } #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.

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

mapTypeId: google.maps.MapTypeId.ROADMAP };

var map = new

google.maps.Map(document.getElementById("map_canvas"), 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.

(7)

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 

(8)

Setelah kita berhasil masuk menggunakan akun Google kita. Kita buat dulu file Fusion Table nya dengan cara seperti diatas. CreateFusion 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)

(9)

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

Geometry , jika belum keluar polygonnya silakan pilih toolsselect

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.

(10)

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

FileAbout This TableLihat 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:

(11)

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.

(12)

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:

(13)

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)

(14)

13 | 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 { 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',

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.

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

(15)

14 | 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 med+=kode+","; } else if(jumlah>=6000000) { 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:

fusiontablelayer(min,med,max);

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); kode2=removeLastString(kode2);

kode3=removeLastString(kode3); var layer = new google.maps.FusionTablesLayer({ query: { select: 'geometry', from: '12s5oKFfyL-G_orulSQXuqGvzMGr85H2p6YI5nRM', }, styles: [{

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

polygonOptions:{

fillColor:'#00FF00'

} },{

fillColor:'#FFFF00'

} },{

polygonOptions:{ fillColor:'#FF0000' } }] }); layer.setMap(map); } function removeLastString(kode) {

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

(16)

}

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.

var layer = new google.maps.FusionTablesLayer({ query: { select: 'geometry', from: '12s5oKFfyL-G_orulSQXuqGvzMGr85H2p6YI5nRM', }, styles: [{

} },{

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:

(17)

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

var isi3 = "<tr><td style=\"background-color:#FFFF00\"> </td><td>3-6 juta</td></tr>";

var isi4 = "<tr><td

style=\"background-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:

(18)

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

<div id="showdata">

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

(19)

Selain itu supaya tampilan peta nya terpartisi dengan baik, silakan ubah kode style css yang berada pada head menjadi seperti berikut:

body { height: 100%; margin: 0; padding: 0 } #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":

(20)

19 | 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 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 kalimantan="61,62,63,64";

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+')',

} },{

(21)

},{

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.

(22)

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

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.

(23)

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

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.

(24)

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>

body { height: 100%; margin: 0; padding: 0 } #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>

var map,layer;

var tampungKode1,tampungKode2,tampungKode3; var infoWindow = new google.maps.InfoWindow(); function initialize() {

google.maps.visualRefresh = true;

var mapOptions = {

center: new

google.maps.LatLng(-3.337954,117.320251), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); $.ajax({ type:'GET', url:'data.php', dataType:'json',

var kel1,kel2,kel3; var min="";

var med="";

var max="";

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

{

(25)

24 | 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 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); } });

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) { kode1=removeLastString(kode1); kode2=removeLastString(kode2); kode3=removeLastString(kode3); tampungKode1=kode1;tampungKode2=kode2;tampungKode3=kode3; layer = new google.maps.FusionTablesLayer({ query: {

from: 'id fusion table',

}, options: { suppressInfoWindows:true }, styles: [{

} },{

fillColor:'#FF0000'

} }]

(26)

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

var isi2 = "<tr><td

style=\"background-color:#00FF00\">   </td><td><3 juta</td></tr>";

var isi3 = "<tr><td style=\"background-color:#FFFF00\"> </td><td>3-6 juta</td></tr>";

var isi4 = "<tr><td

style=\"background-color:#FF0000\"> </td><td>>6 juta</td></tr>";

var isi5 = "</table>";

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

function layerByPulau(kodeWilayah) {

layer = new google.maps.FusionTablesLayer({ query: {

from: 'id fusion table ',

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

},

options: {

},

styles: [{

} },{

polygonOptions:{ fillColor:'#FF0000' } }], }); layer.setMap(map);

(27)

}

function showData(e) {

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

var location=e.latLng; $.ajax({

type:'GET',

url:'data.php',

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

(28)

27 | 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 } }); }); </script> </head>

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

<legend>Provinsi By Pulau</legend>

<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></br>

</br></br> <pre> <div id="showdata"> </div> </pre> </div>

</body> </html>

Dan berikut adalah tampilan WebGIS yang telah selesai kita buat.