Riferimento agli stili per Maps SDK for iOS

Seleziona la piattaforma: Android iOS JavaScript

Con le opzioni di stile puoi personalizzare la presentazione degli stili di mappa standard di Google, modificando la visualizzazione di elementi come strade, parchi, attività e altri punti di interesse. Oltre a modificare lo stile di questi elementi, puoi nasconderli completamente. Ciò significa che puoi enfatizzare determinati componenti della mappa o fare in modo che la mappa si integri con lo stile della pagina circostante.

Se vuoi aggiornare lo stesso stile in più app, consulta la sezione sulla personalizzazione basata su cloud, disponibile nella console Google Cloud e che richiede un ID mappa. Per evitare potenziali conflitti, non combinare la personalizzazione nel cloud e lo stile impostato come hardcoded nella stessa app.

Per un'esperienza di stile più completa, puoi utilizzare lo stile JSON con la Personalizzazione delle mappe basata su cloud, che offre un elenco più completo di elementi della mappa e maggiori opzioni di personalizzazione. Lo schema JSON per la Personalizzazione delle mappe basata su cloud non è compatibile con le versioni precedenti delle dichiarazioni di stile JSON incorporate. Ciò significa che il codice JSON per la personalizzazione delle mappe basata su cloud non può essere utilizzato direttamente in Maps SDK for iOS. Tuttavia, puoi importare dichiarazioni di stile JSON incorporate nello schema JSON di Personalizzazione delle mappe basata su cloud.

Esempi

La seguente dichiarazione di stile JSON trasforma tutti gli elementi della mappa in grigio, quindi colora la geometria delle strade principali in blu e nasconde completamente le etichette del paesaggio:

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

L'oggetto JSON

Una dichiarazione di stile JSON è costituita dai seguenti elementi:

• featureType (facoltativo): le caratteristiche da selezionare per questa modifica dello stile. Gli elementi sono caratteristiche geografiche sulla mappa, tra cui strade, parchi, specchi d'acqua e altro ancora. Se non specifichi una funzionalità, vengono selezionate tutte le funzionalità.
• elementType (facoltativo): la proprietà della caratteristica specificata da selezionare. Gli elementi sono parti secondarie di una caratteristica, tra cui etichette e geometria. Se non specifichi un elemento, vengono selezionati tutti gli elementi della caratteristica.
• stylers: le regole da applicare alle caratteristiche e agli elementi selezionati. Gli elementi di stile indicano il colore, la visibilità e lo spessore dell'elemento. Puoi applicare uno o più stili a un elemento.

Per specificare uno stile, devi combinare un insieme di selettori featureType e elementType e il tuo stylers in un array di stili. Puoi scegliere come target qualsiasi combinazione di caratteristiche in un singolo array. Tuttavia, il numero di stili che puoi applicare contemporaneamente è limitato. Se l'array di stili supera il numero massimo di caratteri, non viene applicato alcuno stile.

Il resto della pagina contiene ulteriori informazioni su elementi, caratteristiche e styler.

featureType

Il seguente snippet JSON seleziona tutte le strade sulla mappa:

{
  "featureType": "road"
}

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

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

Alcune caratteristiche contengono caratteristiche secondarie che specifichi utilizzando una notazione con punto. Ad esempio, landscape.natural o road.local. Se specifichi solo l'elemento principale, ad esempio road, gli stili specificati per l'elemento principale si applicano a tutti i relativi elementi secondari, ad esempio road.local e road.highway.

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

Sono disponibili le seguenti funzionalità:

• all (valore predefinito) seleziona tutte le caratteristiche.
• 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 i 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 della copertura del suolo, ovvero il materiale fisico che copre la superficie terrestre, come foreste, praterie, zone umide e terreno nudo.
  • landscape.natural.terrain seleziona le caratteristiche del terreno di una superficie terrestre, come l'altitudine, la pendenza e l'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 con accesso controllato.
  • road.local seleziona le strade locali.
• transit seleziona tutte le stazioni di transito e le linee.
  • transit.line seleziona le linee di trasporto pubblico.
  • transit.station seleziona tutte le stazioni di transito.
  • transit.station.airport seleziona gli aeroporti.
  • transit.station.bus seleziona le fermate dell'autobus.
  • transit.station.rail seleziona le stazioni ferroviarie.
• water seleziona i corpi d'acqua.

elementType

Il seguente snippet JSON seleziona le etichette per tutte le strade locali:

{
  "featureType": "road.local",
  "elementType": "labels"
}

Gli elementi sono suddivisioni di una caratteristica. Una strada, ad esempio, è costituita 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 supportare nessuno, alcuni o tutti gli elementi:

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

• all (predefinito) seleziona tutti gli elementi della caratteristica 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 della caratteristica.
• labels seleziona le etichette testuali associate alla caratteristica specificata.
  • labels.icon seleziona solo l'icona visualizzata all'interno dell'etichetta della caratteristica.
  • 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.

stylers

Gli styler sono opzioni di formattazione che puoi applicare agli elementi della mappa.

Il seguente snippet JSON mostra un elemento in verde brillante, utilizzando un valore RGB:

"stylers": [
  { "color": "#99FF33" }
]

Questo snippet rimuove tutta l'intensità dal colore di un elemento, indipendentemente dal colore iniziale. L'effetto è quello di visualizzare la caratteristica in scala di grigi:

"stylers": [
  { "saturation": -100 }
]

Questo snippet nasconde completamente una funzionalità:

    "stylers": [
      { "visibility": "off" }
    ]

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 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 di mappa base, queste 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 indica il nero), mentre i valori positivi aumentano la luminosità (dove +100 indica 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 definite sulla mappa). Il colore risultante è relativo allo stile della mappa base. Se Google apporta modifiche allo stile di mappa base, queste influiscono sugli elementi della mappa con stile lightness. È preferibile 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 definite sulla mappa). Il colore risultante è relativo allo stile della mappa base. Se Google apporta modifiche allo stile di mappa base, queste influiscono sugli elementi della mappa con stile saturation. È preferibile utilizzare lo styler 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 del bianco o del 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 l'interno degli elementi.

  Nota: questa opzione regola la luminosità rispetto allo stile Google predefinito, utilizzando una curva di gamma. Se Google apporta modifiche allo stile di mappa base, queste influiscono sugli elementi della mappa con stile gamma. Se possibile, è meglio utilizzare lo stile assoluto color.

• 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 influiscono sugli elementi della mappa con stile invert_lightness. È preferibile utilizzare lo styler color assoluto, se possibile.

• visibility (on, off o simplified) indica se e come l'elemento viene visualizzato sulla mappa. La visibilità simplified rimuove alcune caratteristiche di stile dagli elementi interessati. 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 nel formato #RRGGBB) imposta il colore dell'elemento.
• weight (un valore intero maggiore o uguale a zero) imposta lo spessore della caratteristica in pixel. L'impostazione di un valore elevato per il peso potrebbe comportare il clipping vicino ai bordi dei riquadri.

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 caratteristiche e/o gli elementi modificati tramite le operazioni di stile (di solito) hanno già stili esistenti. Le operazioni agiscono su questi stili esistenti, se presenti.

Il modello tonalità, saturazione, luminosità

Nota: l'effetto delle impostazioni di tonalità, saturazione, luminosità e gamma è relativo allo stile della mappa base. Se Google apporta modifiche allo stile di mappa base, queste influiscono sugli elementi della mappa con stile personalizzato tramite queste opzioni. Se possibile, è meglio utilizzare lo styler color assoluto.

Le mappe con stili utilizzano il modello tonalità, saturazione, luminosità (HSL) per indicare il colore all'interno delle operazioni dello strumento per la modifica degli stili. 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 della gamma modifica la luminosità nello 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 dei colori RGB, simile alla maggior parte degli spazi dei colori RGB, ad eccezione del fatto che le sfumature di bianco e nero sono assenti.

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 sono 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 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 rosso, verde e blu, non indicano una tonalità, perché nessuno di questi valori indica un orientamento nello spazio delle coordinate HSL. Esempi: "#000000" (nero), "#FFFFFF" (bianco) e tutte le tonalità di grigio puro. Per indicare il nero, il bianco o il grigio, devi rimuovere tutto il saturation (imposta il valore su -100) e regolare invece il lightness.

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