[アップデート] Amazon Location Service のマップスタイルオプションが追加され、地形や交通データに関する情報を追加できるようになりました

2025.10.18
いわさです。
Amazon Location Service の機能のひとつにマップ機能があります。

このマップはいくつかスタイルのカスタマイズが出来るのですが、先日のアップデートでカスタマイズ可能な項目が増えました。
https://aws.amazon.com/about-aws/whats-new/2025/10/aws-location-services-new-map-styling-enchanced-customization/
今回のアップデートでは地形の陰影起伏を描画する、等高線をひく、リアルタイムの交通データの描画、移動手段などを情報を追加することが出来ます。

今回こちらを試す機会があったので紹介したいと思います。
サンプルコードは以下の公式ドキュメントのものをベースにカスタマイズしています。
https://docs.aws.amazon.com/location/latest/developerguide/how-to-set-style-features-map.html
ポイントとしてはmaplibregl.Mapで指定するstyleのパラメータを変更することで今回のアップデート機能を使うことが出来ます。
 TerrainTerrain パラメータは地形の陰影起伏を描画できるパラメータです。

terrainに値を指定するのですが、本日時点ではHillshadeのみが指定できます。

					
			<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Terrain and Contour Map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' />
                <style>
            .controls {
                position: absolute;
                top: 10px;
                left: 10px;
                background: white;
                padding: 10px;
                border-radius: 5px;
                z-index: 1000;
            }
        </style>
                <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <div class="controls">
            <label><input type="checkbox" id="terrain" > Terrain</label><br>
                <label><input type="checkbox" id="contour" > Contour Lines</label>
        </div>
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "<replace api key>";
            const mapStyle = "Standard";
            const awsRegion = "ap-northeast-1";

            let terrainEnabled = false;
            let contourEnabled = false;

            function updateMap() {
                // Built-in JavaScript API that handles URL query parameters
                const params = new URLSearchParams({ key: apiKey });
                
                if (terrainEnabled) params.append('terrain', 'Hillshade');
                if (contourEnabled) params.append('contour-density', 'Medium');
                
                const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?${params}`;
                map.setStyle(styleUrl);
            }

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?terrain=Hillshade&contour-density=Medium&key=${apiKey}`,
                center: [141.3507138, 43.068564],
                zoom: 10,
            });

            document.getElementById('terrain').addEventListener('change', (e) => {
                terrainEnabled = e.target.checked;
                updateMap();
            });

            document.getElementById('contour').addEventListener('change', (e) => {
                contourEnabled = e.target.checked;
                updateMap();
            });
        </script>
    </body>
</html>

		
		
このパラメータを指定しない場合のデフォルト描画以下のようになります。

これ、どのあたりかわかりますか？北海道札幌市の中にある西区・南区あたりです。昨今ヒグマがよく出没しているあたりですね。
Style にterrain=Hillshadeを指定すると次のように表示されます。

円山や藻岩山の起伏がはっきりとわかりますね。
 ContourDensity続いて、ContourDensity パラメータでは等高線を描画することができます。

contour-densityに設定するのですが、本日時点ではこちらはMediumのみ値として指定が可能です。

描画した様子が以下です。
 TrafficTraffic パラメータではリアルタイムの交通データレイヤーを追加し、道路の渋滞や工事・事故などの交通状況を描画してくれるようです。

ただ、先程の札幌市やあるいは東京などで確認してみたところうまく表示されなかったので、今回はサンプルのとおりニューヨークで試しています。
まず、以下は特にオプションを指定していない時の状態です。
トラフィックオプションを有効化したサンプルが以下です。

trafficパラメータにAllを指定していますね。おそらく先程少し触れた渋滞や工事などのタイプごとに指定できるような気配を感じますが、こちらも本日時点ではAllのみが指定可能です。

					
			<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Truck routing map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "<replace api key>";
            const mapStyle = "Standard";
            const awsRegion = "ap-northeast-1";

            const truckMapStyleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?traffic=All&key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map',
                style: truckMapStyleUrl,
                center: [-74.0060, 40.7128], // NYC coordinates
                zoom: 12,
            });
        </script>
    </body>
</html>

		
		
上記オプションを有効化した時の様子がこちらです。
緑は正常な箇所でオレンジ色の部分が渋滞とかですかね？アイコンは工事っぽいです。

この緑の線が表示されていなかったので日本はもしかするとサポートされていないのかもしれないです。
 TravelModeTravelMode パラメータでは交通機関固有のレイヤーを追加することができます。

そのレイヤーの中で道路制限などがあれば表示されます。

こちらはまた札幌市で試してみました。まず、特に指定していデフォルトは以下のようになります。
こちらはtravel-modesを指定するのですが、TruckとTransitが指定可能です。（同時指定も可能っぽい）

まずTruckを指定した時は次のようになりました。
これは...新道（札樽自動車道）のあたりに大型車両通行禁止っぽいアイコンが表示されていますね。

こちら拡大してよく見てみると新道横の細道にアイコンが表示されていました。
続いて、以下はTransitを指定した場合です。

わかりますが、地下鉄線（東豊線、東西線、南北線）とJR線が描画されるようになりましたね。
ニューヨークでもみてみたのですが、こちらは特に運休とかのアイコンは表示されないみたいです。単純な路線表示だけする感じみたいですね。
 さいごに本日は Amazon Location Service のマップスタイルオプションが追加され、地形や交通データに関する情報を追加できるようになったので試してみました。
リアルタイム交通情報については日本で使えない可能性がありますが、他のオプションは描画自体はされるので、情報量として十分か精度はどの程度か、などの評価をしてみても良いと思いました。