지도를 사용하여 위치 정보를 시각화하고 다양한 스타일의 노드를 추가하고 싶다면 자바스크립트와 Mapbox를 이용할 수 있습니다. Mapbox는 지도를 만들고 스타일을 적용할 수 있는 강력한 도구입니다. 이제 자바스크립트를 사용하여 다른 스타일의 노드를 추가하는 방법을 알아보겠습니다.

1. Mapbox 계정 만들기

먼저 Mapbox 계정을 만들어야 합니다. Mapbox 홈페이지에 접속하여 계정을 만들고 로그인하세요.

2. Mapbox 스타일 만들기

Mapbox Studio를 사용하여 새로운 스타일을 만들어보겠습니다. Mapbox Studio는 Mapbox의 스타일 편집기입니다.

1. Mapbox Studio로 이동하여 “New Style”을 클릭하여 새로운 스타일을 만드세요.
2. 스타일 이름을 지정하고 원하는 스타일을 선택한 후 “Create”를 클릭하세요.
3. 스타일을 편집하여 원하는 스타일을 만드세요. 배경색, 라인 색상, 노드 모양 등을 수정할 수 있습니다.

3. 자바스크립트로 지도에 스타일 적용하기

이제 자바스크립트를 사용하여 Mapbox 지도에 위에서 만든 스타일을 적용해 보겠습니다.

1. 필요한 JavaScript 파일을 다운로드하고 프로젝트에 포함시키세요.

<script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />

1. HTML 파일에 맵을 표시할 div 요소를 추가하세요.

<div id='map'></div>

1. 자바스크립트 코드에서 Mapbox API를 사용하여 지도를 생성하고 스타일을 적용하세요.

// Mapbox 토큰 설정
mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';

// 지도 생성
const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/YOUR_MAPBOX_USERNAME/STYLE_ID',
    center: [longitude, latitude],
    zoom: zoomLevel
});

위 코드에서 YOUR_MAPBOX_TOKEN과 YOUR_MAPBOX_USERNAME, STYLE_ID를 실제 값으로 대체하세요.

1. 다른 스타일의 노드를 추가하려면, map 객체의 addLayer 메소드를 사용하세요.

map.on('load', function() {
    map.addLayer({
        id: 'node-layer',
        type: 'circle',
        source: {
            type: 'geojson',
            data: {
                type: 'FeatureCollection',
                features: [
                    {
                        type: 'Feature',
                        geometry: {
                            type: 'Point',
                            coordinates: [longitude, latitude]
                        }
                    }
                ]
            }
        },
        paint: {
            'circle-radius': 10,
            'circle-color': '#ff0000'
        }
    });
});

위 코드에서 longitude과 latitude는 원하는 노드의 경도와 위도를 나타내는 값으로 대체하세요. circle-radius 및 circle-color는 추가된 노드의 스타일을 설정하는데 사용됩니다.

이제 자바스크립트와 Mapbox를 사용하여 지도에 다른 스타일의 노드를 추가하는 방법을 알아보았습니다. 앞서 언급한 방법을 따라하면 지도에 원하는 스타일의 노드를 추가할 수 있습니다.

참고 자료

• Mapbox 홈페이지
• Mapbox API 문서