Mappe con stile

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&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 di Brooklyn in stile.

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 della mappa US Road Atlas.

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 argomento feature, 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 argomento element, 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 styler color assoluto.

  • 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 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 styler color assoluto.

  • 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 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 styler color assoluto.

  • 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 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 styler color assoluto.

  • 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 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 styler color assoluto.

  • visibility (on, off o simplified) 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.

Modello di tonalità, saturazione e luminosità

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.