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.
Berikut adalah tampilannya ketika di web.
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.
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.
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.
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.
Sumber : http://maptimeboston.github.io/leaflet-intro/
*** SEMOGA BERMANFAAT ***
