[javascript] 자바스크립트로 Mapbox 지도에 속성 필터 적용하기

22 Nov 2023

javascript

Mapbox는 웹 기반의 인터랙티브한 맵을 제공하는 플랫폼으로, 다양한 기능을 제공합니다. 이 중에서도 속성 필터는 맵에 표시되는 데이터를 원하는 조건에 따라 필터링하여 보여주는 기능입니다. 자바스크립트를 사용하여 Mapbox 지도에 속성 필터를 적용하는 방법을 알아보겠습니다.

Mapbox GL JS 라이브러리 추가하기

속성 필터를 사용하기 위해 먼저 Mapbox GL JS 라이브러리를 추가해야 합니다. 맵을 그리기 위한 기능들을 포함하고 있으므로 반드시 추가해야 합니다. 다음은 HTML 파일에 Mapbox GL JS 라이브러리를 추가하는 예시입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mapbox with Attribute Filters</title>
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css" rel="stylesheet">
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js"></script>
</head>
<body>
  <div id="map"></div>

  <script>
    // TODO: 자바스크립트 코드 추가
  </script>
</body>
</html>

속성 필터 적용하기

다음으로, Mapbox GL JS를 사용하여 속성 필터를 적용해봅시다. 아래의 예시 코드는 Mapbox 지도를 생성하고, 속성 필터를 사용하여 데이터를 표시하는 예시입니다.

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10', // 지도 스타일 설정
  center: [lng, lat], // 중심점 좌표 설정
  zoom: 10 // 줌 레벨 설정
});

map.on('load', function() {
  map.addSource('your-source', {
    type: 'geojson',
    data: 'your-data.geojson'
  });

  map.addLayer({
    id: 'your-layer',
    type: 'circle',
    source: 'your-source',
    paint: {
      'circle-color': '#FF0000'
    },
    filter: ['==', 'your-attribute', 'your-value']
  });
});

위의 코드에서 YOUR_ACCESS_TOKEN, lng, lat, your-data.geojson, your-attribute, your-value를 각각 자신의 환경에 맞게 수정해주어야 합니다.

map.addSource() 함수를 사용하여 데이터를 지도에 추가하고, map.addLayer() 함수를 사용하여 속성 필터를 적용할 레이어를 추가합니다. filter 옵션을 사용하여 특정 속성 필드 기준으로 데이터를 필터링할 수 있습니다.

결론

이렇게 자바스크립트를 사용하여 Mapbox 지도에 속성 필터를 적용하는 방법을 알아보았습니다. 속성 필터를 사용하면 원하는 조건에 맞게 데이터를 표시할 수 있어 맵의 가독성과 유용성을 높일 수 있습니다. 자세한 내용은 Mapbox GL JS documentation을 참조해주세요.