클라우드 기반 지도 스타일 지정의 JSON 참조

플랫폼 선택: Android iOS JavaScript 웹 서비스

클라우드 기반 지도 스타일 지정의 JSON 스키마를 사용하면 스타일 편집기 인터페이스를 통해 지도를 맞춤설정하는 것과 마찬가지로 JSON을 사용하여 지도를 맞춤설정할 수 있습니다. 이 문서에서는 JSON 스키마와 JSON 스타일 선언을 만드는 방법을 설명합니다.

JSON 스키마 다운로드

스타일 편집기 내에서 JSON을 사용하여 지도 스타일을 수정하거나 지도 스타일을 가져오고 내보내는 방법을 알아보려면 클라우드 기반 지도 스타일 지정에 JSON 사용을 참고하세요.

JSON 스타일 선언의 예 보기

다음 JSON 스타일 선언은 배경 색상을 설정한 다음 관심 장소, 공원, 수역의 스타일을 정의하고 음식 및 음료 위치의 라벨을 숨깁니다.

 {   "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"       }     }   ] }

JSON 객체

JSON 스타일 선언은 최상위 객체와 스타일 규칙 배열로 구성됩니다.

  • 최상위 설정 (선택사항) - backgroundColor, variant과 같은 전역 스타일 설정입니다.
  • styles - 스타일 규칙 객체의 배열로, 다음으로 구성될 수 있습니다.
    • id: 이 스타일 수정에서 선택할 지도 지형지물입니다(예: pointOfInterest.recreation.park)에 복사합니다.
    • geometry (선택사항) - 지도 지형지물의 기하학적 요소와 적용할 스타일 규칙입니다 (예: fillColor)에 복사합니다.
    • label (선택사항): 지도 지형지물의 텍스트 또는 핀 라벨과 적용할 스타일 규칙입니다 (예: textStrokeColor)에 복사합니다.

최상위 수준 설정

다음 표의 속성은 전체 지도 스타일에 적용됩니다.

속성 유형 설명 예

backgroundColor

 문자열 #RRGGBB 16진수 문자열을 사용하여 지도 앱의 배경색을 맞춤설정합니다. 이 설정은 불투명도 변경을 지원하지 않습니다. '#002211'

variant

'light'|'dark' 밝은 모드 또는 어두운 모드를 지정합니다. 지정하지 않으면 기본값은 'light'입니다. 'light'

monochrome

부울 흑백을 사용 설정하려면 지도의 회색 버전에 true를 사용합니다.

true

스타일 규칙 객체

이 섹션에서는 styles 배열에서 스타일 규칙 객체를 정의하여 지도 기능을 맞춤설정하는 속성을 설명합니다. 각 스타일 규칙 객체는 다음으로 구성되어야 합니다.

  • id 속성입니다.
  • 연결된 스타일러 속성이 정의된 geometry 또는 label 요소

id (지도 기능)

id 속성은 스타일을 지정할 지도 기능을 지정합니다. 속성 이름은 스타일 편집기의 지도 기능 이름의 카멜케이스 버전입니다.

지도 지형지물은 카테고리 트리를 형성합니다. 상위 지형지물 유형(예: pointOfInterest)을 지정하면 상위 요소에 지정한 스타일이 모든 하위 요소(예: pointOfInterest.retail, pointOfInterest.lodging)에 적용됩니다. 자세한 내용은 지도 지형지물 계층을 참고하세요.

사용 가능한 id 속성 목록

사용 가능한 id 속성은 다음과 같습니다.

  • 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

요소

요소는 지도 지형지물의 세부 구획을 나타냅니다. 예를 들어 도로는 지도상의 그래픽 선 (geometry)과 그 이름을 표시하는 텍스트 (label)로 구성됩니다.

다음 요소를 사용할 수 있으며 다만 특정 지도 지형지물은 어떤 요소도 사용하지 않거나 일부 또는 모든 요소를 사용할 수도 있습니다.

  • geometry: 지정된 지도 지형지물의 모든 도형 요소 (예: 다각형, 다중선)를 선택합니다.
  • label: 지정된 지도 지형지물의 모든 라벨 요소 (예: 텍스트, 핀)를 선택합니다.

스타일러

스타일러는 지도 지형지물의 각 요소에 대한 스타일 규칙을 정의하는 방법입니다.

예를 들어 건물 윤곽선의 경우 각 요소를 다음과 같이 스타일 지정할 수 있습니다.

건물의 geometry 스타일 지정자 예시 건물의 label 스타일 지정자 예시
지도에서 건물 윤곽 다각형을 숨길지 표시할지 여부입니다. 건물 라벨을 숨길지 표시할지 여부입니다.
다각형 채우기 색상 및 불투명도입니다. 텍스트 채우기 색상 및 불투명도
테두리 색상, 불투명도, 너비 텍스트 획 색상 및 불투명도입니다.

이 섹션에서는 geometry 및 label 요소에 사용할 수 있는 다양한 스타일 옵션을 설명합니다.

geometry 스타일러

다음 표에는 사용 가능한 모든 기하학적 스타일러가 나열되어 있습니다.

스타일러 유형 설명

visible

부울 지도 지형지물의 다각형 또는 다중선을 숨기려면 false로 설정합니다.

fillColor

문자열 RGB 16진수 문자열로 다각형 또는 다중선의 색상을 맞춤설정합니다.

fillOpacity

float 다각형 또는 다중선의 불투명도를 맞춤설정합니다. 0은 투명이고 1은 불투명입니다.

strokeColor

문자열 RGB 16진수 문자열로 윤곽선의 색상을 맞춤설정합니다.

strokeOpacity

float 윤곽선의 불투명도를 맞춤설정합니다. 0은 투명이고 1은 불투명입니다.

strokeWeight

float 0~8 범위에서 윤곽선의 두께를 맞춤설정합니다.

자세한 내용은 다각형 및 폴리라인을 참고하세요.

label 스타일러

다음 표에는 사용 가능한 모든 라벨 스타일러가 나와 있습니다.

스타일러 유형 설명

visible

부울 지도 기능의 라벨을 숨기려면 false로 설정합니다.

textFillColor

문자열 RGB 16진수 문자열로 텍스트 라벨의 색상을 맞춤설정합니다.

textFillOpacity

float 텍스트 라벨의 불투명도를 맞춤설정합니다. 0은 투명이고 1은 불투명입니다.

textStrokeColor

문자열 RGB 16진수 문자열로 윤곽선의 색상을 맞춤설정합니다.

textStrokeOpacity

float 윤곽선의 불투명도를 맞춤설정합니다. 0은 투명이고 1은 불투명입니다.

textStrokeWeight

float 0~8 범위에서 윤곽선의 두께를 맞춤설정합니다.

pinFillColor

문자열 RGB 16진수 문자열로 핀 색상을 맞춤설정합니다.

자세한 내용은 아이콘 및 텍스트 라벨을 참고하세요.

키 확대/축소

모든 주요 확대/축소 수준에 대해 하나의 스타일을 설정하거나 주요 확대/축소 수준에 따라 다른 스타일을 지정할 수 있습니다. 스타일을 하나만 제공하면 z0부터 시작하는 모든 키 확대/축소 수준에 사용됩니다. 다양한 주요 확대/축소 수준의 스타일을 제공하면 해당 스타일이 해당 확대/축소 수준부터 정의한 다음 확대/축소 수준까지 적용됩니다.

스타일의 키줌 수준을 설정하려면 스타일러 속성에서 z0~z22의 키줌 수준을 정의한 다음 스타일러 맞춤설정을 정의합니다.

다음 예에서 물의 색상은 키 확대/축소 수준 0~5에서는 검은색, 키 확대/축소 수준 6~11에서는 진한 회색, 키 확대/축소 수준 12부터는 밝은 회색입니다.

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

자세한 내용은 확대/축소 수준 스타일 지정을 참고하세요.