Mungkin teman-teman sudah ada yang mengetahui apa itu geojson kalau belum, saya akan menberitaukan secara singkat apa itu geojson. GeoJson jika dipisah kata itu teman teman akan mendapatkan arti kata Geografis dan JSON yang merupakan struktur data. Intinya GeoJson itu adalah struktur data yang berisikan data geospasial seperti point, polyline, multipolygon. GeoJson juga sering digunakan pada website atau aplikasi yang berbasis GIS (Geographic Information System). Salah satu layanan terbesar yang berbasis GIS yaitu “Google Maps” dengan berbagai fitur yang telah dibuat seperti traking, pencarian jarak terdekat, dll. Sekian tentang apa itu geojson dan saatnya kita coba praktekan.
- Pertama teman teman membuat project di code editor yang telah terinstall dilaptop atau Pc teman teman, kali ini penulis menggunakan code editor bernama Visual Studio Code. Kemudia buat dua file lagi dengan nama index.html dan map.js. seperti gambar dibawah ini.
- Kemudian, kita mengetikan code dasar untuk menyiapkan container dimana peta dari google maps akan terpasang. Seperti gambar dibawah ini.
Bisa dilihat pada bari 9-10 ada container yang akan menampilkan google maps.
Selanjutnya, kita akan memanggil file maps.js kedalam index.html. seperti pada gambar dibawah ini. Bisa dilihat pada baris code no.7.
Kemudian kita akan menambahkan library Google Maps didalam tag <head> seperti dibawah ini:
<script src="https://maps.googleapis.com/maps/api/js?key=<API KEY>&callback=initMap"></script>
Setelah itu kita akan pindah ke file map.js, kita akan membuat function initMap yang akan digunakan pada library google maps bisa dilihat pada gambar diatas no bari.8
Kita akan menambahkan baris code yang dimana kita code tersebut menentukan titik kordinat awal pada saat map akan terbuka. Seperti gambar dibawah ini.
Penjelasan Code :
Baris kode 1: variable map sebagai inisial dari library google maps.
Baris kode 3 : variable untuk mentukan kordinat pada peta
Baris kode 5-15 : kita menentukan property akan diterapkan pada maps;
Baris kode 17 : variable maps akan diisi dengan library google maps yang telah mempunyai property pada maps.
- Kemudian kita akan menload file GeoJson yang berasal dari link berikut : https://github.com/superpikar/indonesia-geojson/blob/master/indonesia-province-simple.json
Dengan menambahkan baris kode seperti gambar dibawah ini:
Dapat dilihat pada bari 18. Anda tidak memasukan Alamat url geijson anda berasal.
- Sampai disini, data dari GeoJson Akan tampil pada peta.
Sebagai tambahan kita akan menampilkan label ditengah tengah polygon.
- Tambahkan code beritkut didalam function initMaps diline berikutnya tepatnya di bari code 19.
Sekian terimah Kasih
Link download reference : [https://docs.google.com/document/d/1bbioOFHCUUIRVLb8FjWEEwnQBig6noMB/edit?usp=sharing&ouid=105722836670077370355&rtpof=true&sd=true]
