Mapbox는 웹 기반의 맵 플랫폼으로, 자바스크립트와 함께 사용하여 멋진 지도 기능을 구현할 수 있습니다. 지도에는 라스터 타일(Raster Tiles)을 추가하여 지리 정보를 시각적으로 표현할 수 있습니다. 이번 글에서는 자바스크립트와 Mapbox를 이용하여 지도에 라스터 타일을 추가하는 방법에 대해 알아보겠습니다.
1. Mapbox 계정 만들기
먼저, Mapbox 계정을 만들어야 합니다. Mapbox 사이트에서 계정을 만들고, 액세스 토큰(Access Token)을 발급받아야 합니다. 이 토큰은 Mapbox API에 접근하기 위해 필요합니다.
2. Mapbox GL JS 라이브러리 추가하기
Mapbox GL JS는 Mapbox의 자바스크립트 라이브러리로, 지도를 인터랙티브하게 표시할 수 있게 도와줍니다. 다음과 같이 <script> 태그를 사용하여 Mapbox GL JS 라이브러리를 추가합니다.
<head>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css" rel="stylesheet" />
</head>
3. HTML 요소 생성하기
Mapbox GL JS를 사용하기 위해 HTML 요소를 생성해야 합니다. 지도를 표시할 <div> 요소를 생성하고, 그 크기를 지정합니다.
<div id="map" style="width: 800px; height: 600px;"></div>
4. 자바스크립트 코드 작성하기
이제 자바스크립트 코드를 작성하여 Mapbox 지도에 라스터 타일을 추가해보겠습니다. 아래의 코드를 참고하세요.
// 1. Mapbox 액세스 토큰 설정하기
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
// 2. Mapbox 지도 생성하기
var map = new mapboxgl.Map({
container: 'map', // HTML 요소의 ID
style: 'mapbox://styles/mapbox/streets-v11', // 기본 스타일 설정
center: [longitude, latitude], // 초기 중심 좌표 설정
zoom: 12 // 초기 줌 레벨 설정
});
// 3. 라스터 타일 추가하기
map.on('load', function() {
map.addSource('raster-tiles', {
type: 'raster',
url: 'https://path/to/raster-tiles/{z}/{x}/{y}.png',
tileSize: 256
});
map.addLayer({
id: 'raster-layer',
type: 'raster',
source: 'raster-tiles',
paint: {}
});
});
위의 코드에서 YOUR_ACCESS_TOKEN 부분에는 앞서 생성한 Mapbox 액세스 토큰을 넣어주어야 합니다. 또한, longitude와 latitude 부분에는 지도의 초기 중심 좌표를 설정해야 합니다. 그리고 https://path/to/raster-tiles/{z}/{x}/{y}.png 부분에는 사용하고자 하는 라스터 타일의 URL을 입력해야 합니다.
위의 코드를 실행하면, Mapbox 지도에 라스터 타일이 추가됩니다.
5. 실행 결과 확인하기
위의 코드를 모두 작성한 뒤에는 웹 브라우저에서 해당 HTML 파일을 실행하여 결과를 확인할 수 있습니다. 브라우저에 지도가 표시되고, 지정한 좌표에 따라 라스터 타일이 표시되는 것을 확인할 수 있을 것입니다.
이제 여러분도 자바스크립트와 Mapbox를 이용하여 지도에 라스터 타일을 추가할 수 있습니다. 좀 더 복잡하고 다양한 기능을 구현할 수 있으니, 자세한 사항은 Mapbox 공식 문서를 참고해보시기 바랍니다.