ガイドAPIリファレンス
ガイド
  1. ラスタタイルAPI v3開発ガイド
  2. HERE Raster Tile APIの例

Leafletを使用してラスターマップをレンダリングする

Leaflet を使用した HERE Raster Tile API v3 を介するラスター タイルの表示方法を説明します。Leaflet はインタラクティブ マップ用の JavaScript ライブラリです。

前提条件

HERE API キーを取得する：まだアカウントをお持ちでない場合は、HERE プラットフォーム アカウントにサインアップして API キーを生成します。詳細については「IDとアクセス管理の開発者ガイド」を参照してください。

HTML 構造を設定する

マップオブジェクトを含む新しいHTMLファイルを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <!-- Viewport settings for responsive design -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HERE Map with Leaflet</title>

  <!-- Link to Leaflet CSS for styling the map -->
  <link rel="stylesheet" href="http://unpkg.com/[email protected]/dist/leaflet.css">
</head>
<body onload="initialize_map()">

  <!-- Div element to contain the map. Set to 1000x500 pixels -->
  <div id="my_map_div" style="width:1000px; height:500px"></div>

  <!-- Link to Leaflet JavaScript library -->
  <script src="http://unpkg.com/[email protected]/dist/leaflet.js"></script>
  <script>
    // JavaScript code for initializing the map goes here
  </script>
</body>
</html>

JavaScriptを使用して地図を初期化する

<body> セクションの <script> タグ内に、マップを初期化する JavaScript コードを追加します。基本的なラスター マップに加え、次のコードではサンプル マーカーをマップ上に配置します。

function initialize_map() {

    // Center map at specific location and zoom level
    let map = L.map('my_map_div').setView([57.4235, -6.7879], 8);

    // URL template for HERE map tiles
    // {z} - zoom level, {x} - tile x coordinate, {y} - tile y coordinate
    let url = "https://maps.hereapi.com/v3/base/mc/{z}/{x}/{y}/jpeg";

    // Append additional query parameters: tile size, map style, and API key
    url += "?size=256&style=explore.satellite.day&apiKey={YOUR_HERE_API_KEY}";
    L.tileLayer(url, {
        maxZoom: 18,
        attribution: '&copy;2024 HERE Technologies'
    }).addTo(map);

    // Add a marker at a specific location
    let marker = L.marker([57.4235, -6.7879]).addTo(map);

    // Attach a popup to the marker
    marker.bindPopup("<b>Nest Point Lighthouse</b><br>A lighthouse on the westernmost point of Skye, known for stunning sunsets and views.").openPopup();
}

上記のスクリプトは、以下のアクションを実行します。

  • initialize_map() 関数内で、スクリプトは Leaflet マップ インスタンスを作成し、初期ビューを特定の座標に設定し、初期ズーム レベルを指定します。

  • url 変数は、マップ タイルを取得するための URL テンプレートを定義し、タイル サイズ、マップ スタイル、および HERE API キーの追加クエリ パラメーターを追加します。HERE Raster Tile API v3で使用可能なクエリパラメーターの詳細については、「APIリファレンス」を参照してください。

    📘

    注

    YOUR_HERE_API_KEYを実際のHERE APIキーに置き換えます。

  • L.tileLayer()関数は、定義されたURLを使用してタイルレイヤーを作成し、最大ズーム値を18に設定して、HERE Technologiesの帰属表示を提供し、タイルレイヤーを地図に追加します。

ブラウザー ウィンドウにマップを表示する

この HTML と JavaScript の設定を使用するには、HTML ファイルを保存してウェブ ブラウザーで開きます。次の図に示すように、ブラウザーには、ラスター タイル レイヤーとカスタム マーカーを使用して、指定された座標を中心としたマップが表示されます。

HEREラスタータイルを使用したLeafletマップ
📘

注

HERE Maps API for JavaScriptは、インタラクティブマップと位置情報に基づくサービスをウェブアプリケーションに統合するための強力なツールです。これを使用して、ビジネスニーズに合わせてカスタマイズされた地図を作成するための幅広いフィーチャーを備えたラスターマップをレンダリングできます。詳細については、「HERE Maps API for Javascriptを使用してラスターマップをレンダリングする」を参照してください。

次のステップ

HERE Raster Tile API の詳細については、以下を参照してください。

14 日前の更新