[amCharts.js] 한국지도 커스텀

먼저, amCharts.js 라이브러리를 불러옵니다. 이를 위해서는 amCharts.js 파일과 해당 라이브러리에 필요한 파일들을 다운로드 받아서 HTML 파일에 연결해야 합니다. 아래는 CDN을 통해 라이브러리를 불러오는 예시입니다.

<!-- CSS -->
<link rel="stylesheet" href="//cdn.amcharts.com/lib/4/maps/maps.css" />

<!-- JavaScript -->
<script src="//cdn.amcharts.com/lib/4/core.js"></script>
<script src="//cdn.amcharts.com/lib/4/maps.js"></script>
<script src="//cdn.amcharts.com/lib/4/lang/ko_KR.js"></script>

다음으로, amCharts.js에서 제공하는 JSON 형식의 데이터를 준비해야 합니다. 한국 지도의 경우, 미리 정의된 GeoJSON 데이터를 사용하여 지도를 생성할 수 있습니다. 이를 위해서는 한국 지도의 경계를 포함하는 GeoJSON 파일을 다운로드 받아서 사용합니다. 예를 들어, 아래 링크에서 다운로드 받을 수 있습니다.

https://datahub.io/core/geo-countries

Country Polygons as GeoJSON

geodata data package providing geojson polygons for all the world's countries

datahub.io

다운로드 받은 파일에서 “kr-gov-2018.geojson” 파일을 선택하여 해당 파일의 내용을 JSON 형식으로 변환합니다. 이를 위해서는 온라인 JSON 변환기를 사용하거나, 별도의 JSON 변환 프로그램을 사용할 수 있습니다.

이제, JSON 데이터와 amCharts.js를 사용하여 한국 지도를 생성하는 샘플 코드를 작성해보겠습니다.

<!DOCTYPE html>
<html>
<head>
	<title>한국 지도</title>
	<meta charset="UTF-8">
	<!-- CSS -->
	<link rel="stylesheet" href="//cdn.amcharts.com/lib/4/maps/maps.css" />
	<style>
		#chartdiv {
			width: 100%;
			height: 500px;
		}
	</style>
</head>
<body>
	<div id="chartdiv"></div>
	<!-- JavaScript -->
	<script src="//cdn.amcharts.com/lib/4/core.js"></script>
	<script src="//cdn.amcharts.com/lib/4/maps.js"></script>
	<script src="//cdn.amcharts.com/lib/4/lang/ko_KR.js"></script>
	<script>
            // Create map instance
            var chart = am4core.create("chartdiv", am4maps.MapChart);

            // Set map definition
            chart.geodata = am4geodata_krGov2018;

            // Set projection
            chart.projection = new am4maps.projections.Miller();

            // Create map polygon series
            var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

            // Exclude Antartica
            polygonSeries.exclude = ["AQ"];

            // Make map load polygon (like country names) data from GeoJSON
            polygonSeries.useGeodata = true;

            // Configure series
            var polygonTemplate = polygonSeries.mapPolygons.template;
            polygonTemplate.tooltipText = "{name}";
            polygonTemplate.fill = am4core.color("#74B266");
            polygonTemplate.stroke = am4core.color("#ffffff");
            polygonTemplate.strokeWidth = 0.5;

            // Create hover state and set alternative fill color
            var hs = polygonTemplate.states.create("hover");
            hs.properties.fill = am4core.color("#367B25");

            // Set up click events
            polygonTemplate.events.on("hit", function(ev) {
                // Get polygon data
                var data = ev.target.dataItem.dataContext;
                // Display information in a message box
                alert(data.name + " 선택됨!");
            });

            // Zoom control
            chart.zoomControl = new am4maps.ZoomControl();

            // Display the chart
            chart.homeZoomLevel = 2;
            chart.homeGeoPoint = { longitude: 128, latitude: 36 };
            chart.language.locale = am4lang_ko_KR;
	</script>
</body>
</html>

위 코드에서 "krGov2018"는 다운로드 받은 GeoJSON 파일의 이름으로 변경해주어야 합니다.

이제, 해당 코드를 HTML 파일에 저장하고 브라우저에서 실행하면 한국 지도가 생성되어 화면에 표시됩니다. 이때, 지도 위에 마우스를 올리면 해당 지역의 이름이 툴팁으로 표시되며, 지역을 클릭하면 메시지 박스가 뜨며 해당 지역의 이름이 표시됩니다. 또한, 지도 우측 하단에는 줌 컨트롤이 표시되어 있습니다.

위 코드에서 amcharts.js 라이브러리와 am4maps 모듈을 사용하였습니다. 이를 사용하여 한국 지도를 생성하고, 각 지역에 대한 정보를 표시하는 기능을 구현하였습니다.

코드에서는 GeoJSON 파일을 사용하여 각 지역의 경계 정보를 로드하였습니다. 이후, 지도를 생성하고 지역 경계 정보를 기반으로 PolygonSeries를 생성하여 지도에 추가하였습니다. 이때, 각 지역의 이름은 데이터에 포함되어 있기 때문에 Tooltip과 Click 이벤트에서 해당 정보를 사용하여 지역 이름을 표시하였습니다.

또한, 줌 컨트롤을 추가하여 사용자가 지도를 확대/축소할 수 있도록 하였습니다.

위 코드를 참고하여 자신이 원하는 스타일 및 기능을 추가하여 한국 지도를 구현해보세요!

'Programming > JavaScript' 카테고리의 다른 글

[React] 리액트 설치 및 실행 방법 (0)	2023.03.02
[amCharts.js] 커서 툴팁 구현 (0)	2023.03.02
[JavaScript] 슬롯머신 이벤트 구현 (0)	2022.12.15
[JavaScript / jQuery] 룰렛 이벤트 구현 (0)	2022.12.15
Puzzle Drag (0)	2021.01.14

Ton-Ton