[javascript] 자바스크립트와 Mapbox를 이용한 지도에서 지명 검색하기

22 Nov 2023

javascript

이 글에서는 자바스크립트와 Mapbox를 사용하여 지도에서 지명을 검색하는 방법을 알아보겠습니다. Mapbox는 지도와 위치 기반 서비스를 제공하는 플랫폼으로, 사용자는 맵을 표시하고 지명을 검색하는 기능을 손쉽게 구현할 수 있습니다.

Mapbox 계정 생성 및 토큰 발급

먼저, Mapbox 공식 웹사이트에 접속하여 계정을 생성해야 합니다. 계정 생성이 완료되면, 토큰을 발급받아야 합니다. 이 토큰은 Mapbox API를 호출할 때 인증에 사용됩니다.

HTML 구조 만들기

다음으로, HTML 구조를 만들어야 합니다. 이 예제에서는 map이라는 ID를 가진 div 요소에 맵을 표시할 것입니다. 또한, 검색어를 입력할 수 있는 input 요소와 검색 버튼을 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <title>지명 검색하기</title>
  <style>
    #map {
      height: 400px;
    }
  </style>
</head>
<body>
  <input type="text" id="search-input" placeholder="지명 검색">
  <button id="search-button">검색</button>
  <div id="map"></div>

  <script src='https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js'></script>
</body>
</html>

자바스크립트로 지도와 검색 기능 구현하기

이제 자바스크립트를 사용하여 지도와 검색 기능을 구현해보겠습니다. 먼저, Mapbox GL JS 라이브러리를 로드합니다. 그리고 map이라는 ID를 가진 div 요소에 지도를 표시할 수 있도록 설정합니다.

mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

// 지도 초기화
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [Lng, Lat],
  zoom: 12
});

// 검색 기능 추가
const geocoder = new MapboxGeocoder({
  accessToken: mapboxgl.accessToken,
  mapboxgl: mapboxgl
});

document.getElementById('search-input').appendChild(geocoder.onAdd(map));

위 코드에서 YOUR_MAPBOX_ACCESS_TOKEN 부분을 발급받은 토큰으로 대체해야 합니다. 또한, Lng과 Lat에는 지도의 초기 중심 좌표를 설정해야 합니다.

이제 브라우저에서 HTML 파일을 열어 지도와 검색 기능이 동작하는지 확인할 수 있습니다.

결론

이 문서에서는 자바스크립트와 Mapbox를 이용하여 지도에서 지명을 검색하는 방법을 살펴보았습니다. Mapbox는 강력한 지도 및 위치 기반 서비스를 제공하는 플랫폼이며, 이를 활용하여 다양한 지도 기반 애플리케이션을 개발할 수 있습니다.

더 자세한 정보와 기능에 대해서는 Mapbox 공식 문서를 참고하십시오.

이상으로 Mapbox를 활용한 자바스크립트 지도 검색에 대해 알아보았습니다. 많은 활용 바랍니다.