[javascript] 지도에서 특정 영역의 히트맵 표시하기

22 Nov 2023

javascript

지도 상에서 특정 영역의 히트맵을 표시하는 것은 매우 유용한 기능입니다. 이를 통해 데이터의 밀집도를 시각적으로 파악할 수 있고, 지리적 분포를 쉽게 이해할 수 있습니다. 이번 블로그 게시물에서는 JavaScript를 사용하여 지도에서 특정 영역의 히트맵을 표시하는 방법에 대해 알아보겠습니다.

1. 필요한 라이브러리 설치하기

먼저, 히트맵을 표시하기 위해 필요한 라이브러리를 설치해야 합니다. 여기에서는 leaflet라이브러리를 사용하겠습니다. leaflet은 HTML5 기반의 지도 표시 라이브러리로, 간편하게 사용할 수 있습니다. 아래의 명령어로 leaflet을 설치합니다.

npm install leaflet

2. HTML 파일 설정하기

다음으로, HTML 파일을 설정해야 합니다. 아래는 기본적인 HTML 구조입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <title>Map with Heatmap</title>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="script.js"></script>
</body>
</html>

여기서 중요한 부분은 link 태그와 script 태그로 leaflet 라이브러리와 스크립트를 로드하는 부분입니다.

3. 스크립트 작성하기

이제 스크립트를 작성해보겠습니다. 아래는 script.js 파일의 내용입니다.

// 맵 생성
var map = L.map('map').setView([37.5665, 126.9780], 13);

// 타일 레이어 추가
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
    maxZoom: 18
}).addTo(map);

// 히트맵 데이터 생성 (위치와 가중치)
var heatMapData = [
    [37.5665, 126.9780, 0.5],
    [37.5665, 126.9781, 0.8],
    [37.5666, 126.9780, 0.3],
    // ... 추가적인 데이터
];

// 히트맵 레이어 생성 및 추가
var heatMapLayer = L.heatLayer(heatMapData, {
    radius: 30,
    blur: 15,
    maxZoom: 17
}).addTo(map);

위 스크립트에서는 먼저 map 객체를 생성하고 지도를 표시합니다. 그리고 L.tileLayer를 통해 타일 레이어를 추가해 지도를 구성합니다. 이어서 heatMapData 배열을 통해 히트맵 데이터를 작성합니다. 각 데이터는 위도, 경도, 가중치로 구성됩니다. 마지막으로 L.heatLayer를 사용하여 히트맵 레이어를 생성하고 addTo 메소드를 통해 지도에 추가합니다.

4. 결과 확인하기

스크립트 작성이 완료되면 HTML 파일을 브라우저에서 열어 결과를 확인할 수 있습니다. 특정 영역에 해당하는 데이터에 따라 히트맵이 표시되는 것을 볼 수 있습니다.

참고 자료

위 방법을 통해 JavaScript와 Leaflet 라이브러리를 사용하여 지도 상에서 특정 영역의 히트맵을 표시할 수 있습니다. 이를 통해 데이터 시각화와 지리적 분포 파악에 도움을 얻을 수 있습니다.