[javascript] Mapbox지도에서 특정 위치 위에 레이어 추가하기

22 Nov 2023

javascript

Mapbox는 강력하고 유연한 지도 서비스입니다. 이 서비스를 사용하여 특정 위치 위에 레이어를 추가하는 방법을 알아보겠습니다.

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN'; // Mapbox Access Token을 여기에 입력하세요.

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [lng, lat], // 중심 위치 좌표를 입력하세요.
    zoom: 14 // 지도 확대/축소 레벨을 입력하세요.
});

map.on('load', function () {
  map.addLayer({
    'id': 'layerId',
    'type': 'fill',
    'source': {
      'type': 'geojson',
      'data': {
        'type': 'Feature',
        'geometry': {
          'type': 'Point',
          'coordinates': [lng, lat] // 레이어를 추가할 위치 좌표를 입력하세요.
        }
      }
    },
    'layout': {},
    'paint': {
      'fill-color': '#f00', // 레이어의 채우는 색상을 입력하세요.
      'fill-opacity': 0.5 // 레이어의 투명도를 입력하세요.
    }
  });
});

위의 코드에서 ‘YOUR_ACCESS_TOKEN’ 부분을 자신의 Mapbox Access Token으로 대체해야 합니다. 또한, 중심 위치 좌표와 레이어를 추가할 위치 좌표, 레이어의 채우는 색상, 투명도 등을 필요에 맞게 수정할 수 있습니다.

이제 HTML 파일에 이 코드를 추가하고 웹 브라우저로 열면 Mapbox지도 위에 지정한 위치에 레이어가 추가된 것을 확인할 수 있습니다.

더 많은 정보와 예제는 Mapbox의 공식 문서를 참고하십시오.