Display a map

``` ------ #### [ style.css ] ``` body { margin: 0; } #map { height: 100vh; } ``` ------ #### [ main.js ] ``` async function getStyleWithPreferredLanguage(preferredLanguage) { const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`; return fetch(styleUrl) .then(response => { if (!response.ok) { throw new Error('Network response was not ok ' + response.statusText); } return response.json(); }) .then(styleObject => { if (preferredLanguage !== "en") { styleObject = setPreferredLanguage(styleObject, preferredLanguage); } return styleObject; }) .catch(error => { console.error('Error fetching style:', error); }); } const setPreferredLanguage = (style, language) => { let nextStyle = { ...style }; nextStyle.layers = nextStyle.layers.map(l => { if (l.type !== 'symbol' || !l?.layout?.['text-field']) return l; return updateLayer(l, /^name:([A-Za-z\-\_]+)$/g, `name:${language}`); }); return nextStyle; }; const updateLayer = (layer, prevPropertyRegex, nextProperty) => { const nextLayer = { ...layer, layout: { ...layer.layout, 'text-field': recurseExpression( layer.layout['text-field'], prevPropertyRegex, nextProperty ) } }; return nextLayer; }; const recurseExpression = (exp, prevPropertyRegex, nextProperty) => { if (!Array.isArray(exp)) return exp; if (exp[0] !== 'coalesce') return exp.map(v => recurseExpression(v, prevPropertyRegex, nextProperty) ); const first = exp[1]; const second = exp[2]; let isMatch = Array.isArray(first) && first[0] === 'get' && !!first[1].match(prevPropertyRegex)?.[0]; isMatch = isMatch && Array.isArray(second) && second[0] === 'get'; isMatch = isMatch && !exp?.[4]; if (!isMatch) return exp.map(v => recurseExpression(v, prevPropertyRegex, nextProperty) ); return [ 'coalesce', ['get', nextProperty], ['get', 'name:en'], ['get', 'name'] ]; }; ``` ------ ## 최종 사용자의 브라우저 언어를 기반으로 기본 언어 설정 이 예제에서는 사용자의 디바이스 언어로 맵 레이블을 표시하도록 업데이트 스타일을 설정합니다. ### 브라우저 언어를 기반으로 기본 언어 설정 예제 ------ #### [ index.html ] ```

``` ------ #### [ style.css ] ``` body { margin: 0; } #map { height: 100vh; } ``` ------ #### [ main.js ] ``` async function getStyleWithPreferredLanguage(preferredLanguage) { const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`; return fetch(styleUrl) .then(response => { if (!response.ok) { throw new Error('Network response was not ok ' + response.statusText); } return response.json(); }) .then(styleObject => { if (preferredLanguage !== "en") { styleObject = setPreferredLanguage(styleObject, preferredLanguage); } return styleObject; }) .catch(error => { console.error('Error fetching style:', error); }); } const setPreferredLanguage = (style, language) => { let nextStyle = { ...style }; nextStyle.layers = nextStyle.layers.map(l => { if (l.type !== 'symbol' || !l?.layout?.['text-field']) return l; return updateLayer(l, /^name:([A-Za-z\-\_]+)$/g, `name:${language}`); }); return nextStyle; }; const updateLayer = (layer, prevPropertyRegex, nextProperty) => { const nextLayer = { ...layer, layout: { ...layer.layout, 'text-field': recurseExpression( layer.layout['text-field'], prevPropertyRegex, nextProperty ) } }; return nextLayer; }; const recurseExpression = (exp, prevPropertyRegex, nextProperty) => { if (!Array.isArray(exp)) return exp; if (exp[0] !== 'coalesce') return exp.map(v => recurseExpression(v, prevPropertyRegex, nextProperty) ); const first = exp[1]; const second = exp[2]; let isMatch = Array.isArray(first) && first[0] === 'get' && !!first[1].match(prevPropertyRegex)?.[0]; isMatch = isMatch && Array.isArray(second) && second[0] === 'get'; isMatch = isMatch && !exp?.[4]; if (!isMatch) return exp.map(v => recurseExpression(v, prevPropertyRegex, nextProperty) ); return [ 'coalesce', ['get', nextProperty], ['get', 'name:en'], ['get', 'name'] ]; }; ``` ------ # 맵의 정치적 관점을 설정하는 방법 Amazon Location Service를 사용하면 정치적 관점을 설정하여 애플리케이션이 현지 법률을 준수하도록 할 수 있습니다. 정치적 관점을 설정하고 다양한 정치적 관점에서 맵을 비교할 수 있습니다. **참고** 자세한 내용은 [현지화 및 국제화](maps-localization-internationalization.md) 단원을 참조하십시오. ## 정치적 관점 설정 및 국제적 관점과 비교 이 예제에서는 국제적 관점과 키프로스에 대한 터키의 관점이라는 두 가지 정치적 관점에서 맵을 생성하고 비교합니다. ### 정치적 관점 비교 예제 ------ #### [ index.html ] ``` Display a map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body { height: 100%; } #internationalView, #turkeyView { height: 100%; width: 100%; } .maps { display: flex; width: 100%; height: 100%; } ``` ------ # 맵에서 POI를 필터링하는 방법 Amazon Location Service를 사용하면 사용 사례와 관련된 POI(point-of-interest) 범주를 선택할 수 있습니다. 표준 맵 스타일인 [Rich POI](https://docs.aws.amazon.com/location/latest/developerguide/standard-map-style.html#rich-poi)에 대해 자세히 알아보기 ## POI 필터링 이 예제에서는 사용자가 POI 범주를 필터링할 수 있는 대화형 맵을 표시합니다. ------ #### [ Index.html ] ``` POI demo

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } #buttons { display: flex; flex-direction: column; justify-content: space-between; position: absolute; top: 0; min-width: 100px; max-height: calc(100% - 2rem); overflow: auto; padding: 1rem; background-color: white; margin: 0; } .button { display: inline-block; cursor: pointer; padding: 8px; border-radius: 3px; margin-top: 10px; font-size: 12px; text-align: center; color: #fff; background: #8a8a8a; font-family: sans-serif; font-weight: bold; } .button:first-child { margin-top: 0; } .active { background: #ee8a65; } ``` ------ # 토포그래피 맵을 생성하는 방법 Amazon Location Service를 사용하면 지형 및 윤곽 밀도 기능을 사용하여 지형 맵을 생성하여 고도 변경 및 지리적 특성을 시각화할 수 있습니다. ## Hillshade 표시 지형 기능을 사용하면 Hillshade, 고도 변경 사항 및 관련 지리적 특성을 시각화할 수 있습니다. ### Hillshade 예제 ------ #### [ index.html ] ``` Terrain Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ ## 윤곽 밀도 선으로 고도 표시 Amazon Location Service를 사용하면 맵에 윤곽 밀도 기능을 추가할 수 있습니다. 이를 통해 지리적 가파른 정도와 고도 변화를 시각화할 수 있습니다. ### Contour Density 예제 ------ #### [ index.html ] ``` Contour Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ ## Hillshade 및 Contour Density 라인 모두 표시 Amazon Location Service를 사용하면 맵에서 Hillshade 및 Contour Density 기능을 결합하여 포괄적인 지형 시각화를 수행할 수 있습니다. 이를 통해 깊이 지각이 향상되고 지형 변형 및 지형 특성에 대한 완전한 이해가 가능합니다. ### Hillshade with Contour Density 예제 ------ #### [ index.html ] ``` Hillshade and Contour Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ # 맵에 실시간 트래픽을 표시하는 방법 Amazon Location Service를 사용하여 맵에 트래픽 기능을 추가할 수 있습니다. 이를 통해 실시간 트래픽 데이터를 제공하여 현재 도로 정체, 건설 및 인시던트와 같은 현재 교통 상황을 표시할 수 있으므로 라우팅을 선택할 수 있습니다. ## 실시간 트래픽이 포함된 맵 만들기 이 예제에서는 실시간 트래픽 데이터가 포함된 맵을 생성하는 방법을 보여줍니다. ### 실시간 트래픽 예제 ------ #### [ index.html ] ``` Traffic Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # 물류 맵을 생성하는 방법 TravelModes 기능을 사용하면 Amazon Location Service를 사용하여 로지스틱 맵을 구축할 수 있습니다. TravelModes는 관련 도로 제한과 함께 트럭 탐색에 대한 관련 라우팅 정보를 표시합니다. [Transit TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-show-transit-details-map.html)를 사용하여 대중 교통 세부 정보를 표시합니다. ## Truck TravelMode를 사용하여 맵 생성 이 예제에서는 로 로 로 로 로 맵`Truck``TravelMode`을 생성하는 방법을 보여줍니다. ### 트럭 예제 ------ #### [ index.html ] ``` Truck Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # 맵에 전송 세부 정보를 표시하는 방법 Amazon Location Service를 사용하면 맵에 전송 기능을 추가할 수 있습니다. 에는 색상으로 구분된 열차선과 같은 대중 교통을 위한 라우팅 정보가 `Transit` `TravelMode` 표시됩니다. 또한 추가 옵션을 위해 [logistics TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-logistic-map.html)를 설정하는 방법도 확인하세요. ## 전송 세부 정보가 포함된 맵 생성 이 예제에서는 대중 교통을 위해 Transit TravelMode를 사용하여 전송 세부 정보가 포함된 맵을 생성하는 방법을 보여줍니다. ### 전송 예제 ------ #### [ index.html ] ``` Transit Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # 3D 맵을 생성하는 방법 Amazon Location Service를 사용하면 고도 데이터를 3차원 표면으로 `Terrain3D` 표시하거나 높이와 볼륨이 있는 도시 구조를 표시하는 등 맵`Buildings3D`에 3차원 기능을 추가할 수 있습니다. ## 3차원 지형 세부 정보로 맵 생성 이 예제에서는 `Terrain3D` 파라미터로 맵을 생성하는 방법을 보여줍니다. ### Terrain3D 예제 ------ #### [ index.html ] ``` 3D Terrain

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ ## 3차원 건물 세부 정보가 포함된 맵 생성 이 예제에서는 `Buildings3D` 파라미터로 맵을 생성하는 방법을 보여줍니다. ### Buildings3D 예제 ------ #### [ index.html ] ``` 3D Buildings

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ ## Globe 보기 활성화/비활성화 이 예제에서는 글로브 뷰 프로젝션을 활성화하거나 비활성화하는 방법을 보여줍니다. 기본적으로 글로브 보기가 활성화됩니다. ### 글로브 보기 예제 ------ #### [ index.html ] ``` Globe View

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # 정적 맵 사용 방법 이러한 방법 주제에서는 Amazon Location Service의 매핑 기능을 활용하여 오버레이 및 시각적 요소로 정적 맵을 사용자 지정하기 위한 단계별 지침을 제공합니다. 각 가이드에서는 맵 차원 조정, 확대/축소 또는 반경 선택, 마커, 다각형, 선, 근접 원과 같은 다양한 지리 공간 요소 추가와 같은 주요 작업을 안내합니다. 이 가이드에서는 컴팩트 형식과 GeoJSON 형식을 모두 사용하여 스타일과 구성의 유연성을 보장합니다. 고객 대면 애플리케이션에 맞게 맵을 최적화하든 지리 공간 분석을 수행하든, 이 주제에서는 특정 요구 사항에 맞게 정적 맵을 조정하는 방법에 대한 명확한 지침을 제공합니다. 자세한 예제에 따라 맵 프레젠테이션을 개선하고 다양한 비즈니스 요구 사항에 맞게 지리적 데이터를 효율적으로 관리하는 방법을 알아봅니다. **Topics** + [특정 위치의 정적 맵을 가져오는 방법](get-static-map-specific-position.md) + [특정 차원의 정적 맵을 가져오는 방법](get-static-map-specific-dimension.md) + [정적 맵에 대해 반경과 확대/축소 중에서 결정하는 방법](choose-radius-vs-zoom.md) + [정적 맵에 대한 스케일을 추가하는 방법](add-scale-static-map.md) + [정적 맵에 마커를 추가하는 방법](add-marker-static-map.md) + [정적 맵에 선을 추가하는 방법](how-to-add-line-static.md) + [정적 맵에 경로를 추가하는 방법](how-to-add-route.md) + [정적 맵에 다각형을 추가하는 방법](how-to-add-polygon-static.md) + [정적 맵의 언어를 설정하는 방법](set-language-static-map.md) + [정적 맵에 근접 원을 추가하는 방법](how-to-add-proximity-circle.md) # 특정 위치의 정적 맵을 가져오는 방법 이 주제에서는 특정 파라미터를 기반으로 Amazon Location Service에서 정적 맵을 검색하는 방법을 알아봅니다. 중앙 위치, 경계 상자 및 경계 위치 집합에 대한 정적 맵을 생성하는 방법을 알아봅니다. 제공된 예제는 맵의 너비, 높이 및 스타일을 사용자 지정하는 데 도움이 됩니다. **참고** 정적 맵을 생성할 때는 `map` 또는 `map@2x`를 전달해야 합니다. ## 중앙 위치의 맵 이미지 가져오기 이 예제에서는 너비가 `1024`이고 높이가 `1024`이고 중심 좌표는 `-123.1143,49.2763`에 설정된 맵 이미지를 생성합니다. 여기서 `longitude=-123.1143`이고 `latitude=49.2763`이며 확대/축소 수준은 `15`입니다. ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=15¢er=-123.1156126,49.2767046&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of a coastal city with dense urban layout, harbor, and large stadium visible.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/static-center.png) ------ ## 경계 상자의 맵 이미지 가져오기 이 예제에서는 해당 영역의 경계 상자를 설정하여 동남아시아의 맵 이미지를 생성합니다. `bbox` 형식은 `{southwest_longitude},{southwest_latitude},{northeast_longitude},{northeast_latitude}`입니다. ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&bounding-box=90.00,-21.94,146.25,31.95&key=API_KEY ``` ------ #### [ Response image ] ![\[Satellite view of Southeast Asia, showing mainland, islands, and surrounding waters.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/static-bounding-box.png) ------ ## 경계 위치에 대한 맵 이미지 가져오기 이 예제에서는 좌표(경로, 위도)를 사용하여 각각 지정한 파리에서 가보아야 할 여러 장소를 포함하는 맵을 생성합니다. 경계 위치에는 Eiffel Tower, Louvre Museum, Notre-Dame Cathedral, Champs-Élysées, Arc de Triomphe, Sacré-Cœur Basilica, Luxembourg Gardens, Musée d'Orsay, Place de la Concorde 및 Palais Garnier가 포함됩니다. 경계 위치의 형식은 `{longitude1},{latitude1},{longitude2},{latitude2} ... {longitudeN},{latitudeN}`입니다. ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&bounded-positions=2.2945,48.8584,2.3376,48.8606,2.3500,48.8529,2.3076,48.8698,2.2950,48.8738,2.3431,48.8867,2.3372,48.8462,2.3266,48.8600,2.3212,48.8656,2.3317,48.8719&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of Paris showing dense urban layout, Seine River, and iconic landmarks.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/static-bounding-position.png) ------ # 특정 차원의 정적 맵을 가져오는 방법 이 주제에서는 Amazon Location Service를 사용하여 정적 맵의 차원(높이 및 너비)을 설정하는 방법을 알아봅니다. 맵 이미지의 차원을 사용자 지정하면 성능, 시각적 품질 및 사용성의 균형을 맞출 수 있습니다. `width` 및 `height`의 최대값은 1,400픽셀이고 최소값은 64픽셀입니다. 최대 결과 크기는 6MB입니다. 또한 `bbox` 및 `bounds` 파라미터를 `padding`과 함께 사용하면 엣지 근처의 중요한 맵 기능이 완전히 표시되고 잘리지 않도록 할 수 있습니다. ## 특정 높이 및 너비의 맵 이미지 가져오기 이 예제에서는 핀란드 헬싱키에 대한 저해상도 및 중간 해상도 맵 이미지를 생성합니다. ------ #### [ Request URL for low-resolution thumbnail ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=200&height=200&zoom=11.5¢er=24.9460,60.1690&key=API_KEY ``` ------ #### [ Response (Thumbnail 200x200) ] ![\[Aerial view of a coastal city with intricate waterways, islands, and urban development.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/static-specific-dimension-low.png) ------ #### [ Request URL for mid-resolution image ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=700&height=700&zoom=13¢er=24.9460,60.1690&key=API_KEY ``` ------ #### [ Response image (700x700) ] ![\[Aerial view of a coastal city with dense urban development, harbors, and surrounding waters.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/static-specific-dimension-mid.png) ------ ## 모든 면에 패딩이 있는 맵 이미지 가져오기 이 예제에서는 패딩이 있는 경우와 없는 경우의 좌표(경도, 위도)를 사용하여 핀란드 헬싱키의 여러 가봐야 할 장소를 사용한 맵을 생성합니다. ------ #### [ Request URL with padding ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=150&bounded-positions=24.9526,60.1692,24.9850,60.1465,24.9270,60.1725,24.9226,60.1826,24.9509,60.1675,24.9566,60.1685,24.9457,60.1674,24.9397,60.1719,24.9414,60.1715,24.9387,60.1720&key=API_KEY ``` ------ #### [ Response image (with padding) ] ![\[Aerial view of a coastal city with dense urban areas, harbors, and surrounding islands.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/static-specific-dimension-padding.png) ------ #### [ Request URL without padding ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&bounded-positions=24.9526,60.1692,24.9850,60.1465,24.9270,60.1725,24.9226,60.1826,24.9509,60.1675,24.9566,60.1685,24.9457,60.1674,24.9397,60.1719,24.9414,60.1715,24.9387,60.1720&key=API_KEY ``` ------ #### [ Response image (without padding) ] ![\[Aerial view of a coastal city with dense urban areas, harbors, and small islands.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/static-specific-dimension-no-padding.png) ------ # 정적 맵에 대해 반경과 확대/축소 중에서 결정하는 방법 이 주제에서는 Amazon Location Service를 사용하여 정적 맵을 생성할 때 `radius` 또는 `zoom` 중에서 선택하는 방법을 알아봅니다. `radius` 파라미터는 적용 범위를 보다 정밀하게 제어하므로 정확한 적용 범위를 알고 있는 고객 대면 애플리케이션에 적합합니다. `zoom` 파라미터는 표시되는 세부 수준을 조정하려는 경우 지리 공간 분석에 더 적합합니다. ## 반경 사용 이 예제에서는 중앙 위치에서 `radius` 파라미터를 사용하여 Sri Lanka의 맵 이미지를 생성합니다. ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=700&height=700¢er=80.60596,7.76671&radius=235000&scale-unit=KilometersMiles&key=API_KEY ``` ------ #### [ Response image ] ![\[Satellite view of Sri Lanka, showing the teardrop-shaped island nation surrounded by ocean.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/static-radius.png) ------ ## 확대/축소 사용 이 예제에서는 중앙 위치에서 `zoom` 파라미터를 사용하여 Sri Lanka의 맵 이미지를 생성합니다. ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=700&height=700&zoom=8¢er=80.60596,7.76671&scale-unit=KilometersMiles&key=API_KEY ``` ------ #### [ Response image ] ![\[Satellite view of Sri Lanka, showing the teardrop-shaped island nation surrounded by ocean.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/static-zoom.png) ------ # 정적 맵에 대한 스케일을 추가하는 방법 이 주제에서는 Amazon Location Service로 생성된 정적 맵의 오른쪽 하단 모서리에 스케일을 표시하는 방법을 알아봅니다. 스케일은 `Miles` 또는 `Kilometers`와 같은 단일 단위를 표시하거나, `KilometersMiles` 또는 `MilesKilometers`와 같이 두 단위를 모두 표시할 수 있으며 한 단위는 상단에 표시되고 다른 단위는 하단에 표시됩니다. ## 단일 단위를 사용하여 스케일 추가 이 예제에서는 오른쪽 하단 모서리에 스케일이 `Kilometers`로 설정된 핀란드의 헬싱키 맵을 표시합니다. ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=13.5¢er=24.9189564,60.1645772&scale-unit=Kilometers&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of a coastal city with dense urban areas, waterways, and islands.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/static-scale-single.png) ------ ## 두 단위를 모두 사용하여 스케일 추가 이 예제에서는 오른쪽 하단 모서리의 스케일에 `Kilometers` 및 `Miles`이 모두 표시된 핀란드의 헬싱키 맵을 표시하며 한 단위는 다른 단위 위에 표시되어 있습니다. ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=14¢er=24.9189564,60.1645772&scale-unit=KilometersMiles&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of a coastal city with dense urban areas, harbors, and islands surrounded by water.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/static-scale-both.png) ------ # 정적 맵에 마커를 추가하는 방법 이 주제에서는 Amazon Location Service로 생성된 정적 맵에 마커를 추가하는 방법을 알아봅니다. 마커의 아이콘, 레이블, 크기, 색상 및 기타 스타일 옵션을 사용자 지정할 수 있습니다. 이를 통해 맵의 목적에 맞는 시각적 신호로 특정 위치를 강조 표시할 수 있습니다. ## 마커 스타일 | 이름 | 유형 | 기본값 | 설명 | | --- | --- | --- | --- | | `style` | 문자열 | `marker` | 점 지오메트리의 스타일입니다. 마커를 생성하려면 값을 `marker`로 설정하거나 GeoJSON의 속성 객체에 `style` 속성을 포함하지 마십시오. | | `icon` | 문자열 | `pin` | 마커 아이콘 유형입니다. 사용 가능한 값은 `cp`(근접 원), `diamond`, `pin`, `poi`, `square`, `triangle`, `bubble`입니다. | | `label` | 문자열 | `` | 좌표에 표시할 텍스트입니다. 자동 레이블을 설정하려면 `$alpha`(라틴 문자) 또는 `$num`(아라비아 숫자) 값을 사용합니다. | | `color` | 색상 | 스타일에 따라 다름 | 아이콘 색상입니다. | | `outline-color` | 색상 | 스타일에 따라 다름 | 아이콘 윤곽선 색상입니다. | | `text-color` | 색상 | 스타일에 따라 다름 | 레이블 텍스트 색상입니다. | | `text-outline-color` | 색상 | 스타일에 따라 다름 | 텍스트 윤곽선 색상입니다. | | `outline-width` | 정수 | `0`(꺼짐) | 텍스트 윤곽선 너비입니다. | | `size` | 문자열 | `medium` | 레이블 및 아이콘 크기입니다. 사용 가능한 값은 `small`, `medium`, `large`입니다. | ## 맵 이미지에 마커 추가 이 예제에서는 밴쿠버의 BC Place 맵 이미지에 레이블이 있는 마커를 배치합니다. `Geo JSON`: ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -123.11210, 49.2767875 ] }, "properties": { "color":"#EE4B2B", "size":"large", "label":"BC Place, Vancouver", "text-color":"#0000FF" } } ] } ``` `Compact`: ``` point: -123.11210,49.27678; label=BC Place, Vancouver; size=large; text-color=#0000FF; color=#EE4B2B ``` ------ #### [ Request URL ] GeoJSON 오버레이 사용 ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=15&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%23EE4B2B%22,%22size%22%3A%22large%22,%22label%22%3A%22BC%20Place,%20Vancouver%22,%22text-color%22%3A%22%230000FF%22%7D,%22geometry%22%3A%7B%22coordinates%22%3A%5B-123.11210974152168,49.27678753813112%5D,%22type%22%3A%22Point%22%7D%7D%5D%7D&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of Vancouver's downtown and harbor, with BC Place stadium marked.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/static-add-marker.png) ------ ## 맵 이미지에 여러 마커 추가 이 예제에서는 좌표(경도, 위도)를 사용하여 핀란드의 헬싱키에서 반드시 가보아야 할 장소에 대한 마커를 추가합니다. 또한 패딩을 적용하여 맵이 모든 마커를 올바르게 수용하도록 할 수 있습니다. **참고** 사용 가능한 마커 아이콘 유형에는 근접 원 `diamond, pin, poi, square, triangle, bubble`의 경우 `cp`가 포함됩니다. `Geo JSON`: ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "MultiPoint", "coordinates": [ [24.9526, 60.1692], [24.9270, 60.1725], [24.9226, 60.1826], [24.9509, 60.1675], [24.9566, 60.1685], [24.9457, 60.1674], [24.9397, 60.1719], [24.9414, 60.1715], [24.9387, 60.1720] ] }, "properties": { "icon":"diamond", "label":"$num", "size":"large", "text-color":"%23972E2B", "text-outline-color":"%23FFF", "text-outline-width":2 } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=150&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22MultiPoint%22,%22coordinates%22%3A%5B%5B24.9526,60.1692%5D,%5B24.927,60.1725%5D,%5B24.9226,60.1826%5D,%5B24.9509,60.1675%5D,%5B24.9566,60.1685%5D,%5B24.9457,60.1674%5D,%5B24.9397,60.1719%5D,%5B24.9414,60.1715%5D,%5B24.9387,60.172%5D%5D%7D,%22properties%22%3A%7B%22icon%22%3A%22diamond%22,%22label%22%3A%22%24num%22,%22size%22%3A%22large%22,%22text-color%22%3A%22%23972E2B%22,%22text-outline-color%22%3A%22%23FFF%22,%22text-outline-width%22%3A2%7D%7D%5D%7D&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of a city with lakes, buildings, roads, and numbered markers indicating points of interest.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/static-add-multi-markers.png) ------ ## 맵 이미지에서 마커 색상 변경 이 예제에서는 다양한 색상의 버블 마커를 사용하여 전 세계 도시를 나타냅니다. 맵의 컨텍스트에 맞게 마커의 색상, 레이블 및 기타 속성을 사용자 지정할 수 있습니다. `Geo JSON`: ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [85.1376, 25.5941] }, "properties": { "label": "Patna", "icon": "bubble", "color": "#FF5722", "outline-color": "#D74D3D", "text-color": "#FFFFFF" } }, .....redacted..... { "type": "Feature", "geometry": { "type": "Point", "coordinates": [2.3522, 48.8566] }, "properties": { "label": "Paris, France", "icon": "bubble", "color": "#FF9800", "outline-color": "#D76B0B", "text-color": "#FFFFFF" } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1400&height=1024&padding=150&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B85.1376,25.5941%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Patna%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%23FF5722%22,%22outline-color%22%3A%22%23D74D3D%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B105.8542,21.0285%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Hanoi,%20Vietnam%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%232196F3%22,%22outline-color%22%3A%22%231A78C2%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B116.4074,39.9042%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Beijing,%20China%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%23FF9800%22,%22outline-color%22%3A%22%23D76B0B%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B106.9101,47.918%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Ulaanbaatar,%20Mongolia%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%239C27B0%22,%22outline-color%22%3A%22%237B1FA2%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B151.2093,-33.8688%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Sydney,%20Australia%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%234CAF50%22,%22outline-color%22%3A%22%23388E3C%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B174.7633,-41.2865%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Wellington,%20New%20Zealand%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%23FFC107%22,%22outline-color%22%3A%22%23FFA000%22,%22text-color%22%3A%22%23000000%22%7D%7D%5D%7D&key=API_KEY ``` ------ #### [ Response image ] ![\[World map showing locations of major cities across continents with colored labels.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/static-change-marker-color.png) ------ # 정적 맵에 선을 추가하는 방법 이 주제에서는 Amazon Location Service를 사용하여 정적 맵에 선을 추가하는 방법을 알아봅니다. 지원되는 스타일 옵션, GeoJSON을 사용하여 선을 정의하는 방법 및 색상, 너비, 윤곽선과 같은 사용자 지정 스타일을 적용하는 방법을 살펴보겠습니다. 또한 선 두께와 같은 속성에 대해 다양한 측정 단위를 사용하는 방법을 살펴보겠습니다. ## 지원되는 스타일 | 이름 | 유형 | 기본값 | 설명 | | --- | --- | --- | --- | | `color` | 색상 | 스타일에 따라 다름 | 선 색상입니다. | | `width` | 정수/문자열 | 2 | 선 두께입니다. 자세한 내용은 [정적 맵에 선을 추가하는 방법](#how-to-add-line-static) 섹션을 참조하세요. | | `outline-color` | 색상 | 스타일에 따라 다름 | 선 윤곽선 색상입니다. | | `outline-width` | 정수/문자열 | 0(꺼짐) | 윤곽선의 두께입니다. 자세한 내용은 [정적 맵에 선을 추가하는 방법](#how-to-add-line-static) 섹션을 참조하세요. | ## 지원되는 단위 | 단위 | 설명 | | --- | --- | | 정수, 예: `5` | 픽셀 | | 단위가 없는 문자열, 예: `"5"` | 픽셀 | | `"px"` | 픽셀 | | `"m"` | 미터 | | `"km"` | 킬로미터 | | `"mi"` | 마일 | | `"ft"` | 피트 | | `"yd"` | 야드 | | `"%"` | 특정 속성에 대한 기본값의 백분율입니다(픽셀 단위). 예를 들어 `width`의 기본값이 `2`픽셀인 경우 `200%`는 `4`픽셀입니다. `%`는 요청 URL에 `%25`로 인코딩되어야 하는 민감한 문자입니다. | ## 선 추가 이 예제에서는 밴쿠버의 한 장소에서 스탠리 파크까지 선을 추가합니다. 선은 좌표가 정의된 GeoJSON 형식을 사용하여 생성됩니다. ------ #### [ Request ] ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [-123.11813, 49.28246], [-123.11967, 49.28347], [-123.12108, 49.28439], [-123.12216, 49.28507], [-123.12688, 49.28812], [-123.1292, 49.28964], [-123.13216, 49.2916], [-123.13424, 49.29291], [-123.13649, 49.2944], [-123.13678, 49.29477], [-123.13649, 49.29569], [-123.13657, 49.29649], [-123.13701, 49.29715], [-123.13584, 49.29847], [-123.13579, 49.29935], [-123.13576, 49.30018], [-123.13574, 49.30097] ] }, "properties": { "name": "To Stanley Park", "description": "An evening walk to Stanley Park." } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22LineString%22,%22coordinates%22%3A%5B%5B-123.11813,49.28246%5D,%5B-123.11967,49.28347%5D,%5B-123.12108,49.28439%5D,%5B-123.12216,49.28507%5D,%5B-123.12688,49.28812%5D,%5B-123.1292,49.28964%5D,%5B-123.13216,49.2916%5D,%5B-123.13424,49.29291%5D,%5B-123.13649,49.2944%5D,%5B-123.13678,49.29477%5D,%5B-123.13649,49.29569%5D,%5B-123.13657,49.29649%5D,%5B-123.13701,49.29715%5D,%5B-123.13584,49.29847%5D,%5B-123.13579,49.29935%5D,%5B-123.13576,49.30018%5D,%5B-123.13574,49.30097%5D%5D%7D,%22properties%22%3A%7B%22name%22%3A%22To%20Stanley%20Park%22,%22description%22%3A%22An%20evening%20walk%20to%20Stanley%20Park.%22%7D%7D%5D%7D&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of coastal city with dense urban area, marina, and surrounding forests.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/static-add-line.png) ------ ## 선에 스타일 추가 이 예제에서는 이전 예제에서 추가한 선의 스타일을 지정합니다. 여기에는 맵에서 선의 시각적 모양을 사용자 지정하기 위한 선의 색상, 두께, 윤곽선 색상 및 윤곽선 두께 정의가 포함됩니다. ------ #### [ Request ] ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [-123.11813, 49.28246], [-123.11967, 49.28347], [-123.12108, 49.28439], [-123.12216, 49.28507], [-123.12688, 49.28812], [-123.1292, 49.28964], [-123.13216, 49.2916], [-123.13424, 49.29291], [-123.13649, 49.2944], [-123.13678, 49.29477], [-123.13649, 49.29569], [-123.13657, 49.29649], [-123.13701, 49.29715], [-123.13584, 49.29847], [-123.13579, 49.29935], [-123.13576, 49.30018], [-123.13574, 49.30097] ] }, "properties": { "color": "#6d34b3", "width": "9m", "outline-color": "#a8b9cc", "outline-width": "2px" } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%22LineString%22,%22coordinates%22%3A%5B%5B-123.11813,49.28246%5D,%5B-123.11967,49.28347%5D,%5B-123.12108,49.28439%5D,%5B-123.12216,49.28507%5D,%5B-123.12688,49.28812%5D,%5B-123.1292,49.28964%5D,%5B-123.13216,49.2916%5D,%5B-123.13424,49.29291%5D,%5B-123.13649,49.2944%5D,%5B-123.13678,49.29477%5D,%5B-123.13649,49.29569%5D,%5B-123.13657,49.29649%5D,%5B-123.13701,49.29715%5D,%5B-123.13584,49.29847%5D,%5B-123.13579,49.29935%5D,%5B-123.13576,49.30018%5D,%5B-123.13574,49.30097%5D%5D%7D,%22properties%22%3A%7B%22color%22%3A%22%236d34b3%22,%22width%22%3A%229m%22,%22outline-color%22%3A%22%23a8b9cc%22,%22outline-width%22%3A%222px%22%7D%7D%5D%7D&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of coastal city with dense urban area, marina, and surrounding forests.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/static-add-line-styling.png) ------ # 정적 맵에 경로를 추가하는 방법 이 주제에서는 Amazon Location Service를 사용하여 정적 맵에 경로를 추가하는 방법을 알아봅니다. CalculateRoutes API를 사용하여 경로를 얻는 단계를 진행한 다음, GeoJSON과 점 및 선에 대한 사용자 지정 스타일을 사용하여 정적 맵에서 이를 시각화합니다. ## 경로를 추가하는 단계 1. `CalculateRoutes` API에서 경로를 가져옵니다. 동일한 직선에 있는 좌표를 제거하여 LineString을 최적화함으로써 쿼리 문자열이 한도에 도달하지 않도록 합니다. 1. 최적화된 좌표 집합을 기반으로 GeoJSON 객체를 생성합니다. 1. LineString의 첫 번째 점과 마지막 점을 가져와 점 지오메트리를 추가하여 시작 및 종료 위치를 표시합니다. 1. 색상, 크기 및 레이블과 같은 속성을 조정하여 비즈니스 요구 사항에 따라 점과 LineString의 스타일을 지정합니다. ## 압축 스타일을 사용하여 경로 추가 이 예제에서는 시작점과 종료점이 있는 경로를 [정적 맵에 선을 추가하는 방법](how-to-add-line-static.md)에서 생성된 선에 추가합니다. 경로는 시작점과 종료점의 색상, 크기 및 레이블을 포함한 사용자 지정 스타일로 정의됩니다. ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [-123.11813, 49.28246], [-123.11967, 49.28347], [-123.12108, 49.28439], [-123.12216, 49.28507], [-123.12688, 49.28812], [-123.1292, 49.28964], [-123.13216, 49.2916], [-123.13424, 49.29291], [-123.13649, 49.2944], [-123.13678, 49.29477], [-123.13649, 49.29569], [-123.13657, 49.29649], [-123.13701, 49.29715], [-123.13584, 49.29847], [-123.13579, 49.29935], [-123.13576, 49.30018], [-123.13574, 49.30097] ] }, "properties": { "color": "#000000", "width": "20m", "outline-color": "#a8b9cc", "outline-width": "2px" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [-123.11813, 49.28246] }, "properties": { "label": "Pacific Centre", "icon": "bubble", "size": "large", "color": "#34B3A4", "outline-color": "#006400", "text-color": "#FFFFFF" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [-123.13574, 49.30097] }, "properties": { "label": "Stanley Park", "icon": "bubble", "size": "large", "color": "#B3346D", "outline-color": "#FF0000", "text-color": "#FFFFFF" } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22LineString%22,%22coordinates%22%3A%5B%5B-123.11813,49.28246%5D,%5B-123.11967,49.28347%5D,%5B-123.12108,49.28439%5D,%5B-123.12216,49.28507%5D,%5B-123.12688,49.28812%5D,%5B-123.1292,49.28964%5D,%5B-123.13216,49.2916%5D,%5B-123.13424,49.29291%5D,%5B-123.13649,49.2944%5D,%5B-123.13678,49.29477%5D,%5B-123.13649,49.29569%5D,%5B-123.13657,49.29649%5D,%5B-123.13701,49.29715%5D,%5B-123.13584,49.29847%5D,%5B-123.13579,49.29935%5D,%5B-123.13576,49.30018%5D,%5B-123.13574,49.30097%5D%5D%7D,%22properties%22%3A%7B%22color%22%3A%22%23000000%22,%22width%22%3A%2220m%22,%22outline-color%22%3A%22%23a8b9cc%22,%22outline-width%22%3A%222px%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%22Point%22,%22coordinates%22%3A%5B-123.11813,49.28246%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Pacific%20Centre%22,%22icon%22%3A%22bubble%22,%22size%22%3A%22large%22,%22color%22%3A%22%2334B3A4%22,%22outline-color%22%3A%22%23006400%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%22Point%22,%22coordinates%22%3A%5B-123.13574,49.30097%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Stanley%20park%22,%22icon%22%3A%22bubble%22,%22size%22%3A%22large%22,%22color%22%3A%22%23B3346D%22,%22outline-color%22%3A%22%23FF0000%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D%5D%7D&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of Vancouver with Stanley Park and Pacific Centre marked, showing urban layout and coastline.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/static-add-route-compact.png) ------ # 정적 맵에 다각형을 추가하는 방법 건물과 위치는 Pentagon(워싱턴 D.C.에 위치)과 같이 주변에 다각형을 지정하여 맵에서 강조 표시할 수 있습니다. ## 단일 다각형 추가 이 예제에서는 맵에서 Pentagon 건물에 대해 다각형(오각형)을 추가합니다. ------ #### [ Geo JSON ] ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "coordinates": [ [ [ -77.0579282196337, 38.87264268371487 ], [ -77.05868880963534, 38.87003145971428 ], [ -77.05560979468949, 38.86876862025221 ], [ -77.05305311263672, 38.87059509268525 ], [ -77.0546384387842, 38.872985132206225 ], [ -77.0579282196337, 38.87264268371487 ] ] ], "type": "Polygon" } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=600&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22coordinates%22%3A%5B%5B%5B-77.0579282196337,38.87264268371487%5D,%5B-77.05868880963534,38.87003145971428%5D,%5B-77.05560979468949,38.86876862025221%5D,%5B-77.05305311263672,38.87059509268525%5D,%5B-77.0546384387842,38.872985132206225%5D,%5B-77.0579282196337,38.87264268371487%5D%5D%5D,%22type%22%3A%22Polygon%22%7D%7D%5D%7D&key=your_API_Key ``` ------ #### [ Response image ] ![\[Pentagon 주위의 다각형을 보여주는 예제 맵입니다.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/mapsV2/addPolygonStaticMap.png) ------ ## 스타일 다각형 추가 이 예제에서는 이전 예제에 표시된 다각형의 스타일을 변경합니다. 다각형을 다른 색상(**\$1E3F70550**)으로 그립니다. 색상 구성 요소는 다음과 같습니다. + **E3**은 빨간색 구성 요소를 나타냅니다. + **F7**은 녹색 구성 요소를 나타냅니다. + **05**는 파란색 구성 요소를 나타냅니다. + **50**은 알파(불투명) 구성 요소를 나타냅니다. ------ #### [ Geo JSON ] ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "coordinates": [ [ [ -77.0579282196337, 38.87264268371487 ], [ -77.05868880963534, 38.87003145971428 ], [ -77.05560979468949, 38.86876862025221 ], [ -77.05305311263672, 38.87059509268525 ], [ -77.0546384387842, 38.872985132206225 ], [ -77.0579282196337, 38.87264268371487 ] ] ], "type": "Polygon" }, "properties": { "color": "#E3F70550" } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=100&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22coordinates%22%3A%5B%5B%5B-77.0579282196337,38.87264268371487%5D,%5B-77.05868880963534,38.87003145971428%5D,%5B-77.05560979468949,38.86876862025221%5D,%5B-77.05305311263672,38.87059509268525%5D,%5B-77.0546384387842,38.872985132206225%5D,%5B-77.0579282196337,38.87264268371487%5D%5D%5D,%22type%22%3A%22Polygon%22%7D,%22properties%22%3A%7B%22color%22%3A%22%23E3F70550%22%7D%7D%5D%7D&key=your_API_Key ``` ------ #### [ Response image ] ![\[Pentagon 주위에 서로 다른 색상의 다각형을 보여주는 예제 맵입니다.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/mapsV2/addPolygonStaticMap-color.png) ------ ## 여러 다각형 추가 이 예제에서는 여러 다각형을 추가하여 뉴욕의 여러 공원을 강조 표시합니다. ------ #### [ Geo JSON ] ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "color": "#00800050" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -73.95824708489555, 40.80055774655358 ], [ -73.9818875523859, 40.76810261850716 ], [ -73.9729556303776, 40.7642422333698 ], [ -73.94916953372382, 40.79699323614054 ], [ -73.95824708489555, 40.80055774655358 ] ] ] } }, { "type": "Feature", "properties": { "color": "#FF000050" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -73.94432602794981, 40.80634757577718 ], [ -73.94607200977896, 40.803869579741644 ], [ -73.94301654157768, 40.80263972513214 ], [ -73.94127055974795, 40.805099411561145 ], [ -73.94432602794981, 40.80634757577718 ] ] ] } }, { "type": "Feature", "properties": { "color": "#0000FF50" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -73.9947948382843, 40.7691390468232 ], [ -73.99564708262241, 40.76802192177411 ], [ -73.99372953286147, 40.76723992306512 ], [ -73.99289367783732, 40.76835706126087 ], [ -73.9947948382843, 40.7691390468232 ] ] ] } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=100&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%2300800050%22%7D,%22geometry%22%3A%7B%22type%22%3A%22Polygon%22,%22coordinates%22%3A%5B%5B%5B-73.95824708489555,40.80055774655358%5D,%5B-73.9818875523859,40.76810261850716%5D,%5B-73.9729556303776,40.7642422333698%5D,%5B-73.94916953372382,40.79699323614054%5D,%5B-73.95824708489555,40.80055774655358%5D%5D%5D%7D%7D,%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%23FF000050%22%7D,%22geometry%22%3A%7B%22type%22%3A%22Polygon%22,%22coordinates%22%3A%5B%5B%5B-73.94432602794981,40.80634757577718%5D,%5B-73.94607200977896,40.803869579741644%5D,%5B-73.94301654157768,40.80263972513214%5D,%5B-73.94127055974795,40.805099411561145%5D,%5B-73.94432602794981,40.80634757577718%5D%5D%5D%7D%7D,%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%230000FF50%22%7D,%22geometry%22%3A%7B%22type%22%3A%22Polygon%22,%22coordinates%22%3A%5B%5B%5B-73.9947948382843,40.7691390468232%5D,%5B-73.99564708262241,40.76802192177411%5D,%5B-73.99372953286147,40.76723992306512%5D,%5B-73.99289367783732,40.76835706126087%5D,%5B-73.9947948382843,40.7691390468232%5D%5D%5D%7D%7D%5D%7D&key=your_API_Key ``` ------ #### [ Response image ] ![\[NYC의 공원 주위에 여러 다각형을 보여주는 예제 맵입니다.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/mapsV2/addPolygonStaticMap-multiple.png) ------ # 정적 맵의 언어를 설정하는 방법 기본 언어를 사용하지 않으려는 경우 정적 맵의 언어를 설정할 수 있습니다. 이 예제에서는 일반적으로 일본어 텍스트로 기본 설정되는 도쿄의 위치가 영어로 요청되어 리전 기본값을 덮어씁니다. 이 예제는 언어가 제공되는 요청과 언어가 제공되지 않는 요청에 대한 응답 이미지를 보여줍니다. 해당 레이블은 요청된 언어를 보여주는 맵과 기본 언어를 보여주는 맵 간의 차이를 반영합니다. ------ #### [ Request URL - English set as the language ] ``` https://maps.geo.us-east-1.amazonaws.com/v2/static/map?center=139.4575,35.539&style=Standard&lang=en&height=700&width=700&zoom=14 ``` ------ #### [ Response image ] ![\[Pentagon 주위의 다각형을 보여주는 예제 맵입니다.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/mapsV2/setLanguageEnglishStaticMap.png) ------ ------ #### [ Request URL - default language ] ``` https://maps.geo.us-east-1.amazonaws.com/v2/static/map?center=139.4575,35.539&style=Standard&height=700&width=700&zoom=14 ``` ------ #### [ Response image ] ![\[Pentagon 주위의 다각형을 보여주는 예제 맵입니다.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/mapsV2/setLanguageDefaultStaticMap.png) ------ # 정적 맵에 근접 원을 추가하는 방법 근접 원은 보고되거나 추정된 디바이스 또는 사용자 위치의 정확도에 대한 중요한 인사이트를 제공합니다. 보고된 지점 주위에 원을 표시하면 위치 결정 정밀도에 영향을 미치는 다양한 요인으로 인해 실제 위치가 원 내 어느 곳에나 해당될 수 있음을 사용자에게 알립니다. 이렇게 추가된 명확성은 의사 결정에 도움을 주며 탐색 안전성이 향상됩니다. 이 예제에서는 파리의 Eiffel Tower 근처에 500미터의 근접 원을 추가합니다. ------ #### [ Request ] ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 2.298151, 48.855921 ] }, "properties": { "style": "circle", "color": "#007BFF50", "width": "500m" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 2.298151, 48.855921 ] }, "properties": { "icon": "cp", "color": "#007BFF", "text-color":"#DC3545", "text-outline-color":"#007BFF", "outline-width":"20px", "label": "You are here", "size": "large" } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map@2x?style=Satellite&width=700&height=700&zoom=17¢er=2.2958,48.8570&geojson-overlay=%7B%20%20%22type%22%3A%20%22FeatureCollection%22,%20%20%22features%22%3A%20%5B%20%20%20%20%7B%20%20%20%20%20%20%22type%22%3A%20%22Feature%22,%20%20%20%20%20%20%22geometry%22%3A%20%7B%20%20%20%20%20%20%20%20%22type%22%3A%20%22Point%22,%20%20%20%20%20%20%20%20%22coordinates%22%3A%20%5B%20%20%20%20%20%20%20%20%20%202.298151,%20%20%20%20%20%20%20%20%20%2048.855921%20%20%20%20%20%20%20%20%5D%20%20%20%20%20%20%7D,%20%20%20%20%20%20%22properties%22%3A%20%7B%20%20%20%20%20%20%20%20%22style%22%3A%20%22circle%22,%20%20%20%20%20%20%20%20%22color%22%3A%20%22%23007BFF50%22,%20%20%20%20%20%20%20%20%22width%22%3A%20%22500m%22%20%20%20%20%20%20%7D%20%20%20%20%7D,%20%20%20%20%7B%20%20%20%20%20%20%22type%22%3A%20%22Feature%22,%20%20%20%20%20%20%22geometry%22%3A%20%7B%20%20%20%20%20%20%20%20%22type%22%3A%20%22Point%22,%20%20%20%20%20%20%20%20%22coordinates%22%3A%20%5B%20%20%20%20%20%20%20%20%20%202.298151,%20%20%20%20%20%20%20%20%20%2048.855921%20%20%20%20%20%20%20%20%5D%20%20%20%20%20%20%7D,%20%20%20%20%20%20%22properties%22%3A%20%7B%20%20%20%20%20%20%20%20%22icon%22%3A%20%22cp%22,%20%20%20%20%20%20%20%20%22color%22%3A%20%22%23007BFF%22,%20%20%20%20%20%20%20%20%22text-color%22%3A%22%23DC3545%22,%20%20%20%20%20%20%20%20%22text-outline-color%22%3A%22%23007BFF%22,%20%20%20%20%20%20%20%20%22outline-width%22%3A%2220px%22,%20%20%20%20%20%20%20%20%22label%22%3A%20%22You%20are%20here%22,%20%20%20%20%20%20%20%20%22size%22%3A%20%22large%22%20%20%20%20%20%20%7D%20%20%20%20%7D%20%20%5D%7D&key=your_API_Key ``` ------ #### [ Response image ] ![\[Eiffel Tower 주위의 근접 원을 보여주는 예제 맵입니다.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/mapsV2/addPproximityCircleStaticMap.png) ------ # 비용 및 사용량 관리 Amazon Location 맵에 대해 계속 학습하면서 서비스 용량을 관리하는 방법을 이해하고, 사용량 제한을 따르고, 할당량 및 API 최적화를 통해 최상의 결과를 얻는 것이 중요합니다. 성능과 정확성에 대한 모범 사례를 적용하면 애플리케이션을 조정하여 장소 관련 쿼리를 효율적으로 처리하고 API 요청을 극대화할 수 있습니다. **Topics** + [Amazon Location Service의 모범 사례](maps-best-practices.md) + [맵 요금](maps-pricing.md) + [맵 할당량 및 사용량](map-quota-and-usage.md) # Amazon Location Service의 모범 사례 Amazon Location Service에서 작업할 때 모범 사례를 준수하면 맵이 성능, 정확도 및 사용자 경험에 맞게 최적화됩니다. 이 섹션에서는 정적 맵, 지리적 경계, GeoJSON 데이터로 작업할 때 맵 기능 및 시각화를 개선하기 위한 주요 고려 사항을 간략하게 설명합니다. ## 동적 맵 다음은 Amazon Location Service에서 동적 맵으로 작업하기 위한 몇 가지 모범 사례입니다. ### MapLibre를 사용한 렌더링 최적화 다음은 AWS 맵 스타일에 맞게 렌더링을 최적화하는 데 도움이 되는 MapLibre의 몇 가지 기능입니다. 자세한 내용은 [AWS 맵 스타일 및 기능](map-styles.md) 단원을 참조하십시오. #### 스타일 검증 건너뛰기 AWS 맵 스타일을 사용하는 경우를 `validateStyle`로 설정합니다`false`. 이렇게 하면 로드 시간 스타일 검증이 꺼지므로 초기 맵 로드 속도가 빨라집니다. AWS 맵 스타일은 사전 검증되므로 스타일 검증이 필요하지 않습니다. ------ #### [ Example ] ``` const map = new maplibregl.Map({ container: 'map', // ID of the div where the map will render style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`, // Map style URL center: [0, 0], // Starting position [lng, lat] zoom: 2, // Starting zoom validateStyle: false, // Disable style validation for faster map load }); ``` ------ #### [ Explanation ] + `validateStyle: true`: MapLibre GL 스타일 사양과 비교하여 맵 스타일을 검증할 수 있습니다. 스타일에 문제가 있는 경우 콘솔에 로깅됩니다. + 이 값을 `false`로 설정하면 맵에서 스타일 검증 프로세스를 건너뛰므로 로드 속도가 빨라지지만 오류는 확인하지 않습니다. ------ #### 맵 사전 워밍 사용자가 앱을 탐색할 때 맵을 여러 번 생성하고 삭제할 수 있는 단일 페이지 애플리케이션(SPA)의 경우, 사전 워밍 함수는 맵을 삭제한 후 다시 생성할 때 지연 시간을 줄일 수 있습니다. 이 기능은 SPA에서만 권장됩니다. ## 정적 맵 ### 경계, 경계 상자(상자) 맵 및 지리적 데이터로 작업할 때는 경계 상자(`bbox`)와 경계 파라미터를 정확하게 정의하는 것이 중요합니다. 해당 파라미터가 관심 있는 지리적 영역을 결정하기 때문입니다. 정확하지 않으면 원치 않는 결과가 발생할 수 있습니다. **정확한 경계 보장** 지정된 경계가 표시하려는 리전을 정확하게 나타내는지 확인합니다. 약간만 부정확해도 원하는 영역의 일부를 잘라내거나 제외하여 시각화의 목적을 달성하지 못할 수 있습니다. **적절한 확대/축소 수준 확인** 맵의 확대/축소 수준은 지정된 경계 또는 bbox를 기반으로 자동으로 계산됩니다. 결과 확대/축소 수준이 전체 관심 영역에 대한 적절한 세부 정보와 가시성을 제공하는지 확인합니다. 확대/축소가 너무 높거나 낮으면 맵이 원하는 정보를 효과적으로 전달하지 못할 수 있습니다. **사용자 지정 오버레이 가시성 확인** GeoJSON 기능과 같은 사용자 지정 오버레이와 함께 bbox 또는 경계를 사용하는 경우 해당 기능의 범위가 결과 맵 이미지 내에 있는지 확인합니다. 경계를 벗어나 확장되는 기능은 잘리거나 생략될 수 있으며, 이로 인해 불완전하거나 오해의 소지가 있는 시각화로 이어질 수 있습니다. **bbox에서 패딩 사용** bbox를 패딩 파라미터와 함께 사용하여 엣지 근처의 맵 기능이 완전히 표시되고 잘리지 않도록 합니다. bbox 및 경계 파라미터를 정확하게 정의하면 맵이 원하는 지리적 영역을 올바르게 나타내고, 적절한 수준의 세부 정보를 제공하고, 사용자 지정 오버레이 또는 데이터 계층을 효과적으로 통합할 수 있습니다. ## GeoJSON GeoJSON 데이터를 사용할 때 GeoJSON을 최소화하여 쿼리 문자열을 최적화하면 특히 대규모 데이터세트에 대해 쿼리 문자열 제한 내로 유지하는 데 도움이 될 수 있습니다. # 맵 요금 Amazon Location Service는 맵 요청 유형과 API 직접 호출 수에 따라 맵 API에 대한 경쟁 요금을 제공합니다. 이 섹션에서는 동적 및 정적 맵의 요금 구조에 대한 개요를 제공합니다. 자세한 요금 정보는 [Amazon Location Service 요금](https://aws.amazon.com/location/pricing/)을 참조하세요. ## 동적 맵 맵 API 요금은 `GetTiles` API에서 검색한 타일 수를 기준으로 합니다. `GetGlyphs`, `GetStyleDescriptor` 및 `GetSprites`와 같은 다른 맵 관련 API는 무료입니다. ## 정적 맵 이미지 정적 맵 이미지 요금은 `GetStaticMap` API에 대한 요청 수를 기준으로 합니다. 정적 맵 이미지에 대한 각 요청은 요금 계산에 포함됩니다. # 맵 할당량 및 사용량 Amazon Location Service는 동적 맵과 정적 맵 모두에 대해 특정 서비스 할당량 및 사용량 제한을 적용합니다. 이러한 제한은 모든 사용자에 대해 공정한 사용량 및 성능 효율성을 보장하기 위해 적용됩니다. 다음은 각 서비스에 대한 서비스 할당량 및 조정 가능한 제한입니다. ## Service Quotas Amazon Location Service는 서비스 용량을 관리하는 데 도움이 되도록 API의 기본 할당량을 설정합니다. 이 할당량은 [AWS Service Quotas 관리 콘솔](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas)에서 확인할 수 있습니다. [셀프 서비스 콘솔](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas)을 통해 각 API의 기본 한도의 최대 2배까지 할당량 증가를 요청할 수 있습니다. 할당량이 기본 한도의 2배를 초과하는 경우 셀프 서비스 콘솔을 통해 요청하면 자동으로 지원 티켓이 제출됩니다. 또는 프리미엄 지원 팀에 문의하세요. 할당량 증가 요청에 대한 직접 요금은 없지만 사용량 수준이 높을수록 소비되는 추가 리소스에 따라 서비스 비용이 증가할 수 있습니다. 자세한 내용은 [Service Quotas를 사용하여 할당량 관리](manage-quotas.md) 단원을 참조하십시오. ### 동적 맵 | API 이름 | 기본값 | 조정 가능한 최대 제한 | 조정 가능한 최대 한도 초과 | | --- | --- | --- | --- | | `GetTiles` | 2000 | 4000 | [서비스 할당량 콘솔](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas)에 대한 요청 또는 지원 팀에 문의 | ### 정적 맵 | API 이름 | 기본값 | 조정 가능한 최대 제한 | 조정 가능한 최대 한도 초과 | | --- | --- | --- | --- | | `GetStaticMap` | 50 | 100 | [서비스 할당량 콘솔](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas)에 대한 요청 또는 지원 팀에 문의 | ## 사용량 한도 | API 이름 | Limit | 값 | | --- | --- | --- | | `GetStyleDescriptor` | IP 주소별 초당 최대 요청 수입니다. | 5000 | | `GetGlyphys` | IP 주소별 초당 최대 요청 수입니다. | 5000 | | `GetSprites` | IP 주소별 초당 최대 요청 수입니다. | 5000 | | `GetStaticMap` | 압축 후 응답 페이로드 크기입니다. | 6MB | | `GetTiles` | 압축 후 응답 페이로드 크기입니다. | 6MB | ## 용어 자세한 내용은 [이용 약관 및 데이터 저작자 표시](data-attribution.md) 단원을 참조하십시오.