Mappe con stile

Personalizza la presentazione della mappa Google standard applicando i tuoi stili quando utilizzi l'API Maps Static. Puoi modificare la visualizzazione visiva di elementi quali strade, parchi, aree ricostruite e altri punti d'interesse. Puoi modificarne il colore o lo stile per mettere in evidenza determinati contenuti, completare i contenuti circostanti nella pagina o persino nascondere completamente le funzionalità.

Se vuoi aggiornare facilmente lo stesso stile in più app, valuta la personalizzazione del cloud, disponibile in Google Cloud Console. Dovrai creare e aggiungere un ID mappa per utilizzare la personalizzazione del cloud. Ti consigliamo di non combinare la personalizzazione del cloud e lo stile hardcoded nella stessa app, per evitare possibili conflitti futuri.

Esempi

L'esempio riportato di seguito mostra una mappa di Brooklyn, Stati Uniti, con stili per colorare le strade locali di colore verde acceso e le aree residenziali nere. Inoltre, inverte la leggerezza delle etichette e le rendono migliori su uno sfondo scuro. Tieni presente che questo esempio di lavoro utilizza la codifica degli URL:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15&center=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 semplificazione e semplificazioni per assomigliare all'aspetto di un atlante stradale statunitense:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12&center=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 degli stili

Per creare una mappa con stile personalizzato, includi uno o più parametri style nell'URL della richiesta.

Ogni dichiarazione style può contenere i seguenti argomenti, separati da una barra verticale ("|"):

• feature (facoltativo) indica le funzionalità da selezionare per questa modifica di stile. Le caratteristiche includono elementi sulla mappa, come strade, parchi o altri punti d'interesse. Se non è presente alcun argomento feature, lo stile specificato viene applicato a tutte le funzionalità.
• element (facoltativo) indica gli elementi della funzionalità specificata da selezionare per questa modifica di stile. Gli elementi sono caratteristiche di una funzionalità, ad esempio geometrie o etichette. Se non è presente alcun argomento element, lo stile viene applicato 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 sono visualizzate nella dichiarazione style. Puoi includere qualsiasi numero di regole, entro i normali vincoli di lunghezza dell'URL dell'API Maps Static.

Nota: la dichiarazione style deve specificare gli argomenti precedenti nell'ordine indicato. L'esempio seguente fornisce la sintassi corretta per una funzionalità e la selezione degli elementi con due regole:

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

Di seguito sono riportate alcune selezioni comuni di funzionalità:

• feature:all (predefinito) seleziona tutte le funzionalità della mappa.
• feature:road seleziona tutte le strade sulla mappa.
• feature:road.local seleziona tutte le strade locali.

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

Le funzionalità formano un albero di categorie, con all come radice. Se non specifichi una funzione, vengono selezionate tutte. Specificare una funzionalità di all ha lo stesso effetto.

Alcune caratteristiche contengono funzionalità secondarie specificate utilizzando una notazione con punti. Ad esempio, landscape.natural o road.local. Se specifichi solo la funzionalità principale, ad esempio road, gli stili specificati per quella principale vengono applicati a tutte le relative unità secondarie, ad esempio road.local e road.highway.

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

Sono disponibili le seguenti funzionalità:

• all (valore predefinito) seleziona tutte le funzionalità.
• administrative seleziona tutte le aree amministrative. Lo stile ha effetto solo sulle etichette delle aree amministrative, non sui confini geografici o sul riempimento.
  • 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 province.
• landscape seleziona tutti i paesaggi.
  • landscape.man_made seleziona elementi artificiali, come edifici e altre strutture.
  • landscape.natural seleziona tratti naturali, come montagne, fiumi, deserti e ghiacciai.
  • landscape.natural.landcover seleziona le caratteristiche della copertura del suolo, il materiale fisico che copre la superficie terrestre, ad esempio foreste, praterie, zone umide e terreno sano.
  • landscape.natural.terrain seleziona gli elementi del suolo di una superficie terrestre, come altitudine, pendenza e orientamento.
• poi seleziona tutti i punti di interesse.
  • poi.attraction seleziona le attrazioni turistiche.
  • poi.business seleziona le attività.
  • poi.government seleziona gli edifici governativi.
  • poi.medical seleziona servizi di emergenza, tra cui ospedali, farmacie, forze dell'ordine, dottori e altri.
  • poi.park seleziona i parchi.
  • poi.place_of_worship seleziona 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 strade arteriose.
  • 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 specchi d'acqua.

Elementi

La seguente dichiarazione style colora le 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 anche 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 (valore predefinito) seleziona tutti gli elementi della funzionalità specificata.
• 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 dell'elemento.
• labels seleziona le etichette testuali associate alla funzionalità 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 riempimento di un'etichetta viene generalmente 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 caratteristiche e agli elementi specificati all'interno di ciascuna 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, per cui le linee sono più sottili senza contorni:

style=feature:road|color:0xffffff|visibility:simplified

Ogni dichiarazione style deve contenere una o più operazioni separate da una 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 vengono specificati.

Sono supportate le seguenti opzioni di stile:

• hue (una stringa esadecimale in 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 definite sulla mappa). Il colore risultante è relativo allo stile della mappa base. Se Google apporta modifiche allo stile della mappa base, queste influiscono sulle funzionalità della mappa definite con hue. È meglio utilizzare lo stile di stile 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 hai definito sulla mappa). Il colore risultante è relativo allo stile della mappa base. Se Google apporta modifiche allo stile della mappa base, queste influiscono sulle funzionalità della mappa definite 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 hai definito sulla mappa). Il colore risultante è relativo allo stile della mappa base. Se Google apporta modifiche allo stile della mappa base, queste influiscono sulle funzionalità della mappa definite con saturation. È meglio utilizzare lo stile 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 della gamma da applicare all'elemento. Le correzioni gamma modificano la luminosità dei colori in modo non lineare, senza influire sui valori bianchi o neri. La correzione gamma viene generalmente 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 gamma. Se Google apporta modifiche allo stile della mappa base, le modifiche influiscono sulle funzionalità della mappa definite con gamma. È meglio utilizzare lo styler color assoluto, se possibile.

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

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

• visibility (on, off o simplified) indica se e come l'elemento viene visualizzato sulla mappa. La visibilità simplified rimuove alcuni elementi di stile dalle caratteristiche interessate; le strade, ad esempio, sono semplificate in linee più sottili senza contorni, mentre i parchi perdono il testo dell'etichetta mantenendo l'icona dell'etichetta.
• color (una stringa esadecimale in formato #RRGGBB) imposta il colore della caratteristica.
• weight (un valore intero maggiore o uguale a zero) imposta la ponderazione dell'elemento, in pixel. Se imposti il peso su un valore alto, potresti notare un ritaglio vicino ai bordi del riquadro.

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

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

Il colore, la saturazione e il modello di luminosità

Nota: l'effetto delle tonalità, della saturazione, della luminosità e delle impostazioni della gamma è relativo allo stile della mappa base. Se Google apporta modifiche allo stile della mappa base, le modifiche influiscono sulle funzionalità della mappa associate a queste opzioni. È meglio utilizzare lo stile color assoluto, se possibile.

Le mappe con stile utilizzano il modello tonalità, saturazione, luminosità (HSL) per indicare il colore all'interno delle operazioni dello stile. Tonalità indica il colore di base, la saturazione indica l'intensità di quel colore e la leganza indica la quantità relativa di bianco o nero nel colore che costituisce il colore.

La correzione gamma modifica la luminosità dello spazio 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 la saturazione e la luminosità indicano ampiezze lungo assi diversi. I toni sono misurati all'interno di uno spazio di colore RGB, simile alla maggior parte degli spazi di colore RGB, tranne per il fatto che i toni del bianco e del nero non sono presenti.

Anche se hue utilizza un valore di colore esadecimale HTML, utilizza questo valore solo per determinare il colore di base, ovvero il suo orientamento intorno alla ruota dei colori, non la saturazione o la luminosità, che sono indicati 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 che sono composti da parti uguali di colore rosso, verde e blu non indicano una tonalità, perché nessuno di questi valori indica un orientamento nello spazio di 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 valori saturation (impostare il valore su -100) e modificare invece lightness.

Inoltre, quando modifichi le funzionalità esistenti che hanno già una combinazione di colori, la modifica di un valore come hue non influisce sugli elementi saturation o lightness esistenti.