Powered by Zoomin Software.詳細については、以下までお問い合わせくださいZoomin

HERE Vector Tile API - 開発者ガイド

Filters

すべてのフィルターをクリア
製品カテゴリ
テクノロジー
ドキュメント タイプ
バージョン
製品ライフサイクル
すべてのフィルターをクリア
本書

HERE Vector Tile API - 開発者ガイド: MapLibre

共有
メールで共有記事 URL をコピー
フィードバック
印刷
ホームHERE Vector Tile API - 開発者ガイド...例MapLibre現在のページ
目次

MapLibre

共有
メールで共有記事 URL をコピー
フィードバック
印刷

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/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. 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 ベクター データでレンダリングされた地図
MapLibre を使用して HERE ベクター データでレンダリングされた地図

次のステップ

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

この記事内
この記事は役に立ちましたか？
いいねよくないね
TitleResults for “How to create a CRG?”Also Available inAlert