Riferimento JSON per la personalizzazione delle mappe basata su cloud

Seleziona la piattaforma:Android iOS JavaScript Servizio web

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.

Scarica lo schema 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 e poi 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.

  • Impostazioni di primo livello (facoltativo): impostazioni di stile globali come backgroundColor e variant.
  • 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 della funzionalità della mappa e le regole di stile da applicare (ad es. fillColor).
    • label (facoltativo) - Il testo o l'etichetta del segnaposto della funzionalità della mappa e le regole di stile da applicare (ad es. textStrokeColor).

Impostazioni di primo livello

Le proprietà nella tabella seguente si applicano all'intero stile della mappa.

Proprietà Tipo Descrizione Esempio

backgroundColor

Stringa Personalizza il colore di sfondo dell'app di mappe utilizzando una stringa esadecimale #RRGGBB. Questa impostazione non supporta le modifiche all'opacità. "#002211"

variant

"light"|"dark" Specifica la modalità Luce o Buio. Se non specificato, il valore predefinito è "light". "light"

monochrome

booleano Per attivare la modalità monocromatica, utilizza true per una versione grigia della mappa.

true

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:

  • id proprietà.
  • Elemento geometry o label con le proprietà di stile associate definite.

id (funzionalità 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 delle funzionalità 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 specificati per l'elemento principale vengono applicati a tutti i relativi elementi secondari, ad esempio pointOfInterest.retail e pointOfInterest.lodging. Per maggiori dettagli, consulta Gerarchia delle funzionalità della mappa.

Elenco delle proprietà id disponibili

Le proprietà id disponibili sono le seguenti:

  • pointOfInterest
  • pointOfInterest.emergency
  • pointOfInterest.emergency.fire
  • pointOfInterest.emergency.hospital
  • pointOfInterest.emergency.pharmacy
  • pointOfInterest.emergency.police
  • pointOfInterest.entertainment
  • pointOfInterest.entertainment.arts
  • pointOfInterest.entertainment.casino
  • pointOfInterest.entertainment.cinema
  • pointOfInterest.entertainment.historic
  • pointOfInterest.entertainment.museum
  • pointOfInterest.entertainment.themePark
  • pointOfInterest.entertainment.touristAttraction
  • pointOfInterest.foodAndDrink
  • pointOfInterest.foodAndDrink.bar
  • pointOfInterest.foodAndDrink.cafe
  • pointOfInterest.foodAndDrink.restaurant
  • pointOfInterest.foodAndDrink.winery
  • pointOfInterest.landmark
  • pointOfInterest.lodging
  • pointOfInterest.recreation
  • pointOfInterest.recreation.beach
  • pointOfInterest.recreation.boating
  • pointOfInterest.recreation.fishing
  • pointOfInterest.recreation.golfCourse
  • pointOfInterest.recreation.hotSpring
  • pointOfInterest.recreation.natureReserve
  • pointOfInterest.recreation.park
  • pointOfInterest.recreation.peak
  • pointOfInterest.recreation.sportsComplex
  • pointOfInterest.recreation.sportsField
  • pointOfInterest.recreation.trailhead
  • pointOfInterest.recreation.zoo
  • pointOfInterest.retail
  • pointOfInterest.retail.grocery
  • pointOfInterest.retail.shopping
  • pointOfInterest.service
  • pointOfInterest.service.atm
  • pointOfInterest.service.bank
  • pointOfInterest.service.carRental
  • pointOfInterest.service.evCharging
  • pointOfInterest.service.gasStation
  • pointOfInterest.service.parkingLot
  • pointOfInterest.service.postOffice
  • pointOfInterest.service.restStop
  • pointOfInterest.service.restroom
  • pointOfInterest.transit
  • pointOfInterest.transit.airport
  • pointOfInterest.other
  • pointOfInterest.other.bridge
  • pointOfInterest.other.cemetery
  • pointOfInterest.other.government
  • pointOfInterest.other.library
  • pointOfInterest.other.military
  • pointOfInterest.other.placeOfWorship
  • pointOfInterest.other.school
  • pointOfInterest.other.townSquare
  • political
  • political.countryOrRegion
  • political.border
  • political.reservation
  • political.stateOrProvince
  • political.city
  • political.sublocality
  • political.neighborhood
  • political.landParcel
  • infrastructure
  • infrastructure.building
  • infrastructure.building.commercial
  • infrastructure.businessCorridor
  • infrastructure.roadNetwork
  • infrastructure.roadNetwork.noTraffic
  • infrastructure.roadNetwork.noTraffic.pedestrianMall
  • infrastructure.roadNetwork.noTraffic.trail
  • infrastructure.roadNetwork.noTraffic.trail.paved
  • infrastructure.roadNetwork.noTraffic.trail.unpaved
  • infrastructure.roadNetwork.parkingAisle
  • infrastructure.roadNetwork.ramp
  • infrastructure.roadNetwork.road
  • infrastructure.roadNetwork.road.arterial
  • infrastructure.roadNetwork.road.highway
  • infrastructure.roadNetwork.road.local
  • infrastructure.roadNetwork.road.noOutlet
  • infrastructure.roadNetwork.roadShield
  • infrastructure.roadNetwork.roadSign
  • infrastructure.roadNetwork.roadDetail
  • infrastructure.roadNetwork.roadDetail.surface
  • infrastructure.roadNetwork.roadDetail.crosswalk
  • infrastructure.roadNetwork.roadDetail.sidewalk
  • infrastructure.roadNetwork.roadDetail.intersection
  • infrastructure.railwayTrack
  • infrastructure.railwayTrack.commercial
  • infrastructure.railwayTrack.commuter
  • infrastructure.transitStation
  • infrastructure.transitStation.bicycleShare
  • infrastructure.transitStation.busStation
  • infrastructure.transitStation.ferryTerminal
  • infrastructure.transitStation.funicularStation
  • infrastructure.transitStation.gondolaStation
  • infrastructure.transitStation.monorail
  • infrastructure.transitStation.railStation
  • infrastructure.transitStation.railStation.subwayStation
  • infrastructure.transitStation.railStation.tramStation
  • infrastructure.urbanArea
  • natural
  • natural.continent
  • natural.archipelago
  • natural.island
  • natural.land
  • natural.land.landCover
  • natural.land.landCover.crops
  • natural.land.landCover.dryCrops
  • natural.land.landCover.forest
  • natural.land.landCover.ice
  • natural.land.landCover.sand
  • natural.land.landCover.shrub
  • natural.land.landCover.tundra
  • natural.water
  • natural.water.ocean
  • natural.water.lake
  • natural.water.river
  • natural.water.other
  • natural.base

Elementi

Gli elementi sono suddivisioni di una funzionalità 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 una funzionalità specifica della mappa potrebbe supportare nessuno, alcuni o tutti gli elementi:

  • geometry: seleziona tutti gli elementi geometrici (ad es. poligono, polilinea) dell'elemento mappa specificato.
  • label: seleziona tutti gli elementi dell'etichetta (ad es. testo, segnaposto) della funzionalità della mappa specificata.

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 e opacità del riempimento del poligono. Colore e opacità del 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 generatori di stili

La tabella seguente elenca tutti gli stili geometrici disponibili.

Styler Tipo Descrizione

visible

booleano Per nascondere il poligono o la polilinea di una funzionalità della mappa, imposta false.

fillColor

stringa Personalizza il colore del poligono o della polilinea con una stringa esadecimale RGB.

fillOpacity

float Personalizza l'opacità del poligono o della polilinea, dove 0 è trasparente e 1 è opaco.

strokeColor

stringa Personalizza il colore del contorno con una stringa esadecimale RGB.

strokeOpacity

float Personalizza l'opacità del contorno, dove 0 è trasparente e 1 è opaco.

strokeWeight

float Personalizza lo spessore del contorno in un intervallo da 0 a 8.

Per ulteriori informazioni, consulta Poligoni e polilinee.

label generatori di stili

La tabella seguente elenca tutti gli stili di etichetta disponibili.

Styler Tipo Descrizione

visible

booleano Per nascondere l'etichetta di una funzionalità della mappa, imposta il valore su false.

textFillColor

stringa Personalizza il colore dell'etichetta di testo con una stringa esadecimale RGB.

textFillOpacity

float Personalizza l'opacità dell'etichetta di testo, dove 0 è trasparente e 1 è opaco.

textStrokeColor

stringa Personalizza il colore del contorno con una stringa esadecimale RGB.

textStrokeOpacity

float Personalizza l'opacità del contorno, dove 0 è trasparente e 1 è opaco.

textStrokeWeight

float Personalizza lo spessore del contorno in un intervallo da 0 a 8.

pinFillColor

stringa Personalizza il colore 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 zoom delle chiavi a partire da z0. Se fornisci stili per diversi livelli di zoom della chiave, 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 styler, definisci il livello di zoom chiave da z0 a z22 e poi la personalizzazione dello styler.

Nell'esempio seguente, il colore dell'acqua è nero per i livelli di zoom chiave da 0 a 5, grigio scuro per i livelli di zoom chiave da 6 a 11 e grigio chiaro a partire dal livello di zoom chiave 12.

{
  "id": "natural.water",
  "geometry": {
    "fillColor": {
      "z0": "#000000",
      "z6": "#666666",
      "z12": "#cccccc"
    }
  }
}

Per ulteriori informazioni, vedi Livelli di zoom dello stile.