マップのスタイル機能を設定する方法

Amazon Location Service では、スタイル機能を設定してマップをカスタマイズできます。地形、輪郭密度、トラフィック、移動モード機能をマップに追加できます。

地形: 地形の視覚化を有効にして、標高の変化と地理的特徴を表示し、マッピングされたエリアの物理的な風景をユーザーが理解できるようにします。
ContourDensity: 地形の急勾配と標高の変化を表示するように、輪郭線の密度レベルを調整します。
トラフィック: リアルタイムのトラフィックデータをオーバーレイして、現在の交通渋滞、建設、インシデントなどの現在のトラフィック状況を表示し、情報に基づいたルーティングの決定を可能にします。
TravelMode: 交通固有のレイヤーを選択して、道路制限のある公共交通またはトラックナビゲーションに関連するルーティング情報を表示します。

この例では、地形と輪郭線を個別または同時に視覚化するチェックボックス付きのマップを作成します。

Index.html


<!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" checked> Terrain</label><br>
                <label><input type="checkbox" id="contour" checked> Contour Lines</label>
        </div>
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            let terrainEnabled = true;
            let contourEnabled = true;

            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: [-119.5383, 37.8651], // Yosemite coordinates for terrain visibility
                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>

この例では、トラック固有のルーティング情報と道路制限を表示するためにトラック移動モードレイヤーを有効にしたマップを作成します。

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

POI をフィルタリングする

静的マップ