Zenn
マップボックス・ジャパン合同会社Publicationへの投稿
📘

HEREのスタイルを体験する

OttyLab
2023/04/12に公開
JavaScript
#
gis
#
here
tech

はじめに

この記事ではHEREにおけるスタイルの挙動を確認します。具体的にはHERE Maps API for JavaScriptを使って地図を表示し、どのようにスタイルを使うのかを見ていきます。

この記事は以下の企画の子記事です。他サービスの記事へのリンクがあるので、ぜひ合わせてご参照ください。

https://zenn.dev/ottylab/articles/2b0c9d8e918a5a

地図を表示する

ドキュメントにあるサンプルアプリケーションを参考に地図を表示してみましょう。

まず、以下のライブラリを読み込みます。

<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>

CSSを設定します。

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

次に地図を表示する場所を作ります。

<div id="map"></div>

JavaScriptのコードは以下のようになります。

const platform = new H.service.Platform({
    apikey: YOUR_API_KEY_HERE
  });

const defaultLayers = platform.createDefaultLayers();

const map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
    center: {lat: 52.496, lng: 13.382},
    zoom: 11,
});

PlatformクラスのコンストラクタはAPIキーやBase URLなどのオプションを引数に取ります。ここではAPIキーのみを指定しています。createDefaultLayersメソッドはHEREが定義したデフォルトのレイヤーを取得します。

Mapクラスのコンストラクタは第一引数が地図を表示するHTML要素、第二引数がベースレイヤー、第三引数がオプションです。第二引数は例えばdefaultLayers.raster.satellite.mapと指定すると衛星写真に変更できます。第三引数のオプションには初期座標やズーム、ベースレイヤー上に描画するレイヤーなどが指定できます。

結果は以下のとおりです。少しびっくりしますが、デフォルトではマウスの入力を処理しないのでズームや移動ができません。

マウスイベントを使用するためには、まず以下のライブラリを追加します。

<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>

そしてJavaScriptに以下のコードを追加します。

const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

MapEventsクラスがどのようなイベントを扱うのか、Behaviorクラスがそのイベントに対してどのように地図が振る舞うのかが記述されているようです。

結果は以下のとおりです。

スタイルの変更

HEREではWebGLとHARPの二種類のレンダリングエンジンがサポートされています。WebGLではYAML形式、HARPではJSON形式のスタイル書式を使用します。HARPは新しいエンジンで、3Dのサポートのために作られたようです。当初はオープンソースで開発されていましたが、現在はMaps API for JavaScriptに移行したとのことです。

ここでは両方のエンジンでデフォルト/カスタムのスタイルを切り替える挙動を試します。カスタムのスタイルでは高速道路の色を赤色にします。

WebGL

Map Style Editorを使ってYAML形式のスタイルを作成・編集できます。右側にあるエディタでhighway_fillを検索し、色をrgb(255,0,0)に変更すればOKです。FILE -> DOWNLOADと選択することでYAMLファイルをダウンロードできます。

Map Style Editorでの編集

コードからYAMLファイルを使用するためには、どこかWebサーバ等に配置する必要があります。今回はGist上にファイルを置きました。

コードを見ていきましょう。

const URLS = {
  default: 'https://gist.githubusercontent.com/OttyLab/f4526ddf444b8f4add296ad337bcc601/raw/2f0ded386fb59b58ef7dcdf6bc735c8ca53c41bc/default.yaml',
  custom: 'https://gist.githubusercontent.com/OttyLab/f4526ddf444b8f4add296ad337bcc601/raw/2f0ded386fb59b58ef7dcdf6bc735c8ca53c41bc/custom.yaml',
};

const platform = new H.service.Platform({
    apikey: YOUR_API_KEY_HERE
  });

const style = new H.map.render.webgl.Style(URLS['default'], 'https://js.api.here.com/v3/3.1/styles/omv/');
const layer = platform.getOMVService().createLayer(style);

const map = new H.Map(document.getElementById('map'), layer, {
    center: {lat: 52.496, lng: 13.382},
    zoom: 11,
});

const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

const selector = document.getElementById('selector');

selector.addEventListener("change", () => {
    const style = new H.map.render.webgl.Style(URLS[selector.value], 'https://js.api.here.com/v3/3.1/styles/omv/');
    const provider = map.getBaseLayer().getProvider();
    provider.setStyle(style);
});

URLSはスタイルファイルのURLを定義しています。H.map.render.webgl.StyleでYAMLファイルからStyleオブジェクトを作成します。第二引数はYAMLの中でインポートしているskeleton.yaml等のファイルの場所を指定します。

セレクターを選択されたときの処理でも同様にStyleオブジェクトを作成しsetStyleで設定します。

結果は以下のとおりです。

詳細はHEREが提供するサンプルをご参照ください。

HARP

HERE Style Editorを使ってJSON形式のスタイルを作成・編集できます。Map Style Editorとは違い、GUIでスタイルを編集します。ROADS -> FILL COLOR -> Highwaysと選択し、色を変更します。File -> Export Map Styleと選択することでJSONファイルをダウンロードできます。

HERE Style Editorでの編集

コードからYAMLファイルを使用するためには、どこかWebサーバ等に配置する必要があります。今回はGist上にファイルを置きました。

コードを見ていきましょう。

まず、HARPを使うためには追加でライブラリが必要になります。

<script src="https://js.api.here.com/v3/3.1/mapsjs-harp.js"></script>

次にJavaScriptのコードです。

const URLS = {
  default: 'https://gist.githubusercontent.com/OttyLab/f4526ddf444b8f4add296ad337bcc601/raw/2f0ded386fb59b58ef7dcdf6bc735c8ca53c41bc/default.json',
  custom: 'https://gist.githubusercontent.com/OttyLab/f4526ddf444b8f4add296ad337bcc601/raw/2f0ded386fb59b58ef7dcdf6bc735c8ca53c41bc/custom.json',
};

const platform = new H.service.Platform({
    apikey: YOUR_API_KEY_HERE
});

const engineType = H.Map.EngineType['HARP'];
const style = new H.map.render.harp.Style(URLS['default']);
const layer = platform.getOMVService().createLayer(style, { engineType });

const map = new H.Map(
    document.getElementById('map'),
    layer,
    {
        engineType,
        center: {lat: 52.496, lng: 13.382},
        zoom: 11,
    }
);

const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

const selector = document.getElementById('selector');

selector.addEventListener("change", () => {
    const engineType = H.Map.EngineType['HARP'];
    const style = new H.map.render.harp.Style(URLS[selector.value]);
    const provider = map.getBaseLayer().getProvider();
    provider.setStyle(style);
});

URLSはスタイルファイルのURLを定義しています。H.map.render.harp.StyleでJSONファイルからStyleオブジェクトを作成します。

セレクターを選択されたときの処理でも同様にStyleオブジェクトを作成しsetStyleで設定します。

結果は以下のとおりです。

詳細はHEREが提供するサンプルをご参照ください。

HERE Studio（番外編）

地図を作成する方法としてHERE Studioというサービスもあります。このサービスではHEREが提供するベースマップの上に自身で定義したポリゴン等のレイヤーを配置し、そのスタイルを設定できます。

HERE Studioでの編集

このようなリンクが作成されるため、編集した地図をそのまま公開できます。ただし、スタイルが生成されるわけではないようなので、JavaScriptからは使えなさそうです。また、HERE Studioを使うためにはクレジットカードまたはPeypalの支払い設定が必要でした。

まとめ

WebGLで使用するYAML形式のスタイルはすべてのベースマップ・レイヤの情報が記載されており、Mapboxのスタイルに似た使用感でした。ただし、ベースマップは各要素がレイヤといて分離されておらず、Mapboxのスタイルのほうがより柔軟性があると言えます。

HARPで使用するJSON形式のスタイルは変更箇所のみが記載されており、Google Mapsのスタイルに似た使用感でした。WebのGUIで編集できる点もGoogle Mapsと似ていると思います。

また、HERE Studioはノーコードで地図上に独自のデータを追加する仕組みを提供するサービスでした。

このようにHEREでは用途に応じて複数の手段が提供されています。

GitHubで編集を提案
マップボックス・ジャパン合同会社
マップボックス・ジャパン合同会社Publication

マップボックス・ジャパン合同会社は、地図情報サービスの開発プラットフォームにおけるリーディングカンパニーです。ユーザー企業や代理店企業との共創により、地図を活用した新たな生活体験や業務改善ソリューションを生み出すことで、社会と暮らしの進化を支えています。

Discussion