지도를 사용하는 웹 어플리케이션을 개발할 때, 종종 다른 타일들을 추가해서 지도를 더욱 다양하고 풍부한 정보로 표현하고 싶을 수 있습니다. 이번 블로그 포스트에서는 자바스크립트와 Mapbox를 이용하여 지도에 다른 타일을 추가하는 방법을 알아보겠습니다.
Mapbox API 토큰 발급
Mapbox를 사용하기 위해서는 먼저 Mapbox API 토큰을 발급받아야 합니다. Mapbox 웹사이트에 가입한 후 계정 대시보드로 이동하여 토큰을 생성할 수 있습니다. 생성된 토큰을 안전한 곳에 보관해두세요.
HTML 파일 작성
먼저 HTML 파일을 작성합니다. 다음과 같이 <div> 요소로 지도를 표시할 컨테이너를 생성하고, Mapbox API 스크립트를 로드해야 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>지도</title>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet' />
<script>
// 자바스크립트 코드 작성
</script>
</body>
</html>
자바스크립트 코드 작성
다음으로 자바스크립트 코드를 작성하여 지도에 다른 타일을 추가해보겠습니다. Mapbox GL JS 라이브러리를 사용하여 코드를 작성합니다.
// 스타일 객체 생성
var styleObject = {
"version": 8,
"sources": {
"custom-tile-source": {
"type": "raster",
"tiles": [
// 여기에 추가할 타일의 URL을 입력하세요
],
"tileSize": 256
}
},
"layers": [
{
"id": "custom-tile-layer",
"type": "raster",
"source": "custom-tile-source"
}
]
};
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
// 지도 생성
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [longitude, latitude], // 좌표 입력
zoom: 12 // 확대/축소 레벨 입력
});
// 추가할 타일 레이어 설정
map.on('style.load', function () {
map.addSource('custom-tile-source', styleObject.sources['custom-tile-source']);
map.addLayer(styleObject.layers[0]);
});
YOUR_MAPBOX_ACCESS_TOKEN 부분에는 앞서 발급받은 Mapbox API 토큰을 입력해야 합니다. 그리고 longitude와 latitude 부분에는 지도의 중심 좌표를 입력하고, zoom 부분에는 지도의 초기 확대/축소 레벨을 입력해야 합니다.
추가할 타일 URL 입력
위 코드의 tiles 배열 안에 추가할 타일의 URL을 입력해야 합니다. 타일은 이미지 파일로서, XYZ 형식의 타일 좌표 시스템을 따릅니다.
"tiles": [
"http://example.com/tiles/{z}/{x}/{y}.png",
// 다른 타일 URL들을 여기에 추가
]
위 예시 코드에서는 http://example.com/tiles/{z}/{x}/{y}.png 형식의 URL을 사용하고 있습니다. 이 URL은 z, x, y 파라미터를 포함하고 있습니다. 이 파라미터들은 각각 타일의 줌 레벨, X 좌표, Y 좌표를 나타냅니다. 따라서 이 URL 패턴을 사용하면 임의의 타일을 지도에 추가할 수 있습니다.
마무리
이제 임의의 타일 URL을 사용하여 지도에 다른 타일을 추가하는 방법을 알아보았습니다. Mapbox를 통해 다양한 타일들을 활용하여 더욱 다양하고 풍부한 지도 어플리케이션을 개발할 수 있습니다. Mapbox API 문서와 타일 서버 구축에 관련된 자세한 정보를 참고해보세요.