Mappe con stile

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 edificate e altri punti di interesse. Modifica il colore o lo stile per mettere in risalto contenuti specifici, integrare i contenuti circostanti nella pagina o persino nascondere completamente gli elementi.

Esempi

L'esempio seguente mostra una mappa di Brooklyn, negli Stati Uniti, con uno stile che colora le strade locali di verde brillante e le aree residenziali di 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&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
 Mappa con stili di Brooklyn.

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&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
 Stile mappa Atlante stradale USA.

Sintassi dello stile

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

Ogni dichiarazione style può contenere i seguenti argomenti, separati da barre verticali ("|"):

  • feature (facoltativo) indica gli elementi da selezionare per questa modifica dello stile. Gli elementi includono elementi sulla mappa, come strade, parchi o altri punti di interesse. Se non è presente alcun argomento feature lo stile specificato viene applicato a tutti gli elementi.
  • element (facoltativo) indica gli elementi dell'elemento specificato da selezionare per questa modifica dello stile. Gli elementi sono caratteristiche di un elemento, come la geometria o le etichette. Se non è presente alcun element argomento, lo stile viene applicato a tutti gli elementi dell'elemento specificato.
  • Un insieme di regole di stile (obbligatorio) da applicare agli elementi specificati. L'API applica le regole nell'ordine in cui appaiono nella dichiarazione style. Puoi includere un numero qualsiasi di regole, entro i normali vincoli di lunghezza dell'URL dell'API Maps Static.
style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument

Elementi

La seguente dichiarazione style colora tutte le strade sulla mappa: 

style=feature:road|color:0xffffff

Ecco alcune selezioni di elementi 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 tipi di elementi, sono caratteristiche geografiche sulla mappa, tra cui strade, parchi, masse d'acqua, attività e altro ancora.

Gli elementi formano un albero di categorie, con all come radice. Se non specifichi un elemento, vengono selezionati tutti gli elementi. La specifica di un elemento di all ha lo stesso effetto.

Alcuni elementi contengono elementi secondari che puoi specificare utilizzando la notazione con punti. Ad esempio, landscape.natural o road.local. Se specifichi solo l'elemento principale, ad esempio road, gli stili specificati per l'elemento principale vengono applicati a tutti i relativi elementi secondari, ad esempio road.local e road.highway.

Tieni presente che gli elementi principali possono includere alcuni elementi che non sono inclusi in tutti i relativi elementi secondari.

Sono disponibili i seguenti elementi:

  • all (valore predefinito) seleziona tutti gli elementi.
  • administrative seleziona tutte le aree amministrative. Lo stile influisce solo sulle etichette delle aree amministrative, non sui bordi geografici o sul riempimento.
    • administrative.country seleziona i paesi.
    • administrative.land_parcel seleziona le particelle 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 gli elementi artificiali, come edifici e altre strutture.
    • landscape.natural seleziona gli elementi naturali, come montagne, fiumi, deserti e ghiacciai.
    • landscape.natural.landcover seleziona gli elementi di copertura del suolo, il materiale fisico che copre la superficie terrestre, come foreste, praterie, zone umide e terreno nudo.
    • landscape.natural.terrain seleziona gli elementi del terreno di una superficie terrestre, come elevazione, 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 i servizi di emergenza, tra cui ospedali, farmacie, polizia, medici e altro ancora.
    • poi.park seleziona i parchi.
    • poi.place_of_worship seleziona i luoghi di culto, tra cui chiese, templi, moschee e altro ancora.
    • poi.school seleziona le scuole.
    • poi.sports_complex seleziona gli impianti sportivi.
  • road seleziona tutte le strade.
    • road.arterial seleziona le strade arterie.
    • 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 dell'autobus.
    • transit.station.rail seleziona le stazioni ferroviarie.
  • water seleziona le masse d'acqua.

Elementi

La seguente dichiarazione style colora le etichette di tutte le strade locali:

style=feature:road.local|element:labels|color:0xffffff

Gli elementi sono suddivisioni di un elemento. Una strada, ad esempio, è costituita dalla linea grafica (la geometria) sulla mappa e dal testo che indica il suo nome (un'etichetta).

Sono disponibili i seguenti elementi, ma tieni presente che un elemento specifico potrebbe supportare nessuno, alcuni o tutti gli elementi:

I colori di fill e stroke del testo dell'etichetta cambiano in base al livello di zoom. Per rendere l'esperienza coerente tra i livelli di zoom, definisci sempre sia fill sia stroke.

  • all (valore predefinito) 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 all'elemento specificato.
    • labels.icon seleziona solo l'icona visualizzata nell'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 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 ed elementi specificati in ogni style dichiarazione.

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, in modo che abbiano 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 dell'argomento utilizzando il carattere due punti (":") e tutte le operazioni vengono applicate alla selezione nell'ordine in cui le specifichi.

Sono supportate le seguenti opzioni di stile:

  • hue (una stringa esadecimale RGB nel 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 base. Se Google apporta modifiche allo stile di mappa base, queste modifiche influiscono sugli elementi della mappa con stile hue. È preferibile utilizzare lo stilizzatore 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 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 di mappa base, queste modifiche influiscono sugli elementi della mappa con stile lightness. È preferibile utilizzare lo stilizzatore 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 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 di mappa base, queste modifiche influiscono sugli elementi della mappa con stile saturation. È preferibile utilizzare lo stilizzatore 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 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 predefinito di Google stile, utilizzando una curva gamma. Se Google apporta modifiche allo stile della mappa base queste modifiche influiscono sugli elementi della mappa con stile gamma. È preferibile utilizzare lo stilizzatore assoluto color , se possibile.

  • invert_lightness (se true) inverte la luminosità esistente. Questa opzione è 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 di mappa base, queste modifiche influiscono sugli elementi della mappa con stile invert_lightness. È preferibile utilizzare lo stilizzatore 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 dagli elementi interessati; le strade, ad esempio, 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 dell'elemento.
  • weight (un valore intero, maggiore o uguale a zero) imposta lo spessore dell'elemento, in pixel. L'impostazione di uno spessore elevato può comportare il ritaglio vicino ai bordi dei riquadri.

Le regole di stile vengono applicate nell'ordine in cui le specifichi. Non combinare più operazioni in una singola operazione di stile. Definisci invece ogni operazione come una voce separata nell'array di stili.

Nota: l'ordine è importante, poiché alcune operazioni non sono commutative. Gli elementi modificati tramite operazioni di stile (in genere) hanno già stili esistenti. Le operazioni agiscono su questi stili esistenti, se presenti.

Il modello di tonalità, saturazione e luminosità

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

La correzione gamma modifica la luminosità nello 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 le ampiezze lungo assi diversi. Le tonalità vengono misurate all'interno di uno spazio colore RGB, simile alla maggior parte degli spazi colore RGB, tranne per il fatto che le tonalità di bianco e nero sono assenti.

Modello di tonalità, saturazione e luminosità

Sebbene hue accetti 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 vengono indicate separatamente come variazioni percentuali.

Ad esempio, puoi definire la tonalità per il 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 costituiti da parti uguali di rosso, verde e blu non indicano una tonalità, perché nessuno di questi valori indica un orientamento nello spazio di coordinate HSL. Esempi sono "#000000" (nero), "#FFFFFF" (bianco), e tutte le tonalità pure di grigio. Per indicare il nero, il bianco o il grigio, devi rimuovere tutta la saturation (imposta il valore su -100) e regolare invece lightness.

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