Layer KML dan GeoRSS

1. Ikhtisar
2. Opsi Layer KML
3. Detail Fitur KML

KmlLayer merender elemen KML dan GeoRSS menjadi overlay petak Maps API V3.

Ikhtisar

Google Maps API mendukung format data KML dan GeoRSS untuk menampilkan informasi geografis. Format data akan ditampilkan pada peta menggunakan objek KmlLayer, yang konstruktornya mengambil URL dari file KML atau GeoRSS yang bisa diakses oleh umum.

Catatan: Bacalah halaman Dukungan KML dalam dokumentasi KML untuk informasi tentang elemen dan ukuran yang didukung serta pembatasan kerumitan.

Maps API mengonversi data XML geografis yang disediakan menjadi representasi KML yang ditampilkan pada peta menggunakan overlay petak V3. KML ini terlihat (dan berperilaku) seperti elemen overlay V3 yang sudah lama dikenal. Elemen <Placemark> KML dan elemen point GeoRSS dirender sebagai marker, misalnya, elemen <LineString> dirender sebagai polyline dan elemen <Polygon> dirender sebagai poligon. Demikian pula, elemen <GroundOverlay> dirender sebagai gambar persegi panjang pada peta. Akan tetapi, yang penting, objek-objek ini bukan Markers, Polylines, Polygons atau GroundOverlays dari Google Maps API; melainkan, objek-objek tersebut dirender menjadi satu objek pada peta.

Objek KmlLayer muncul pada peta setelah properti map diatur. Anda bisa menghilangkannya dari peta dengan memanggil setMap() dan meneruskan null. Objek KmlLayer mengelola rendering elemen-elemen anak ini dengan secara otomatis mengambil fitur yang sesuai untuk batas peta yang diberikan. Saat batasnya berubah, fitur di viewport saat ini secara otomatis akan dirender.

Karena komponen dalam KmlLayer dirender berdasarkan permintaan, layer memudahkan Anda mengelola hasil rendering ribuan marker, polyline, dan poligon. Perhatikan, Anda tidak bisa mengakses objek konstituen secara langsung, meskipun masing-masing memberikan kejadian klik yang mengembalikan data pada masing-masing objek tersebut.

Opsi Layer KML

Konstruktor KmlLayer()secara opsional meneruskan sejumlah KmlLayerOptions:

• map menetapkan Map yang akan digunakan merender KmlLayer. Anda bisa menyembunyikan KmlLayer dengan mengatur nilainya ke null dalam metode setMap().
• preserveViewport menetapkan bahwa peta tidak boleh disesuaikan ke batas konten KmlLayer saat menampilkan layer. Secara default, saat menampilkan KmlLayer, peta diperbesar dan diposisikan untuk menampilkan keseluruhan konten layer.
• suppressInfoWindows menunjukkan fitur yang bisa diklik dalam KmlLayer tidak boleh memicu ditampilkannya objek InfoWindow.

Di samping itu, setelah KmlLayer dirender, maka akan memuat properti metadata tetap yang berisi nama layer, keterangan, cuplikan dan penulis dalam literal objek KmlLayerMetadata. Anda bisa memeriksa informasi ini dengan metode getMetadata(). Karena rendering objek KmlLayer memerlukan komunikasi asinkron ke server eksternal, maka Anda perlu mendengarkan kejadian metadata_changed, yang akan menunjukkan properti telah diisi.

Contoh berikut membuat sebuah KmlLayer dari umpan GeoRSS yang diberikan:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 49.496675, lng: -102.65625}
  });

  var georssLayer = new google.maps.KmlLayer({
    url: 'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss'
  });
  georssLayer.setMap(map);
}

Lihat contoh GeoRSS

Contoh berikut membuat sebuah KmlLayer dari umpan KML yang diberikan:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 41.876, lng: -87.624}
  });

  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
    map: map
  });
}

Lihat contoh KML

Detail Fitur KML

Karena KML mungkin menyertakan fitur dalam jumlah besar, Anda tidak boleh mengakses data fitur dari objek KmlLayer secara langsung. Melainkan, saat fitur ditampilkan, fitur akan dirender agar terlihat seperti overlay Maps API yang bisa diklik. Mengklik fitur individual, secara default, akan memunculkan InfoWindow berisi informasi <title> dan <description> KML mengenai fitur yang diberikan. Selain itu, mengklik fitur KML akan menghasilkan KmlMouseEvent, yang meneruskan informasi berikut:

• position menunjukkan koordinat garis lintang/garis bujur yang digunakan untuk menautkan InfoWindow bagi fitur KML ini. Posisi ini biasanya adalah lokasi klik untuk poligon, polyline, dan GroundOverlays, namun merupakan asal sesungguhnya untuk marker.
• pixelOffset menunjukkan offset dari position di atas untuk menambatkan “ekor” InfoWindow. Untuk objek poligonal, offset ini biasanya 0,0 namun untuk marker berisi ketinggian marker.
• featureData berisi struktur JSON dari KmlFeatureData.

Contoh objek KmlFeatureData ditampilkan di bawah ini:

{
  author: {
    email: "[email protected]",
    name: "Mr Nobody",
    uri: "http://example.com"
  },
  description: "description",
  id: "id",
  infoWindowHtml: "html",
  name: "name",
  snippet: "snippet"
}

Contoh berikut menampilkan teks <Description> fitur KML dalam sisi <div> bila fitur diklik:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 37.06, lng: -95.68}
  });

  var kmlLayer = new google.maps.KmlLayer({
    url: 'http://kml-samples.googlecode.com/svn/trunk/kml/Placemark/placemark.kml',
    suppressInfoWindows: true,
    map: map
  });

  kmlLayer.addListener('click', function(kmlEvent) {
    var text = kmlEvent.featureData.description;
    showInContentWindow(text);
  });

  function showInContentWindow(text) {
    var sidediv = document.getElementById('content-window');
    sidediv.innerHTML = text;
  }
}

Lihat contoh KML