[React] amCharts로 세계지도 생성하기 (Feat. 한국지도)

amCharts는 데이터를 차트화 시키는 데이터 시각화를 위한 라이브러리입니다. 또한 차트뿐만 아니라 지도 기능도 제공을 하는데요 이 기능을 이용하여 세계지도를 생성해 보겠습니다!

---

 

 

패키지 설치

npm install @amcharts/amcharts4 @amcharts/amcharts4-geodata

 

 

코드 작성

import React, { useEffect } from 'react';
import * as am4core from "@amcharts/amcharts4/core";
import * as am4maps from "@amcharts/amcharts4/maps";
import am4geodata_worldLow from "@amcharts/amcharts4-geodata/worldLow";

function WorldMap(props) {

  useEffect(() => {
    // 인스턴스 생성
    let map = am4core.create("chartdiv", am4maps.MapChart);
  
    // 특정 지도 정의
    map.geodata = am4geodata_worldLow;
  
    // 투영(지도 형태) 설정
    map.projection = new am4maps.projections.Miller();

    // 다각형 시리즈 생성
    let polygonSeries = new am4maps.MapPolygonSeries();
    polygonSeries.useGeodata = true;
    map.series.push(polygonSeries);

    // 언마운트 시 인스턴스 해제
    return () => {
      map.dispose();
    };
  }, []);

  return (
    <div id='chartdiv' style={{ width: '1000px', height: '600px' }} />
  );
}

export default WorldMap;

 

우선 세계지도를 생성하기 위한 기본적인 코드만 작성하고 실행을 시켜보겠습니다.

 

 

마우스와 휠로 확대/축소 기능만 탑재한 흑백 상태의 지도가 생성되었습니다.

여기에 색상, hover 상태일 때 나라 이름을 나타내는 툴팁과 변경될 색상을 지정하는 코드를 추가해주겠습니다.

    // 툴팁 및 색상 지정
    let polygonTemplate = polygonSeries.mapPolygons.template;
    polygonTemplate.tooltipText = "{name}";
    polygonTemplate.fill = am4core.color("#74B266");

    // hover 이벤트
    let hs = polygonTemplate.states.create("hover");
    hs.properties.fill = am4core.color("#367B25");

 

추가해 줄 코드는 언마운트 시 실행될 return문 위에 작성하시면 되겠습니다!

 

위 코드를 추가하고 실행을 시켜보면

 

hover 상태일 때 나라 이름이 표시되고 색상이 변경되는 걸 볼 수 있습니다.

마지막으로 줌 컨트롤러를 표시하고 나라 클릭 시 나라 이름의 alert 창을 띄우는 클릭 이벤트 처리를 해보겠습니다.

    // 줌 컨트롤러 생성 및 높이 지정
    map.zoomControl = new am4maps.ZoomControl();
    map.zoomControl.slider.height = 300;

    // 클릭 이벤트
    polygonTemplate.events.on("hit", function(ev) {
      const countryName = ev.target.dataItem.dataContext.name;
      alert(`클릭한 나라는 ${countryName}입니다.`);
    });

 

마찬가지로 return문 위에 추가해주고 실행을 시켜보면

 

 

줌 컨트롤러를 직접 조작하여 확대/축소가 가능하고 한국을 클릭했더니 alert 창이 띄워지네요!

이벤트를 조금 다르게 처리하여 해당 나라의 정보를 제공하는 간단한 웹 사이트도 제작이 가능하겠습니다.   

이 외 특정 나라 적용/제거, 나라와 나라 간 라인 형성, 지도 모양 변경 등 더 다양한 기능을 제공하니 아래 공식 사이트를 참고하여 커스텀 하시면 되겠습니다. 참고로 상업용으로 사용할 시 별도의 결제가 필요하고 비상업적으로 사용할 땐 저작권 표시를 하면 사용이 가능하다고 합니다.

 

Anatomy of a Map Chart – amCharts 4 Documentation

 

 

한국지도

 

한국지도는 기존 코드에서 두 곳만 수정해주면 되는데요

import am4geodata_koreaLow from "@amcharts/amcharts4-geodata/southKoreaLow";
map.geodata = am4geodata_koreaLow;

 

기존 코드는 초록색 줄처럼 주석 처리해 주고 위 코드를 빨간 줄과 같이 추가시킨 뒤 실행을 해보면

 

 

세계지도에서 한국지도로 변경되었습니다.