[javascript] 자바스크립트로 Mapbox 지도의 특정 위치의 레이어 스타일 변경하기

22 Nov 2023

javascript

Mapbox는 자바스크립트를 사용하여 인터랙티브한 지도를 생성할 수 있는 훌륭한 도구입니다. 이번 포스트에서는 Mapbox에서 특정 위치의 레이어 스타일을 변경하는 방법을 알아보겠습니다.

1. Mapbox 지도 생성하기

먼저, Mapbox의 JavaScript API를 사용하여 지도를 생성해야 합니다. 아래는 기본적인 지도 생성 코드입니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 400px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      mapboxgl.accessToken = <YOUR_ACCESS_TOKEN>;
      var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-74.5, 40],
        zoom: 9
      });
    </script>
  </body>
</html>

여기서 <YOUR_ACCESS_TOKEN> 부분을 자신의 Mapbox 액세스 토큰으로 변경해야 합니다.

2. 특정 위치의 레이어 스타일 변경하기

원하는 맵 스타일을 만들고, 특정 위치에 대한 스타일을 변경하려면 아래와 같이 작업해야 합니다.

2.1. 맵 스타일 설정하기

var style = {
  "version": 8,
  "sources": {
    "your-source-name": {
      "type": "geojson",
      "data": {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [<LONGITUDE>, <LATITUDE>]
        }
      }
    }
  },
  "layers": [
    {
      "id": "your-layer-name",
      "type": "symbol",
      "source": "your-source-name",
      "layout": {
        "icon-image": "your-icon-image",
        "icon-size": 2
      }
    }
  ]
};

map.on('load', function() {
  map.addSource('your-source-name', {
    type: 'geojson',
    data: {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [<LONGITUDE>, <LATITUDE>]
      }
    }
  });

  map.addLayer({
    id: 'your-layer-name',
    type: 'symbol',
    source: 'your-source-name',
    layout: {
      'icon-image': 'your-icon-image',
      'icon-size': 2
    }
  });
});

위 코드에서 <LONGITUDE>와 <LATITUDE>를 원하는 위치의 경도와 위도로 변경해야 합니다. 그리고 your-icon-image는 사용하고자 하는 아이콘 이미지의 이름으로 변경해야 합니다.

2.2. 레이어 스타일 변경하기

특정 위치의 레이어 스타일을 변경하려면, 해당 레이어의 아이디를 참조하여 새로운 스타일을 설정해야 합니다. 예를 들어, 아이콘 이미지를 바꾸고 싶은 경우 아래 코드를 참고하세요.

map.on('load', function() {
  map.setLayoutProperty('your-layer-name', 'icon-image', 'new-icon-image');
});

위 코드에서 your-layer-name은 변경하고자 하는 레이어의 아이디, new-icon-image는 변경하려는 아이콘 이미지의 이름으로 수정해야 합니다.

결론

위의 간단한 예제를 통해 자바스크립트를 사용하여 Mapbox 지도의 특정 위치의 레이어 스타일을 변경하는 방법을 알아보았습니다. 이를 응용하여 다양한 스타일 변화를 구현할 수 있으며, 자신의 프로젝트에 적용해보시기 바랍니다.