[javascript] Mapbox지도에 특정 위치 표시하기

22 Nov 2023

javascript

지도 서비스를 제공하는 Mapbox는 JavaScript 라이브러리를 사용하여 웹페이지에 동적인 지도를 추가하는 기능을 제공합니다. 이번 포스트에서는 Mapbox 지도에 특정 위치를 표시하는 방법에 대해 알아보겠습니다.

1. Mapbox 계정 및 액세스 토큰 생성

Mapbox를 사용하기 위해 계정과 액세스 토큰이 필요합니다. Mapbox 공식 웹사이트에 가입하여 계정을 생성하고, 개인 액세스 토큰을 생성하세요. 액세스 토큰은 나중에 JavaScript 코드에서 사용될 예정입니다.

2. HTML 파일에 Mapbox 지도 추가

먼저 HTML 파일에 Mapbox 지도를 추가해야 합니다. 아래의 코드를 HTML 파일의 <body> 태그 안에 추가하세요.

<div id="map"></div>

3. JavaScript 코드로 특정 위치 표시

이제 JavaScript 코드를 사용하여 특정 위치를 Mapbox 지도에 표시해 보겠습니다. JavaScript 코드를 HTML 파일의 <script> 태그 안에 추가하세요.

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [longitude, latitude], // 표시할 위치의 경도와 위도
    zoom: 12 // 지도의 확대 수준
});

var marker = new mapboxgl.Marker()
    .setLngLat([longitude, latitude]) // 표시할 위치의 경도와 위도
    .addTo(map);

위의 코드에서 YOUR_ACCESS_TOKEN을 앞서 생성한 개인 액세스 토큰으로 대체하세요. 또한 longitude와 latitude는 표시하려는 위치의 실제 경도와 위도 값으로 대체해야 합니다.

4. 결과 확인

위의 코드를 추가한 HTML 파일을 웹 브라우저에서 실행하면 Mapbox 지도에 특정 위치가 표시됩니다. 지도의 확대 수준을 조절하거나 표시하는 위치를 변경하여 결과를 확인할 수 있습니다.

이상으로 Mapbox지도에 특정 위치를 표시하는 방법을 알아보았습니다. Mapbox에는 다양한 기능과 스타일을 제공하므로 원하는 대로 맞춤형 지도를 만들 수 있습니다. 더 자세한 내용은 Mapbox 공식 문서를 참고해 주세요.

참고 문서: