【Rails】日本地図を簡単に出力できるjapanMapの導入方法

Canvasに日本地図を描画するjQueryのプラグインであるjapanmapをRailsアプリケーションに導入する手順を記す。

【目次】
1.Gemのインストール
2.japanMapをダウンロード 
3.application.jsの更新 
4.assets.rbに追記 
5.Viewに実装する 

1.Gemのインストール

インストールするべきGemは以下の2つ。

Gemfileに追加して、bundle installする。

gem 'jquery-rails', '~> 4.3', '>= 4.3.3'
gem 'jcanvas-rails', '~> 0.1.0'

2.japanMapをダウンロード

下記サイトからjsファイルをダウンロードする。

Japan Map ( jQuery plugin )

解凍したファイルの内、jquery.japan-map.min.js を、

app/assets/javascripts

配下に格納する。

3.application.jsの更新

assets配下のjsもリコンパイルしてしまう為抑止する為に記述を変更すると共に、jQueryを利用することを追記する。

【変更前】

//= require rails-ujs
//= require activestorage
//= require_tree .

【変更後】

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery
//= require jcanvas

4.assets.rbに追記

jsファイルを使用する場合、そのままでは実行時エラーになる。

文言を見るに「コンパイルしていないjsをロードしているかも知れないよ！」

ということみたいなので、先に宣言しておく。

更新するのは下記のファイル。

config/assets.rb

最後に追加すれば良い。

Rails.application.config.assets.precompile += %w( jquery.japan-map.min.js )

5.Viewに実装する

事前準備は整ったので描画させるViewにコードを書く。

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<%= javascript_include_tag 'jquery.japan-map.min.js' %>
  <script>
  $(function(){
    $("#map-container").japanMap({
        width:600,
        onSelect : function(data){
            alert(data.name);
        }
      });
  });
  </script>

後は描画させたい箇所にdivタグで埋め込めばOK。

<div id="map-container"></div>

コード中の”map-container”は地図に付与する任意のIDなので、

scriptタグとdivタグで一致していればなんでもOK。

サーバを起動してブラウザで開けば…

簡単に綺麗な日本地図が描画できるのはいい！