【HERE】地理人がHERE Mapsを語る_前編_「HERE Mapsの強みと強みを活かしたデザイン」

ネット地図といえば[Google Map](http://maps.google.co.jp/)だろうか。私は国内で目的地を検索する際はGoogle Mapを使うが、実は使わないことも多い。国内では[Mapion](https://www.mapion.co.jp/)や[Yahoo!地図](https://map.yahoo.co.jp/)、中国では[高徳地図（高德地图）](https://amap.com/)や[百度地図（百度地图）](https://map.baidu.com/)、韓国では[Naver地図(네이버 지도)](https://map.naver.com/)や[Kakao Map（카카오맵）](https://map.kakao.com/)、ロシア周辺では[Yandex Map（Яндекс Карты）](https://yandex.com/maps/)、[2GIS（2ГИС）](https://2gis.ru/) があり、**各地域ごとに得意な地図を見極め、使い分けることをオススメしたい。**

この記事で紹介するのは[HERE](https://wego.here.com/)だ。Google Mapと同様、世界各地を閲覧できるネット地図だが、地域によってばらつきがあるので注意したい。日本の地図は詳細ではないが、地域によってはHERE地図で詳しい地図を閲覧できる。**HERE地図のメリットは、このように、建物の大きさだけでなく、番地も表示されるところ**だ。世界的には通り名に番地が振られることが多いが、どんな法則性で付番されているかを一望できるのはHERE地図の強みの一つだろう。
![here1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986556/42cb3c73-5150-1716-ddfd-060f58234055.png)
▲[HERE（ハンブルグ中心部）](https://wego.here.com/?map=53.55533,10.02075,17,normal)
それぞれの通りが、どのような順番で番地が振られているか追っていくと楽しい。

先進国においてはどのネット地図も詳細だが、Google Mapでも粗い地域がある。例えば、人口増加と成長が著しいインドやインドネシアでは、HERE地図の真価が発揮される。まずはインドネシア、ジャカルタ中心部の地図を見てみよう。
![here3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986556/8fa9a1e9-efc5-eec6-4488-1db0dcc7600f.png)
▲[HERE(ジャカルタ中心部)](https://wego.here.com/?map=-6.18903,106.81905,18,normal)
Google Mapと比べると一見スポット情報は少ないが、建物形状は正確に見え、番地の付番も確認できる。

<p class="codepen" data-height="550" data-theme-id="light" data-default-tab="result" data-slug-hash="VwdoRve" data-user="chi_ri_jin" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/chi_ri_jin/pen/VwdoRve">
  Jakarta G</a> by Imaizumi Takayuki (<a href="https://codepen.io/chi_ri_jin">@chi_ri_jin</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
▲Google Mapはデフォルト表示でも店舗や宿泊施設等、スポットの情報は充実しているが、建物形状は粗く、道路や他の建物と重なっていることも多い。<br/><br/>
HERE地図はデフォルト表示で各スポットが表示されない限りで、スポット情報は実はあり、後述するHERE Style Editor画面ではスポット情報が出てくる。
そんなジャカルタでも、番地が書かれていないところがある。

![here4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986556/ab80e0dc-f2d9-438b-53d2-24ce0d6e92f9.png)
▲[HERE(ジャカルタ中心部)](https://wego.here.com/?map=-6.20609,106.8455,18,normal&x=ep)
HEREでも全ての建物、番地が書かれている訳ではないが、周辺は付番されていて、ここだけ付番されていない。おまけに建物は小さく、道路もない。ここはスラムだろうか。地図でスラムの細部を見る機会はなかなかないので、気になってくる。

なお、中心地から少し外れると、番地の情報は振られているものの建物情報はなくなるところがあるので気をつけたい。続いてインドのチェンナイ中心部の地図だ。

![here2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986556/195ac5ca-9a6e-0892-ff00-d56a61cf9f6e.png)
▲[HERE(チェンナイ中心部)](https://wego.here.com/?map=13.11099,80.28563,18,normal)
一見道路網は規則的だが、ハンブルグやジャカルタと比べると、番地の付番が不規則で、突如３桁の数字が入っているのは気になる。

<p class="codepen" data-height="550" data-theme-id="light" data-default-tab="result" data-slug-hash="XWYvGgL" data-user="chi_ri_jin" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/chi_ri_jin/pen/XWYvGgL">
  Chennai G</a> by Imaizumi Takayuki (<a href="https://codepen.io/chi_ri_jin">@chi_ri_jin</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
▲Google Mapはジャカルタと同じく建物が重なっているところはあるが、やはりスポット情報は詳しい。<br/><br/>

さらに、イスラエル・エルサレムだと**歴然と詳しい建物情報が見えてくる。**
![here5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986556/87145222-c4b9-5432-cb71-f454723b090c.png)
▲[HERE(エルサレム中心部)](https://wego.here.com/?map=-6.20609,106.8455,18,normal)
航空写真を見比べてみる限り、ほぼ全ての建物が描かれているように見える。
<p class="codepen" data-height="550" data-theme-id="light" data-default-tab="result" data-slug-hash="dyKxrKN" data-user="chi_ri_jin" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/chi_ri_jin/pen/dyKxrKN">
  Jerusalem G</a> by Imaizumi Takayuki (<a href="https://codepen.io/chi_ri_jin">@chi_ri_jin</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
▲Google Map…Googleにしては珍しく、主要な建物以外が省略されている。

最後にモロッコの古都、マラケシュの地図を見てみたい。ベルベル人の帝国時代に張り巡らされた城壁が残る中世都市で、世界遺産にも指定されている。迷路のように入り組んだ路地に、活気あふれる市場がある。ぜひ地図から航空写真モードにして、圧巻の建物群を見ていただきたい。それから再び地図を見てみると…

![here6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986556/cbc851da-b61a-8921-a167-eee54adf0f22.png)
▲[HERE地図 マラケシュ中心部](https://wego.here.com/?map=31.63105,-7.98498,18,normal)ほぼ全ての建物が描かれており、中庭も再現されている。

<p class="codepen" data-height="550" data-theme-id="light" data-default-tab="result" data-slug-hash="KKeOErE" data-user="chi_ri_jin" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/chi_ri_jin/pen/KKeOErE">
  Marakesh G</a> by Imaizumi Takayuki (<a href="https://codepen.io/chi_ri_jin">@chi_ri_jin</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
▲Google Mapでは建物が間引きされ、大まかに長方形で描かれている。

このように、細やかに建物の形が描かれる地図を見たいときにはHERE地図を見ると良い。
それでは続いて、[HERE Style Editor](https://jp.developer.here.com/documentation/style-editor/user_guide/index.html
)を用いて、この建物形状を活かした地図デザインのアレンジを考えていきたい。


![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986556/72dcac49-25be-a846-886f-c6f7f5b42e2c.png)
HERE Style Editor画面上では、デフォルト表示で表示されなかったスポット情報が出てくる。**アラビア文字でスポット情報が表示され、土壁の建物が強調**されることで、より北アフリカの古都、マラケシュの雰囲気が表現できるのではないだろうか。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986556/e9050b98-fe63-c41b-65b1-9df94ee0c5f5.png)
Google Mapの高速道路が橙色表示になってから見慣れなくなってしまったが、**日本の高速道路は緑色看板であることから、日本では高速道路を緑色で塗る地図が多かった**。そのデザインに馴染みがある場合、高速道路が緑色、主要道路から橙色、黄色…となるデザインもできる。ここでは緑地以外の背景色を、異なる相性の良い色で塗り分けてみた。**病院**（**薄茶色**）、**大学**（**黄土色**）、**工場等の業務地区**（**薄い水色**）と塗り分けてみたが、文教地区と工業地区が鮮やかに分かる。商業施設や商業エリアを着色できれば、赤系の色で塗ると映えるだろう。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986556/4a54c4d2-00a1-5ddb-6730-341aaa56fa13.png)
なお、カバーしている地域であればローマ字ではなく各国の文字で表示できるので、**地形や道路の情報を薄めにし、文字を濃く、少し大きめに表示させる**ことで、各国、各地域のコントラストを出すこともできる。ここではヒンディー文字、ビルマ文字、タイ文字、クメール文字が見える。さきほど出したチェンナイはヒンディー文字ではなくタミル文字の地域だが、国全体が単一の文字（インドはヒンディー文字）で表示されるようだ。

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986556/bd37639c-51c8-7cdc-8cc3-4af401515a34.png)
建物の密集する都市域に対しては着色することができるので、**引いた縮尺で都市域（Urban Area）を赤系の色で着色すると、都市のサイズ感や分布が見えてくる**。地図帳に馴染みがある人は、こういった表現で見えてくることも多いだろう。

このように、地図上の道路や建物、文字情報は、単体のデータとしてみればそうに過ぎないが、他の地域と比較したり、それぞれの要素を見比べて対比すると、各地域の地域が際立って見える。ここではHEREの強みを紹介したが、それぞれの地図の強みや、違いが際立つポイント、注目したい要素に合わせて色やデザインをアレンジすると面白いだろう。


後編では、[HERE Style Editor](https://jp.developer.here.com/documentation/style-editor/user_guide/index.html
)で作成したものを実際に読み込んでみたい。私自身テック系には全く疎い限りで、Qiitaもこの記事を書くために初めて登録したところだったが、後編として、そのあたりに強い[@kmini32](https://qiita.com/kmini32)の記事を参照いただければと思う。

 → [【HERE】地理人がHERE Mapsを語る 後編「HERE Style Editorを使ってスタイルデザインしたものを配信してみた」](https://qiita.com/kmini32/items/f8d1367950a4d11377fb)