LEAFLET : MENAMBAHKAN STYLE PADA DATA POLIGON (PETA CLOROPLETH)

Pada tutorial leaflet sebelumnya, kita telah memunculkan data poligon pada leafleat tetapi secara default hanya berwarna biru. Warna biru kurang menarik dan tidak informatif karena seluruh poligon memilih warna yang sama padahal memiliki atribut yang berbeda. Tutorial kali ini kita akan mencoba membuat sedikit menarik dan informatif data poligon tersebut. Kali ini kita akan membuat peta cloropleth dimana terdapat gradasi sesuai dengan kelas data pada atribut. Berikut adalah codenya secara keseluruhan.

leaf-0601

Berikut adalah tampilannya ketika di web.

leaf-0602

Pada tahap ini kita mengetahui bagaimana kemampuan atau potensi yang dapat dikembangkan dari leaflet dan logika yang kita punya. Leafleat menyediakan metode yang mudah untuk melakukan modifikasi terhadap data poligon, tetapi perlu diperhatikan bahwa kreatifitas kita yang menentukan. Code di atas hanya berusaha mengklasifikasikan kelas atribut data poligon dan memasukkannya warna sesuai dengan atributnya.

leaf-0603

Pertama perhatikan code di atas, terutama pada fungsi style. ketika style sudah didefinisikan oleh Leaflet, maka leaflet menggunakannya untuk menentukan style pada setiap poligon berdasarkan atribut (feature) data GeoJSON. Fungsi memerlukan satu argument yaitu Feature. Code tersebut diperlukan untuk mengganti default. Fungsi di atas menggunakan statement if … dan else, yang berguna untuk mengklasifikasikan data baik kategorikal maupun rasio berdasarkan atribut datanya.   “Class_Id = feature.properties.Class_Id” merupakan atribut dari data poligon yang berisi nilai 1 – 4 (Class_Id) yang berasosiasi dengan tingkat ketinggian data (dalam hal ini biomassa: sangat rendah, rendah, tinggi, dan sangat tinggi). Warna, fillcolor diperoleh dari ColorBrewer , yang merupakan perangkat desain online yang membantu orang memilih warna yang baik untuk petanya dan gambar grafik yang lain.

leaf-0606

Selanjutnya adalah onEachFeature berguna untuk menampilkan popup yang berisi informasi mengenai poligon secara individual, seperti pointToLayer pada data titik. onEachFeature memiliki dua argumen yaitu Feature dan Layer yang merupakan data poligon. Berikut adalah codenya.

leaf-0605

Pada code di atas terdapat layer.bindPopup untuk menampilkan popupnya dan <Strong> berguna untuk membuat huruf tebal <br> membuat baris baru  feature.properties.tingkat untuk menampilkan informasi pada atribut terutama pada .tingkat (merupakan atribut pada data poligon).  Dan berikut adalah hasilnya.

leaf-0607

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