Referensi gaya Map Tiles API

Anda dapat menggunakan opsi gaya untuk menyesuaikan presentasi di Google Maps. Anda dapat mengubah tampilan fitur seperti jalan, taman, bisnis, dan lokasi menarik lainnya. Selain mengubah fitur peta tersebut, Anda juga bisa menyembunyikan fitur peta seluruhnya. Hal ini memungkinkan Anda melakukan hal-hal seperti menekankan komponen peta tertentu, atau membuat peta melengkapi gaya laman sekitarnya.

Contoh

Deklarasi gaya JSON berikut mengubah semua fitur peta menjadi abu-abu, lalu 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, perairan, 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 dapat menerapkan satu atau beberapa styler ke sebuah fitur.

Untuk menentukan gaya, Anda harus mengombinasikan satu rangkaian pemilih featureType dan elementType serta stylers ke dalam array gaya. Anda dapat menarget semua kombinasi fitur dalam satu array. Akan tetapi, jumlah gaya yang dapat Anda terapkan sekaligus terbatas. Jika array gaya Anda melebihi jumlah karakter maksimum berarti tidak ada gaya yang diterapkan.

Bagian lainnya dari halaman ini berisi informasi selengkapnya tentang berbagai fitur, elemen, dan styler.

featureType

Cuplikan JSON berikut memilih semua jalan pada peta:

{
  "featureType": "road"
}

Fitur, atau jenis fitur, adalah karakteristik geografis pada peta, termasuk jalan, taman, perairan, bisnis, dan lainnya.

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

Sebagian fitur berisi fitur turunan 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 turunannya, seperti road.local dan road.highway.

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

Tersedia fitur-fitur berikut:

  • all (default) memilih semua fitur.
  • administrative memilih semua wilayah administratif. Penataan gaya hanya memengaruhi label wilayah administratif, bukan batas geografis atau isian.
    • administrative.country memilih negara.
    • administrative.land_parcel memilih persil tanah.
    • administrative.locality memilih lokalitas.
    • administrative.neighborhood memilih kawasan.
    • administrative.province memilih provinsi.
  • landscape memilih semua lanskap.
    • landscape.man_made memilih fitur buatan manusia, seperti bangunan dan struktur lainnya.
    • landscape.natural memilih fitur alami, seperti pegunungan, sungai, gurun, dan gletser.
    • landscape.natural.landcover memilih fitur penutup lahan, materi fisik yang menutupi permukaan bumi, seperti hutan, padang rumput, lahan basah, dan tanah kosong.
    • landscape.natural.terrain memilih fitur medan permukaan tanah, seperti elevasi, kemiringan, dan orientasi.
  • poi memilih semua lokasi menarik.
    • poi.attraction memilih tempat wisata.
    • poi.business memilih bisnis.
    • poi.government memilih gedung pemerintah.
    • 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, masjid, 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 lokal.
  • transit memilih semua jalur dan stasiun transportasi umum.
    • transit.line memilih jalur transportasi umum.
    • transit.station memilih semua stasiun transportasi umum.
    • transit.station.airport memilih bandara.
    • transit.station.bus memilih perhentian bus.
    • transit.station.rail memilih stasiun kereta.
  • water memilih perairan.

elementType

Cuplikan JSON berikut memilih label untuk semua jalan lokal:

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

Elemen adalah 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 mendukung semua, elemen:

  • all (default) memilih semua elemen fitur yang ditentukan.
  • geometry memilih semua elemen geometris fitur yang ditentukan.
    • geometry.fill hanya memilih isian geometri fitur.
    • geometry.stroke hanya memilih goresan geometri fitur.
  • labels memilih label tekstual yang terkait dengan fitur yang ditentukan.
    • 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 goresan teks label.

stylers

Styler adalah opsi pemformatan yang dapat 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 menghapus semua intensitas dari warna fitur, apa pun warna awalnya. Efeknya adalah untuk merender fitur menjadi hitam putih:

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

Cuplikan ini menyembunyikan fitur sepenuhnya:

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

Opsi gaya berikut telah didukung:

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

    Catatan: Opsi ini menetapkan hue dengan mempertahankan saturasi dan kecerahan yang ditetapkan dalam gaya default Google (atau dalam opsi gaya lainnya yang Anda definisikan pada peta). Warna yang dihasilkan akan sesuai dengan gaya peta dasar. Jika Google melakukan perubahan pada gaya peta dasar, perubahan tersebut akan memengaruhi fitur peta Anda yang telah diberi gaya dengan hue. Sebaiknya gunakan styler color absolut jika memungkinkan.

  • lightness (nilai floating point 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 menetapkan kecerahan dengan mempertahankan saturasi dan hue yang ditetapkan dalam gaya default Google (atau dalam opsi gaya lainnya yang Anda definisikan pada peta). Warna yang dihasilkan akan sesuai dengan gaya peta dasar. Jika Google melakukan perubahan pada gaya peta dasar, perubahan tersebut akan memengaruhi fitur peta Anda yang telah diberi gaya dengan lightness. Sebaiknya gunakan styler color absolut jika memungkinkan.

  • saturation (nilai floating point antara -100 dan 100) menunjukkan perubahan persentase intensitas warna dasar untuk diterapkan pada elemen.

    Catatan: Opsi ini menetapkan saturasi dengan mempertahankan hue dan kecerahan yang ditetapkan dalam gaya default Google (atau dalam opsi gaya lainnya yang Anda definisikan pada peta) Warna yang dihasilkan akan sesuai dengan gaya peta dasar. Jika Google melakukan perubahan pada gaya peta dasar, perubahan tersebut akan memengaruhi fitur peta Anda yang telah diberi gaya dengan saturation. Sebaiknya gunakan styler color absolut jika memungkinkan.

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

    Opsi ini menyesuaikan kecerahan secara relatif terhadap gaya default Google, dengan menggunakan kurva gamma. Jika Google melakukan perubahan pada gaya peta dasar, perubahan tersebut akan memengaruhi fitur peta Anda yang telah diberi gaya dengan gamma. Sebaiknya gunakan styler color absolut jika memungkinkan.

  • 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 hanya membalikkan gaya default Google. Jika Google melakukan perubahan pada gaya peta dasar, perubahan tersebut akan memengaruhi fitur peta Anda yang telah diberi gaya dengan invert_lightness. Sebaiknya gunakan styler color absolut jika memungkinkan.

  • visibility (on, off, atau simplified) menunjukkan apakah elemen muncul pada peta, serta caranya. Visibilitas simplified menghapus 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 dari format #RRGGBB) menetapkan warna fitur.
  • weight (nilai integer, lebih besar dari atau sama dengan nol) menetapkan bobot fitur, dalam piksel. Menetapkan bobot ke nilai yang tinggi dapat mengakibatkan terjadinya penyesuaian nilai di dekat batas ubin.

Aturan gaya diterapkan sesuai urutan Anda menetapkannya. Jangan gabungkan beberapa operasi menjadi satu gaya. Sebagai gantinya, definisikan setiap operasi sebagai entri terpisah dalam array 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, saturasi, kecerahan

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

Koreksi gamma mengubah kecerahan 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 saturasi dan kecerahan 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.

Model hue, saturasi, kecerahan

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

Misalnya, Anda dapat 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 bayangan murni abu-abu. Untuk menunjukkan hitam, putih atau abu-abu, Anda harus menghapus semua saturation (menetapkan nilai ke -100) dan menyesuaikan lightness sebagai gantinya.

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