マップにスタイル機能を設定する方法 - Amazon Location Service

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

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>

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

Index.html
<!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 = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

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

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