ガイドAPIリファレンス
ガイド
  1. ベクタータイルAPI開発ガイド
  2. HERE Vector Tile APIの例

MapLibre

HERE Vector Tile APIをMapLibreと組み合わせて使用すると、ズーム、パン、マーカーなどの双方向的なフィーチャーを備えた、完全に機能的な地図を作成できます。MapLibreライブラリは地図のレンダリングとユーザーインタラクションを処理しますが、HERE Vector Tile APIは基礎となるマップデータをベクタータイルの形式で提供するため、地図を表示するための正確で最新の地理情報を確実に取得できます。

開始する前に

  • API キーを入手する：まだアカウントをお持ちでない場合は、HERE プラットフォーム アカウントにサインアップして API キーを生成します。詳細については、「利用開始」を参照してください。
  • テキスト エディターまたは統合開発環境 (IDE) を開いて、HTML コードと JavaScript コードを記述します。

基本的な HTML ファイルを作成する

マップをレンダリングする JavaScript コードのコンテナとして、基本的な HTML ページを作成します。

  1. 選択したテキスト エディターまたは IDE (統合開発環境) で新しい HTML ファイルを作成します。

  2. 次の例に示すように、HTML ファイルで基本的な HTML 構造を設定します。

    <!DOCTYPE html>
<html>
<head>
  <title>HERE Vector Tile API with MapLibre</title>
<!-- Scripts and styles are included here -->
</head>
<body>
<!-- Map content is included here -->
</body>
</html>

  3. 次の例に示すように、<head> セクションの </title> 終了タグの後に、MapLibre スクリプトとスタイルを含めます。

    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" />

    MapLibre ライブラリの詳細については、MapLibre ドキュメントを参照してください。

  4. 同じ <head> セクションで、カスタム CSS スタイルを追加して、地図と見出しの外観を調整します。

    <style>
  body {
    margin: 0;
    padding: 0;
  }

  #map {
    width: 100%;
    height: 400px;
  }

  h1 {
    font-family: 'FiraGO', sans-serif;
    text-align: center;
    margin-top: 20px;
    font-size: 24px;
  }
</style>

  5. HTML ファイルの <body> セクションで、地図を保持する <div> 要素と見出し用の <h1> 要素を作成します。

    <body>
  <h1>HERE Vector Tile API with MapLibre</h1>
  <div id="map"></div>
</body>

HEREベクターデータを使用してMapLibreで地図を表示する

作成したHTMLコンテナに、MapLibreライブラリとHERE Vector Tile APIを組み合わせて地図を表示するJavaScriptコードを追加します。

  1. </body>終了タグの下に、<script>要素を追加します。

  2. <script> 要素に、地図を初期化するための JavaScript コードを追加します。

    const map = new maplibregl.Map({
    container: 'map',
    style: 'https://assets.vector.hereapi.com/styles/berlin/base/mapbox/tilezen?apikey={YOUR_API_KEY}',
    center: [-73.979027, 40.766869],
    zoom: 15
});

    この例では：

    • const map - maplibregl.Map コンストラクタを使用して新しいマップ オブジェクトを作成します。
    • container: 'map' - 地図を表示する HTML 要素を指定します。この場合、地図はid 属性が map に設定された要素内に配置されます。
    • style - 地図の表示スタイルと外観を定義します。この例では、HERE Vector Tile APIによってマップスタイルが読み込まれます。指定されたURLはデフォルトのberlinスタイルを参照し、リクエストを認証するためのapikeyを含みます。URLのプレースホルダー値は実際のHERE Vector Tile APIキーに置き換えてください。
    • center - 最初に読み込むときに地図の中心となる初期地理座標を設定します。 この例では、center はニューヨーク市の場所を表す緯度と経度のペアに設定されています。
    • zoom - 地図の初期ズーム レベルを設定します。

  3. 任意：追加フィーチャーを表示することで、地図の外観とユーザー エクスペリエンスを向上させます。次の例では、地図の中心座標にマーカーを追加します。

    const marker = new maplibregl.Marker()
    .setLngLat([-73.979027, 40.766869])
    .addTo(map);

    この例では：

    • const marker - maplibregl.Marker() コンストラクタを使用して新しいマーカー オブジェクトを作成します。
    • .setLngLat - 地図上のマーカーの位置の地理座標 (経度と緯度) を設定します。
    • .addTo(map) - 以前に初期化されたマップ オブジェクトにマーカーを追加します。このアクションにより、地図上の指定された座標にマーカーが配置されます。

  4. ファイルを保存し、Web ブラウザーで開きます。

結果：次の例に示すように、ブラウザー ウィンドウには、指定された座標、ズーム レベル、マーカーを含む地図が表示されます。

MapLibre を使用して HERE ベクター データでレンダリングされた地図

次のステップ

HERE Vector Tile APIによって提供されるデータを含む他の地図のレンダリングのユースケースの詳細については、「例」を参照してください。

5 時間前の更新