LEAFLET 5 : MENAMBAHKAN DATA EKSTERNAL POLIGON

Leaflet tidak hanya mampu membuka data titik tapi juga garis dan area (poligon). Kali ini kita akan membahas bagaimana menampilkan data berupa poligon dan bagaimana memodifikasikannya sehingga mampu memberikan informasi yang lebih. Data yang digunakan adalah data kategorikal biomassa dengan keterangan tinggi, sedang, rendah berdasarkan hasil,pengolahan data lapangan. Data yang digunakan memiliki nama areabio.geojson (https://github.com/Mawarlaboratorium/intro-leaflet/blob/master/areabio.geojson). Berikut adalah kode secara keseluruhan untuk menampilkan data poligon melalui leaflet.

leaf-0501

Untuk menambahkan data GeoJSON poligon dan garis pada leaflet sebenarnya sama dengan menambahkan data point seperti pada tutorial sebelumnya. Sebenarnya ketiga data tersebut dapat dimunculkan melalui satu file GeoJSON. Kita hanya akan mengulang langkah sebelumnya dan mengganti data dengan areabio1.geojson. berikut kode untuk memunculkan point GeoJSON.

leaf-0504

Selanjutnya kode untuk memunculkan poligon GeoJSON. Leaflet akan merender data poligon dan garis sebagai SVG (Scalable Vector Graphics), sehingga membuat kita dapat menjadikannya interaksi dan menambahkan model lebih menarik dengan mudah.

leaf-0503

Pada tahap ini dua asynchronous $.getJSON tidak menjamin data akan berakhir sesuai urutan yang diinginkan. Dimana kita tidak menginginkan  data titik pine dimunculkan lebih dulu dari pada data biomassa sehingga data titik terletak di bawah data poligon biomassa. Tapi jangan khawatir Leaflet merupakan kode library yang pintar. Jika kita melihat lebih dalam dengan memeriksa dengan inspect element pada browser, kita akan menemukan peta berisi beberapa pane. SVG path seperti data areabio.geojson akan selalu di munculkan atau digambar pada overlay pane, yang terletak di bawah marker pane seperti data titik pine kita. Jadi tidak peduli layer yang mana dari data kita yang digambar lebih dulu, data tersebut akan digambar sesuai urutan yang benar kecuali jika kita memiliki data poligon lebih dari satu, kita harus lebih hati – hati dalam memposisikannya. berikut adalah hasilnya. klik disini untuk melihat hasil, peta hasil.

leaf-0502

Tutorial selanjutnya kita akan menambahkan style sehingga data lebih informatif.

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