Mapbox는 인기있는 오픈 소스 맵 플랫폼으로, 다양한 기능과 사용자 정의 옵션을 제공합니다. 이번 포스트에서는 자바스크립트를 사용하여 Mapbox 지도에서 로드의 인/아웃을 제어하는 방법을 다루겠습니다.

1. Mapbox 지도 초기화

먼저, Mapbox 지도를 초기화해야 합니다. 이를 위해 필요한 것은 Mapbox 계정의 액세스 토큰과 표시할 지도의 중심 좌표입니다. 아래는 초기화하는 예제 코드입니다.

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [YOUR_LONGITUDE, YOUR_LATITUDE],
  zoom: 12
});

여기서 YOUR_ACCESS_TOKEN은 Mapbox 계정에서 발급받은 액세스 토큰을 입력해야 합니다. 또한, YOUR_LONGITUDE와 YOUR_LATITUDE는 지도의 중심 좌표값입니다. 이 값을 실제 원하는 좌표로 바꾸어야 합니다.

2. 로드 인/아웃 제어 버튼 추가하기

Mapbox 지도에는 로드를 인/아웃 할 수 있는 제어 버튼을 추가할 수 있습니다. 이를 위해 버튼 요소를 HTML에 추가하고, 해당 버튼을 이벤트 리스너와 연결해야 합니다. 아래는 버튼 요소를 추가하는 예제 코드입니다.

<button id="toggleRoadsButton">로드 표시/숨기기</button>

위 버튼 요소를 추가한 후, 자바스크립트 코드에서 해당 요소를 선택하여 이벤트 리스너를 등록해야 합니다.

var toggleRoadsButton = document.getElementById('toggleRoadsButton');

toggleRoadsButton.addEventListener('click', function() {
  var currentStyle = map.getStyle();

  if (currentStyle.layers.some(layer => layer.source === 'mapbox.mapbox-streets-v8')) {
    map.setStyle('mapbox://styles/mapbox/satellite-v9');
  } else {
    map.setStyle('mapbox://styles/mapbox/streets-v11');
  }
});

위 코드에서는 toggleRoadsButton 요소를 선택하고, 클릭 이벤트가 발생했을 때 현재 스타일을 확인한 후 로드 스타일을 토글하는 기능을 구현하였습니다. 예제 코드에서는 ‘mapbox://styles/mapbox/streets-v11’와 ‘mapbox://styles/mapbox/satellite-v9’ 스타일을 번갈아가며 사용하도록 설정되어 있습니다.

3. 로드 인/아웃 제어 기능 사용하기

이제 Mapbox 지도에 로드 인/아웃 제어 버튼이 추가되었으므로, 해당 버튼을 클릭하여 로드를 표시하거나 숨길 수 있습니다. 버튼을 클릭할 때마다 현재 스타일을 확인하고, 스타일을 변경하여 로드를 인/아웃할 수 있습니다.

위에서 작성한 코드를 HTML 문서에 포함시키고, 파일을 웹 브라우저에서 열어서 확인해보세요. 버튼을 클릭하면 Mapbox 지도의 스타일이 변경되는 것을 확인할 수 있을 것입니다.

결론

자바스크립트를 사용하여 Mapbox 지도에서 로드 인/아웃을 제어하는 방법을 살펴보았습니다. Mapbox의 다양한 기능과 옵션을 활용하여 원하는 맵 스타일과 기능을 구현할 수 있습니다. 자세한 내용은 Mapbox 공식 문서를 참조하시기 바랍니다.

참고 자료:

• Mapbox 공식 문서