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)」を参照してください。 ## ポリティカルビューを設定し、国際的な視点と比較するこの例では、キプロスに対して、国際的な視点とトルコの視点という 2 つの異なるポリティカルビューからマップを作成して比較します。 ### ポリティカルビュー比較の例 ------ #### [ 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 の例 ------ #### [ 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 の両方の密度線を表示する 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) を使用して、公共交通の詳細を表示します。 ## トラック TravelMode でマップを作成するこの例では、ロジスティックルーティング`Truck``TravelMode`用にを使用してマップを作成する方法を示します。 ### トラックの例 ------ #### [ index.html ] ``` Truck Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # マップにトランジットの詳細を表示する方法 Amazon Location Service では、マップにトランジット機能を追加できます。には、色分けされた列車線など、公共交通のルーティング情報`Transit``TravelMode`が表示されます。また、追加のオプションについて、[ロジスティックス 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 ビューの有効化/無効化この例では、Globe ビュー射影を有効または無効にする方法を示します。デフォルトでは、Globe ビューは有効になっています。 ### 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) + [静的マップで radius と zoom のどちらを使用するかを決定する方法](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/ja_jp/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/ja_jp/location/latest/developerguide/images/static-bounding-box.png) ------ ## 境界位置のマップイメージを取得するこの例では、座標 (経度、緯度) で指定されたパリにある複数の必見スポットをカバーするマップを生成します。境界位置には、エッフェル塔、ルーブル美術館、ノートルダム大聖堂、シャンゼリゼ、エトワール凱旋門、サクレクール寺院、リュクサンブール公園、オルセー通り、コンコルド広場、ガルニエ宮などがあります。境界位置の形式は `{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/ja_jp/location/latest/developerguide/images/static-bounding-position.png) ------ # 特定のディメンションの静的マップを取得する方法このトピックでは、Amazon Location Service を使用して静的マップのディメンション (高さと幅) を設定する方法について説明します。マップイメージのディメンションをカスタマイズすることにより、パフォーマンス、ビジュアル品質、使いやすさのバランスを取ることができます。`width` と `height` の両方の最大値は 1400 ピクセルで、最小値は 64 ピクセルです。クエリ結果の最大サイズは 6 MB です。さらに、`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/ja_jp/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/ja_jp/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/ja_jp/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/ja_jp/location/latest/developerguide/images/static-specific-dimension-no-padding.png) ------ # 静的マップで radius と zoom のどちらを使用するかを決定する方法このトピックでは、Amazon Location Service で静的マップを生成するときに、`radius` を使用するか、`zoom` を使用するかを選択する方法について説明します。`radius` パラメータは、カバレッジの領域をより正確に制御するため、カバレッジエリアを正確に把握している顧客向けアプリケーションに最適です。`zoom` パラメータは、表示される詳細レベルを調整する際の地理空間分析に適しています。 ## radius を使用する場合この例では、中央位置を指定して `radius` パラメータを使用し、スリランカのマップイメージを作成します。 ------ #### [ 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/ja_jp/location/latest/developerguide/images/static-radius.png) ------ ## zoom を使用した場合この例では、中央位置を指定して `zoom` パラメータを使用し、スリランカのマップイメージを作成します。 ------ #### [ 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/ja_jp/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/ja_jp/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/ja_jp/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, Vancouver のマップ画像にラベル付きのマーカーを配置します。 `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/ja_jp/location/latest/developerguide/images/static-add-marker.png) ------ ## マップ画像に複数のマーカーを追加するこの例では、座標 (経度、緯度) を使用して、フィンランドのヘルシンキの必見の場所にマーカーを追加します。パディングを適用して、マップがすべてのマーカーに適応するように調整することもできます。 **注記** 使用できるマーカーアイコンのタイプには、`cp` (近接円)、`diamond, pin, poi, square, triangle, bubble` が含まれます。 `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/ja_jp/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/ja_jp/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/ja_jp/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/ja_jp/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/ja_jp/location/latest/developerguide/images/static-add-route-compact.png) ------ # 静的マップにポリゴンを追加する方法建物と場所は、ペンタゴン (ワシントン D.C. にある) など、周囲にポリゴンを指定することによりマップ上で強調表示できます。 ## 単一のポリゴンを追加するこの例では、マップにペンタゴンビル用のポリゴン (五角形) を追加します。 ------ #### [ 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 ] ![\[ペンタゴンを囲むポリゴンを示すマップの例。\]](http://docs.aws.amazon.com/ja_jp/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 ] ![\[ペンタゴンの周囲に異なる色のポリゴンを示すマップの例。\]](http://docs.aws.amazon.com/ja_jp/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/ja_jp/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 ] ![\[ペンタゴンを囲むポリゴンを示すマップの例。\]](http://docs.aws.amazon.com/ja_jp/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 ] ![\[ペンタゴンを囲むポリゴンを示すマップの例。\]](http://docs.aws.amazon.com/ja_jp/location/latest/developerguide/images/mapsV2/setLanguageDefaultStaticMap.png) ------ # 静的マップに近接円を追加する方法近接円は、報告されたまたは推定されたデバイスやユーザーの位置情報がどれくらい正確かを示す重要な指標となります。報告された地点の周りに円を表示することにより、ユーザーは、位置精度に影響を与えるさまざまな要因により、実際の位置がその円内のどこかにある可能性があることを認識できます。このように明確にすることにより意思決定が容易になり、ナビゲーションの安全性が向上します。この例では、パリのエッフェル塔の近くに 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 ] ![\[エッフェル塔を囲む近接円を示すマップの例。\]](http://docs.aws.amazon.com/ja_jp/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 または bounds を使用する場合は、機能の範囲が結果のマップイメージ内にあることを確認します。境界を越えて拡張された機能はクリップまたは省略され、不完全な視覚化や、誤解を招く視覚化につながる可能性があります。 **bbox でパディングを使用する** bbox をパディングパラメータと共に使用して、エッジ近くのマップ機能を完全に表示し、切れないようにします。 bbox および bounds パラメータを正確に定義することにより、マップが目的の地理的領域を正しく表し、適切な詳細レベルを提供し、カスタムオーバーレイまたはデータレイヤーを効果的に組み込めます。 ## GeoJSON GeoJSON データを使用する場合、GeoJSON を最小にしてクエリ文字列を最適化すると、特に大規模なデータセットでクエリ文字列の制限内に収まるようになります。 # マップの料金 Amazon Location Service は、マップリクエストの種類と実行された API コールの数に基づいて、Maps API の競争力のある料金を提供します。このセクションでは、動的マップと静的マップの料金構造の概要を説明します。料金の詳細については、「[Amazon Location Service の料金](https://aws.amazon.com/location/pricing/)」を参照してください。 ## 動的マップ Maps API の料金は、`GetTiles` API によって取得されたタイルの数に基づいています。 `GetGlyphs`、`GetStyleDescriptor`、`GetSprites` など、マップ関連のその他の API は無料です。 ## 静的マップイメージ静的マップイメージの料金は、`GetStaticMap` API に対して行われたリクエストの数に基づいています。静的マップイメージの各リクエストは、料金計算にカウントされます。 # マップのクォータと使用量 Amazon Location Service は、動的マップと静的マップの両方に特定のサービスクォータと使用制限を課します。これらの制限は、すべてのユーザーに公平な使用とパフォーマンス効率を確保するために設定されています。以下は、各サービスのサービスクォータと調整可能な制限です。 ## サービスクォータ 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 名 | 制限 | 値 | | --- | --- | --- | | `GetStyleDescriptor` | IP アドレスあたりの 1 秒あたりの最大リクエスト数。 | 5000 | | `GetGlyphys` | IP アドレスあたりの 1 秒あたりの最大リクエスト数。 | 5000 | | `GetSprites` | IP アドレスあたりの 1 秒あたりの最大リクエスト数。 | 5000 | | `GetStaticMap` | 圧縮後のレスポンスペイロードサイズ。 | 6 MB | | `GetTiles` | 圧縮後のレスポンスペイロードサイズ。 | 6 MB | ## 用語詳細については、「[利用規約とデータアトリビューション](data-attribution.md)」を参照してください。