カスタムオーバーレイを表示する

HERE Maps API for Javascriptを使用すると、H.map.Overlayオブジェクトを使用してマップのリージョンをビットマップ画像でオーバーレイできます。このオブジェクトを使用すると、サーバーから取得した静的画像または動的に生成された手続きビットマップのいずれかを活用して、静的または動的データをレンダリングできます。

さらに、オーバーレイオブジェクトを使用するとデータを簡単にアニメーション化できるため、時間の経過とともに情報を更新する必要があるアプリに適したデータが得られます。データの例としては、天気情報やその他の種類の動的コンテンツなどがあります。

📘
注
次のセクションでは、「HERE Maps API for Javascriptの使用を開始する」で説明したベースマップを基盤として、コードを追加する方法を説明します。

マップにオーバーレイを追加する

次の例では、マップに画像のオーバーレイを追加する方法を示します。

// Create an overlay that uses a weather map as a bitmap
var overlay = new H.map.Overlay(
  new H.geo.Rect(
    70.72849153520343, -24.085683364175395,
    29.569664922291, 44.216452317817016
  ),
  'https://heremaps.github.io/maps-api-for-javascript-examples/image-overlay/data/0.png'
);

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

// Automatically zoom the map to fit the entire extent of the overlay:
map.getViewModel().setLookAtData({bounds: overlay.getGeometry()});

前の例からのコードによってオーバーレイがインスタンス化され、カバーする必要がある領域のバウンディングボックスと画像のURLが提供されます。最後に、オーバーレイがマップに追加されます。

次の図は結果の地図を示しています。マップにオーバーレイを追加