GeoJSONデータを表示する

GeoJSON形式を使用することで、カスタムデータを地図画像にオーバーレイし、ポイント、ライン、ポリゴンなどの独自の地理的特徴を定義および表示することが可能になります。GeoJSONによるカスタムオーバーレイを活用することで、特定の地域を強調表示したり、ルートをプロットしたりするなど、データの視覚的表現を豊かにし、地図に追加のコンテキストを提供できます。

これを実現するために、APIはデータモジュール (mapsjs-data.js) を通じて提供されるH.data.geojson.Readerクラスを備えています。このクラスは、GeoJSONデータの取得と解釈を担うGeoJSONリーダーとして機能します。

カスタムデータを表示するための柔軟性とオプションをさらに高めるために、getData()メソッドを使用して、ジオメトリーに付随する補助データ (プロパティフィールドの内容) を取得することもできます。

📘
注
ドメインがクロスオリジンリソース共有 (CORS) をサポートしている場合は、別のドメインからGeoJSONファイルを読み込むことができます。

例：空港データを地図上にレンダリングする

次の例では、GeoJSONファイルを解析し、それをレイヤーとして地図上に追加し、GeoJSONオブジェクトに関連するイベントを処理して補助データを表示する方法を示します。

次のコードサンプルについては、以下の点を考慮してください。

サンプルのGeoJSONファイルは、パブリックドメインのNatural Earthデータセットから取得されたもので、世界中の空港に関するデータを含んでいます。サンプルデータ内の各空港はPointジオメトリーとして表現され、地図上ではH.map.Markerオブジェクトとしてレンダリングされます。
次のセクションでは、「HERE Maps API for Javascriptの使用を開始する」で説明したベースマップを基盤として、コードを追加する方法を説明します。

GeoJSONコンテンツを地図に追加するには、次の手順を実行します。

次の例に示すように、HTMLファイルの<head>要素にmapsjs-data.jsライブラリをインポートします。
```
<script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-data.js"></script>
```

任意：次の例に示すように、空港マーカーのカスタムアイコンスタイルを定義します。

const svgMarkup = '<svg width="24" height="24" ' +
  'xmlns="http://www.w3.org/2000/svg">' +
  '<rect stroke="white" fill="red" x="1" y="1" width="22" ' +
  'height="22" /><text x="12" y="18" font-size="12pt" ' +
  'font-family="Arial" font-weight="bold" text-anchor="middle" ' +
  'fill="white">A</text></svg>';

GeoJSONファイルを解析し、その内容をベクターマップ上のレイヤーとして表示します。

// Import and parse the GeoJSON data:
const reader = new H.data.geojson.Reader('https://raw.githubusercontent.com/nvkelso/natural-earth-vector/refs/heads/master/geojson/ne_10m_airports.geojson', {
    // This optional function is called each time parser detects a new map object:
    // Skip this code to obtain the default marker look and feel
    style: function(mapObject) {
        // Parsed marker objects are styled using the setIcon() method
        if (mapObject instanceof H.map.Marker) {
            mapObject.setIcon(new H.map.Icon(svgMarkup))
        }
    }
});
reader.parse();

// Create a GeoJSON layer using the parsed data and add it to the map
const layer = reader.getLayer();
map.addLayer(layer);

// Optionally, adjust the map zoom:
map.setZoom(6)

これで、GeoJSONレイヤーが地図上に表示され、次の図に示すように、データ内の各空港がカスタムスタイルのマーカーとしてレンダリングされます。ベクターマップ上に表示されるGeoJSONデータレイヤー

地図からGeoJSONデータを操作する

getData()メソッドを使用して、GeoJSONデータレイヤーをさらに操作します。この例ではイベントリスナーを追加し、対応するマーカーをタップまたはクリックしたときに空港の詳細を表示します。

前の例のコンテキスト内で、次のコードを追加してイベントリスナー設定を定義します。

// Add a `tap` event listener. This event listener displays basic airport data in the browser console when you tap/click a marker
map.addEventListener('tap', function (evt) {
  const target = evt.target;

  if (target instanceof H.map.Feature) {
    // Extract specific key values from the GeoJSON file
    const props = target.getData() || {};
    const name = props.name || props.name_en || 'Unknown Airport';
    const iata = props.iata_code || 'N/A';
    const icao = props.gps_code || 'N/A';
    const wiki = props.wikipedia || '—';
    // Display the data as a table in the browser console
    console.table({
      Airport: name,
      IATA: iata,
      ICAO: icao,
      Wikipedia: wiki
    });
  }
});

次の図は、結果として表示される地図の動作です。追加のGeoJSONデータの抽出と表示

次のステップ

詳細については、APIリファレンスのH.data.geojson.Readerドキュメントを参照してください。