Riferimento stile per l'API Maps JavaScript

Con le opzioni di stile puoi personalizzare la presentazione degli stili di mappa Google standard, modificando la visualizzazione di elementi come strade, parchi, attività e altri punti d'interesse. Oltre a modificare lo stile di queste funzionalità, puoi nasconderle del tutto. Ciò significa che puoi enfatizzare determinati componenti della mappa o fare in modo che la mappa completi lo stile della pagina circostante.

Esempi

La seguente dichiarazione di stile JSON rende grigi tutti gli elementi della mappa, poi colora in blu la geometria delle strade principali e nasconde completamente le etichette in formato orizzontale:

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

L'oggetto JSON

Una dichiarazione di stile JSON è costituita dai seguenti elementi:

• featureType (facoltativo) - gli elementi da selezionare per questa modifica dello stile. Gli elementi sono caratteristiche geografiche sulla mappa, tra cui strade, parchi, specchi d'acqua e altro ancora. Se non specifichi una funzionalità, vengono selezionate tutte le funzionalità.
• elementType (facoltativo): la proprietà della funzionalità specificata da selezionare. Gli elementi sono parti secondarie di una funzionalità, tra cui etichette e geometria. Se non specifichi un elemento, vengono selezionati tutti gli elementi della funzionalità.
• stylers: le regole da applicare alle funzionalità e agli elementi selezionati. Gli stili indicano il colore, la visibilità e il peso della funzionalità. Puoi applicare uno o più stili a una funzionalità.

Per specificare uno stile, devi combinare un insieme di selettori featureType e elementType e il tuo stylers in un array di stili. In un singolo array puoi scegliere come target qualsiasi combinazione di caratteristiche. Tuttavia, il numero di stili che puoi applicare contemporaneamente è limitato. Se l'array di stili supera il numero massimo di caratteri, non viene applicato alcuno stile.

Il resto di questa pagina contiene ulteriori informazioni su funzionalità, elementi e stili.

featureType

Il seguente snippet JSON seleziona tutte le strade sulla mappa:

{
  "featureType": "road"
}

Gli elementi o i tipi di elementi sono caratteristiche geografiche sulla mappa, tra cui strade, parchi, specchi d'acqua, attività e altro ancora.

Le caratteristiche formano una struttura di categorie, con all come radice. Se non specifichi una funzionalità, vengono selezionate tutte le funzionalità. La specifica di una funzionalità di all ha lo stesso effetto.

Alcune funzionalità contengono elementi secondari specificati utilizzando una notazione con punti. Ad esempio, landscape.natural o road.local. Se specifichi solo la funzionalità principale, come road, gli stili specificati per l'elemento principale si applicano a tutte le relative funzionalità secondarie, come road.local e road.highway.

Tieni presente che le funzionalità principali possono includere alcuni elementi che non sono inclusi in tutte le funzionalità secondarie.

Sono disponibili le seguenti funzionalità:

• all (predefinito) seleziona tutte le funzionalità.
• administrative seleziona tutte le aree amministrative. Lo stile influisce solo sulle etichette delle aree amministrative, non sui confini o sul riempimento geografici.
  • administrative.country seleziona i paesi.
  • administrative.land_parcel seleziona lotti di terreno.
  • administrative.locality seleziona le località.
  • administrative.neighborhood seleziona i quartieri.
  • administrative.province seleziona province.
• landscape seleziona tutti i paesaggi.
  • landscape.man_made seleziona elementi artificiali, come edifici e altre strutture.
  • landscape.natural seleziona elementi naturali, come montagne, fiumi, deserti e ghiacciai.
  • landscape.natural.landcover seleziona gli elementi di copertura del suolo, ovvero il materiale fisico che copre la superficie terrestre, come foreste, praterie, zone umide e suolo nudo.
  • landscape.natural.terrain seleziona le caratteristiche del terreno di una superficie terrestre, come elevazione, pendenza e orientamento.
• poi seleziona tutti i punti d'interesse.
  • poi.attraction seleziona le attrazioni turistiche.
  • poi.business seleziona le attività.
  • poi.government seleziona gli edifici governativi.
  • poi.medical seleziona i servizi di emergenza, tra cui ospedali, farmacie, polizia, medici e altri.
  • poi.park seleziona i parchi.
  • poi.place_of_worship seleziona i luoghi di culto, tra cui chiese, templi, moschee e altri.
  • poi.school seleziona le scuole.
  • poi.sports_complex seleziona i complessi sportivi.
• road seleziona tutte le strade.
  • road.arterial seleziona le arterie stradali.
  • road.highway seleziona le autostrade.
  • road.highway.controlled_access seleziona le autostrade ad accesso controllato.
  • road.local seleziona le strade locali.
• transit seleziona tutte le stazioni e le linee di trasporto pubblico.
  • transit.line seleziona le linee di trasporto pubblico.
  • transit.station seleziona tutte le stazioni di trasporto pubblico.
  • transit.station.airport seleziona gli aeroporti.
  • transit.station.bus seleziona le fermate degli autobus.
  • transit.station.rail seleziona le stazioni ferroviarie.
• water seleziona i corpi d'acqua.

elementType

Il seguente snippet JSON seleziona le etichette per tutte le strade locali:

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

Gli elementi sono suddivisioni di una funzionalità. Ad esempio, una strada è costituita dalla linea grafica (la geometria) sulla mappa e anche dal testo che indica il nome (un'etichetta).

Sono disponibili i seguenti elementi, ma tieni presente che una funzionalità specifica potrebbe non supportare nessuno, alcuni o tutti gli elementi:

• all (predefinito) seleziona tutti gli elementi dell'elemento specificato.
• geometry seleziona tutti gli elementi geometrici della caratteristica specificata.
  • geometry.fill seleziona solo il riempimento della geometria dell'elemento.
  • geometry.stroke seleziona solo il tratto della geometria della funzionalità.
• labels seleziona le etichette di testo associate alla caratteristica specificata.
  • labels.icon seleziona solo l'icona visualizzata all'interno dell'etichetta della funzionalità.
  • labels.text seleziona solo il testo dell'etichetta.
  • labels.text.fill seleziona solo il riempimento dell'etichetta. Il preenchimento di un'etichetta viene in genere visualizzato come un contorno colorato che circonda il testo dell'etichetta.
  • labels.text.stroke seleziona solo il tratto del testo dell'etichetta.

stylers

Gli stili sono opzioni di formattazione che puoi applicare agli elementi e agli elementi della mappa.

Il seguente snippet JSON mostra una funzionalità in verde brillante, utilizzando un valore RGB:

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

Questo snippet rimuove tutta l'intensità dal colore di un'elemento, indipendentemente dal suo colore iniziale. L'effetto è il rendering della funzionalità in scala di grigi:

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

Questo snippet nasconde completamente una funzionalità:

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

Sono supportate le seguenti opzioni di stile:

• hue (una stringa esadecimale RGB di formato #RRGGBB) indica il colore di base.

  Nota: questa opzione imposta la tonalità mantenendo la saturazione e la luminosità specificate nello stile Google predefinito (o in altre opzioni di stile che definisci sulla mappa). Il colore risultante è relativo allo stile della mappa di base. Se Google apporta modifiche allo stile della mappa di base, queste modifiche influiscono sulle funzionalità della mappa stilizzate con hue. È preferibile utilizzare lo stilo color assoluto, se possibile.

• lightness (un valore in virgola mobile compreso tra -100 e 100) indica la variazione percentuale della luminosità dell'elemento. I valori negativi aumentano l'oscurità (dove -100 specifica il nero) mentre i valori positivi aumentano la luminosità (dove +100 specifica il bianco).

  Nota: questa opzione imposta la luminosità mantenendo la saturazione e la tonalità specificate nello stile Google predefinito (o in altre opzioni di stile che definisci sulla mappa). Il colore risultante è relativo allo stile della mappa di base. Se Google apporta modifiche allo stile della mappa di base, queste modifiche influiscono sulle funzionalità della mappa stilizzate con lightness. È meglio utilizzare lo styler color assoluto, se possibile.

• saturation (un valore in virgola mobile compreso tra -100 e 100) indica la variazione percentuale dell'intensità del colore di base da applicare all'elemento.

  Nota: questa opzione imposta la saturazione mantenendo la tonalità e la luminosità specificate nello stile Google predefinito (o in altre opzioni di stile che definisci sulla mappa). Il colore risultante è relativo allo stile della mappa base. Se Google apporta modifiche allo stile della mappa di base, queste modifiche influiscono sulle funzionalità della mappa stilizzate con saturation. È meglio utilizzare lo styler color assoluto, se possibile.

• gamma (un valore in virgola mobile compreso tra 0.01 e 10.0, dove 1.0 non applica alcuna correzione) indica la quantità di correzione gamma da applicare all'elemento. Le correzioni gamma modificano la leggerezza dei colori in modo non lineare, senza influire sui valori del bianco o del nero. La correzione gamma viene in genere utilizzata per modificare il contrasto di più elementi. Ad esempio, puoi modificare la gamma per aumentare o diminuire il contrasto tra i bordi e l'interno degli elementi.

  Nota: questa opzione regola la luminosità rispetto allo stile Google predefinito utilizzando una curva di gamma. Se Google apporta modifiche allo stile della mappa base, le modifiche influiranno sugli elementi della mappa con stile gamma. Se puoi, è meglio utilizzare lo stilo color assoluto.

• invert_lightness (se true) inverte la luminosità esistente. Questo è utile, ad esempio, per passare rapidamente a una mappa più scura con testo bianco.

  Nota: questa opzione inverte semplicemente lo stile Google predefinito. Se Google apporta modifiche allo stile della mappa di base, queste influiscono sulle funzionalità della mappa personalizzate con invert_lightness. È meglio utilizzare lo stilo color assoluto, se possibile.

• visibility (on, off o simplified) indica se e come l'elemento viene visualizzato sulla mappa. Una visibilità simplified rimuove alcune funzionalità di stile dalle funzionalità interessate. Ad esempio, le strade vengono semplificate in linee più sottili senza contorni, mentre i parchi perdono il testo dell'etichetta, ma mantengono l'icona dell'etichetta.
• color (una stringa esadecimale RGB nel formato #RRGGBB) imposta il colore della caratteristica.
• weight (un valore intero maggiore o uguale a zero) imposta il peso della funzionalità in pixel. L'impostazione di un valore elevato per lo spessore può provocare il ritaglio vicino ai bordi delle riquadri.

Le regole di stile vengono applicate nell'ordine specificato. Non combinare più operazioni in un'unica operazione di stile. Definisci invece ogni operazione come voce separata nell'array di stili.

Nota: l'ordine è importante, poiché alcune operazioni non sono commutative. Le funzionalità e/o gli elementi modificati tramite le operazioni di stile (di solito) hanno già stili esistenti. Le operazioni agiscono sugli stili esistenti, se presenti.

Il modello di tonalità, saturazione e luminosità

Le mappe stilizzate utilizzano il modello tinta, satturazione, luminosità (HSL) per indicare il colore all'interno delle operazioni di stile. La tonalità indica il colore di base, la saturazione indica l'intensità del colore e la luminosità indica la quantità relativa di bianco o nero nel colore costituente.

La correzione gamma modifica la luminosità nello spazio di colore, in genere per aumentare o diminuire il contrasto. Inoltre, il modello HSL definisce il colore all'interno di uno spazio di coordinate in cui hue indica l'orientamento all'interno di una ruota dei colori, mentre saturazione e luminosità indicano le ampiezze lungo assi diversi. Le tonalità vengono misurate in uno spazio colore RGB, simile alla maggior parte degli spazi colore RGB, tranne per il fatto che le sfumature di bianco e nero sono assenti.

Anche se hue prende un valore di colore esadecimale HTML, utilizza questo valore solo per determinare il colore di base, ovvero l'orientamento intorno alla ruota dei colori e non la saturazione o la luminosità, che vengono indicate separatamente come variazioni percentuali.

Ad esempio, puoi definire la tonalità del verde puro come hue:0x00ff00 o hue:0x000100. Entrambe le tonalità sono identiche. Entrambi i valori indicano il verde puro nel modello di colore HSL.

Una ruota dei colori RGB

I valori RGB hue composti da parti uguali di rosso, verde e blu non indicano una tonalità, perché nessuno di questi valori indica un orientamento nel spazio delle coordinate HSL. Alcuni esempi sono "#000000" (nero), "#FFFFFF" (bianco) e tutte le tonalità pure di grigio. Per indicare il nero, il bianco o il grigio, devi rimuovere tutti i saturation (imposta il valore su -100) e regolare lightness.

Inoltre, quando modifichi funzionalità esistenti che hanno già uno schema di colori, la modifica di un valore come hue non modifica i valori saturation o lightness esistenti.