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 anche nasconderli completamente. Ciò significa che puoi mettere in risalto componenti particolari della mappa o fare in modo che la mappa integri lo stile della pagina circostante.

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

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

Esempi

La seguente dichiarazione di stile JSON imposta tutti gli elementi della mappa in grigio, quindi colora in blu la geometria delle strade principali 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): gli elementi da selezionare per questa modifica dello stile. Gli elementi sono caratteristiche geografiche della mappa, tra cui strade, parchi, corpi idrici e altro ancora. Se non specifichi un elemento, vengono selezionati tutti gli elementi.
• elementType (facoltativo): la proprietà dell'elemento specificato da selezionare. Gli elementi sono parti secondarie di un elemento, tra cui etichette e geometria. Se non specifichi un elemento, vengono selezionati tutti gli elementi della funzione.
• stylers : le regole da applicare agli elementi selezionati. Gli stili 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 featureType e elementType selettori e i tuoi stylers in un array di stili. Puoi scegliere come target qualsiasi combinazione di elementi 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 di questa pagina contiene ulteriori informazioni su elementi, elementi e stili.

featureType

Il seguente snippet JSON seleziona tutte le strade sulla mappa:

{
  "featureType": "road"
}

Gli elementi, o tipi di elementi, sono caratteristiche geografiche della mappa, tra cui strade, parchi, corpi idrici, attività e altro ancora.

Le funzionalità 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 principali.
  • 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 i corpi idrici.

elementType

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

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

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 può supportare nessuno, alcuni o tutti gli elementi:

I colori fill e stroke del testo dell'etichetta cambiano in base al livello di zoom. Per garantire un'esperienza coerente tra i livelli di zoom, definisci sempre sia fill che 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.

stylers

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

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

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

Questo snippet rimuove tutta l'intensità dal colore di un elemento, indipendentemente da colore iniziale. L'effetto è il rendering dell'elemento in scala di grigi:

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

Questo snippet nasconde completamente un elemento:

    "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 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 sugli elementi della mappa con lo stile hue. Se possibile, è preferibile utilizzare lo stile assoluto colorIt's better to use the absolute styler.

• 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 della mappa di base, queste modifiche influiscono sugli elementi della mappa con lo stile lightness. Se possibile, è preferibile utilizzare lo stile assoluto color

• 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 della mappa di base, queste modifiche influiscono sugli elementi della mappa con lo stile saturation. Se possibile, è preferibile utilizzare lo stile assoluto color It's better.

• 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 lo stile gamma. Se possibile, è preferibile 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 della mappa di base, queste modifiche influiscono sugli elementi della mappa con lo stile invert_lightness. Se possibile, è preferibile utilizzare lo stile assoluto color It's better.

• 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 delle tessere.

Le regole di stile vengono applicate nell'ordine specificato. 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 che vengono modificati tramite le 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à

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

Le mappe con stile utilizzano il modello di tonalità, saturazione e luminosità (HSL) per indicare il colore all'interno delle operazioni di stile. 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.

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 la saturation o la lightness esistente.