데이터 기반 스타일 지정을 통해 실시간으로 데이터 보기

이 문서에서는 업종 및 부문 전반의 다양한 사용 사례에 유용한 Maps JavaScript API를 사용하여 Google 경계의 동적 데이터 기반 스타일 지정을 구현하는 이유와 방법을 설명합니다.

우편번호별 뉴욕시 택시 수
뉴욕시의 우편번호 경계별 애니메이션 택시 수 (시뮬레이션, 시간 경과):

데이터 기반 스타일 지정은 Google의 행정 경계 다각형을 활용하고, 지도에 표시할 다각형에 스타일을 지정하고, 자체 데이터를 결합하여 풍부하고 맞춤설정된 지도를 만들 수 있게 해 주는 Google Maps Platform 기능입니다. 이 기능은 시각적 분석 및 데이터 이해 개선을 위해 사용할 수 있습니다. 이 문서에서는 동적 데이터 피드를 통합하여 지도에서 데이터 기반 스타일 지정을 사용하여 데이터를 거의 실시간으로 시각화할 수 있는 이유와 방법을 설명하는 몇 가지 사용 사례를 설명합니다.

데이터 기반 스타일 지정을 사용하면 데이터의 지리적 분포를 보여주는 지도를 만들고, 다각형 스타일을 동적으로 맞춤설정하고, 클릭 이벤트를 통해 데이터와 상호작용할 수 있습니다. 이러한 기능을 사용하면 다양한 사용 사례와 업종에 대한 유익하고 매력적인 지도를 만들 수 있습니다.

다음은 데이터 기반 스타일 지정에 대한 동적 데이터 업데이트를 표시하는 지도에 적용할 수 있는 사용 사례의 몇 가지 예입니다.

• 차량 공유: 실시간 업데이트를 사용하여 수요가 많은 지역을 파악할 수 있으며, 이 경우 일부 제공업체의 요금이 급격히 증가할 수 있습니다.
• 교통: 교통 혼잡 지역 식별에 실시간 업데이트를 사용해 최적의 대체 경로를 파악할 수 있습니다.
• 선거: 선거일 밤에는 실시간 데이터 설문조사 데이터를 사용하여 선거 결과를 즉시 시각화할 수 있습니다.
• 근로자 안전: 사건이 실시간으로 전개될 때 이를 추적하고, 고위험 지역을 식별하고, 현장의 구조원에게 상황 인식을 제공하는 데 실시간 업데이트를 사용할 수 있습니다.
• 날씨: 실시간 업데이트를 사용해 폭풍의 움직임을 추적하고, 현재 위험을 식별하고, 경고와 알림을 제공할 수 있습니다.
• 환경: 실시간 업데이트를 사용하여 화산재 및 기타 오염 물질의 움직임을 추적하고, 환경적 악화 영역을 식별하고, 인간 활동이 미치는 영향을 모니터링할 수 있습니다.

이러한 모든 상황에서 고객은 실시간 데이터 피드를 Google의 경계와 결합하여 데이터를 쉽고 빠르게 지도에 시각화함으로써 추가적인 가치를 창출할 수 있으며, 이를 통해 정보에 입각한 의사 결정을 내릴 수 있도록 거의 즉각적으로 유용한 정보를 얻을 수 있습니다.

사용해 보기: Google Cloud 콘솔로 이동하여 Maps JavaScript API를 사용 설정하세요.

솔루션에 대한 아키텍처 접근 방식

이제 데이터 기반 스타일 지정을 사용하여 동적 데이터를 시각화하는 지도를 만들어 보겠습니다. 앞서 설명했듯이 사용 사례는 뉴욕시 택시의 수를 우편번호로 시각화한 것입니다. 이렇게 하면 사용자가 택시를 부르는 일이 얼마나 쉬운지 이해하는 데 도움이 됩니다.

아키텍처
다음은 이러한 접근 방식을 보여주는 애플리케이션 아키텍처 다이어그램입니다.

동적 데이터 기반 스타일 지정 솔루션

이제 데이터 세트에 동적 데이터 기반 스타일 지정 등치 지역도를 구현하는 데 필요한 단계를 살펴보겠습니다.

이 솔루션을 사용하면 뉴욕시 주변의 실시간 택시 밀도에 대한 가상의 데이터 세트를 우편번호별로 시각화할 수 있습니다. 이 데이터는 실제 데이터가 아닐 수도 있지만 실제 애플리케이션을 보유하고 있으며 데이터 기반 스타일 지정을 통해 지도에서 동적 데이터를 시각화할 수 있는 능력과 기능을 제공합니다.

1단계: 시각화할 데이터를 선택하고 경계 장소 ID에 조인

첫 번째 단계는 표시하려는 데이터를 식별하고, 해당 데이터가 Google의 경계와 일치하는지 확인하는 것입니다. 각 postalCode에 대해 findPlaceFromQuery 콜백 메서드를 호출하여 클라이언트 측에서 이러한 일치를 수행할 수 있습니다. 미국의 우편번호에는 고유한 이름이 있지만 다른 행정 수준에는 그렇지 않습니다. 모호한 결과가 있을 수 있는 경우 쿼리에 올바른 장소 ID를 선택하는 것이 좋습니다.

const request = {
    query: postalCode,
    fields: ['place_id'],
};
 
function findPlaceId() {
   placesService.findPlaceFromQuery(request, function (results, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
         console.log(results[0]);
      }
   });
}

데이터에 위도 및 경도 값이 있는 경우 Geocoding API를 구성요소 필터링과 함께 사용하여 해당 위도/경도 값을 스타일을 지정할 지형지물 레이어의 장소 ID 값으로 확인할 수도 있습니다. 이 예에서는 POSTAL_CODE 지형지물 레이어의 스타일을 지정합니다.

2단계: 실시간 데이터에 연결하기

데이터 소스에 연결하는 방법에는 여러 가지가 있으며, 가장 적합한 구현은 특정 요구사항과 기술 인프라에 따라 달라집니다. 여기서는 데이터가 'zip_code'와 'taxi_count'라는 두 개의 열이 있는 BigQuery 테이블에 있다고 가정하고 Firebase Cloud 함수를 통해 쿼리한다고 가정해 보겠습니다.

async function queryNycTaxis() {
   // Queries the NYC Taxis dataset.

   // Create a client
   const bigqueryClient = new BigQuery();
  
   // The SQL query to run
   const sqlQuery = 'SELECT zip_code, taxi_count
      FROM \'YOUR_DATASET_ID.TABLE\' LIMIT 100';
      
   const options = {
      query: sqlQuery,
      // Location must match that of the dataset(s)
      // referenced in the query.
      location: 'US',
   };
  
   // Run the query
   const [rows] = await bigqueryClient.query(options);
  
   rows.forEach(row => {
      const postalCode = row['zip_code'];
      const taxiCount = row['taxi_count'];
   });
}

다음으로는 데이터를 최신 상태로 유지해야 합니다. 한 가지 방법은 웹 작업자를 사용하여 위 쿼리를 호출하고 setInterval 함수를 사용하여 데이터를 새로고침하도록 타이머를 설정하는 것입니다. 간격을 적절한 값으로 설정할 수 있습니다(예: 15초마다 지도를 새로고침). 간격 시간이 지날 때마다 웹 작업자는 postalCode별로 업데이트된 taxiCount 값을 요청합니다.

이제 데이터를 쿼리하고 새로고침할 수 있으므로 지도 다각형의 모양에 이러한 변경사항이 반영되도록 해 보겠습니다.

3단계: 데이터 기반 스타일 지정으로 지도 스타일 지정

이제 Maps JavaScript 인스턴스의 우편번호 경계에 시각적 스타일을 JSON 객체로 만들고 적용하는 데 필요한 동적 데이터 값이 있으므로 등치 지역도로 스타일을 지정할 차례입니다.

이 예에서는 각 우편번호의 택시 수를 기준으로 지도 스타일을 지정하여 사용자가 해당 지역의 택시 밀도와 이용 가능 여부를 파악할 수 있습니다. 스타일은 택시 수 값에 따라 달라집니다. 택시가 가장 적은 지역에는 보라색 스타일이 적용되고 색상 그라디언트는 빨간색, 주황색을 거쳐 이동하면서 가장 밀도가 높은 곳의 NYC 택시는 노란색으로 끝납니다. 이 색 구성표의 경우 이 색상 값을 fillColor 및 strColor에 적용합니다. fillOpacity를 0.5로 설정하면 사용자가 기본 지도를 볼 수 있고, 획Opacity를 1.0으로 설정하면 같은 색상의 다각형의 경계를 쉽게 구분할 수 있습니다.

const featureLayer = map.getFeatureLayer(
   google.maps.FeatureType.POSTAL_CODE
);
featureLayer.style = (featureStyleFunctionOptions) => {
   const placeFeature = featureStyleFunctionOptions.feature;
   // taxiCount per (postal_code) PlaceID 
   const taxiCount = zips[placeFeature.placeId];
   let fillColor;
   let strokeColor;
// Apply colors to features based on taxiCount values
if (taxiCount < 8) {
   fillColor = "#571845";  
   strokeColor = "#571845"; 
} else if (taxiCount < 13) {
   fillColor = "#900c3e";
   strokeColor = "#900c3e";
} else if (taxiCount < 21) {
   fillColor = "#c60039"; 
   strokeColor = "#c60039"; 
} else if (taxiCount < 34) {
   fillColor = "#fe5733";
   strokeColor = "#fe5733";
// keep else if or the whole map gets this style with else
} else if (taxiCount >= 34) { 
   fillColor = "#fec30f";
   strokeColor = "#fec30f";
}  
return {
   fillColor,
   strokeColor,
   fillOpacity: 0.5,
   strokeOpacity: 1.0,
};
 

결론

Google 경계를 위한 데이터 기반 스타일 지정을 통해 데이터를 사용하여 여러 업종과 부문에 걸쳐 다양한 구현에 맞게 지도의 스타일을 지정할 수 있습니다. 실시간 데이터에 연결하면 내용, 위치, 상황별 정보를 전달할 수 있습니다. 이 기능은 실시간 데이터의 가치를 실현하고 사용자가 현실 세계에서 실시간으로 데이터를 더 잘 이해하도록 지원할 수 있는 잠재력을 지니고 있습니다.

다음 작업

• 데이터 기반 스타일 지정을 사용하여 Google 지도 경계의 스타일을 지정하는 방법 웹 세미나를 시청하세요.
• 데이터 기반 스타일 지정을 위한 클릭 이벤트로 시각화를 한 단계 더 발전시킬 수 있습니다.
• 지도에 고급 마커를 추가해 보세요.

기여자

주 저자:

짐 레플라 | Google Maps Platform 솔루션 엔지니어