📊 使用データ

• 背景地図: 高解像度航空写真（Attribution: © Esri）
• 地形データ: AWS Terrain Tiles (Terrarium形式)、最大ズームレベル15
• ランドマークデータ: ロサンゼルスの人気スポットをJSON形式で作成（例: グリフィス天文台、ハリウッドサイン）

⚙️ 実現した機能

• 3D地形表示（MapLibre GL JSのterrainプロパティを使用）
• ヒルシェード表現のカスタマイズ（例: hillshade-exaggerationを0.4に設定）
• マーカーをクリックでスポット名をポップアップ表示
• 高解像度の背景地図をEsriの航空写真で再現

💡 想定される利用シーン

• 山火事リスク評価: 標高と地形の詳細を確認し、リスクの高いエリアを特定
• 防災計画: ランドマークを参考に避難経路やリソース配置を最適化
• 教育・研究用途: 地理学や地形学の教材として活用可能
• 都市計画: 地形データを基にインフラ設計やリスク管理を支援

🚀 技術詳細

開発環境: MapLibre GL JS 2.4.0

ソースデータ形式: GeoJSON, Raster DEM

実装のキーポイント:

• 背景地図をrasterソースで設定
• 地形データをraster-demで取得し、陰影を調整
• クリック可能なマーカーでランドマークをインタラクティブに表示

📌 ロサンゼルス周辺のランドマーク例

• グリフィス天文台（34.1184, -118.3004）
• ハリウッドサイン（34.1341, -118.3215）
• サンタモニカピア（34.0092, -118.4953）

実装サンプルコード

const mapSettings = {
  hillshade: {
    exaggeration: 0.4,
    highlightColor: '#ffffff',
    shadowColor: '#666666',
    accentColor: '#cccccc',
  }
};

const map = new maplibregl.Map({
  container: 'map',
  style: {
    version: 8,
    sources: {
      "esri-imagery": {
        type: "raster",
        tiles: [
          'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
        ],
        tileSize: 256,
        attribution: "© Esri"
      },
      "aws-terrain": {
        type: "raster-dem",
        tiles: [
          "https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png"
        ],
        encoding: "terrarium",
        tileSize: 256,
        maxzoom: 15,
        attribution: `ArcticDEM terrain data; other terrain data © respective owners.`
      }
    },
    layers: [
      {
        id: "esri-imagery",
        type: "raster",
        source: "esri-imagery"
      },
      {
        id: "hills",
        type: "hillshade",
        source: "aws-terrain",
        paint: {
          "hillshade-exaggeration": mapSettings.hillshade.exaggeration,
          "hillshade-highlight-color": mapSettings.hillshade.highlightColor,
          "hillshade-shadow-color": mapSettings.hillshade.shadowColor,
          "hillshade-accent-color": mapSettings.hillshade.accentColor
        }
      }
    ],
    terrain: {
      source: "aws-terrain",
      exaggeration: 1.2
    }
  },
  center: [-118.3, 34.1],
  zoom: 10
});

const locations = [
  { "name": "グリフィス天文台", "lat": 34.1184, "lon": -118.3004 },
  { "name": "ハリウッドサイン", "lat": 34.1341, "lon": -118.3215 },
  { "name": "サンタモニカピア", "lat": 34.0092, "lon": -118.4953 },
  { "name": "ゲティセンター", "lat": 34.078, "lon": -118.4741 },
  { "name": "ロサンゼルス郡立美術館 (LACMA)", "lat": 34.0638, "lon": -118.3579 }
];

map.on('load', () => {
  locations.forEach(location => {
    const popup = new maplibregl.Popup({ offset: 25 }).setText(location.name);
    new maplibregl.Marker()
      .setLngLat([location.lon, location.lat])
      .setPopup(popup)
      .addTo(map);
  });
});