勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

日本地図のクリッカブルマップをjQueryで実装する方法(japan-map)

  jQuery JavaScript

JavaScriptもしくはjQueryで日本地図を表示し、都道府県や八地方区分(関東、関西等)をクリックすると対応したページに遷移させたい。方法を調べたところJapan MapというjQueryプラグインを利用することで簡単に実装できそう。以下に実装方法をメモ。

 

公式サイト

リファレンスの確認とプラグインのダウンロードは以下ページから行う。

http://takemaru-hirai.github.io/japan-map/

 

サンプル

都道府県版

https://taitan916.info/sample/japan-map/

八地方区分版

https://taitan916.info/sample/japan-map/index2.html

都道府県&レスポンシブ対応版

https://taitan916.info/sample/japan-map/index3.html

※レスポンシブはこれで正解なのかどうかは不明なので利用の際は自己責任で。

 

ソースコード

都道府県版

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Japan Mapサンプル1</title>
</head>
<body>
    <div id="japan-map"></div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="./jquery.japan-map.min.js"></script>
    <script>
    $(function(){
        const areas = [
            {code : 1, name: "北海道", color: "#7f7eda", hoverColor: "#b3b2ee", prefectures: [1], link: "https://google.com/"},
            {code : 2, name: "青森", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [2], link: "https://google.com/"},
            {code : 3, name: "岩手", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [3], link: "https://google.com/"},
            {code : 4, name: "宮城", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [4], link: "https://google.com/"},
            {code : 5, name: "秋田", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [5], link: "https://google.com/"},
            {code : 6, name: "山形", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [6], link: "https://google.com/"},
            {code : 7, name: "福島",   color: "#759ef4", hoverColor: "#98b9ff", prefectures: [7], link: "https://google.com/"},
            {code : 8, name: "茨城",   color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [8], link: "https://google.com/"},
            {code : 9, name: "栃木",   color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [9], link: "https://google.com/"},
            {code : 10, name: "群馬",   color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [10], link: "https://google.com/"},
            {code : 11, name: "埼玉",   color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [11], link: "https://google.com/"},
            {code : 12, name: "千葉",   color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [12], link: "https://google.com/"},
            {code : 13, name: "東京",   color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [13], link: "https://google.com/"},
            {code : 14, name: "神奈川",   color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [14], link: "https://google.com/"},
            {code : 15, name: "新潟",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [15], link: "https://google.com/"},
            {code : 16, name: "富山",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [16], link: "https://google.com/"},
            {code : 17, name: "石川",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [17], link: "https://google.com/"},
            {code : 18, name: "福井",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [18], link: "https://google.com/"},
            {code : 19, name: "山梨",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [19], link: "https://google.com/"},
            {code : 20, name: "長野",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [20], link: "https://google.com/"},
            {code : 21, name: "岐阜",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [21], link: "https://google.com/"},
            {code : 22, name: "静岡",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [22], link: "https://google.com/"},
            {code : 23, name: "愛知",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [23], link: "https://google.com/"},
            {code : 24, name: "三重",   color: "#ffe966", hoverColor: "#fff19c", prefectures: [24], link: "https://google.com/"},
            {code : 25, name: "滋賀",   color: "#ffe966", hoverColor: "#fff19c", prefectures: [25], link: "https://google.com/"},
            {code : 26, name: "京都",   color: "#ffe966", hoverColor: "#fff19c", prefectures: [26], link: "https://google.com/"},
            {code : 27, name: "大阪",   color: "#ffe966", hoverColor: "#fff19c", prefectures: [27], link: "https://google.com/"},
            {code : 28, name: "兵庫",   color: "#ffe966", hoverColor: "#fff19c", prefectures: [28], link: "https://google.com/"},
            {code : 29, name: "奈良",   color: "#ffe966", hoverColor: "#fff19c", prefectures: [29], link: "https://google.com/"},
            {code : 30, name: "和歌山",   color: "#ffe966", hoverColor: "#fff19c", prefectures: [30], link: "https://google.com/"},
            {code : 31, name: "鳥取",   color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [31], link: "https://google.com/"},
            {code : 32, name: "島根",   color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [32], link: "https://google.com/"},
            {code : 33, name: "岡山",   color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [33], link: "https://google.com/"},
            {code : 34, name: "広島",   color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [34], link: "https://google.com/"},
            {code : 35, name: "山口",   color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [35], link: "https://google.com/"},
            {code : 36, name: "徳島",   color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [36], link: "https://google.com/"},
            {code : 37, name: "香川",   color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [37], link: "https://google.com/"},
            {code : 38, name: "愛媛",   color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [38], link: "https://google.com/"},
            {code : 39, name: "高知",   color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [39], link: "https://google.com/"},
            {code : 40, name: "福岡",   color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [40], link: "https://google.com/"},
            {code : 41, name: "佐賀",   color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [41], link: "https://google.com/"},
            {code : 42, name: "長崎",   color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [42], link: "https://google.com/"},
            {code : 43, name: "熊本",   color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [43], link: "https://google.com/"},
            {code : 44, name: "大分",   color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [44], link: "https://google.com/"},
            {code : 45, name: "宮崎",   color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [45], link: "https://google.com/"},
            {code : 46, name: "鹿児島",   color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [46], link: "https://google.com/"},
            {code : 47, name: "沖縄",   color: "#eb98ff", hoverColor: "#f5c9ff", prefectures: [47], link: "https://google.com/"},
        ];

        $("#japan-map").japanMap({
            width: window.outerWidth * 0.95,
            selection: "area",
            areas: areas,
            backgroundColor : "#f2fcff",
            borderLineColor: "#f2fcff",
            borderLineWidth : 0.25,
            lineColor : "#a0a0a0",
            lineWidth: 1,
            drawsBoxLine: true,
            showsPrefectureName: true,
            prefectureNameType: "short",
            movesIslands : true,
            fontSize : 11,
            onSelect : function(data){
                location.href = data.area.link;
            }
        });

    });
    </script>
</body>
</html>

「link:"xxxxxxxxx"」の部分を変更することで都道府県に対応したページに遷移させられる。

八地方区分版

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Japan Mapサンプル2</title>
</head>
<body>
    <div id="japan-map"></div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="./jquery.japan-map.min.js"></script>
    <script>
    $(function(){
        const areas = [
            {code : 1, name: "北海道地方", color: "#7f7eda", hoverColor: "#b3b2ee", prefectures: [1], link: "https://google.com/"},
            {code : 2, name: "東北地方",   color: "#759ef4", hoverColor: "#98b9ff", prefectures: [2,3,4,5,6,7], link: "https://google.com/"},
            {code : 3, name: "関東地方",   color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [8,9,10,11,12,13,14], link: "https://google.com/"},
            {code : 4, name: "中部地方",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [15,16,17,18,19,20,21,22,23], link: "https://google.com/"},
            {code : 5, name: "近畿地方",   color: "#ffe966", hoverColor: "#fff19c", prefectures: [24,25,26,27,28,29,30], link: "https://google.com/"},
            {code : 6, name: "中国地方",   color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [31,32,33,34,35], link: "https://google.com/"},
            {code : 7, name: "四国地方",   color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [36,37,38,39], link: "https://google.com/"},
            {code : 8, name: "九州地方",   color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [40,41,42,43,44,45,46], link: "https://google.com/"},
            {code : 9, name: "沖縄地方",   color: "#eb98ff", hoverColor: "#f5c9ff", prefectures: [47], link: "https://google.com/"},
        ];

        $("#japan-map").japanMap({
            width: window.outerWidth * 0.95,
            selection: "area",
            areas: areas,
            backgroundColor : "#f2fcff",
            borderLineColor: "#f2fcff",
            borderLineWidth : 0.25,
            lineColor : "#a0a0a0",
            lineWidth: 1,
            drawsBoxLine: true,
            showsPrefectureName: true,
            prefectureNameType: "short",
            movesIslands : true,
            fontSize : 11,
            onSelect : function(data){
                location.href = data.area.link;
            }
        });

    });
    </script>
</body>
</html>

こちらも「link:"xxxxxxxxx"」の部分を変更することで地方に対応したページに遷移させられる。

都道府県&レスポンシブ対応版

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Japan Mapサンプル3</title>
</head>
<body>
    <div id="japan-map"></div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="./jquery.japan-map.min.js"></script>
    <script>
    $(function(){
        const areas = [
            {code : 1, name: "北海道", color: "#7f7eda", hoverColor: "#b3b2ee", prefectures: [1], link: "https://google.com/"},
            {code : 2, name: "青森", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [2], link: "https://google.com/"},
            {code : 3, name: "岩手", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [3], link: "https://google.com/"},
            {code : 4, name: "宮城", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [4], link: "https://google.com/"},
            {code : 5, name: "秋田", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [5], link: "https://google.com/"},
            {code : 6, name: "山形", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [6], link: "https://google.com/"},
            {code : 7, name: "福島",   color: "#759ef4", hoverColor: "#98b9ff", prefectures: [7], link: "https://google.com/"},
            {code : 8, name: "茨城",   color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [8], link: "https://google.com/"},
            {code : 9, name: "栃木",   color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [9], link: "https://google.com/"},
            {code : 10, name: "群馬",   color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [10], link: "https://google.com/"},
            {code : 11, name: "埼玉",   color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [11], link: "https://google.com/"},
            {code : 12, name: "千葉",   color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [12], link: "https://google.com/"},
            {code : 13, name: "東京",   color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [13], link: "https://google.com/"},
            {code : 14, name: "神奈川",   color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [14], link: "https://google.com/"},
            {code : 15, name: "新潟",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [15], link: "https://google.com/"},
            {code : 16, name: "富山",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [16], link: "https://google.com/"},
            {code : 17, name: "石川",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [17], link: "https://google.com/"},
            {code : 18, name: "福井",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [18], link: "https://google.com/"},
            {code : 19, name: "山梨",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [19], link: "https://google.com/"},
            {code : 20, name: "長野",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [20], link: "https://google.com/"},
            {code : 21, name: "岐阜",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [21], link: "https://google.com/"},
            {code : 22, name: "静岡",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [22], link: "https://google.com/"},
            {code : 23, name: "愛知",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [23], link: "https://google.com/"},
            {code : 24, name: "三重",   color: "#ffe966", hoverColor: "#fff19c", prefectures: [24], link: "https://google.com/"},
            {code : 25, name: "滋賀",   color: "#ffe966", hoverColor: "#fff19c", prefectures: [25], link: "https://google.com/"},
            {code : 26, name: "京都",   color: "#ffe966", hoverColor: "#fff19c", prefectures: [26], link: "https://google.com/"},
            {code : 27, name: "大阪",   color: "#ffe966", hoverColor: "#fff19c", prefectures: [27], link: "https://google.com/"},
            {code : 28, name: "兵庫",   color: "#ffe966", hoverColor: "#fff19c", prefectures: [28], link: "https://google.com/"},
            {code : 29, name: "奈良",   color: "#ffe966", hoverColor: "#fff19c", prefectures: [29], link: "https://google.com/"},
            {code : 30, name: "和歌山",   color: "#ffe966", hoverColor: "#fff19c", prefectures: [30], link: "https://google.com/"},
            {code : 31, name: "鳥取",   color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [31], link: "https://google.com/"},
            {code : 32, name: "島根",   color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [32], link: "https://google.com/"},
            {code : 33, name: "岡山",   color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [33], link: "https://google.com/"},
            {code : 34, name: "広島",   color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [34], link: "https://google.com/"},
            {code : 35, name: "山口",   color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [35], link: "https://google.com/"},
            {code : 36, name: "徳島",   color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [36], link: "https://google.com/"},
            {code : 37, name: "香川",   color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [37], link: "https://google.com/"},
            {code : 38, name: "愛媛",   color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [38], link: "https://google.com/"},
            {code : 39, name: "高知",   color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [39], link: "https://google.com/"},
            {code : 40, name: "福岡",   color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [40], link: "https://google.com/"},
            {code : 41, name: "佐賀",   color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [41], link: "https://google.com/"},
            {code : 42, name: "長崎",   color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [42], link: "https://google.com/"},
            {code : 43, name: "熊本",   color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [43], link: "https://google.com/"},
            {code : 44, name: "大分",   color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [44], link: "https://google.com/"},
            {code : 45, name: "宮崎",   color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [45], link: "https://google.com/"},
            {code : 46, name: "鹿児島",   color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [46], link: "https://google.com/"},
            {code : 47, name: "沖縄",   color: "#eb98ff", hoverColor: "#f5c9ff", prefectures: [47], link: "https://google.com/"},
        ];

        $("#japan-map").japanMap({
            width: window.outerWidth * 0.95,
            selection: "area",
            areas: areas,
            backgroundColor : "#f2fcff",
            borderLineColor: "#f2fcff",
            borderLineWidth : 0.25,
            lineColor : "#a0a0a0",
            lineWidth: 1,
            drawsBoxLine: true,
            showsPrefectureName: true,
            prefectureNameType: "short",
            movesIslands : true,
            fontSize : 11,
            onSelect : function(data){
                location.href = data.area.link;
            }
        });

        $(window).resize(function(event){
            $("#japan-map canvas").remove();
            $("#japan-map").japanMap({
                width: window.outerWidth * 0.95,
                selection: "area",
                areas: areas,
                backgroundColor : "#f2fcff",
                borderLineColor: "#f2fcff",
                borderLineWidth : 0.25,
                lineColor : "#a0a0a0",
                lineWidth: 1,
                drawsBoxLine: true,
                showsPrefectureName: true,
                prefectureNameType: "short",
                movesIslands : true,
                fontSize : 11,
                onSelect : function(data){
                    location.href = data.area.link;
                }
            });
        });

    });
    </script>
</body>
</html>

ウィンドウ幅を変更した場合にcanvasを再描写する形にしたがこれが正解なのかは不明。一応PCやスマホで見た限りでは正常に動作した。

 

所感

PCで見る分には問題無いがスマホで見るとゴチャゴチャっと表示され、実用するのは難しいように感じた。スマホのことを考えると「レスポンシブ対応の日本地図」や「都道府県選択UI」の方が良さそう。

 - jQuery JavaScript

  関連記事

jQueryで後から追加された要素にイベントを設定

jQueryで.html()等を使って追加した要素に対してイベントを設定したかっ ...

JavaScriptで数値のカウントアップ及びカウントダウン

JavaScript(一部jQuery)で数値のカウントアップ及びカウントダウン ...

jQueryで電話番号チェック

やりたかったことはjavascriptかjQueryで 電話番号のバリデート。 ...

jQueryで要素を移動する方法のまとめ

jQueryで要素を移動する際、insertBefore / insertAft ...

JSやjQueryで動的に追加した要素に対して「slick」でスライダーを実行する方法

外部サーバからAjax等で画像URLを取得したものをimgタグとしてページ内に描 ...