1ヶ月前に投稿

Jmap jQuery plugin で日本地図を表示してみた

この記事は約 7 分で読めます。

4.5

Jmap jQuery pluginは、
情報配信に適したシンプルな形状の
日本地図を表示することができます。

結果

こんにゃく芋の生産量

※) 都道府県にマウスオーバーすると情報を表示します。
注) 秋田県、沖縄県は事実不詳、北海道、青森県、大阪府はデータ非公表です。

都道府県収穫量割合順位
群馬県52,100t93.2%01位
栃木県1,490t2.7%02位
茨城県765t1.4%03位
広島県374t0.7%04位
福島県228t0.4%05位
全国計 55,900t
こんにゃく芋の生産量

参考: こんにゃく芋の生産量の都道府県ランキング (平成30年)

HTML

<div id="jmap"></div>
<div id="text_jmp" style="margin-top:10px; padding: 5px 0; line-height: 1.3; color: #666666; text-align: center"></div>

JavaScript (JS)

$(function () {
  $('#jmap').jmap({
    width: '100%',
    height: '450px',
    skew: '10',
    showRoundedPrefecture: true,
    showHeatmap: true,
    showHeatlabel: true,
    heatmapLabelUnit: 't',
    heatmapConditions: ["<2", ">=3", ">=10", ">=55", ">=170", ">=230", ">=700", ">=1000", ">=10000"],
    heatmapColors: ["#cccccc", "#87cefa", "#66cdaa", "#bdb76b", "#ff00ff", "#ffff00", "#0000ff", "#ffa500", "#ff0000"],
    areas: [{
      code: 1,
      name: "北海道",
      number: 0
    }, {
      code: 2,
      name: "青森",
      number: 0
    }, {
      code: 3,
      name: "岩手",
      number: 4
    }, {
      code: 4,
      name: "宮城",
      number: 23
    }, {
      code: 5,
      name: "秋田",
      number: 0
    }, {
      code: 6,
      name: "山形",
      number: 23
    }, {
      code: 7,
      name: "福島",
      number: 228
    }, {
      code: 8,
      name: "茨城",
      number: 765
    }, {
      code: 9,
      name: "栃木",
      number: 1490
    }, {
      code: 10,
      name: "群馬",
      number: 52100
    }, {
      code: 11,
      name: "埼玉",
      number: 165
    }, {
      code: 12,
      name: "千葉",
      number: 162
    }, {
      code: 13,
      name: "東京",
      number: 3
    }, {
      code: 14,
      name: "神奈川",
      number: 8
    }, {
      code: 15,
      name: "新潟",
      number: 24
    }, {
      code: 16,
      name: "富山",
      number: 0
    }, {
      code: 17,
      name: "石川",
      number: 1
    }, {
      code: 18,
      name: "福井",
      number: 1
    }, {
      code: 19,
      name: "山梨",
      number: 53
    }, {
      code: 20,
      name: "長野",
      number: 130
    }, {
      code: 21,
      name: "岐阜",
      number: 41
    }, {
      code: 22,
      name: "静岡",
      number: 8
    }, {
      code: 23,
      name: "愛知",
      number: 7
    }, {
      code: 24,
      name: "三重",
      number: 6
    }, {
      code: 25,
      name: "滋賀",
      number: 5
    }, {
      code: 26,
      name: "京都",
      number: 3
    }, {
      code: 27,
      name: "大阪",
      number: 0
    }, {
      code: 28,
      name: "兵庫",
      number: 3
    }, {
      code: 29,
      name: "奈良",
      number: 25
    }, {
      code: 30,
      name: "和歌山",
      number: 5
    }, {
      code: 31,
      name: "鳥取",
      number: 23
    }, {
      code: 32,
      name: "島根",
      number: 31
    }, {
      code: 33,
      name: "岡山",
      number: 7
    }, {
      code: 34,
      name: "広島",
      number: 374
    }, {
      code: 35,
      name: "山口",
      number: 0
    }, {
      code: 36,
      name: "徳島",
      number: 81
    }, {
      code: 37,
      name: "香川",
      number: 0
    }, {
      code: 38,
      name: "愛媛",
      number: 12
    }, {
      code: 39,
      name: "高知",
      number: 7
    }, {
      code: 40,
      name: "福岡",
      number: 24
    }, {
      code: 41,
      name: "佐賀",
      number: 1
    }, {
      code: 42,
      name: "長崎",
      number: 1
    }, {
      code: 43,
      name: "熊本",
      number: 12
    }, {
      code: 44,
      name: "大分",
      number: 10
    }, {
      code: 45,
      name: "宮崎",
      number: 5
    }, {
      code: 46,
      name: "鹿児島",
      number: 1
    }, {
      code: 47,
      name: "沖縄",
      number: 0
    }],
    onHover: function (e, data) {
      $('#text_jmp').html(data.area8.name + " - " + data.area11.name + " - " + data.name + data.full + '<br>' + '生産量は:%d tです。'.replace('%d', (data.option.number * 1).toLocaleString()));
    }
  });
});

最後に

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

Jmap jQuery plugin で日本地図を表示してみた