Mapbox는 인터랙티브한 지도를 제공하는 강력한 플랫폼입니다. 이 플랫폼을 사용하여 지도 위에 데이터를 표시하고 필터링하는 방법을 알아보겠습니다. 이를 통해 사용자에게 특정 조건에 따라 표시되는 데이터를 조작할 수 있는 기능을 제공할 수 있습니다.
필요한 패키지 설치하기
Mapbox를 사용하기 위해서는 필요한 패키지를 설치해야 합니다. 아래 명령어를 사용하여 필요한 패키지를 설치해주세요.
npm install mapbox-gl
Mapbox 지도 생성하기
Mapbox를 사용하여 지도를 생성하기 위해서는 Mapbox GL JS 라이브러리와 액세스 토큰이 필요합니다. Mapbox GL JS 라이브러리는 어디에서든지 Mapbox 지도를 로드하고 조작할 수 있는 기능을 제공합니다.
// index.html
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
<script>
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [lng, lat],
zoom: 12
});
</script>
</body>
</html>
위 코드에서 YOUR_ACCESS_TOKEN 자리에는 액세스 토큰을 입력해야 합니다. Mapbox 웹사이트에서 액세스 토큰을 생성하고, 해당 토큰을 사용하면 됩니다.
데이터 필터링하기
이제 Mapbox 지도를 생성하였으니, 여기에 데이터를 표시하고 필터링하는 작업을 수행하겠습니다. 데이터를 필터링하기 위해서는 데이터의 속성을 기준으로 조건을 설정하고, 해당 조건에 맞는 항목만 지도에 표시하면 됩니다.
// filtering-data.js
var data = [
// 데이터 배열 예시
{ name: 'Place 1', category: 'Restaurant', lat: 37.123, lng: 126.456 },
{ name: 'Place 2', category: 'Cafe', lat: 37.456, lng: 126.789 },
// ...
];
// 데이터 필터링 함수
function filterData(category) {
// 지도 위의 모든 마커 제거
map.removeLayer('markers');
// 필터링 조건에 맞는 데이터만 추출
var filteredData = data.filter(function(item) {
return item.category === category;
});
// 필터링된 데이터를 지도에 마커로 표시
filteredData.forEach(function(item) {
var marker = new mapboxgl.Marker()
.setLngLat([item.lng, item.lat])
.addTo(map);
});
}
// 필터링 적용 예시
filterData('Restaurant');
위 코드는 data 배열에 있는 데이터를 카테고리별로 필터링하여 지도 위에 마커로 표시하는 예시입니다. filterData 함수를 호출하면, 해당 카테고리에 맞는 데이터만 지도에 표시합니다.
정리
이렇게 자바스크립트를 사용하여 Mapbox 지도에서 데이터를 필터링하는 방법에 대해 알아보았습니다. 필요한 패키지를 설치하고, Mapbox 지도를 생성한 뒤, 데이터를 필터링하여 원하는 항목만 표시할 수 있습니다. 이를 통해 사용자에게 유용한 기능을 제공하여 좀 더 효과적인 지도 애플리케이션을 만들 수 있습니다.