MapLibre

HERE Vector Tile API を MapLibrary と併用すると、ズーム、パン、マーカーなどのインタラクティブな機能を備えた完全な機能を持つマップを作成できます。 MapLibre ライブラリは、マップのレンダリングおよびユーザーとのやり取りを処理します。一方、 HERE Vector Tile API は、ベクトルタイル形式で基盤となるマップ データを提供します。これにより、マップが表示される正確で最新の地理情報を取得できます。

作業を開始する前に

  • API キー を取得します。 まだアカウントをお持ちでない場合は、 HERE platform アカウントにサインアップして 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> タグの後に、次の例に示すように MapLibrary のスクリプトとスタイルを含めます。

     <script src="https://unpkg.com/maplibre-gl@3.2.1/dist/maplibre-gl.js"></script>
 <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@3.2.1/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. <body> HTML ファイルのセクションで、 <div> マップを保持する要素と <h1> 見出しの要素を作成します。

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

HERE ベクターデータを使用して、 MapLibrary でマップを表示します

作成した 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 ブラウザで開きます。

結果: ブラウザウィンドウに、指定した座標、ズーム レベル、およびマーカーを含むマップが表示されます。次に例を示します。

HERE ベクターデータで MapLibre を使用してレンダリングされたマップ
図 1. HERE ベクターデータで MapLibre を使用してレンダリングされたマップ

次のステップ

HERE Vector Tile API によって提供されるデータに関連する他のマップレンダリングの使用 例については、例を参照してください。

「」に一致する結果は 件です

    「」に一致する結果はありません