More than 3 years have passed since last update.

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

Last updated at 2021-11-14Posted at 2021-02-03

はじめに

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

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

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

そこで，Amchart4のMap機能を活用して市町村単位まで色付けできる日本地図を作成しました．

デモ

Code

できること

詳細はレポジトリのReadmeを参照してください．

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

データ形式

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

与える"id"の形式一覧はこちらで確認できます．

また，実際に読み込ませるデータ例はこちらから確認できます．

例: 日本全体データの場合

EX:japan_data.json

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

使い方

詳細はレポジトリのReadmeを参照してください．

開発用

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

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

アドレス: http://localhost:8080
対象データ: ./src/assets/mockup_data/
環境変数: .env/dev.js

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

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

EX: .env/prd.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

<!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>