Con le opzioni di stile puoi personalizzare la presentazione degli stili di mappa standard di Google, modificando la visualizzazione di elementi quali strade, parchi, attività commerciali e altri punti d'interesse. Oltre a modificare lo stile di queste funzionalità, puoi nasconderle completamente. Ciò significa che puoi enfatizzare particolari componenti della mappa o completarla con lo stile della pagina circostante.
Esempi
La seguente dichiarazione di stile JSON trasforma tutte le funzionalità della mappa in grigi, quindi colora in blu la geometria della strada principale e nasconde completamente le etichette del paesaggio:
[ { "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 è composta dai seguenti elementi:
- (Facoltativo) featureType: le funzionalità 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 caratteristiche.
- elementType (facoltativo): la proprietà della funzionalità specificata da selezionare. Gli elementi sono sottoparti di un elemento, tra cui etichette e geometria. Se non specifichi un elemento, vengono selezionati tutti gli elementi della caratteristica.
- stylers: le regole da applicare alle caratteristiche e agli elementi selezionati. Gli stili di visualizzazione indicano il colore, la visibilità e il peso dell'elemento. Puoi applicare uno o più stili a una funzionalità.
Per specificare uno stile, devi combinare un insieme di selettori featureType
e elementType
e i tuoi stylers
in un array di stile. È possibile scegliere come target qualsiasi combinazione di caratteristiche in un singolo array. Tuttavia,
il numero di stili che puoi applicare contemporaneamente è limitato. Se l'array di stili supera il numero massimo di caratteri, non viene applicato nessuno 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à commerciali 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 caratteristiche contengono caratteristiche secondarie specificate mediante una notazione
dei punti. Ad esempio, landscape.natural
o
road.local
. Se specifichi solo la funzionalità principale, ad esempio
road
, gli stili che specifichi per l'elemento padre si applicano a
tutti i relativi elementi secondari, ad esempio road.local
e
road.highway
.
Tieni presente che le funzionalità principali potrebbero includere alcuni elementi non inclusi in tutte le funzionalità secondarie.
Sono disponibili le seguenti funzionalità:
all
(impostazione predefinita) consente di selezionare tutte le funzionalità.administrative
seleziona tutte le aree amministrative. Gli stili influiscono solo sulle etichette delle aree amministrative, non sui confini geografici o sui riempimenti.administrative.country
seleziona i paesi.administrative.land_parcel
seleziona appezzamenti di terreno.administrative.locality
seleziona le località.administrative.neighborhood
seleziona i quartieri.administrative.province
seleziona le province.
landscape
seleziona tutte le panoramiche.landscape.man_made
seleziona elementi costruiti dall'uomo, come edifici e altre strutture.landscape.natural
seleziona elementi naturali, come montagne, fiumi, deserti e ghiacciai.landscape.natural.landcover
seleziona le caratteristiche della copertura del suolo, il materiale fisico che ricopre la superficie terrestre, ad esempio foreste, praterie, zone umide e terreni nudi.landscape.natural.terrain
seleziona le caratteristiche del terreno di una superficie del terreno, come altitudine, 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, inclusi 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 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 con 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 dell'autobus.transit.station.rail
seleziona le stazioni ferroviarie.
water
seleziona masse 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 un elemento. Una strada, ad esempio, è composta dalla linea grafica (geometrica) sulla mappa e anche dal testo che ne indica il nome (un'etichetta).
Sono disponibili i seguenti elementi, ma tieni presente che una funzionalità specifica potrebbe supportare nessuno, alcuni o tutti gli elementi:
all
(impostazione predefinita) seleziona tutti gli elementi dell'elemento specificato.geometry
seleziona tutti gli elementi geometrici dell'elemento specificato.geometry.fill
seleziona solo il riempimento della geometria dell'elemento.geometry.stroke
seleziona solo il tratto della geometria dell'elemento.
labels
seleziona le etichette di testo associate alla funzionalità specificata.labels.icon
seleziona solo l'icona visualizzata all'interno dell'etichetta dell'elemento.labels.text
seleziona solo il testo dell'etichetta.labels.text.fill
seleziona solo il riempimento dell'etichetta. Il riempimento di un'etichetta viene in genere visualizzato sotto forma di contorno colorato che circonda il testo dell'etichetta.labels.text.stroke
seleziona solo il tratto di testo dell'etichetta.
stylers
Gli stili di visualizzazione sono opzioni di formattazione che puoi applicare a elementi e elementi della mappa.
Il seguente snippet JSON mostra una funzionalità in verde brillante, con un valore RGB:
"stylers": [ { "color": "#99FF33" } ]
Questo snippet rimuove ogni intensità dal colore di una funzionalità, indipendentemente dal colore iniziale. L'effetto è il rendering della caratteristica 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 del formato#RRGGBB
) indica il colore di base.Nota: questa opzione imposta la tonalità mantenendo la saturazione e la luminosità specificate nello stile predefinito di Google (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 base, queste modifiche influiscono sugli elementi della mappa con stile
hue
. Se possibile, è meglio utilizzare lo stylercolor
assoluto.lightness
(un valore in virgola mobile compreso tra-100
e100
) 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 base. Se Google apporta modifiche allo stile della mappa base, queste modifiche influiscono sugli elementi della mappa con stile
lightness
. Se puoi, è meglio utilizzare lo stylercolor
assoluto.saturation
(un valore in virgola mobile compreso tra-100
e100
) 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 predefinito di Google (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 base, queste modifiche influiscono sugli elementi della mappa con stile
saturation
. Se possibile, è meglio utilizzare lo stylercolor
assoluto.gamma
(un valore in virgola mobile compreso tra0.01
e10.0
, dove1.0
non applica alcuna correzione) indica la quantità di correzione gamma da applicare all'elemento. Le correzioni gamma modificano la luminosità dei colori in modo non lineare, senza influire sui valori del bianco o del nero. La correzione gamma in genere viene 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à in base allo stile predefinito di Google, utilizzando una curva gamma. Se Google apporta modifiche allo stile della mappa base, le modifiche influiscono sugli elementi della mappa con lo stile
gamma
. Se possibile, è meglio utilizzare lo stylercolor
assoluto.invert_lightness
(setrue
) inverte la luminosità esistente. Ciò è utile, ad esempio, per passare rapidamente a una mappa più scura con testo bianco.Nota: questa opzione inverte semplicemente lo stile predefinito di Google. Se Google apporta modifiche allo stile della mappa base, le modifiche influiscono sugli elementi della mappa con lo stile
invert_lightness
. Se possibile, è meglio utilizzare lo stylercolor
assoluto.visibility
(on
,off
osimplified
) indica se e come l'elemento viene visualizzato sulla mappa. Una visibilitàsimplified
rimuove alcuni elementi di stile dagli elementi interessati; le strade, ad esempio, vengono semplificate in linee più sottili senza contorni, mentre i parchi perdono il testo dell'etichetta, mantenendo l'icona dell'etichetta.color
(una stringa esadecimale RGB del formato#RRGGBB
) imposta il colore della funzionalità.weight
(un valore intero maggiore o uguale a zero) imposta la ponderazione della caratteristica in pixel. L'impostazione di un valore elevato per la ponderazione può comportare il ritaglio vicino ai bordi dei riquadri.
Le regole di stile vengono applicate nell'ordine da te specificato. Non combinare più operazioni in un'unica operazione con stile. Definisci invece ogni operazione come voce separata nell'array di stile.
Nota: l'ordine è importante, poiché alcune operazioni non sono commutative. Le caratteristiche e/o gli elementi modificati tramite 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 con stili applicati utilizzano il modello HSL (tonalità, saturazione e luminosità) per indicare il colore nelle operazioni dello styler. Tonalità indica il colore di base, saturazione indica l'intensità del colore e lucezza indica la quantità relativa di bianco o nero nel colore che lo costituisce.
La correzione gamma modifica la luminosità sullo spazio dei colori, 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 la saturazione e la luminosità indicano le ampiezze lungo assi diversi. Le tonalità vengono misurate all'interno di uno spazio colore RGB, che è simile alla maggior parte degli spazi colore RGB, ad eccezione del fatto che le tonalità di bianco e nero sono assenti.
Mentre hue
prende un valore colore esadecimale HTML, utilizza solo questo valore per determinare il colore di base, ovvero l'orientamento intorno alla ruota dei colori, 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
. Le due tonalità sono identiche. Entrambi i valori puntano al verde puro nel modello di colore HSL.
Una ruota dei colori RGB
I valori hue
RGB, composti da parti uguali di rosso, verde e blu, non indicano una tonalità, perché nessuno di questi valori indica un orientamento nello spazio delle coordinate HSL. Alcuni esempi sono "#000000" (nero), "#FFFFFF" (bianco) e tutte le sfumature di grigio puro. Per indicare il nero, il bianco o il grigio, devi rimuovere tutti gli elementi saturation
(impostare il valore su -100
) e modificare invece lightness
.
Inoltre, quando si modificano elementi esistenti che hanno già una combinazione di colori, la modifica di un valore come hue
non comporta la modifica dei valori di saturation
o lightness
esistenti.