LEAFLET 2: MENAMBAHKAN TITIK, LINGKARAN, POLYGON

Tutorial Leaflet sebelumnya kita hanya menambahkan tile atau peta dasar pada peta web, sekarang kita akan mencoba menambahkan objek lain seperti, titik, lingkaran, dan poligon.

Membuat titik

Untuk membuat titik tinggal tambahkan

var marker = L.marker([-7.77, 110.37]).addTo(map);

leaf-0201

untuk membuat lingkaran caranya sama dengan membuat titik, hanya berbeda dalam menentukan radiusnya dan kita juga dapat mengatur warna dari lingkaran.

var circle = L.circle([-7.78, 110.39], 500, {

      color: ‘red’,

      fillColor: ‘#f03’,

      fillOpacity: 0.5

  }).addTo(map);

leaf-0202

Menambahkan polygon juga hampir sama,

var polygon = L.polygon([

      [-7.76376, 110.37],

      [-7.76572, 110.37],

      [-7.77325, 110.37],

      [-7.77563, 110.37],

      [-7.77661, 110.38],

      [-7.76844, 110.38]

  ]).addTo(map);

leaf-0203

Menampilkan Popup pada objek.

Popup digunakan jika kita ingin menampilkan sebuah informasi dari objek. Leaflet dapat melakukannya dengan sederhana, seperti di bawah.

marker.bindPopup(“Assalamualaikum!
Saya titik.”).openPopup();

circle.bindPopup(“Saya Lingkaran.”);

polygon.bindPopup(“Saya Polygon.”);

bindPopup digunakan untuk memunculkan popup jika kita meng-klik objek, dan openPopup digunakan untuk memunculkan popup secara langsung ketika kita membuka web.

leaf-0204

Popup juga dapat ditampilkan dalam bentuk layer, jika kita ingin memunculkan popup tapi tidak pada objek.

var popup = L.popup()

    .setLatLng([-7.75661, 110.39])

    .setContent(“Saya popup.”)

    .openOn(map);

leaf-0205

Kita menggunakan openOn dari pada addTo karena popup akan menutup secara otomatis jika kita membuka popup pada objek lain.

Sekarang jika kita ingin memunculkan lokasi koordinat kita, yang berfungsi sebagai penanda, maka kita dapat memunculkan koordinat lokasi ketika kita mengklik pada peta, maka kita dapat menghunakan onMapClick

function onMapClick(e) {

    popup

        .setLatLng(e.latlng)

        .setContent(“Anda mengklik peta pada koordinat ” + e.latlng.toString())

        .openOn(map);

  }

  map.on(‘click’, onMapClick);

Klik disini untuk mengetahui peta secara keseluruhan.

leaf-0206

Sumber : Leafletjs.com

*** 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