[Javascript] 日本地図を市町村単位まで色付け（ヒートマップ化）したい人へ

# はじめに

日本地図をWEBで以下の要件を満たしつつ，ヒートマップ的な色付けをしたいなぁ...と思うことはありませんか？

- いい感じのレスポンシブ・モバイル対応
- 都道府県だけじゃなくて市町村単位まで色づけしたい
- ライセンスが緩くて商用利用もしたい

**都道府県単位での色付け**は比較的多くのライブラリがありますが，**市町村単位**で扱えるものは**見つかりませんでした．**

そこで，[Amchart4](https://www.amcharts.com/)の[Map機能](https://www.amcharts.com/docs/v4/chart-types/map/)を活用して**市町村単位**まで色付けできる日本地図を作成しました．

# デモ

![demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204520/a4e66164-69bb-a4be-213b-baef49220a6a.gif)

https://yasaidev.github.io/ammap-japan-choropleth/

# Code 
https://github.com/yasaidev/ammap-japan-choropleth

# できること

詳細は[レポジトリのReadme](https://github.com/older4/ammap-japan-choropleth)を参照してください．

- 静的なJSONファイルを読み込んでヒートマップ化
- 任意のエンドポイントから動的にデータを読み込んでヒートマップ化

## データ形式

以下の例のように`"id"`に都道府県もしくは市町村名を，`"value"`に数値を入力したJSON形式を読み込ませて可視化することができます．

与える`"id"`の形式一覧は[こちら](https://github.com/older4/ammap-japan-choropleth/blob/main/All_Fid_list.csv)で確認できます．

また，実際に読み込ませるデータ例は[こちら](https://github.com/older4/ammap-japan-choropleth/tree/main/src/assets/mockup_data)から確認できます．

### 例: [日本全体データの場合](https://github.com/older4/ammap-japan-choropleth/blob/main/src/assets/mockup_data/japan_data.json)

EX:`japan_data.json`

```JSON
[
    {
        "id": "北海道",
        "value": 88
    },
        {
        "id": "青森県",
        "value": 12
    },
]
```

# 使い方

詳細は[レポジトリのReadme](https://github.com/older4/ammap-japan-choropleth)を参照してください．

## 開発用

```bash
git clone https://github.com/older4/ammap-testing.git
npm install
npm run serve
```

上記で以下のモックアップデータを読み込んだデモページが起動します．

- アドレス: `http://localhost:8080`
- 対象データ: [`./src/assets/mockup_data/`](https://github.com/older4/ammap-japan-choropleth/tree/main/src/assets/mockup_data)
- 環境変数: `.env/dev.js`

## 任意ページへの埋め込み（本番）

はじめに`./.env/prd.js`に適切な環境変数を設定します．

EX: `.env/prd.js`

```JS
export default {
    MODE: "dynamic_param",
    API_ENDPOINT: "http://example.com/api/",
    MAP_DATA: "http://example.com/data/mapdata/"
}
```

次に以下のように任意の対象ページに`id="chartdiv"`のdiv要素を，また`dynamic_param`モードで使うIDを設定します．

EX: `target.html`

```HTML
<!DOCTYPE html>
<html>
<body>
    <!-- #################### insert start ################## -->
    <div id="chartdiv" data-paramid="XXXXXXX">
    <script src="http://example.com/heatmap/index.js"></script>
    <!-- #################### insert end ################## -->
</body>
</html>
```

# 依存/ライセンス等

## 地図機能: [Amchart4](https://www.amcharts.com/)

- 概要: グラフ全般に関する機能を提供，地図機能に関して今回利用
- ライセンス: ロゴが入るが無料で[ほぼ無制限(商用利用を含む)の利用](https://www.amcharts.com/online-store/licenses-explained/)が可能

ネイティブにレスポンシブやモバイル対応しており，各種便利なメソッド等が用意されておりさまざまな応用が可能です．

## 地図データ: [Geoshapeリポジトリ](https://geoshape.ex.nii.ac.jp/)

- 概要: 日本各地の地図データをTopoJson形式で提供
- ライセンス: [CC BY 4.0](https://geoshape.ex.nii.ac.jp/city/)

## 本コード: [older4/ammap-japan-choropleth](https://github.com/older4/ammap-japan-choropleth)

- 概要: 上記のライブラリ等を活用して日本全国を市町村単位で色付けするJSコード
- ライセンス: [GPL-3.0](https://github.com/older4/ammap-japan-choropleth/blob/main/LICENSE)

# その他

## 日本地図を可視化するライブラリまとめ

実装にあたって他のライブラリも調査したのでこちらにまとめておきます．

### [Japan Map ( jQuery plugin )](https://takemaru-hirai.github.io/japan-map/)

- 概要: jQuery pluginで日本地図を扱うことができる．
- レスポンシブ: △([ネイティブ対応ではない](https://rmtmhome.com/html5-canvas-japanmap-custom5-451))
- 最小単位: 都道府県
- ライセンス: MIT

### [Jmap jQuery plugin](https://yugokimura.github.io/jmap/)

- 概要: jQuery pluginで**シンプルモダンデザイン**の日本地図を扱うことができる．
- レスポンシブ: ○
- 最小単位: 都道府県
- ライセンス: MIT

### [Google GeoChart](https://developers.google.com/chart/interactive/docs/gallery/geochart)

- 概要: Google Chartsの機能の一つとして提供されている．
- レスポンシブ: △(別途対応が必要)
- 最小単位: 都道府県
- ライセンス: [FREE](https://developers.google.com/chart)

## Special Thanks to [Anamorphosis Networks Co., Ltd.](https://anamorphosis.net/)

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204520/bba78a7e-42e0-a08c-a2a3-c2383dc4b52f.png">

[Anamorphosis Networks社](https://anamorphosis.net/)では，「誰もが使えるAI」をモットーに[OpenPoC](https://www.anamorphosis.net/openpoc/)事業を展開しています。お客様からのヒアリングを元に大学との共同研究等を通じて新技術の開発をおこなう京都発ベンチャーです．

今回のコード作成やライブラリの調査といったことは[Anamorphosis Networks社](https://anamorphosis.net/)のインターンの中で行いました．そして，これらの公開を許可いただきました！！感謝の極みです！！