静的マップにマーカーを追加する方法
このトピックでは、Amazon Location Service で生成された静的マップにマーカーを追加する方法について説明します。マーカーのアイコン、ラベル、サイズ、色、その他のスタイル設定のオプションをカスタマイズできます。これにより、マップの目的に沿ったビジュアルキューで特定の位置を強調表示できます。
マーカーのスタイル設定
名前 |
型 |
デフォルト |
説明 |
|---|---|---|---|
|
文字列 |
|
ポイントジオメトリのスタイル。マーカーを作成するには、値を |
|
文字列 |
|
マーカーアイコンのタイプ。使用できる値には、 |
|
文字列 |
|
座標に表示するテキスト。自動ラベルを設定するには、 |
|
色 |
スタイル依存 |
アイコンの色。 |
|
色 |
スタイル依存 |
アイコンのアウトラインの色。 |
|
色 |
スタイル依存 |
ラベルテキストの色。 |
|
色 |
スタイル依存 |
テキストのアウトラインの色。 |
|
整数 |
|
テキストのアウトラインの幅。 |
|
文字列 |
|
ラベルとアイコンのサイズ。指定できる値: |
マップ画像にマーカーを追加する
この例では、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
マップ画像に複数のマーカーを追加する
この例では、座標 (経度、緯度) を使用して、フィンランドのヘルシンキの必見の場所にマーカーを追加します。パディングを適用して、マップがすべてのマーカーに適応するように調整することもできます。
注記
使用できるマーカーアイコンのタイプには、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 } } ] }
マップ画像のマーカーの色を変更する
この例では、さまざまな色のバブルマーカーを使用して、世界中の都市を表します。マーカーの色、ラベル、その他のプロパティは、マップのコンテキストに合わせてカスタマイズできます。
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" } } ] }
