[javascript] 자바스크립트로 Mapbox 지도의 특정 위치에 이미지 추가하기

22 Nov 2023

javascript

Mapbox는 웹 기반 지도 및 위치 데이터 시각화를 위한 도구입니다. 이 도구를 사용하여 지도 위에 이미지를 추가하려면 자바스크립트를 사용해야 합니다. 이번 포스팅에서는 자바스크립트를 사용하여 Mapbox 지도의 특정 위치에 이미지를 추가하는 방법에 대해 알아보겠습니다.

사전 준비

코드 작성

먼저, HTML 파일에 다음과 같이 스타일 시트 및 스크립트 파일을 추가합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mapbox Image Overlay</title>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.js'></script>
    <style>
        #map {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script>
        // Mapbox Access Token 설정
        mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

        // Mapbox 지도 객체 생성
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'YOUR_MAPBOX_STYLE_URL',
            center: [longitude, latitude],
            zoom: 12
        });

        // 이미지 추가
        map.on('load', function() {
            map.loadImage('YOUR_IMAGE_URL', function(error, image) {
                if (error) throw error;
                map.addImage('custom-marker', image);
                map.addLayer({
                    "id": "markers",
                    "type": "symbol",
                    "source": {
                        "type": "geojson",
                        "data": {
                            "type": "FeatureCollection",
                            "features": [{
                                "type": "Feature",
                                "properties": {},
                                "geometry": {
                                    "type": "Point",
                                    "coordinates": [longitude, latitude]
                                }
                            }]
                        }
                    },
                    "layout": {
                        "icon-image": "custom-marker",
                        "icon-size": 0.5
                    }
                });
            });
        });
    </script>
</body>
</html>

위의 코드에서 YOUR_MAPBOX_ACCESS_TOKEN, YOUR_MAPBOX_STYLE_URL, YOUR_IMAGE_URL, longitude, latitude 부분을 각각 실제 값으로 대체해야 합니다.

YOUR_MAPBOX_ACCESS_TOKEN은 Mapbox 계정에서 발급한 액세스 토큰으로 대체해야 합니다. YOUR_MAPBOX_STYLE_URL은 사용할 지도 스타일의 URL로 대체해야 합니다. YOUR_IMAGE_URL은 사용할 이미지 파일의 URL로 대체해야 합니다. longitude와 latitude는 이미지를 추가할 위치의 경도와 위도 값으로 대체해야 합니다.

실행 결과

위의 코드를 실행하면 Mapbox 지도 위에 설정한 경도와 위도 값에 이미지가 추가됩니다. 이미지의 크기 및 아이콘 이미지로 사용할 이미지 파일은 layout 부분에서 설정할 수 있습니다.

이렇게 자바스크립트를 사용하여 Mapbox 지도의 특정 위치에 이미지를 추가할 수 있습니다. Mapbox 홈페이지 및 Mapbox GL JS API 문서를 참고하면 더 자세한 기능과 설정을 알아볼 수 있습니다.