Go to Qiita Advent Calendar Top
LoginSignup
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@namasa(なかざと)

AWS Location ServiceのMaps機能について触りながら理解していく ～AWS100本ノック～32/100

Last updated at Posted at 2025-06-20

はじめに

こんにちは。株式会社アベリオシステムズでエンジニアをやっている、なかざとです:smile:

前回の記事では、AWS Location Serviceについてザックリ紹介しました。
今回は、その中の1機能であるMapsについて紹介いたします。

Mapsとは？

Mapsはその名の通り、WebアプリケーションやアプリなどにMapを組み込むための機能を提供しています。

GoogleMapじゃダメなの？

Mapといえばみなさん普段GoogleMapを使っていると思います。

AWS上でアプリケーションを構築するとしても、GoogleMapを使えばいいじゃん？という声も聞こえてくるような気もしますね :thinking:
おそらく、Mapだけ使いたいのであればGoogleMapで良いとは思います :thinking:

しかし、AWS Location Seriviceを利用することでジオフェンスやトラッキング機能を使ったアプリケーションをAWSで構築できます。
これらについては、次回以降の記事で紹介します :smile:

実際にMapを使ってみる

使ってみないとわからないので、とりあえずMapを作成してみます。
※作成といいつつ、Mapの設定をするだけなので実際にオリジナルのマップを作るわけではありません

とりあえず、AWS Location Serviceの機能を試したいという方は、APIエクスプローラーから各機能を試すことが出来ます

マップを選択

マップを作成をクリックしてマップ作成画面を表示します。
1.png

マップ名を入力し、

  • データプロバイダー
  • 属性
  • タイプ
    を選択すると、該当するマップスタイルがリスト化されますので、1つ選択します。
    2025年6月現在、東京リージョンだと15個のマップスタイルが利用できるようです。
    ※シンガポールリージョンだと、17個のマップスタイルが使えます

2.png

6.png

データプロバイダーとは？

データプロバイダーとは、地図の背景となる画像データや地図情報を取得・提供する事業者になります。

例えば、Google Mapsのデータプロバイダーは、Googleやサードパーティープロバイダになります。
AWS Locations Serviceでは、

  • Esri
  • HERE
  • Grab ※シンガポールリージョンのみ
  • OpenData　※オープンソースの地理空間データに基づき構築されたコミュニティ主導のマップ

から選択できます。

属性とは？

どういったマップの種類にするか以下の6つから選択します。

  • 衛星画像
  • Light
  • Dark
  • 3D
  • トラック ※輸送と物流のユースケースに特化したマップ
  • ポリティカルビュー

ポリティカルビューとは？

日本語だと、政治的な見解という意味になります！

今年放送されたドラマ、御上先生でもpersonal is political(個人的なことは政治的なことというセリフがありましたね～(脱線しました... :bow: )

日本をマップ表示する際には関係ないのですが、インドなどの一部の国では、領土問題により国間での国境認識があいまいになります。
そこで、ポリティカルビューが反映されたマップを使用すると、その国の政治的見解を反映したマップが表示されます。

3-1.png

👆がポリティカルビューあり、👇がポリティカルビューなし、になります。
ポリティカルビューなしだと線が表示されていないことがわかります。

3-2.png

2025年6月現在、ポリティカルビューで選択できるのはインドのみになります

タイプとは？

マップのスタイルを選択します。ラスタとベクタのいずれかを選択できます。
※ラスタとベクタのハイブリッドマップもあります。

マップ表示の高速化には、マップタイルという仕組みがあるのですが、そちらについてはこちらのサイトをご確認ください。

ラスタとは？

格子状に並んだピクセルで構成されたデータの形式です。
ファイル形式としては、pngやjpgなど一般的な画像ファイル形式になります。

地図を拡大すると、ぼやけて格子の状態が確認できるかと思いますが、これがラスタデータの特徴です。

1つ1つのピクセルの大きさをピクセルサイズもしくは解像度と言います。
ピクセルサイズは小さいほど細かな情報を表現できる反面、データ量が大きくなります。

image.png

以下のような衛星写真を使ったマップなどがラスタ形式になります。
8.png

ラスタデータには、各ピクセルに以下のような属性(値)が格納されています。

  • RGB値
  • 標高値
  • 気温値
  • 土地利用データ

image.png

ベクタとは？

点（ポイント）、線（ライン）、面（ポリゴン） の組み合わせで地図情報を表現する形式です。
ファイル形式としては、shpやdbfやshxなど耳慣れないファイル形式になるのですが、これはデータプロバイダの1つであるEsriが提唱したGIS（Geographic Information System：地理情報システム）を代表するデータフォーマットで、シェープファイルと呼びます

image.png

ちなみに、ジオ(geo)は地球や土地を意味するらしいです :thinking:

image.png

  • 点(ポイント)
    • 地理空間における特定の位置を、2次元(x,y)または3次元(x,y,z)の座標で示す形状のジオメトリ
    • 空間的な広がりや距離を持たずに特定の１地点を示します
    • 例：交差点、店舗の場所など
  • 線(ライン)
    • 2つ以上の点を結んだ形状のジオメトリ
    • 複数の頂点を連結することで構成する
    • 始点と終点が存在し長さを持ちます
    • 例：線路や道路、河川、電線など
  • 面(ポリゴン)
    • 頂点を結ぶラインが閉じた形状のジオメトリ
    • 最低でも３点の頂点を持ち、始点と終点は同じ点で閉じている
    • ポリゴンは特定の領域を表現するので面積を持つ
    • 例：土地の区画、建物、湖、市町村の範囲など

同じ情報でも点、線、面のどれを使うかは目的に応じて変わります。
例えば以下のように、ある建物をピンで刺すなら点でしょうし、形状を地図へ表示したいなら面になります。

スクリーンショット 2025-06-20 171848.png

ベクタデータには、それぞれの地物対して以下のような属性(値)が格納されています。

  • 建物名
  • 住所
  • 面積

カスタムレイヤー

一部のマップでは、カスタムレイヤーと呼ばれる機能が利用できます。
現状は、POI（Point Of Interest：興味のあるポイント） という店舗や名所などのポイントをマップに表示できるレイヤーが利用できます。

5-1.png

👆がPOIあり、👇がPOIなしになります。
POIありだといろんなお店とかが表示されていますね。

5-2.png

認証

Mapをアプリケーションに組み込む際の認証を選択します。
現在以下の2つから選ぶことになりますが、今回はAPIキーを選択します。
APIキーは事前に作っておいて選択するか、Map作成時に作ります。

  • APIキー
  • Cognito

APIキーの作成

  • APIキー名
  • APIキーにアタッチする権限
  • 有効期限
  • リファラー ※APIキーを利用できるドメインを限定
    を入力して作成します。

4.png

Mapを表示してみる

必要項目を入力し、マップを作成をクリックするとマップが作成されるので、実際に表示してみます。
作成したマップ詳細画面を見ると、マッププレビューで作成したマップを見ることが出来ます。
埋め込みマップをクリックすると、マップを表示するためのサンプルHTMLを見れますのでこれをhtmlファイルとして保存して開いてみましょう。

<html>
  <head>
    <link href="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.css" rel="stylesheet" />
    <style>
      body { margin: 0; }
      #map { height: 100vh; }
    </style>
  </head>
  <body>
    <div id="map" />
    <script src="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.js"></script>
    <script>
      const apiKey = "*****";
      const mapName = "Political_view";
      const region = "ap-northeast-1";

      const map = new maplibregl.Map({
        container: "map",
        style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor?key=${apiKey}`,
        center: [-123.115898, 49.295868],
        zoom: 11,
      });
      map.addControl(new maplibregl.NavigationControl(), "top-left");
    </script>
  </body>
</html>

無事、マップが表示されました:smile:
7.png

（追記）AWS Location Service V2の登場

2024年11月に、AWS Location Serviceの新バージョンであるV2がリリースされました。
先ほどまではマップリソースを作成してマップを表示するのを試しました！

しかし、V2を利用することで、Maps、Places、Routesの3つに関しては、リソースを作らずとも利用できるようになりました。

具体的にマップ表示のstyle部分が以下のように変わります。

今まで(V0)
style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor?key=${apiKey}`,
V2
style: `https://maps.geo.${region}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`
// mapStyleは、Standard | Monochrome | Hybrid | Satellite のいずれかを選択することで簡単に切替可能

更に追加で以下のクエリパラメータを渡して表示を変えることが出来ます。

  • color-scheme：カラースキーマ
    • Light | Dark
  • political-view：政治的見解の設定
    • IND | RUS など

おまけ

最後にMaps系で使えるAPIについて紹介します。

GetTile

マップのタイルを取得します

aws geo-maps get-tile \
  --tileset vector.basemap \
  --z 17 \
  --x 0 \
  --y 1 \
  --output json Tile.mvt | jq '.Blob'

GetStyleDescriptor

マップに適用できる標準、モノクロ、ハイブリッド、衛星などの使用可能なマップスタイルを取得します

aws geo-maps get-style-descriptor \
  --style Standard \
  --color-scheme  Light \
  --output json GetStyleDescriptor.json | jq '.Blob'

GetGlyphs

マップレンダラーがアイコンやマークのラベルを表示するために使用するエンコードされたUnicode文字を含むバイナリファイルを取得します

aws geo-maps get-glyphs \
  --font-stack "Amazon Ember Bold" \
  --font-unicode-range 0-255.pbf \
  --output json Glyphs.pbf | jq '.Blob'

GetSprites

マップ上にレンダリングされたアイコン、マーカー、その他の要素などの小さなラスターイメージを含むポータブルネットワークグラフィック (PNG) イメージファイルを取得します

たくさんの小さな画像を1つの画像（スプライト）にまとめることで、すべての画像を取得するのに必要なリクエストの数を減らすことができ、パフォーマンスが向上し、マップの読み込みが早くなります

aws geo-maps get-sprites \
  --file-name sprites.png \
  --style Standard \
  --color-scheme Light \
  --variant Default \
  --output json Sprites.png | jq '.Blob'

aws geo-maps get-sprites \
  --file-name sprites.json \
  --style Standard \
  --color-scheme Light \
  --variant Default \
  --output json Sprites.json | jq '.Blob'

GetStaticMap：静的マップ

メールなどに添付するための静的マップを取得します

aws geo-maps get-static-map \
  --height 1024 \
  --width 1024 \
  --file-name map \
  --style Satellite \
  --zoom 18 \
  --scale-bar-unit Kilometers \
  --center "139.72063525874634,35.62287988577291" \
  --compact-overlay "point:139.72063525874634,35.62287988577291" \
  --output json avelio.png | jq '.Blob'

おわりに

今回は、AWS Location Serviceの1機能であるMapsについて紹介しました。
まだまだGoogle Mapが強いとは思いますが、AWSで構築したアプリケーションにマップ機能を組み込む際は、良さそうですね:smile:
さらなる、Maps機能の拡張に期待したいと思います！

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?