LEAFLET 4: MENAMBAHKAN STYLE PADA DATA TITIK

Pada tutorial leaflet 3, peta biomassa masih menggunakan tampilan default yaitu titik – titik berwarna biru. Meskipun titik – titik tersebut tidak jelek tetapi kurang memberikan informasi secara langsung dan bukan ide yang bagus. Berikut adalah tampilan yang berbeda : Klik Di sini.

leaf-0401

Leaflet mudah dan fleksibel untuk membuat peta. Pada peta sebelumnya yang default kita akan modifikasi seperti gambar di atas. Untuk membautnya kita hanya membutuhkan dua tambahan utama :

Pertama kita akan menambahkan L.icon() untuk mendefinisikan icon yang akan kita gunakan pada biomassa. Kali ini kita akan memberikan ion tersebut dua opsi dari banyak opsi yang tersedia. Untuk sekarang dua opsi tersebut cukup.

leaf-0402

  1. iconUrl adalah code untuk mengarahkan ke alamat gambar icon (pine.png). Jika menggunakan url masukkan alamat webnya, dan jika menggunakan ofline cukup tulis nama file sesuai dalam folder HTML kita.
  2. iconSize adalah ukuran piksel icon kita yaitu tinggi dan lebar icon. Leaflet butuh tahu ukuran icon untuk meletakkannya secara benar pada web kita. Properties tersebut dapat digunakan untuk menskalakan icon kita, tapi dalam kegiatan kali ini kita menggunakan dimensi yang sebenarnya dari gambar icon.

Selanjutnya, pada data GeoJSON, L.geoJson kita akan menambahkannya dengan satu opsi, yaitu fungsi pointToLayer.

leaf-0403

Ketika pointToLayer didefinisikan, leaflet menggunakannya untuk menentukan bagaimana mengubah titik ke dalam layer peta. pointToLayer berisikan dua argument yaitu GeoJSON feature dan LatLng yang merepresentasikan lokasi objek. pointToLayer membutuhkan L.marker() untuk membuat Marker (titik) baru, yang akan melewati dua tahap:

  1. LatLng sebelumnya telah di kirim ke pointToLayer, dimana merupakan lokasi titik
  2. Opsi objek dengan icon yang didefinisikan dengan objek raiIcon yang telah kita bahas sebelumnya.

Kemampuan yang sesungguhnya dari peta web adalah pada interaktif bukan hanya pada zoom dan geser. Selanjutnya kita akan menambahkan popup yang menunjukkan nama titik dan besar biomassa. Seperti berikut : klik di sini

leaf-0404

Untuk menambahkan popup seperti di atas cukup dengan seperti menambahkan code berikut :

Sangat mudah, sebelum mengembalikan Marker (titik) kedalam pontToLayer, kita hanya butuh menggunakan metode bindPopup() untuk memunculkan popup ketika kita mengklik pada icon. bindPopup() hanya membutuhkan isi yang akan kita tampilkan. Kali ini kita hanya akan menampilkan nomor sampel biomassa dan kandungan biomassa yang sudah ada pada data GeoJSON. Leaflet akan menghendel yang lainya.

Sumber :

http://maptimeboston.github.io/leaflet-intro/

*** SEMOGA BERMANFAAT ***

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s