

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# 맵에 아이콘을 추가하는 방법
<a name="how-to-add-icon-on-map"></a>

Amazon Location Service를 사용하면 맵에 가급적이면 PNG 형식의 아이콘을 추가할 수 있습니다. 아이콘을 특정 지리적 위치에 추가하고 필요에 따라 스타일을 지정할 수 있습니다.

## 정적 아이콘 추가
<a name="add-static-icon"></a>

이 예제에서는 외부 URL을 사용해 기호 계층을 사용하여 맵에 아이콘을 추가합니다.

### 정적 아이콘 코드 예제
<a name="web-code-example-static-icon"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Static icon on map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";  // e.g., Standard, Monochrome, Hybrid, Satellite  
            const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map', // container id
                style: styleUrl, // style URL
                center: [-123.1144289, 49.2806672], // starting position [lng, lat] (e.g., Vancouver)
                zoom: 12, // starting zoom
            });

            map.on('load', async () => {
                image = await map.loadImage('https://upload.wikimedia.org/wikipedia/commons/1/1e/Biking_other.png');
                map.addImage('biking', image.data);
                map.addSource('point', {
                    'type': 'geojson',
                    'data': {
                        'type': 'FeatureCollection',
                        'features': [
                            {
                                'type': 'Feature',
                                'geometry': {
                                    'type': 'Point',
                                    'coordinates': [-123.1144289, 49.2806672]
                                }
                            }
                        ]
                    }
                });
                map.addLayer({
                    'id': 'points',
                    'type': 'symbol',
                    'source': 'point',
                    'layout': {
                        'icon-image': 'biking',
                        'icon-size': 0.25
                    }
                });
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------