Lo schema JSON per lo stile delle mappe basate su cloud ti consente di utilizzare JSON per personalizzare le mappe esattamente come faresti tramite l'interfaccia dell'editor di stili. Questo documento descrive lo schema JSON e come creare dichiarazioni di stile JSON.
Per scoprire come modificare uno stile di mappa utilizzando JSON nell'editor di stile o per importare ed esportare uno stile di mappa, consulta Utilizza JSON con la personalizzazione delle mappe basata su cloud.
Visualizza un esempio di dichiarazione di stile JSON
La seguente dichiarazione di stile JSON imposta un colore di sfondo, quindi definisce gli stili per i punti di interesse, i parchi e gli elementi idrografici e nasconde le etichette per i luoghi di ristorazione.
{
"variant": "light",
"styles": [
{
"id": "natural.land",
"geometry": {
"fillColor": "#f7e3f7"
}
},
{
"id": "natural.water",
"geometry": {
"fillColor": "#d4b2ff"
},
"label": {
"textFillColor": "#3d2163",
"textStrokeColor": "#f0e1ff"
}
},
{
"id": "pointOfInterest",
"label": {
"pinFillColor": "#e0349a",
"textFillColor": "#a11e6e",
"textStrokeColor": "#ffd9f0"
}
},
{
"id": "pointOfInterest.emergency.hospital",
"geometry": {
"fillColor": "#ffe3e3"
}
},
{
"id": "pointOfInterest.foodAndDrink",
"label": {
"visible": false
}
},
{
"id": "pointOfInterest.recreation.park",
"geometry": {
"fillColor": "#f9b9d2"
}
}
]
}
L'oggetto JSON
Una dichiarazione di stile JSON è costituita da un oggetto di primo livello e da un array di regole di stile.
- Proprietà di primo livello (facoltativo): impostazioni di stile globali come
backgroundColorevariant. styles: un array di oggetti regola di stile, che può essere costituito da quanto segue:id: l'elemento della mappa da selezionare per questa modifica dello stile (ad es.pointOfInterest.recreation.park).geometry(facoltativo): gli elementi geometrici della caratteristica della mappa e le regole di stile da applicare (ad es.fillColor).label(facoltativo): l'etichetta di testo o del segnaposto dell'elemento della mappa e le regole di stile da applicare (ad es.textStrokeColor).
Proprietà di primo livello
Le proprietà nella tabella seguente si applicano all'intero stile di mappa.
| Proprietà | Tipo | Descrizione | Esempio |
|---|---|---|---|
|
Stringa | Personalizza il colore di sfondo dell'app Maps utilizzando una stringa esadecimale #RRGGBB. Questa impostazione non supporta le modifiche all'opacità. | "#002211" |
|
"light"|"dark" | Specifica la modalità Luce o Buio. Se non specificato, il valore predefinito è "light". | "light" |
|
booleano | Per attivare la modalità monocromatica, utilizza true per una versione grigia della mappa. |
|
|
oggetto | Dati coppia chiave-valore arbitrari inclusi nella definizione dello stile. Puoi utilizzare questo campo per includere contenuti non correlati allo stile. Questi dati non vengono inviati ai client di Maps come Maps SDK JavaScript. |
|
Oggetti delle regole di stile
Questa sezione descrive le proprietà che definiscono gli oggetti delle regole di stile nell'array styles per personalizzare gli elementi della mappa. Ogni oggetto della regola di stile deve essere costituito da:
id.- Elemento
geometryolabelcon le proprietà dello styler associate definite.
id (elemento della mappa)
La proprietà id specifica l'elemento della mappa a cui applicare lo stile. I nomi delle proprietà sono versioni in camelcase dei nomi degli elementi della mappa nell'editor di stile.
Gli elementi della mappa formano un albero delle categorie. Se specifichi un tipo di elemento principale, ad esempio pointOfInterest, gli stili che specifichi per l'elemento principale si applicano a tutti i relativi elementi secondari, ad esempio pointOfInterest.retail e pointOfInterest.lodging.
Per maggiori dettagli, consulta Gerarchia degli elementi della mappa.
Elenco delle proprietà id disponibili
Le proprietà id disponibili sono le seguenti:
pointOfInterestpointOfInterest.emergencypointOfInterest.emergency.firepointOfInterest.emergency.hospitalpointOfInterest.emergency.pharmacypointOfInterest.emergency.policepointOfInterest.entertainmentpointOfInterest.entertainment.artspointOfInterest.entertainment.casinopointOfInterest.entertainment.cinemapointOfInterest.entertainment.historicpointOfInterest.entertainment.museumpointOfInterest.entertainment.themeParkpointOfInterest.entertainment.touristAttractionpointOfInterest.foodAndDrinkpointOfInterest.foodAndDrink.barpointOfInterest.foodAndDrink.cafepointOfInterest.foodAndDrink.restaurantpointOfInterest.foodAndDrink.winerypointOfInterest.landmarkpointOfInterest.lodgingpointOfInterest.recreationpointOfInterest.recreation.beachpointOfInterest.recreation.boatingpointOfInterest.recreation.fishingpointOfInterest.recreation.golfCoursepointOfInterest.recreation.hotSpringpointOfInterest.recreation.natureReservepointOfInterest.recreation.parkpointOfInterest.recreation.peakpointOfInterest.recreation.sportsComplexpointOfInterest.recreation.sportsFieldpointOfInterest.recreation.trailheadpointOfInterest.recreation.zoopointOfInterest.retailpointOfInterest.retail.grocerypointOfInterest.retail.shoppingpointOfInterest.servicepointOfInterest.service.atmpointOfInterest.service.bankpointOfInterest.service.carRentalpointOfInterest.service.evChargingpointOfInterest.service.gasStationpointOfInterest.service.parkingLotpointOfInterest.service.postOfficepointOfInterest.service.restStoppointOfInterest.service.restroompointOfInterest.transitpointOfInterest.transit.airportpointOfInterest.otherpointOfInterest.other.bridgepointOfInterest.other.cemeterypointOfInterest.other.governmentpointOfInterest.other.librarypointOfInterest.other.militarypointOfInterest.other.placeOfWorshippointOfInterest.other.schoolpointOfInterest.other.townSquarepoliticalpolitical.countryOrRegionpolitical.borderpolitical.reservationpolitical.stateOrProvincepolitical.citypolitical.sublocalitypolitical.neighborhoodpolitical.landParcelinfrastructureinfrastructure.buildinginfrastructure.building.commercialinfrastructure.businessCorridorinfrastructure.roadNetworkinfrastructure.roadNetwork.noTrafficinfrastructure.roadNetwork.noTraffic.pedestrianMallinfrastructure.roadNetwork.noTraffic.trailinfrastructure.roadNetwork.noTraffic.trail.pavedinfrastructure.roadNetwork.noTraffic.trail.unpavedinfrastructure.roadNetwork.parkingAisleinfrastructure.roadNetwork.rampinfrastructure.roadNetwork.roadinfrastructure.roadNetwork.road.arterialinfrastructure.roadNetwork.road.highwayinfrastructure.roadNetwork.road.localinfrastructure.roadNetwork.road.noOutletinfrastructure.roadNetwork.roadShieldinfrastructure.roadNetwork.roadSigninfrastructure.roadNetwork.roadDetailinfrastructure.roadNetwork.roadDetail.surfaceinfrastructure.roadNetwork.roadDetail.crosswalkinfrastructure.roadNetwork.roadDetail.sidewalkinfrastructure.roadNetwork.roadDetail.intersectioninfrastructure.railwayTrackinfrastructure.railwayTrack.commercialinfrastructure.railwayTrack.commuterinfrastructure.transitStationinfrastructure.transitStation.bicycleShareinfrastructure.transitStation.busStationinfrastructure.transitStation.ferryTerminalinfrastructure.transitStation.funicularStationinfrastructure.transitStation.gondolaStationinfrastructure.transitStation.monorailinfrastructure.transitStation.railStationinfrastructure.transitStation.railStation.subwayStationinfrastructure.transitStation.railStation.tramStationinfrastructure.urbanAreanaturalnatural.continentnatural.archipelagonatural.islandnatural.landnatural.land.landCovernatural.land.landCover.cropsnatural.land.landCover.dryCropsnatural.land.landCover.forestnatural.land.landCover.icenatural.land.landCover.sandnatural.land.landCover.shrubnatural.land.landCover.tundranatural.waternatural.water.oceannatural.water.lakenatural.water.rivernatural.water.othernatural.base
Elementi
Gli elementi sono suddivisioni di un elemento della mappa. Ad esempio, una strada è costituita dalla linea grafica (geometry) sulla mappa e dal testo che ne indica il nome (label).
Sono disponibili i seguenti elementi, ma tieni presente che una specifica caratteristica della mappa potrebbe non supportare nessuno, alcuni o tutti gli elementi:
geometry: seleziona tutti gli elementi geometrici (ad es. poligono, polilinea) dell'elemento della mappa specificato.label: seleziona tutti gli elementi dell'etichetta (ad es. testo, segnaposto) della caratteristica della mappa specificata.
Cabine armadio a vapore
Gli styler consentono di definire le regole di stile per ogni elemento di una caratteristica della mappa.
Ad esempio, per il perimetro di un edificio puoi applicare uno stile a ogni elemento come segue:
Esempio di stili geometry per un edificio |
Esempio di stili label per un edificio |
|---|---|
| Indica se nascondere o mostrare il poligono dell'impronta dell'edificio sulla mappa. | Se nascondere o mostrare l'etichetta dell'edificio. |
| Colore di riempimento e opacità del poligono. | Colore e opacità di riempimento del testo. |
| Colore, opacità e larghezza del bordo. | Colore e opacità del tratto del testo. |
Questa sezione descrive le diverse opzioni di stile disponibili per gli elementi geometry e label.
geometry di styler
La tabella seguente elenca tutti gli styler geometrici disponibili.
| Styler | Tipo | Descrizione |
|---|---|---|
|
booleano | Per nascondere il poligono o la polilinea di un elemento della mappa, imposta il valore su false. |
|
stringa | Personalizza il colore del poligono o della polilinea con una stringa esadecimale RGB. |
|
float | Personalizza l'opacità del poligono o della polilinea, dove 0 è trasparente e 1 è opaco. |
|
stringa | Personalizza il colore del contorno con una stringa esadecimale RGB. |
|
float | Personalizza l'opacità del contorno, dove 0 è trasparente e 1 è opaco. |
|
float | Personalizza lo spessore del contorno scegliendo un valore compreso tra 0 e 8. |
Per saperne di più, consulta Poligoni e polilinee.
label di styler
La tabella seguente elenca tutti gli stili di etichette disponibili.
| Styler | Tipo | Descrizione |
|---|---|---|
|
booleano | Per nascondere l'etichetta di un elemento della mappa, imposta il valore su false. |
|
stringa | Personalizza il colore dell'etichetta di testo con una stringa esadecimale RGB. |
|
float | Personalizza l'opacità dell'etichetta di testo, dove 0 è trasparente e 1 è opaco. |
|
stringa | Personalizza il colore del contorno con una stringa esadecimale RGB. |
|
float | Personalizza l'opacità del contorno, dove 0 è trasparente e 1 è opaco. |
|
float | Personalizza lo spessore del contorno scegliendo un valore compreso tra 0 e 8. |
|
stringa | Personalizza il colore del segnaposto con una stringa esadecimale RGB. |
|
stringa | Personalizza il colore del glifo (icona) all'interno di un segnaposto con una stringa esadecimale RGB. |
|
stringa | Personalizza il colore del contorno del segnaposto con una stringa esadecimale RGB. |
Per saperne di più, consulta Icone ed etichette di testo.
Zoom chiave
Puoi impostare un unico stile per una caratteristica per tutti i livelli di zoom chiave o specificare stili diversi per livelli di zoom chiave diversi. Se fornisci un solo stile, questo verrà utilizzato per tutti i livelli di keyzoom a partire da z0. Se fornisci stili per diversi livelli di keyzoom, lo stile verrà applicato da quel livello di zoom fino al successivo che hai definito.
Per impostare un livello di zoom chiave per uno stile, nella proprietà dello stile, definisci il livello di zoom chiave da z0 a z22 e poi la personalizzazione dello stile.
Nell'esempio seguente, il colore dell'acqua è nero per i livelli di zoom chiave 0-5, grigio scuro per i livelli di zoom chiave 6-11 e grigio chiaro a partire dal livello di zoom chiave 12.
{
"id": "natural.water",
"geometry": {
"fillColor": {
"z0": "#000000",
"z6": "#666666",
"z12": "#cccccc"
}
}
}
Per saperne di più, consulta Livelli di zoom degli stili.
Limitazioni
Puoi utilizzare JSON per applicare uno stile a quasi tutto nella console Google Cloud, ad eccezione delle seguenti opzioni del menu Impostazioni mappa:
- Controlla la densità dei punti di interesse.
- Modifica la visualizzazione (impronte rispetto a 3D) degli edifici.
- Modifica la visualizzazione (illustrata o standard) dei punti di riferimento.
Queste opzioni a livello di mappa richiedono un nuovo recupero dei dati dei riquadri per il rendering corretto, il che potrebbe non essere auspicabile per determinati casi d'uso.
Per queste opzioni, devi selezionare la tua preferenza nel menu Impostazioni mappa.
Poiché queste opzioni non sono incluse negli stili esportati, devono essere selezionate nuovamente nella console Google Cloud quando importi uno stile.