Personalizza la presentazione della mappa standard di Google applicando i tuoi stili quando utilizzi l'API Maps Static. Puoi modificare la visualizzazione di elementi come strade, parchi, aree urbanizzate e altri punti d'interesse. Modificare il colore o lo stile per mettere in evidenza contenuti specifici, integrare i contenuti circostanti della pagina o persino nascondere completamente le funzionalità.
Esempi
L'esempio seguente mostra una mappa di Brooklyn, negli Stati Uniti, con uno stile che colora le strade locali in verde brillante e le aree residenziali in nero. 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
L'esempio seguente utilizza operazioni di stile e semplificazioni per approssimare l'aspetto di una carta stradale degli Stati Uniti:
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
Sintassi dello stile
Per creare una mappa personalizzata con stile, 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 presenti sulla mappa, come strade, parchi o altri punti d'interesse. Se non è presente alcun argomentofeature
, lo stile specificato si applica a tutte le caratteristiche.element
(facoltativo) indica gli elementi della funzionalità specificata da selezionare per la modifica dello stile. Gli elementi sono caratteristiche di un elemento, ad esempio la geometria o le etichette. Se non è presente alcun argomentoelement
, lo stile si applica a tutti gli elementi della funzionalità specificata.- 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 un qualsiasi numero di regole, rispettando 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 sulla mappa:
style=feature:road|color:0xffffff
Ecco alcune delle funzionalità più comuni:
feature:all
(valore predefinito) seleziona 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à e altro ancora.
Le funzionalità formano un albero 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
(valore predefinito) seleziona tutte le funzionalità.administrative
seleziona tutte le aree amministrative. Lo stile influisce solo sulle etichette delle aree amministrative, non sui confini geografici o sul riempimento.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 le 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 le caratteristiche di copertura del suolo, il materiale fisico che copre la superficie terrestre, come foreste, praterie, paludi e terra nuda.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.
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 (la geometria) sulla mappa e dal testo che ne 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 della funzionalità.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.
Regole di stile
Le regole di stile sono opzioni di formattazione che vengono 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 hanno linee più sottili senza contorni:
style=feature:road|color:0xffffff|visibility:simplified
Ogni dichiarazione style
deve contenere una o più operazioni
separate utilizzando il carattere barra verticale ("|
"). Ogni operazione specifica il valore di argomento utilizzando i due punti (":
") e tutte le operazioni si applicano alla selezione nell'ordine in cui vengono specificate.
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 predefinito di Google (o in altre opzioni di stile definite 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 stilocolor
assoluto, se possibile.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 di base, queste modifiche influiscono sulle funzionalità della mappa stilizzate con
lightness
. È preferibile utilizzare lo stilocolor
assoluto, se possibile.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 leggerezza specificate nello stile predefinito di Google (o in altre opzioni di stile definite 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 stylercolor
assoluto, se possibile.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 di bianco o 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 gli interni 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 di base, le modifiche influiscono sulle funzionalità della mappa stilizzate con
gamma
. Se puoi, è meglio utilizzare lo stilocolor
assoluto.invert_lightness
(setrue
) inverte la leggerezza esistente. Questa opzione è 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 stilocolor
assoluto, se possibile.visibility
(on
,off
osimplified
) 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 di formato#RRGGBB
) imposta il colore della funzionalità.weight
(un valore intero maggiore o uguale a zero) imposta il peso della funzionalità in pixel. L'impostazione della ponderazione su un valore alto potrebbe causare un ritaglio in prossimità dei bordi del riquadro.
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.
Sebbene hue
accetti un valore di colore esadecimale HTML, lo utilizza solo per determinare il colore di base, ovvero il suo orientamento nella ruota dei colori, non la saturazione o la luminosità, che sono 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 puntano al 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 nero, bianco o grigio, devi rimuovere tutti i valori saturation
(impostare il valore su -100
) e modificare 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.