8
Perancangan
user interface
, dilakukan agar pembuatan aplikasi lebih mudah dan terarah. Desain utama adalah halaman beranda atau halaman awal.
Pada halaman awal ada delapan komponen yaitu tombol beranda, tombol tentang, tombol kontak,
combobox
pilih kecamatan,
combobox
pilih kelurahan, tombol lihat, area peta dan area keterangan. Seperti yang terlihat pada gambar 7.
Gambar 7 Form user interface halaman utama
Tahapan selanjutnya adalah
implementation and
unit testing
implementasi dan pengujian unit. Pada tahap ini dilakukan implementasi dari rancangan yang
telah dibuat. Implementasi dilakukan melalui proses pengkodean. Proses pengkodean menggunakan PHP dan pemanfaatan
Google Maps
API
untuk mendapatkan data peta dan mengambil
library visualization
untuk penerapan
heatmap
. Tahap berikutnya adalah
system testing
pengujian sistem pada tahap ini dilakukan pengujian sistem yang telah dibuat. Pengujian sistem ini menggunakan
black box
testing
. Tahapan terakhir adalah
operation and
maintenance
penerapan dan pemeliharaan sistem. Pada tahap ini dilakukan pemeliharaan terhadap
aplikasi. Bentuk pemeliharaan bisa dalam bentuk penambahan fitur dan perubahan
layout
.
4. Hasil dan pembahasan
Pada hasil dan pembahasan akan dibahas beberapa proses yang terjadi dalam penerapan
heatmap
, antara lain bagaimana
heatmap
memproses data koordinat yang diberikan dan mengambil peta dari
google maps
menggunakan
Google Maps
API
.
Heatmap
akan membentuk lapisan-lapisan
layer
untuk setiap titik koordinat kemudian divisualisasikan menggunakan gradien warna
default
. Titik yang berdekatan akan mencampur warnanya menjadi warna yang dominan
sehingga terbentuk sebuah gradien warna dengan intensitas warna yang berbeda. Pada Gambar 8 diambil sampel 10 titik koordinat dan dibentuk dalam
layer
-
layer
. Setiap titik pada masing-masing
layer
mempunyai warna gradien
default
. Langkah selanjutnya
heatmap
akan melebur gradien warna yang dimiliki setiap titik koordinat yang ada. Sebelum melebur warna yang dimiliki oleh
9
masing-masing titik koordinat
heatmap
akan menghitung jarak tiap-tiap titik koordinat dan mendapatkan perpotongan diantara radius warna sebuah titik
koordinat. Setelah menemukan perpotongan
heatmap
akan melebur warna dari lapisan paling dalam sampai lapisan terluar.
Gambar 8 Contoh proses layer heatmap
Gambar 9 merupakan perkiraan hasil gradien warna yang terbentuk dari 10 titik koordinat pada Gambar 8. Gradien warna yang terbentuk dari 10 titik
koordinat tersebut akan terlihat seperti pada gambar 9. Sebenarnya setiap titik koordinat mempunyai semua warna yang ada pada gradien warna
default heatmap
. Tetapi titik bagian tengah hanya memiliki beberapa warna saja dan bahkan hanya memiliki satu warna saat titik koordinat sangat rapat. Hal tersebut
dikarenakan peleburan warna atau percampuran warna yang dilakukan
heatmap
.
Gambar 9 Perkiraan hasil dari gambar 8
10
Sebelum menggunakan
heatmap
pada aplikasi peta diharuskan mereferensikan
library heatmap
pada
coding
aplikasi peta. Kode program 1 merupakan
script
yang harus ada dalam pembuatan aplikasi peta yang menggunakan
heatmap
.
Script
tersebut berisikan referensi
visualization
dari
library Google
Maps API
.
Library visualization
digunakan jika aplikasi akan menggunakan
Maps Engine
dan
Heatmap.
Kode Program 1 Referensi Visualisasi[7]
Isi dari
library visualization
adalah fungsi-fungsi yang digunakan untuk memanggil data peta dan fungsi
heatmap
. Pada
library visualization
semua data yang diambil oleh
heatmap
diolah dan kemudian ditampilkan pada
heatmap layer
yang ada pada data peta
Google Maps
. Agar warna peta yang ditampilkan berbeda dengan warna
default
dari
Google
maka perlu
style
tambahan seperti yang terlihat pada Kode Program 2.
Kode Program 2 Custom style peta Google Maps[8]
Pada kode program 2 pada baris tiga merupakan fungsi
featureType
yang berfungsi untuk mendefinisikan tipe fitur dari peta yang akan di rubah warnanya.
Jenis-jenis
featureType
yang digunakan
adalah
administrative
wilayah administrasi yang digunakan untuk mengatur
custom style
dari area administrasi suatu wilayah,
poi point
of interest
tempat tujuan yang digunakan untuk mengatur
style
tempat-tempat tujuan seperti gereja, masjid, kampus dan lain sebagainya,
road
jalan yang digunakan untuk mengatur
custom style
dari jalan,
water
air yang digunakan untuk mengatur
custom style
dari air, dan
transit
yang digunakan untuk mengatur
custom style
dari area pemberhentian. Pada baris empat merupakan fungsi
elementType
yang berfungsi untuk menentukan elemen tipe apa saja yang akan di kostum warnanya. Jenis-jenis
elementTipe
yang digunakan adalah
geometry
yang berfungsi untuk mengatur
fill
dan
stroke
dari
featureType
dan
label
yang berfungsi untuk mengatur elemen
text
dan
icon
dari
featureType
. Terdapat juga fungsi
stylers
yang berfungsi sebagai tempat peletakan dan pengaturan
style
dari
Google Maps
. Berikutnya membuat
array
titik koordinat yang diambil dari
database
menggunakan variabel
javascript
seperti yang terlihat pada Kode Program 3.
1. var style = [
2. {
3. featureType: administrative,
4. elementType: all,
5. stylers: [{visibility: off}]},
6. ...
7. ...
8. ];
1. script src=https:maps.googleapis.commapsapijs?v=3.expsensor=falselibraries=
visualization 2. script
11
Kode Program 3 Kode array titik
Kode Program 3 pada baris 1 merupakan kode untuk membuat variabel pada javascript. Baris 3 merupakan kode untuk mengambil data koordinat dari
database
. Baris 4-8 merupakan kode untuk membuat perulangan data koordinat dari
database
sehingga membentuk
array
. Pada baris 7 merupakan kode untuk mencetak koordinat pada fungsi LatLng dari
Google Maps
. Berikutnya memanggil fungsi
initialize
dari
Google Maps
API
. Didalam fungsi ini terdapat pengaturan untuk peta, membuat
layer
baru untuk
heatmap
, memasukkan
array
titik dan memanggil
event
untuk memunculkan peta seperti yang terlihat pada kode program 4.
Kode Program 4 Fungsi pengaturan peta dan heatmap
Kode Program 4 baris 2 merupakan kode untuk membuat variabel
mapOptions
yang berfungsi untuk menyimpan pengaturan peta. Baris 3 merupakan kode untuk menentukan
zoom
peta
default
saat pertama peta di
load
. Baris 4 merupakan kode untuk menentukan titik tengah dari peta. Baris 5
merupakan kode untuk menentukan jenis peta yang akan ditampilkan. Baris 6 merupakan kode untuk memanggil
style
peta yang sudah didefinisikan sebelumnya. Baris 8 merupakan kode untuk menampilkan peta. Baris 9-14
merupakan kode untuk mengambil
array
titik dan membuat
layer heatmap
kemudian memasukkan
layer heatmap
pada peta. Baris 15 merupakan kode untuk menjalankan fungsi
initialize
.
1. var ukmData = [
2. ?php
3. query = mysql_querySELECT FROM data WHERE kategori 0;
4. while row = mysql_fetch_arrayquery{
5. lat=row[Lat];
6. lon=row[Lng];
7. echo new google.maps.LatLnglat, lon,\n;
8. }
9. ?
10. ];
1. function initialize {
2. var mapOptions = {
3. zoom: 12,
4. center: new google.maps.LatLngdeflat, deflng,
5. mapTypeId: google.maps.MapTypeId.MAP,
6. styles: style
7. };
8. map = new
google.maps.Mapdocument.getElementByIdmap-canvas,mapOptions; 9.
var pointArray = new google.maps.MVCArrayukmData; 10. heatmap = new google.maps.visualization.HeatmapLayer{
11. data: pointArray 12. };
13. heatmap.setMapmap; 14. }
15. google.maps.event.addDomListenerwindow, load, initialize;
12
Kode Program 5 Potongan javascript google maps API untuk visualization dan heatmap
Kode Program 5 merupakan potongan dari
javascript google
maps API
untuk
visualization
dan
heatmap
. Pada Kode Program 5 terdapat fungsi sebagai berikut
polygonOptions
yang berfungsi untuk menbuat sebuah bentuk dari sekumpulan garis,
strokeColor
yang berfungsi untuk menentukan warna garis,
strokeColorStyle
yang berfungsi untuk menentukan
style
dari warna sebuah garis,
strokeOpacity
berfungsi sebagai
pengatur transparansi
sebuah garis,
strokeOpacityStyle
berfungsi sebagai penentu
style
transparansi dari sebuah garis,
strokeWeight
berfungsi untuk menentukan ketebalan sebuah garis,
fillColor
berfungsi untuk memberi warna sebuah
polygon
,
fillColorStyle
berfungsi sebagai pengatur
style
warna sebuah
polygon
,
fillOpacity
berfungsi sebagai pengatur transparansi sebuah
polygon
, dan
fillOpacityStyle
berfungsi sebagai pengatur
style
transparansi sebuah
polygon
. Fungsi-fungsi yang lain merupakan fungsi yang digunakan untuk menentukan bentuk dari peta sesuai data yang diambil dari
server
dan menampikan pada halaman
web
. Terdapat juga fungsi untuk
heatmap layer
didalam fungsi tersebut terdapat fungsi untuk menentukan posisi sebuah titik dan menentukan warna dari titik tersebut.
Hasil dari visualisasi
heatmap
adalah gradien warna, pada Gambar 10 merupakan hasil dari visualisasi untuk Kota Salatiga dan gradien warna yang
terlihat adalah warna merah yang berarti kerapatan UKM yang memproduksi makanan dan minuman sangat rapat, kemudian warna kuning yang berarti
kerapatannya sedang, dan warna hijau berarti kerapatannya jarang. Salah satu kelebihan
heatmap
adalah
heatmap
mampu memecah bentuk dan merubah intensitas warna ketika data berubah atau tampilan diperbesar. Pada Gambar 10
bagian atas, peta di perbesar 12x sehingga terlihat bentuk persebaran data UKM yang memproduksi makanan dan minuman sedikit memencar dan warna dominan
merah yang berarti kepadatan UKM yang memproduksi makanan dan minuman sangat padat. Pada Gambar 10 bagian bawah peta diperbesar 13x terlihat bentuk
visualisasi data UKM yang memproduksi makanan dan minuman berubah lebih terpencar dan intensitas warna berubah karena ketika peta diperbesar kerapatan
1. functionb{
2. b.Ama
3. }}; LfUm[F], {map: Dg, query: Tm, style: Qm};
4. Ug.visualization = functiona {
5. evala
6. };
7. var Vm = Cd[Jc].maps.visualization = {DynamicMapsEngineLayer: Mm,
HeatmapLayer: Gm, MapsEngineLayer: Nm, MapsEngineStatus: {OK: od, INVALID_LAYER: id, UNKNOWN_ERROR: rd}};
8. cl[16] SdVm, {DemographicsLayer: Um};
9. cl[15] || delete Nm[F][ad];
10. Bfvisualization, {}; 11. functionb{b.Ama}}; LfUm[F], {map: Dg, query: Tm, style: Qm};
12. Ug.visualization = functiona { 13. evala
14. }; 15. var Vm = Cd[Jc].maps.visualization = {DynamicMapsEngineLayer: Mm,
HeatmapLayer: Gm, MapsEngineLayer: Nm, MapsEngineStatus: {OK: od, INVALID_LAYER: id, UNKNOWN_ERROR: rd}};
16. cl[16] SdVm, {DemographicsLayer: Um}; 17. cl[15] || delete Nm[F][ad];
18. Bfvisualization, {};
13
antar titik posisi UKM yang memproduksi makanan dan minuman berubah secara skala dan bukan posisi sebenarnya yang berubah.
Gambar 10 Hasil visualisasi heatmap pada zoom 12x dan 13x untuk Kota Salatiga
Pada Gambar 11 merupakan hasil visualisasi
heatmap
untuk Kecamatan Tingkir yang terdiri dari 555 data UKM yang memproduksi makanan dan 66
data UKM yang memproduksi minuman dan total dari kedua kategori adalah 601 data. Perbedaan bentuk dan intensitas warna sangat terlihat saat peta diperbesar
12x Gambar 11 bagian atas dan saat peta diperbesar 13x Gambar 11 bagian bawah. Hal ini terjadi karena perbedaan kerapatan titik posisi UKM yang
memproduksi makanan dan minuman, saat peta diperbesar maka kerapatan titik posisi UKM yang memproduksi makanan dan minuman secara skala akan
melebar. Karena kerapatan titik posisi UKM yang memproduksi makanan dan minuman berubah maka bentuk visualisasi
heatmap
dan warnanya pun berubah.
Gambar 11 Hasil visualisasi heatmap pada zoom 12x dan 13x untuk Kecamatan Tingkir
14
Gambar 12 merupakan hasil visualisasi
heatmap
untuk Kelurahan Salatiga yang berada di Kecamatan Sidorejo yang terdiri dari 282 UKM yang
memproduksi makanan dan 61 UKM yang memproduksi minuman dan total dari kedua kategori tersebut adalah 343. Bentuk dan warna dari visualisasi
heatmap
saat peta diperbesar 12x Gambar 12 bagian atas dan saat peta diperbesar 13x Gambar 12 bagian bawah tidak banyak berubah karena data sangat padat.
Perenggangan antar titik tidak begitu berpengaruh karena wilayahnya juga kecil. Warna visualisasi
heatmap
didominasi oleh warna merah karena kerapatan titik lokasi UKM yang memproduksi makanan dan minuman di kelurahan Salatiga
sangat rapat.
Gambar 12 Hasil visualisasi heatmap pada zoom 12x dan 13x untuk Kelurahan Salatiga
Pengujian
black box
merupakan pengujian yang fokus pada persyaratan fungsi. Dengan metode
black box
pengujian dilakukan dengan mencari fungsi-fungsi yang tidak benar, menguji kesalahan-kesalahan yang mungkin
terjadi pada tampilan aplikasi yang telah dikembangkan[9]. Metode pengujian yang digunakan pada penelitian ini adalah metode
black box
. Tujuannya adalah untuk memperkecil kesalahan pada saat pengembangan dan dengan mudah melakukan koreksi terhadap kekurangan yang terjadi setelah
aplikasi selesai dikerjakan. Hasil pengujian bisa dlihat pada Tabel 3.
Tabel 3 Tabel Uji Aplikasi Pemetaan pada zoom 12x Pengelompokan
Hasil yang diharapkan Hasil pengujian
Kesimpulan
Kota Memvisualisasikan semua
data UKM yang memproduksi makanan
dan minuman menggunakan gradien
warna Gradien warna keluar
sesuai dengan seluruh data UKM yang
memproduksi makanan dan minuman
Hasil Valid
15 Kecamatan
Memvisualisasikan data UKM yang memproduksi
makanan dan minuman berdasarkan kecamatan
yang dipilih menggunakan gradien warna
Gradien warna keluar sesuai dengan seluruh
data UKM yang memproduksi makanan
dan minuman dikelompokkan
berdasarkan kecamatan Hasil Valid
Kelurahan Memvisualisasikan data
UKM yang memproduksi makanan dan minuman
berdasarkan kelurahan yang dipilih menggunakan
gradien warna Gradien warna keluar
sesuai dengan seluruh data UKM yang
memproduksi makanan dan minuman
dikelompokkan berdasarkan kecamatan
Hasil Valid
Pada Tabel 3 memperlihatkan hasil uji
black box
testing
atas uji pengelompokan berdasarkan wilayah saat peta diperbesar 12x. Pada pengujian ini
dipastikan semua wilayah memiliki hasil yang sesuai harapan. Pengujian ini akan berperngaruh pada pengujian pengelompokan berdasarkan wilayah dengan peta
diperbesar 13x seperti yang terlihat pada Tabel 4.
Tabel 4 Tabel Uji Aplikasi Pemetaan pada zoom 13x Pengelompokan Hasil yang diharapkan
Hasil pengujian Kesimpulan
Kota Memvisualisasikan semua
data UKM yang memproduksi makanan dan
minuman menggunakan gradien warna dengan
bentuk lebih menyebar dari pada zoom 12x dan
intensitas gradien warna berubah.
Gradien warna keluar sesuai dengan seluruh data
UKM yang memproduksi makanan dan minuman
dengan bentuk lebih menyebar dari pada zoom
12x dan intensitas warna berubah
Hasil Valid
Kecamatan Memvisualisasikan data
UKM yang memproduksi makanan dan minuman
berdasarkan kecamatan yang dipilih menggunakan
gradien warna dengan bentuk lebih menyebar dari
pada zoom 12x dan intensitas gradien warna
berubah. Gradien warna keluar
sesuai dengan seluruh data UKM yang memproduksi
makanan dan minuman dikelompokkan
berdasarkan kecamatan dengan bentuk lebih
menyebar dari pada zoom 12x dan intensitas warna
berubah
Hasil Valid
Kelurahan Memvisualisasikan data
UKM yang memproduksi makanan dan minuman
berdasarkan kelurahan yang dipilih menggunakan
gradien warna dengan bentuk lebih menyebar dari
pada zoom 12x dan intensitas gradien warna
berubah. Gradien warna keluar
sesuai dengan seluruh data UKM yang memproduksi
makanan dan minuman dikelompokkan
berdasarkan kecamatan dengan bentuk lebih
menyebar dari pada zoom 12x dan intensitas warna
berubah
Hasil Valid
16
Pada Tabel 4 menunjukan hasil uji saat peta diperbesar 13x yang mengharapkan hasil yang berbeda dari peta yang diperbesar 12x. Perbedaan yang
diinginkan adalah perubahan bentuk dan perubahan intensitas warna pada gradien warna
heatmap
. Pada Tabel 4 menyatakan bahwa perbedaan yang diinginkan sesuai dengan harapan.
5. Kesimpulan
