WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

日本地図をcanvasで表示できるjQueryプラグインJapan Map

f:id:mmmmofu:20161202105921p:plain

デモ

http://efu.sakura.ne.jp/web/japanmap/


takemaru-hirai.github.io
公式サイトからファイルを落としてくる
jQuery本体とjquery.japan-map.min.jsを読みこむ

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Japan Map</title>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="js/jquery.japan-map.min.js"></script>
  <script src="js/script.js"></script>
  <style>
    #text {
      padding: 10px 4px;
      text-align: center;
      color: #FFF;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <p id="text"></p>
</body>
</html>

JS

$(function(){

    var areaLinks = {
        "北海道地方" : "hokkaido.html",
        "東北地方" : "tohoku.html",
        "関東地方" : "kanto.html",
        "北陸・甲信越地方" : "hokuriku.html",
        "東海地方" : "tokai.html",
        "近畿地方" : "kinki.html",
        "中国地方" : "chugoku.html",
        "四国地方" : "shikoku.html",
        "九州地方" : "kyushu.html",
        "沖縄地方" : "okinawa.html",
    };

    /*
      {"code": 任意の文字列 , "name":"表示したい文字", "color":"エリアの色", "hoverColor":"エリアをhoverした時の色", "prefectures":[対象の都道府県のコード]}
    */
    var areas = [
        {"code": 1 , "name":"北海道地方", "color":"#F38181", "hoverColor":"#ffe5b0", "prefectures":[1]},
        {"code": 2 , "name":"東北地方",   "color":"#fbad8b", "hoverColor":"#ffe5b0", "prefectures":[2,3,4,5,6,7]},
        {"code": 3 , "name":"関東地方",   "color":"#FCE38A", "hoverColor":"#ffe5b0", "prefectures":[8,9,10,11,12,13,14]},
        {"code": 4 , "name":"北陸・甲信越地方",   "color":"#D6F7AD", "hoverColor":"#ffe5b0", "prefectures":[15,16,17,18,19,20]},
        {"code": 5 , "name":"東海地方",   "color":"#77e18e", "hoverColor":"#ffe5b0", "prefectures":[21,22,23,24]},
        {"code": 6 , "name":"近畿地方",   "color":"#95E1D3", "hoverColor":"#f6e8ac", "prefectures":[25,26,27,28,29,30]},
        {"code": 7 , "name":"中国地方",   "color":"#A5DEF1", "hoverColor":"#ffe5b0", "prefectures":[31,32,33,34,35]},
        {"code": 8 , "name":"四国地方",   "color":"#70A1D7", "hoverColor":"#ffe5b0", "prefectures":[36,37,38,39]},
        {"code": 9 , "name":"九州地方",   "color":"#FF99FE", "hoverColor":"#ffe5b0", "prefectures":[40,41,42,43,44,45,46]},
        {"code":10 , "name":"沖縄地方",   "color":"#BA52ED", "hoverColor":"#ffe5b0", "prefectures":[47]}
    ];

    $("#map").japanMap(
        {
            areas  : areas,//オブジェクト
            selection : "prefecture",
            borderLineWidth: 0.25,
            drawsBoxLine : false,
            movesIslands : true,
            showsAreaName : true,
            width: 800,//地図の幅(heightも指定できるが、アスペクト比を維持して大きい方が優先される)
            font : "YuGothic",//地図上に表示されるフォントの種類
            fontSize : 12,//フォントサイズ
            fontColor : "#333",//フォントカラー
            fontShadowColor : "white",//テキストシャドウ
            onSelect:function(data){//クリックした時
                location.href = areaLinks[data.area.name];
            },
            onHover:function(data){//マウスオーバー時
                $("#text").html(data.area.name + " " + data.name);
                $("#text").css("background", data.area.color);
            }
        }
    );
});