Lo schema JSON per la personalizzazione delle mappe basata su cloud ti consente di utilizzare JSON per personalizzare le mappe proprio 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 stili o per importare ed esportare uno stile di mappa, consulta Utilizzare 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 punti di interesse, parchi, elementi acquatici e nasconde le etichette per i luoghi dove si trovano cibi e bevande.
{
"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:id: l'elemento della mappa da selezionare per questa modifica dello stile (ad es.pointOfInterest.recreation.park).geometry(facoltativo): gli elementi geometrici dell'elemento della mappa e le regole di stile da applicare (ad es.fillColor).label(facoltativo): il testo o l'etichetta 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 di mappe 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 SDK JavaScript di Maps. |
|
Oggetti delle regole di stile
Questa sezione descrive le proprietà che definiscono gli oggetti delle regole di stile nell'array
styles per personalizzare le funzionalità della mappa. Ogni oggetto regola di stile deve essere composto
da quanto segue:
idproprietà.- Elemento
geometryolabelcon le proprietà di stile 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 camel case dei nomi degli elementi della mappa nell'editor degli stili.
Gli elementi della mappa formano una struttura ad albero di categorie. Se specifichi un tipo di funzionalità 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 (il geometry) sulla mappa e anche dal testo
che ne indica il nome (il label).
Sono disponibili i seguenti elementi, ma tieni presente che un elemento specifico della mappa potrebbe 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) dell'elemento della mappa specificato.
Cabine armadio a vapore
Gli stili consentono di definire le regole di stile per ogni elemento di una funzionalità della mappa.
Ad esempio, per l'impronta di un edificio puoi applicare lo stile a ogni elemento nel seguente modo:
Esempio di stili geometry per un edificio |
Esempio di stili label per un edificio |
|---|---|
| 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 di riempimento e opacità 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 generatori di stili
La tabella seguente elenca tutti gli stili geometrici disponibili.
| Styler | Tipo | Descrizione |
|---|---|---|
|
booleano | Per nascondere il poligono o la polilinea di un elemento della mappa, imposta 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 in un intervallo da 0 a 8. |
Per saperne di più, consulta Poligoni e polilinee.
label generatori di stili
La tabella seguente elenca tutti gli stili di etichetta 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 in un intervallo da 0 a 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 funzionalità 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 keyzoom per uno stile, nella proprietà dello styler, definisci il livello di keyzoom da z0 a z22 e poi la personalizzazione dello styler.
Nell'esempio seguente, il colore dell'acqua è nero per i livelli di keyzoom da 0 a 5, grigio scuro per i livelli di keyzoom da 6 a 11 e grigio chiaro a partire dal livello di keyzoom 12.
{
"id": "natural.water",
"geometry": {
"fillColor": {
"z0": "#000000",
"z6": "#666666",
"z12": "#cccccc"
}
}
}
Per ulteriori informazioni, vedi Livelli di zoom dello stile.
Limitazioni
Puoi utilizzare JSON per applicare stili a quasi tutti gli elementi della console Google Cloud, ad eccezione delle seguenti opzioni del menu Impostazioni mappa:
- Controlla la densità dei punti d'interesse.
- Modificare la visualizzazione (impronte rispetto al 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 essere visualizzate correttamente, 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 riselezionate nella console Google Cloud durante l'importazione di uno stile.