【japan-map-js × Laravel】jQueryプラグインで都道府県ごとに選択できる日本地図を表示

こんにちは！
現在エンジニアを目指して勉強中の一般男性です。

突然ですが、かっこいい日本地図を画面に表示させたい、、、
誰しも一度は思ったことがあるのではないでしょうか（）

今回、jQueryプラグインのjapan-map-jsを利用したところ
かなり簡単かつ扱いやすい日本地図を表示させることができました。
自分と同じ初心者の方向けに参考になればと思い、まとめておきます。

環境

・macOS Monterey 12.6
・PHP 8.1.13
・Laravel 9.3.12
・jQuery 3.6.0

前提

作っているものは、旅行の記録ができるWebアプリ。
白地図は以下のイメージで表示させたい。

①トップページに白地図を表示
各都道府県はクリックができ、遷移先はそれぞれのページ

②マイページに白地図
「訪問済み」の記録を残した都道府県と「未訪問」の都道府県を区分。
こちらもクリックができ、
「訪問済み」の県の遷移先は、自分が残したその県の記録。
「未訪問」の県は、他ユーザーの記録一覧。

実装

導入

まずは jQueryを読み込んだ後に japan-map-jsを読み込む。
ダウンロード、CDNのどちらも用意されていますが、
私の場合はCDNがあまりうまく動きませんでした。。

index.html

<!-- ダウンロードのパターン -->
<script src="/path/to/jquery.japan-map.min.js"></script>

<!-- CDNのパターン -->
<script type="text/javascript" src="https://unpkg.com/japan-map-js@1.0.1/dist/jpmap.min.js"></script>

続いて、htmlを用意。
クラス名ないしid名は任意のもので問題ありません。

index.html

<div class="js-japanMap"></div>

japan-map-jsを操作するためのjsも必要です。

japan-map.js

//　セレクタ.japanMap()で地図を生成
//　引数でマップのオプションを指定

$('.js-japanMap').japanMap({
  width: // 任意の幅を指定
  selection: 'prefecture', // 都道府県単位でクリック可能
  drawsBoxLine : false,
  movesIslands : true, //　沖縄の表示位置を日本海側に移動
  onHover: function(data) {
     // 各都道府県にホバーした際のアクションを指定
  },
  onSelect: function(data) {
     // 各都道府県をクリックした際のアクションを指定
     // 画面遷移
     window.location = 'hoge'; 
  }
});

ホバー時、クリック時は、data.nameやdata.codeで
都道府県名や各都道府県に割り当てられたコードを取得できます。
ひとまずは、これで表示できるはずです。

カスタマイズ

では、ここからカスタマイズしていきます。
オプションの設定など、詳細はこちらの公式ドキュメントをご確認ください。

実装していきたいのは以下の部分。
ホバー時やクリック時のアクションは
みなさんバラバラだと思うので今回は割愛します。

②マイページに白地図
「訪問済み」の記録を残した都道府県と「未訪問」の都道府県を区分。

japan-map.js

// URLから現在のページを判断
if (location.pathname.includes('/mypage')) {
    // 1から47までを格納した配列
    let prefs = [...Array(47)].map((_, i) => i+1); 
    // 訪問済みの都道府県を格納する配列
    let visited = [];

    // 今回は訪問済み、未訪問の２通りに区分
    // 各区分に入れる都道府県（prefectures）はこの段階では空
    let areas = [
      {code: 0, name: '未旅行', prefectures: [], color: '#808080', hoverColor: '#7ba23f'},
      {code: 1, name: '旅行済み', prefectures: [], color: '#2d6d4b', hoverColor: '#7ba23f'},
    ];

    // マイページにコンテンツがある = 旅行済みの県を取得
    $('.js-get-visited').each( function () {

      // データ属性で付与した都道府県コード（pref）を取得し、areas[1]に格納
      visited = Number( $(this).data('pref') );
      areas[1].prefectures.push(visited);
    });

    // 未旅行の県を取得
    // 47都道府県と訪問済み(areas[1].prefectures)をfilterでぶつける
    // indexOfで-1が返ってくるもの（未訪問）を抽出し、areas[0]に格納
    areas[0].prefectures = prefs.filter(i=>areas[1].prefectures.indexOf(i) == -1);

    $('.js-japanMap').japanMap({
      width: mapWidth,
      selection: 'prefecture',
      areas: areas, // areas[0]には未訪問、areas[1]には訪問済みが格納されている
      drawsBoxLine : false,
      movesIslands : true,
      onSelect: function(data){　// 割愛します
         }
      }
    });
  }

参考

公式

その他