세계에서 가장 인기 있는 지도 플랫폼인 구글 지도는 정확한 최신 지도 데이터를 제공하며, 경로 안내, 지도 검색, 스트리트 뷰, 위성 이미지, 다양한 언어 지원 등, 유저의 편의를 위한 다양한 기능을 포함하고 있습니다.구글 맵이 지닌 장점은 읊어 보면 끝이 없는데 오늘은 그 중에서도 구글 지도에서 구현할 강력한 “데이터 기반 스타일링”(Data-driven Styling)에 대해서 소개하려고 합니다.데이터베이스의 스타일링을 이용하면 지도를 통해서 데이터를 시각화하면 보다 직관적인 방법으로 정보를 전달할 수 있다는 장점이 있습니다.다각형 색 테두리 등을 이용해서 만든 단계 구분도(Choropleth Maps)는 대선 결과 인구 분포도 통계청 자료에 포함된 지도 등에서 이미 우리에게 익숙한 지도 형태인데, 그럼 Google Maps플랫폼을 활용하고 만든 데이터 기반의 지도에는 어떤 장점이 있나요?
일본 후쿠시마 다다미 지역을 경계선으로 표시한 다각형과 타고쿠라 역을 마커로 표시한 모습
베를린 내 우편번호(구역)에 따라 달라지는 배달요금을 표시하는 단계 구분 도구, 그루맵스 플랫폼을 통한 데이터 기반 스타일링은 전 세계 국가 경계, 지역, 우편번호별 행정 경계 유형에 대한 접근을 허용합니다. Google에서 관리하는 경계 데이터(Boundary Data)를 사용할 수 있기 때문에 사용자가 따로 데이터를 구매, 업데이트, 유지 및 관리할 필요가 없습니다. 이러한 행정경계 데이터를 이용하여 코로나19 확진자 수, 주택가격, 선거결과 등의 다양한 단계 구분도를 제작할 수 있습니다.
인기글
미국의 주를 색깔별로 표시한 단계 구분도.캘리포니아를 클릭하면 Place ID 같은 메타 데이터(속성 정보)를 확인할 수 있습니다.데이터 베이스의 스타일링은 사용자 상호 작용에 기여하고 강화된 사용자 경험을 제공합니다.지도상의 다각형을 클릭하면 Place ID, 속성, 이름 등의 메타 데이터(속성 정보)을 나타낼 수 있습니다.이들의 클릭이벤트는 사용자의 상호 작용에 따른 맵을 스타일링할 경우 매우 도움이 됩니다.데이터베이스의 스타일링을 사용하는 Google Maps플랫폼에서 데이터베이스의 스타일링을 사용하려면 Google Cloud Console에서 새로운 맵/기존의 맵 스타일에 사용하려는 기능 계층(Feature Layer)을 먼저 선택합니다.그 뒤 해당 스타일을 JavaScript용 벡터 맵(Vector Map)이 활성화된 맵 ID와 접속합니다(Static Maps나 래스터 타일 맵(Raster Tile Map)에서는 데이터 기반의 스타일링이 지원되지 않습니다)
다음으로 코드의 Feature Layer에 Feature Style Options객체 또는 Feature Style Function을 적용합니다.이로써 각 Feature Layer 다르게 채우는, 화색, 화면의 불투명도, 굵기 등을 지정할 수 있습니다.데이터베이스 스타일링 사용 방법에 대해서 자세한 것은, 이하의 링크를 참조하십시오:https://developers.google.com/maps/documentation/javascript/dds-boundaries/start데이터베이스 스타일링 적용 범위는?현재의 프리뷰 단계에서는 데이터 베이스의 스타일링으로 나라 지역 우편 번호 등의 행정 구역별 기능 유형에 액세스 할 수 있습니다상세한 지원국과 적용 범위 표에 대해서는 이하의 링크를 클릭하십시오:https://developers.google.com/maps/documentation/javascript/dds-boundaries/coverage
현재 대한민국은 데이터베이스의 스타일링 시 국가 단위의 경계 정보를 사용할 수 있습니다.Place ID를 활용한 다각형 스타일링·데이터베이스·스타일링 가장 일반적인 사용 사례는 각각의 다각형 또는 부분 집합을 스타일링 하는 것입니다.Google Maps플랫폼에서는 Place IDs(장소 IDs)을 활용하고 각 경계를 구분할 수 있습니다(Place ID에는 캐싱 제한 사항이 적용되지 않아 나중에 사용하기 위한 장소 ID값을 저장할 수 있습니다)Gemaps플랫폼은 Place ID를 보다 쉽게 취득하도록 Region Lookup API을 제공합니다.Region Look Up API는 지리적 좌표, 주소, 장소 이름, ISO코드 및 FIPS코드, 장소별 Place ID호출 등을 제공합니다.GitHub의 Google Maps레파지토리에서 JavaScript용 오픈 소스 라이브러리를 확인하고 보세요.또는 Geocoding, Place Search, Autocomplete를 사용하고 지역별 Place ID를 불러낼 수도 있습니다.데이터베이스의 스타일링은 Google Maps플랫폼의 Dynamic Maps for maps Javascript API에 포함되어 있습니다.현재 데이터베이스의 스타일링은 미리 보기 모드에서 이용되며 향후 더욱 커스터마이즈 된 시각화 및 사용자 상호 작용적 경험 때문에 확장될 예정입니다.Google Maps 플랫폼에서 사용 가능한 데이터베이스 스타일링 영상입니다. 오늘의 게시물을 요약하면서 어떻게 데이터베이스 스타일링을 사용하는지 확인하세요. 6분 밖에 안돼서 가볍게 보기좋아요 데이터 기반 스타일링 Demo 사이트 https://storage.googleapis.com/gmp-maps-demos/data-driven-styling/index.html#intro-page빌딩 에어리어는 사각 충전재, 자전거 거치대는 동그라미, 자전거 도로는 선으로 표현했습니다. 빌딩의 밀집도, 곱수, 통행량에 따라 색칠이나 도형의 크기를 달리하여 직관적으로 정보를 이해하는 데 도움을 줍니다.데이터를 구글의 경계 정보(Boundaries Data)와 혼합하여 스타일링 할 수 있습니다.데이터베이스 스타일링이 구글의 마커(Marker)와 경로 검색(Route) 기능을 만나면 더욱 풍부한 지도 체험을 할 수 있습니다.https://storage.googleapis.com/gmp-maps-demos/data-driven-styling-datasets/index.html구글 맵스 플랫폼의 데이터 기반 스타일링으로 만든 미국, 영국, 일본 지도 Demo 사이트이미지를 클릭하면 SPH 홈페이지로 이동합니다SPH는 Google Maps, SuperMap, Maxar Technologies 등 다양한 제품군을 보유하고 있으며, 고객 사례에 맞는 무료 세미나 및 인적 컨설팅을 제공하고 있습니다. 더 자세한 이야기를 하고 싶으신 분은 이쪽에서 문의해 주세요.또한 SPH가 발행하는 GIS/로케이션 인텔리전스에 대한 최신 뉴스를 받고 싶다면 페이스북 페이지 또는 뉴스레터를 구독해주세요.