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

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 

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)

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.

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:

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:

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.

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.

Web gis peta interaktif jumlah penduduk

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Web gis peta interaktif jumlah penduduk

Similar to Web gis peta interaktif jumlah penduduk (20)

Recently uploaded

Recently uploaded (20)

Web gis peta interaktif jumlah penduduk