Referensi Gaya

Dengan opsi gaya, Anda bisa menyesuaikan presentasi gaya peta Google standar, mengubah tampilan visual dari fitur seperti jalan raya, taman, bisnis, dan tempat menarik lainnya. Di samping mengubah gaya fitur ini, Anda bisa juga menyembunyikan fitur seluruhnya. Dengan ini berarti bisa menekankan komponen tertentu dari peta atau membuat peta melengkapi gaya laman sekitarnya.

Contoh

Deklarasi gaya JSON berikut mengubah semua fitur peta menjadi abu-abu, kemudian memberi warna biru pada geometri jalan arteri, dan menyembunyikan label lanskap sama sekali:

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

Objek JSON

Deklarasi gaya JSON terdiri dari elemen berikut:

• featureType (opsional) - fitur yang akan dipilih untuk modifikasi gaya ini. Fitur adalah karakteristik geografis pada peta, termasuk jalan, taman, badan air, dan lainnya. Jika Anda tidak menetapkan suatu fitur, semua fitur akan dipilih.
• elementType (opsional) - properti fitur yang ditetapkan untuk dipilih. Elemen adalah sub-bagian fitur, termasuk label dan geometri. Jika Anda tidak menetapkan suatu elemen, semua elemen fitur akan dipilih.
• stylers - aturan yang akan diterapkan pada fitur dan elemen yang dipilih. Styler menunjukkan warna, visibilitas, dan bobot fitur. Anda bisa menerapkan satu atau beberapa styler ke sebuah fitur.

Untuk menetapkan sebuah gaya, Anda harus mengombinasikan satu rangkaian pemilih featureType dan elementType dan styler ke dalam satu larik gaya. Anda bisa menargetkan sembarang kombinasi fitur dalam satu larik. Akan tetapi, jumlah gaya yang bisa Anda terapkan sekaligus adalah terbatas. Jika larik gaya Anda melebihi jumlah karakter maksimum maka tidak ada gaya yang diterapkan.

Bagian selebihnya dari laman ini berisi informasi selengkapnya tentang berbagai fitur, elemen, dan styler.

featureType

Cuplikan JSON berikut memilih semua jalan pada peta:

{
  "featureType": "road"
}

Fitur, atau tipe fitur, adalah karakteristik geografis pada peta, termasuk jalan, taman, badan air, bisnis, dan lainnya.

Fitur membentuk pohon hierarki kategori, dengan all sebagai akarnya. Jika Anda tidak menetapkan suatu fitur, semua fitur akan dipilih. Menetapkan fitur all memiliki efek yang sama.

Sebagian fitur berisi fitur anak yang Anda tetapkan menggunakan notasi titik. Misalnya, landscape.natural atau road.local. Jika Anda menetapkan fitur induk, misalnya road, gaya yang Anda tetapkan untuk induk akan diterapkan ke semua anaknya, misalnya road.local dan road.highway.

Perhatikan, fitur induk dapat menyertakan beberapa elemen yang tidak disertakan dalam semua fitur anaknya.

Tersedia fitur-fitur berikut:

• all (default) memilih semua fitur.
• administrative memilih semua area administratif. Penataan gaya hanya memengaruhi label area administratif, bukan batas geografis atau isian.
  • administrative.country memilih negara.
  • administrative.land_parcel memilih persil tanah.
  • administrative.locality memilih lokalitas.
  • administrative.neighborhood memilih daerah sekitar.
  • administrative.province memilih provinsi.
• landscape memilih semua lanskap.
  • landscape.man_made memilih bangunan yang dibuat oleh manusia.
  • landscape.natural memilih fitur alami.
  • landscape.natural.landcover memilih fitur penutup tanah.
  • landscape.natural.terrain memilih fitur medan.
• poi memilih semua tempat menarik.
  • poi.attraction memilih daya tarik wisata.
  • poi.business memilih bisnis.
  • poi.government memilih gedung pemerintahan.
  • poi.medical memilih layanan darurat, termasuk rumah sakit, apotek, polisi, dokter, dan lainnya.
  • poi.park memilih taman.
  • poi.place_of_worship memilih tempat ibadah, termasuk gereja, kuil, mesjid, dan lainnya.
  • poi.school memilih sekolah.
  • poi.sports_complex memilih kompleks olahraga.
• road memilih semua jalan.
  • road.arterial memilih jalan arteri.
  • road.highway memilih jalan raya.
  • road.highway.controlled_access memilih jalan raya dengan akses terkontrol.
  • road.local memilih jalan setempat.
• transit memilih semua terminal angkutan umum dan jalurnya.
  • transit.line memilih jalur angkutan.
  • transit.station memilih semua terminal angkutan umum.
  • transit.station.airport memilih bandara.
  • transit.station.bus memilih halte bus.
  • transit.station.rail memilih stasiun kereta api.
• water memilih badan air.

elementType

Cuplikan JSON berikut memilih label untuk semua jalan lokal:

{
  "featureType": "road.local",
  "elementType": "labels"
}

Elemen subdivisi fitur. Sebuah jalan, misalnya, terdiri dari garis grafik (geometri) pada peta, juga teks yang menunjukkan namanya (label).

Elemen berikut tersedia, namun perhatikan bahwa fitur tertentu mungkin tidak mendukung, mendukung sebagian, atau semua, elemen:

• all (default) memilih semua elemen fitur yang ditetapkan.
• geometry memilih semua elemen geometris fitur yang ditetapkan.
  • geometry.fill hanya memilih isian geometri fitur.
  • geometry.stroke hanya memilih garis luar geometri fitur.
• labels memilih label tekstual yang dikaitkan dengan fitur yang ditetapkan.
  • labels.icon hanya memilih ikon yang ditampilkan dalam label fitur.
  • labels.text hanya memilih teks label.
  • labels.text.fill hanya memilih isian label. Isian label biasanya dirender sebagai garis luar berwarna yang mengelilingi teks label.
  • labels.text.stroke hanya memilih garis luar teks label.

stylers

Styler adalah opsi pemformatan yang bisa Anda terapkan pada fitur dan elemen peta.

Cuplikan JSON berikut menampilkan sebuah fitur berupa hijau terang, dengan menggunakan nilai RGB:

"stylers": [
  { "color": "#99FF33" }
]

Cuplikan ini membuang semua intensitas dari warna fitur, apa pun warna awalnya. Efeknya adalah untuk merender fitur menjadi abu-abu:

"stylers": [
  { "saturation": -100 }
]

Cuplikan ini menyembunyikan fitur sepenuhnya:

    "stylers": [
      { "visibility": "off" }
    ]

Opsi gaya berikut telah didukung:

• hue (string heksadesimal RGB dengan format #RRGGBB) menunjukkan warna dasar.

  Catatan: Opsi ini menyetel hue dengan mempertahankan saturation dan lightness yang ditetapkan dalam gaya default Google (atau dalam opsi gaya lainnya yang Anda definisikan pada peta). Warna yang dihasilkan relatif terhadap gaya peta dasar. Jika Google membuat perubahan pada gaya peta dasar, perubahan tersebut akan memengaruhi fitur peta Anda yang telah diberi gaya dengan hue. Lebih baik menggunakan styler color absolut jika bisa.

• lightness (nilai titik-mengambang antara -100 dan 100) menunjukkan persentase perubahan kecerahan elemen. Nilai negatif menambah tingkat kegelapan (-100 menetapkan hitam) sementara nilai positif menambah tingkat kecerahan (+100 menetapkan putih).

  Catatan: Opsi ini menyetel lightness dengan mempertahankan saturation dan hue yang ditetapkan dalam gaya default Google (atau dalam opsi gaya lainnya yang Anda definisikan pada peta). Warna yang dihasilkan relatif terhadap gaya peta dasar. Jika Google membuat perubahan pada gaya peta dasar, perubahan tersebut akan memengaruhi fitur peta Anda yang telah diberi gaya dengan lightness. Lebih baik menggunakan styler color absolut jika bisa.

• saturation (nilai titik-mengambang antara -100 dan 100) menunjukkan perubahan persentase intensitas warna dasar yang diterapkan pada elemen.

  Catatan: Opsi ini menyetel saturation dengan mempertahankan hue dan lightness yang ditetapkan dalam gaya default Google (atau dalam opsi gaya lainnya yang Anda definisikan pada peta). Warna yang dihasilkan relatif terhadap gaya peta dasar. Jika Google membuat perubahan pada gaya peta dasar, perubahan tersebut akan memengaruhi fitur peta Anda yang telah diberi gaya dengan saturation. Lebih baik menggunakan styler color absolut jika bisa.

• gamma (nilai titik-mengambang antara 0.01 dan 10.0, dengan nilai 1.0 menyatakan tidak ada koreksi) menunjukkan besarnya koreksi gamma yang diterapkan pada elemen. Koreksi gamma memodifikasi kecerahan warna secara non-linier, walaupun tidak memengaruhi nilai-nilai hitam atau putih. Koreksi gamma biasanya digunakan untuk memodifikasi kontras beberapa elemen. Misalnya, Anda bisa memodifikasi gamma untuk menambah atau mengurangi kontras antara tepi dan bagian dalam elemen.

  Catatan: Opsi ini menyesuaikan kecerahan secara relatif terhadap gaya default Google, dengan menggunakan kurva gamma. Jika Google membuat perubahan pada gaya peta dasar, perubahan tersebut akan memengaruhi fitur peta Anda yang telah diberi gaya dengan gamma. Lebih baik menggunakan styler color absolut jika bisa.

• invert_lightness (jika true) akan membalikkan kecerahan yang ada. Hal ini berguna, misalnya, saat beralih secara cepat ke peta yang lebih gelap dengan teks putih.

  Catatan: Opsi ini cuma membalikkan gaya default Google. Jika Google membuat perubahan pada gaya peta dasar, perubahan tersebut akan memengaruhi fitur peta Anda yang telah diberi gaya dengan invert_lightness. Lebih baik menggunakan styler color absolut jika bisa.

• visibility (on, off, atau simplified) menunjukkan apakah elemen muncul pada peta, serta caranya. Visibilitas simplified membuang beberapa fitur gaya dari fitur yang terpengaruh; misalnya, jalan disederhanakan menjadi garis lebih tipis tanpa garis luar, sedangkan taman kehilangan teks labelnya namun mempertahankan ikon label.
• color (string heksadesimal RGB dengan format #RRGGBB) menyetel warna fitur.
• weight (nilai integer, lebih besar dari atau sama dengan nol) menyetel bobot fitur, dalam piksel. Setelan bobot ke nilai yang tinggi bisa mengakibatkan pemangkasan dekat batas petak.

Aturan gaya diterapkan sesuai urutan Anda menetapkannya. Jangan gabungkan beberapa operasi menjadi satu gaya. Sebagai gantinya, definisikan setiap operasi sebagai entri terpisah dalam larik gaya.

Catatan: Urutan penting, karena beberapa operasi tidak bersifat komutatif. Fitur dan/atau elemen yang dimodifikasi melalui operasi gaya (biasanya) sudah memiliki gaya. Operasi berfungsi pada gaya yang sudah ada tersebut, jika ada.

Model hue, saturation, lightness

Catatan: Efek setelan hue, saturation, lightness, dan gamma relatif terhadap gaya peta dasar. Jika Google membuat perubahan pada gaya peta dasar, perubahan tersebut akan memengaruhi fitur peta Anda yang telah diberi gaya dengan opsi ini. Lebih baik menggunakan styler color absolut jika bisa.

Peta bergaya menggunakan model Hue, Saturation, Lightness (HSL) untuk menunjukkan warna dalam operasi styler. Hue menunjukkan warna dasar, saturation menunjukkan intensitas warna, dan lightness menunjukkan jumlah relatif putih atau hitam dalam warna konstituen.

Koreksi gamma akan memodifikasi lightness pada ruang warna, umumnya untuk menambah atau mengurangi kontras. Selain itu, model HSL mendefinisikan warna dalam ruang koordinat dengan hue menunjukkan orientasi dalam roda warna, sedangkan saturation dan lightness menunjukkan amplitudo di sepanjang sumbu yang berbeda. Hue diukur dalam ruang warna RGB, yang mirip dengan ruang warna RGB pada umumnya, hanya tidak ada bayangan putih dan hitam.

Meskipun hue mengambil nilai warna heksadesimal HTML, hue hanya menggunakan nilai ini untuk menentukan warna dasar - yaitu, orientasinya di roda warna, bukan saturasi atau kecerahan, yang ditunjukkan secara terpisah sebagai perubahan persentase.

Misalnya, Anda bisa mendefinisikan hue untuk hijau murni berupa hue:0x00ff00 atau hue:0x000100. Kedua hue identik. Kedua nilai menunjuk ke hijau murni dalam model warna HSL.

Roda Warna RGB

Nilai hue RGB yang terdiri dari bagian seimbang merah, hijau dan biru tidak menunjukkan hue, karena tidak satu pun dari nilai tersebut yang menunjukkan orientasi di ruang koordinat HSL. Contohnya adalah "#000000" (hitam), "#FFFFFF" (putih), dan semua arsiran murni abu-abu. Untuk menunjukkan hitam, putih atau abu-abu, Anda harus membuang semua saturation (menyetel nilai ke -100) dan menyetel lightness sebagai gantinya.

Selain itu, saat memodifikasi fitur yang ada dan telah mempunyai skema warna, mengubah nilai seperti hue tidak akan mengubah saturation atau lightness yang ada.