GeoChart (Google Chart Tools)で世界を細かく塗りつぶそう

こんにちわ。Patheeの廣瀬です

世界の行ったところを塗りつぶすサービス`ExplorState`を、
`GeoChart(Google Chart Tools)`を使って作ってみました

今回はこのサービス作成の際に得られたGeoChartのTipsなどを紹介していきます

## [ExplorState](https://explorstate.makoll.com/) is 何
https://explorstate.makoll.com/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8770/b17b7eca-63cc-71ca-a2ba-63bf00f828fa.png)
[私の訪問履歴](https://explorstate.makoll.com/?records=IIVQXAigMgIgNANQJIGEDcLhgPIDkO5gCsAjGgKIDKYwucKAKmkg2AExFwDMALHAGxs0AKQAKYAAwk4EtjK4y+EzhP4yA7DIAcMgJxwSEg9JJySCknxKcS+tkbbS2ctgrZ8OcNmraa2Otn0uIy5pLjkuBV5uTi5NLh0ufR4jHmkeOR4FHjUedTQAaQAJMFMDfKgsBAY4KFE0AFkATVKlHjRcAC0aEAK4AHUC7DQGEsM4dTIGACVJNWiuTgy0EGoipDhcJrQEQkoAcSA)


世界中で旅行した場所を自治体単位で塗りつぶしてドヤるサイトです
都道府県だと[経県値](https://uub.jp/kkn/)さん、国だと色々([MapColo](https://m.maploco.com/)とか)ありますが、
世界の自治体単位のものがなかったので作りました

## GeoChart
Google様謹製のチャートライブラリ`Google Chart Tools`の機能の一部で、
データを食わせると簡単に地図を塗りつぶしてくれます
https://developers.google.com/chart/interactive/docs/gallery/geochart

このライブラリはGoogle Analytics向けに作られたものをライブラリ化したようで、
データの範囲やクリックイベントが仕込める場所などが一緒です
(analyticsの地図)
<img width="500px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8770/d186dcb3-d7f4-ad56-bfa8-de0eb9ade3f2.png">


簡単な使い方や日本地図・世界地図を描画するサンプルは日本語文献でもそれなりに出てきますが、
もうちょっと突っ込んだ使い方をご紹介したいと思います

### region
Chartのoptionに指定するregionには、エリアを示すコードを入力します
コードの種類によって四段階で範囲の表示が変わります

#### 世界
null or "world" (どちらを使っても表示は一緒)
<img width="500px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8770/4e684b01-0374-7f6f-b430-a6e40e5202b3.png">
#### 大陸
アメリカ(019)など
<img width="500px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8770/28f41f54-3a00-5981-3a57-b3d7b348eb4e.png">
#### 亜大陸
北アメリカ(021)など
<img width="500px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8770/abb2b1aa-9d6a-d150-91e6-43d1f55aaa95.png">
#### 国
アメリカ合衆国など(US)
<img width="500px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8770/684bf508-0d99-9f56-7a44-7b6add872f86.png">

詳細は[Continent Hierarchy and Codes](https://developers.google.com/chart/interactive/docs/gallery/geochart#continent-hierarchy-and-codes)を参照

クリックイベントと組み合わせて、範囲を徐々に絞って表示していくなどの表現ができます

#### data (地域コード)
大陸、亜大陸、国のデータは上記の[Continent Hierarchy and Codes](https://developers.google.com/chart/interactive/docs/gallery/geochart#continent-hierarchy-and-codes)を見れば、塗りつぶす先のデータが分かります

では、自治体の地域コードは？
アメリカのアラスカだと"US-AK"、日本の北海道だと"JP-01"などですが、
先ほどの[Continent Hierarchy and Codes](https://developers.google.com/chart/interactive/docs/gallery/geochart#continent-hierarchy-and-codes)には見当たりません
このページのエリアコードがリンクになっているので飛びます
アメリカだと[こんな](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#US)Wikipediaのページに飛びます
<img width="600px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8770/438d2db3-037a-8b0a-1c0c-f8f824079557.png">
さらにこのページからもう一つリンクに飛ぶ必要があります。[ISO 3166-2:US](https://en.wikipedia.org/wiki/ISO_3166-2:US)の部分です
<img width="500px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8770/98fc6dd6-abaa-10b0-c774-1d0c20bea08d.png">

これでようやく自治体の地域コードを手に入れることができました。お疲れ様です
僕のサービスでは存在する全ての国家のデータを、Wikipediaをめぐって手に入れました


日本語で情報が欲しい場合は、URLのenをjaにすると良いです
https://en.wikipedia.org/wiki/ISO_3166-2:US
↓
https://ja.wikipedia.org/wiki/ISO_3166-2:US
<img width="400px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8770/c77a8322-8b1d-df3c-6eb8-d74bca41b9f4.png">

ただし、日本語情報は古いことがあります
日本ではトップレベルの自治体、つまり都道府県の追加・合併・廃止などは沖縄返還を最後に50年近く行われていませんが、
世界ではままあるようです

また、GeoChartの方も更新についていけていないようで、
こうやって集めてもうまく表示されない自治体があります。
その他にもデータには色々苦労があったのですが、それはまたの機会に