ラスタタイルを使用してマップをレンダリングします

Maps API for JavaScript が提供するインタラクティブなマップを作成するためのツールと、 HERE Raster タイル API の幅広いマップタイルスタイルと機能を組み合わせて、アプリケーションのユーザーエクスペリエンスを向上させるリッチで魅力的なマップを作成できます。

次のチュートリアルでは、これらの 2 つの API を使用して、ラスタイメージファイルの形式でマップを読み込んで表示する基本的な HTML ファイルを作成する方法について、順を追って説明します。

作業を開始する前に
HTML ドキュメントのタイプと構造を定義します
ブラウザウィンドウに地図を表示します
地図のスタイルを変更します
地図の機能を変更します
地図をよりインタラクティブにします
次のステップ

作業を開始する前に

マップデータに対するリクエストを認証するための有効な API キーを取得します。詳細については、 HERE Raster タイル API のドキュメントのはじめにの記事を参照してください。

HTML ドキュメントのタイプと構造を定義します

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

空の HTML ファイルを作成します。

次の例に示すように、 HTML ファイルの<head>要素に、maps-core.js、maps-service.js、およびmapsjs-mapevents.jsのライブラリへの参照を含めます。

 <!DOCTYPE html>
 <html>
 <head>
     <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
     <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
     <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
 </head>
 <body></body>
 </html>

<head> エレメント内に、 body および map エレメントの幅、高さ、および位置を設定する<style>エレメントを追加します。

 <style>
 body {
     width: 100%;
     height: 100%;
     position: absolute;
     margin: 0px;
     padding: 0px;
     overflow: hidden;
 }

 #map {
     position: absolute;
     top: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
 }
 </style>

注

これらのスタイル設定では、ブラウザウィンドウの幅と高さ全体を占めるようにマップを設定します。

<body> HTML ファイルの要素内に、 <div> id が map の要素を含めます。ここに地図が表示されます。例 :
```
 <div id="map"></div>
```
<body> HTML ファイルの要素内に空の <script> 要素を作成します。この要素には、 HERE API を初期化して新しいマップインスタンスを作成する JavaScript コードが含まれています。
ファイルを保存します。

ブラウザウィンドウに地図を表示します

Maps API for JavaScript および HERE Raster タイル API を使用して Web ページにマップを表示する JavaScript コードを作成します。

<script> 要素内で、 API キーを使用して HERE platform オブジェクトのインスタンスを作成します。このインスタンスは、 HERE サービスへのアクセスに使用されます。
```
 const platform = new H.service.Platform({
     'apikey': 'Your API Key'
 });
```
HERE ラスタータイルサービスのインスタンスを作成して、 HERE ラスタータイル API からマップタイルを要求します。
```
 const rasterTileService = platform.getRasterTileService();
```
ラスタタイルプロバイダオブジェクトを作成して、マップタイルを取得して表示します。
```
 const rasterTileProvider = new H.service.rasterTile.Provider(rasterTileService);
```
ラスタタイルプロバイダを使用してタイルレイヤーオブジェクトを作成します。
```
 const rasterTileLayer = new H.map.layer.TileLayer(rasterTileProvider);
```

<div> マップ、タイルレイヤ、およびズームレベルや中心点などのさまざまなオプションを表示する要素の ID を使用して、 HERE マップオブジェクトのインスタンスを作成します。

 const map = new H.Map(
     document.getElementById("map"),
     rasterTileLayer, {
         pixelRatio: window.devicePixelRatio || 1,
         zoom: 14,
         center: {
             // These coordinates set the map center on 
             // Vancouver, Canada:
             lat: 49.2827,
             lng: -123.1207
         }
     });

パンニングやズームなどのデフォルトのマップ操作を有効にします。
```
 const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
```
ユーザーがブラウザウィンドウのサイズを変更したときにマップのサイズを動的に変更するイベントリスナーを追加します。
```
window.addEventListener('resize', () => map.getViewPort().resize());
```
ファイルを保存します。

結果: HTML ファイルでは、次の図のように、ラスタタイルで構成されたマップがレンダリングされます。

注

ブラウザウィンドウのサイズを変更すると、マップサイズが動的に調整されます。

地図のスタイルを変更します

HERE Raster タイル API を使用すると、さまざまなスタイルおよび形式のマップタイルを取得して、アプリケーションで使用できます。たとえば、 explore.night 夜間のナビゲーションや暗いテーマを使用するアプリケーションに最適化されたマップ表現を提供します。

マップスタイルを変更するには、 style 次の例に示すように、 HERE ラスタタイルサービスのインスタンスを作成する変数を変更して、パラメータを追加します。

const rasterTileService = platform.getRasterTileService({
    queryParams: {
        'style': 'explore.night',
    }
});

結果: 次の図に示すように、マップは要求されたスタイルを採用します。

詳細については、 HERE ラスタータイル API のドキュメントのスタイルを参照してください。

地図の機能を変更します

地図のスタイルに加えて、地図に表示される情報を変更して、特定のニーズに合わせて地図を調整することもできます。たとえば、トラック産業のユースケースでは、トラックに限定された道路として、このようなトラック固有の属性を地図表示に組み込むことができます。

マップに表示される機能を変更するには features 、次の例に示すように、 QueryParams オブジェクトの属性を設定します。

const rasterTileService = platform.getRasterTileService({
    queryParams: {
        'features': 'vehicle_restrictions:active_and_inactive,pois:disabled',
    }
});

これらのサンプル features パラメータでは、次の例に示すように、車両が制限されている道路を主要な目的地から走行できないようにしています。

詳細については、 HERE ラスタータイル API のドキュメントの「機能」を参照してください。

地図をよりインタラクティブにします

Maps API for JavaScript を HERE のラスタタイル API と併用すると、関心ポイント、ルート、境界などを表すマーカー、ポリゴン、折れ線、およびその他のマップオブジェクトを追加して、マップのインタラクティブ性を高めることができます。

次の例では、近隣境界を表すポリゴンを追加する方法を示します。

// Define the boundary coordinates for Yaletown neighbourhood in Vancouver, Canada 
const polygonCoordinates = [
  { lat: 49.273507, lng: -123.126989 }, { lat: 49.274524, lng: -123.125462 }, { lat: 49.274586, lng: -123.125277 },
  { lat: 49.278707, lng: -123.118998 }, { lat: 49.277735, lng: -123.117483 }, { lat: 49.278834, lng: -123.115928 }, 
  { lat: 49.277570, lng: -123.113982 }, { lat: 49.275471, lng: -123.117157 }, { lat: 49.274761, lng: -123.116098 },
  { lat: 49.274407, lng: -123.117138 }, { lat: 49.274491, lng: -123.117881 }, { lat: 49.274590, lng: -123.119345 },
  { lat: 49.273442, lng: -123.118788 }, { lat: 49.273009, lng: -123.119846 }, { lat: 49.271972, lng: -123.121409 }, 
  { lat: 49.273466, lng: -123.123719 }, { lat: 49.273128, lng: -123.125107 }, { lat: 49.273278, lng: -123.126507 },
  { lat: 49.273278, lng: -123.126507 },
];

// Use the boundary coordinates to create a polygon object
const lineString = new H.geo.LineString();
polygonCoordinates.forEach(coord => lineString.pushLatLngAlt(coord.lat, coord.lng));
const polygon = new H.map.Polygon(lineString);

// Customize the style of the polygon
polygon.setStyle({
    strokeColor: 'red',
    fillColor: 'rgba(255, 0, 0, 0.2)',
    lineWidth: 3,
});

// Add the polygon to the map
map.addObject(polygon);

結果: 次の図に示すように、マップではラスタレイヤの上にポリゴンが表示されます。

詳細については、 Polygon オブジェクトのドキュメントを参照してください。

このチュートリアルでは、 Maps API for JavaScript が提供する対話型のマッピングツールと HERE Raster タイル API を組み合わせて、ラスタタイルを使用してマップをレンダリングする方法について説明します。手順を追った操作方法で、基本的な HTML ページの作成方法、ブラウザウィンドウでのマップの表示方法、マップスタイルの変更方法、マップ機能の変更方法、およびマップのインタラクティブ性の向上方法を学習しました。

次のステップ

マップのスタイルおよびマップに表示される機能を調整する方法については、 HERE Raster タイル API の API リファレンスのドキュメントを参照してください。
マップの対話性を向上させるために使用できる Maps API for JavaScript の詳細については、 API リファレンスの Maps API for JavaScript のドキュメントを参照してください。
他の Maps API for JavaScript の使用例およびコードサンプルを参照できます。例を参照してください。

ラスタタイルを使用してマップをレンダリングします

ラスタタイルを使用してマップをレンダリングします

作業を開始する前に

HTML ドキュメントのタイプと構造を定義します

注

ブラウザウィンドウに地図を表示します

注

地図のスタイルを変更します

地図の機能を変更します

地図をよりインタラクティブにします

次のステップ

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

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

開発者

ラスタタイルを使用してマップをレンダリングします

作業を開始する前に

HTML ドキュメントのタイプと構造を定義します

注

ブラウザウィンドウに地図を表示します

注

地図のスタイルを変更します

地図の機能を変更します

地図をよりインタラクティブにします

次のステップ

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

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

開発者

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