HEREが提供する様々な地図スタイルの紹介

# はじめに
HERE Japanで地図の設計とデザインを担当している森です。

HRERは、ロケーションプサービスをグローバルに展開し、多くの企業に採用されています。日本市場でサービス展開を行うにあたっては、既に日本以外でサービス展開を行っているプラットフォームを拡張する形で対応しています。それがどんなものなのかについては、以前投稿したこちらの記事をご覧ください。

https://qiita.com/moritoru/items/e2e71b27c8a972fa8646

さて、「HERE WeGo」という地図アプリが近く日本でもリリースされる予定です。

https://internet.watch.impress.co.jp/docs/column/chizu3/1543423.html

この「HER WeGo」は、誰もが利用できる地図アプリですが、ここで提供される地図表示、ルート検索、住所検索、POI検索などは、HEREが提供しているロケーションサービスを実際に使用しています。従って、HEREのロケーションサービスのショーケース的な存在です。そのコアに採用されているのが、HERE SDKというネイティブアプリの開発キットです。

本記事では、HERE WeGoのコアに使用されている[HERE SDK](https://www.here.com/docs/category/here-sdk)を例に、提供する様々な地図スタイルについて解説します。

## 地図ってどれも似たようなもの？
皆さんは、地図ってどれも似たようなものだと思っていませんか？
決してそんなことは無く、利用目的に応じて様々な地図のスタイルがあります。

GoogleマップやYahoo!マップ（日本）のように、自社が展開するEC事業に用いるための地図では、広告コンテンツが映えるような地図表現を行いますし、登山やハイキングで使う地図では、等高線など、地形が詳細に判読できる地図が求められます。出店戦略立案に使う地図は、統計情報などの主題を遮らないように全体的に背景地図は控えめな表現となります。また、物流用途であれば、鉄道よりも道路情報を強調させた地図の方が使いやすいでしょう。

## HEREが提供する地図のスタイル
HEREは、主としてB2B向けで利用しやすい地図スタイル（HEREの開発者向けドキュメントではこれを"map scheme"と呼んでいます）を提供しています。
HERE SDKで提供するスタイルは、スマホのDayモードとダークモードそれぞれの選択肢を提供しているだけで無く、以下の5種類のスタイルから選択が可能です。

| Map Scheme名 | 説明 | 補足 |
|:-:|:-:|:-:|
|Normal|広範な用途に利用可能な標準スタイル|DayとNightがある|
|Lite|主題図作成に適した控えめなスタイル| DayとNightがある|
|Hybrid|衛星画像と文字情報を組み合わせたスタイル|DayとNightがある|
|Satellite|衛星画像のみのスタイル|   |
|Logistic|物流用途向けのスタイル| Dayのみ|

これらをHERE SDKを使って選択する実際の手順は、[こちらのドキュメント](https://www.here.com/docs/bundle/sdk-for-flutter-navigate-developer-guide/page/topics/maps.html#load-map-schemes)（英語）を参照してください。


## 日本で利用可能な地図スタイル
それでは、それぞれの地図のスタイルについて、日本での具体例を説明します。

### Normal
Normalは、HEREが提供する標準的な地図スタイルで、様々な業務用途に対応できるよう設計されています。特に、日本の住所体系をズームレベルの変化に対応して忠実に表示できるようにしています。
NormalにはDayモードとNightモードが提供されていて、細かなところで見え方の調整を行っていますが、基本的に表示する要素は同一です。

Dayモード
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531580/3b3bb781-ecfb-e98d-085c-80de450d27eb.jpeg">
Nightモード
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531580/35a04943-60aa-67e3-adcf-241795798b18.jpeg">

### Lite
Normalでは高速道路および有料道路の色にグリーンを採用していますが、Liteではグレーにしている、建物色も大半をグレーにしているなど、LiteはNormalに比べると全体の色調を抑えめにしています。

Dayモード
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531580/5366ff53-0c3d-a432-b76b-75d2a0973590.jpeg">
Nightモード
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531580/b24953e0-8baa-8c31-271b-bf2b60c40a9f.jpeg">

### Hybrid
Hybridは衛星画像を背景にして、道路がわかりやすいようにNormalまたはLiteの背景地図の情報を選択して表示し、その上に文字情報をオーバーレイした地図表示です。土地利用や植生など現地の状況が直感的にわかります。背景地図はNormalあるいはLiteから選択でき、それぞれにDayモードとNightモードが提供されています。DayモードとNightモードの違いは空の色だけで、基本的には同一です。

Dayモード（背景地図がNormal）
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531580/f1d1e4d9-f828-d444-8a2a-3d2e402b7480.jpeg">
Nightモード（背景地図がNormal）
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531580/524294b8-f8cf-dde3-dcf3-2aac2c82ea80.jpeg">

### Satellite
Satelliteは衛星画像のみの表示です。一切の文字情報はありません。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531580/3f192bcc-e845-6b7a-d099-f50cfc88fc02.jpeg">

### Logistics
Lgisticsは物流用途にフォーカスしています。物流施設があるエリアをハイライトし、官公庁、学校、病院、ホテルの建物色をグレーに、鉄道駅の色（サーモンピンク）を表示するズームレベルを遅らせたり、地下街・地下通路を非表示にするなどの処理をしています。

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531580/90230ae2-df41-5429-7cc9-2f3f39c8f643.jpeg">

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531580/e08cca9a-e4d7-3034-216f-ba6f22a3edff.jpeg">


2023年12月現在、これらのスタイルは、[HERE SDK 4.16.3](https://www.here.com/docs/category/here-sdk)および、[HERE RasterTile API Verstion 3](https://www.here.com/docs/bundle/raster-tile-api-developer-guide/page/README.html)で利用することができます。

なお、Webブラウザで利用する [HERE Maps API for JavaScript](https://www.here.com/docs/category/here-sdk-for-js)では、日本の地図は、NormalスタイルのDayモードのみしか現時点では利用できません。

## Feature
上記は地図のスタイルについて説明しましたが、それぞれの地図の上に追加で表示する「Feature」（HEREの開発者向けドキュメントではこれを[map featues](https://www.here.com/docs/bundle/sdk-for-flutter-navigate-developer-guide/page/topics/maps.html#add-map-layers-as-map-features)と呼んでいます）があります。


## 日本で利用可能なFeature
現在日本で利用可能なFeatureは以下の5種類です。

| Map Feature名 | 説明 | 補足 |
|:-:|:-:|:-:|
|建物形状|建物の2D形状|初期設定で表示|
|建物の3D表現|高さに応じて建物を立体的に表示|初期設定で表示|
|山の陰影|山の地形を視覚的わかるようにする|初期設定で非表示|
|交通状況|交通渋滞の状況|初期設定で非表示|
|交通規制|主としてトラック向けの交通規制|初期設定で非表示|

### 建物形状
初期設定では表示されるようになっていますが、この例は非表示にしています。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531580/f5b0f878-1d75-f9d7-c9a7-3bfb9a761fa7.jpeg">

### 建物の3D表現
初期設定では表示されるようになっていますが、この例は非表示にしています。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531580/6b929eca-a826-a16d-293c-c2bc5088354b.jpeg">

### 山の陰影
初期設定では表示されていませんが、この例では表示しています。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531580/ecd54a53-a12d-270c-f2c2-060459a08cf0.jpeg">

### 交通状況
初期設定では表示されていませんが、この例では表示しています。道路密度が高い日本の場合は、視覚的な錯綜を避けるために、渋滞が発生していない道路については着色表示をあえて行っていません（日本以外では渋滞が発生していない道路は緑色で表示されます）。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531580/eade5a0a-6717-0fe9-0b67-3a4d674e20b4.jpeg">

### 交通規制
初期設定では表示されていませんが、この例では表示しています。主として、トラック向けの規制情報を表示します。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531580/5229185a-c246-aed3-046b-ff685d930b03.jpeg">


詳細については、[こちらのドキュメント](https://www.here.com/docs/bundle/sdk-for-flutter-navigate-developer-guide/page/topics/maps.html#add-map-layers-as-map-features)（英語）を参照してください。

# 終わりに
このように、HEREでは日本での用途に応じて選択可能な、様々な地図表現を提供しています。そして、今後さらに充実させていく予定です。ご期待ください。