Personalizza la presentazione della mappa Google standard applicando i tuoi stili quando utilizzi l'API Maps Static. Puoi modificare la visualizzazione di elementi come strade, parchi, aree densamente edificate e altri punti d'interesse. Modificane il colore o lo stile per enfatizzare determinati contenuti, completare i contenuti circostanti nella pagina o persino nascondere completamente le funzionalità.
Esempi
L'esempio seguente mostra una mappa di Brooklyn, Stati Uniti, con uno stile per colorare di verde le strade locali e di nero le aree residenziali. Inoltre, inverte la luminosità delle etichette, in modo che risaltino meglio su uno sfondo scuro. Tieni presente che questo esempio funzionante utilizza la codifica URL:
https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15¢er=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY&signature=YOUR_SIGNATURE
![Mappa di Brooklyn in stile.](https://developers.google.cn/static/maps/documentation/maps-static/images/brooklyn-map.png?authuser=7&hl=it)
L'esempio seguente utilizza operazioni di stile e semplificazioni per approssimare l'aspetto di un atlante stradale statunitense:
https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12¢er=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY&signature=DITIGAL_SIGNATURE
![Stile della mappa US Road Atlas.](https://developers.google.cn/static/maps/documentation/maps-static/images/us-road-atlas-map.png?authuser=7&hl=it)
Sintassi degli stili
Per creare una mappa con stili personalizzati, includi uno o più parametri style
nell'URL della richiesta.
Ogni dichiarazione style
può contenere i seguenti argomenti,
separati da barre verticali ("|
"):
feature
(facoltativo) indica le funzionalità da selezionare per questa modifica dello stile. Gli elementi includono elementi sulla mappa, come strade, parchi o altri punti d'interesse. Se non è presente alcun argomentofeature
, lo stile specificato viene applicato a tutte le caratteristiche.element
(facoltativo) indica gli elementi della funzionalità specificata da selezionare per questa modifica dello stile. Gli elementi sono caratteristiche di un elemento, come la geometria o le etichette. Se non è presente alcun argomentoelement
, lo stile viene applicato a tutti gli elementi dell'elemento specificato.- Un insieme di regole di stile (obbligatorie) da applicare alle funzionalità e agli elementi specificati. L'API applica le regole nell'ordine
in cui vengono visualizzate nella dichiarazione
style
. Puoi includere qualsiasi numero di regole, entro i normali vincoli di lunghezza dell'URL dell'API Maps Static.
style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument
Funzionalità
La seguente dichiarazione style
colora tutte le strade della mappa:
style=feature:road|color:0xffffff
Di seguito sono riportate alcune funzionalità comuni:
feature:all
(impostazione predefinita) consente di selezionare tutti gli elementi della mappa.feature:road
seleziona tutte le strade sulla mappa.feature:road.local
seleziona tutte le strade locali.
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.
Elementi
La seguente dichiarazione style
applica i colori alle etichette per tutte le strade locali:
style=feature:road.local|element:labels|color:0xffffff
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.
Regole di stile
Le regole di stile sono opzioni di formattazione applicate alle funzionalità e agli elementi specificati all'interno di ogni dichiarazione style
.
La seguente dichiarazione style
applica due regole di stile alle
strade sulla mappa. La prima regola applica un colore alle strade. La seconda regola semplifica la visualizzazione delle strade, che presentano linee più sottili senza contorni:
style=feature:road|color:0xffffff|visibility:simplified
Ogni dichiarazione style
deve contenere una o più operazioni
separate dal carattere barra verticale ("|
"). Ogni operazione specifica il valore dell'argomento utilizzando i due punti (":
") e tutte le operazioni si applicano alla selezione nell'ordine in cui le specifichi.
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.