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

Posted at 2025-06-20

はじめに

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

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

Mapsとは？

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

GoogleMapじゃダメなの？

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

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

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

実際にMapを使ってみる

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

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

マップを選択

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

マップ名を入力し、

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

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

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

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

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

から選択できます。

属性とは？

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

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

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

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

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

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

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

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

タイプとは？

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

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

ラスタとは？

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

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

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

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

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

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

ベクタとは？

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

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

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

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

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

建物名
住所
面積

カスタムレイヤー

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

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

認証

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

APIキー
Cognito

APIキーの作成

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

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>

無事、マップが表示されました

おまけ

最後に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で構築したアプリケーションにマップ機能を組み込む際は、良さそうですね
さらなる、Maps機能の拡張に期待したいと思います！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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