geochart 日本地図に色分けしながらマッピング

こんなかんじで DB と連携して
特定の要素が多いほど日本地図に色濃くマッピングする機能をつくった。

また gem の chartkick だと世界地図しかフォローしてないので
今回はオリジナルの js で書く

開発環境

ruby 2.6.5
Ruby on Rails 5.2.5

前提

DB 内に住所のカラムを持つモデルがある
上記のモデルに CRUD 機能があり、その数を集計できるようにしたい

手順

① geochart を読み込むスクリプトを書く
② DB からの情報を加工するロジックを書く
③ ruby の変数を js にわたす
④ 地図を描画する

基本的に日本語の詳しい記事はないので
ドキュメントですすめる形になる

具体的なフロー

①
https://developers.google.com/chart/interactive/docs/gallery/geochart

上記のURLを参考にして読み込むスクリプトを書く

②

以下みたいなロジックを作った

    mapping_worship = []
    @user_introduction.user.worship_shintos.map do |shinto|
      a = shinto.address.match(/東京都|北海道|(?:京都|大阪)府|.{3}県/).to_s
      unless a == "北海道"
        a.chop!
      end
      if a[0] == "）"
        a.slice!(0, 1)
      end
      mapping_worship << a
    end

    mapping_count = mapping_worship.group_by(&:itself).map{|key,value| [key,value.count]}
    mapping_count.unshift(["都道府県","回数"])

もともと@user_introduction.user.worship_shintos ってしたら

（〒102-0071）北海道千代田区富士見2-4-1

のように、住所の情報が配列で入るんだけど
これだと geochart は認識しない

なので上記のロジックを通す

すると

 [["都道府県","回数"], ["京都", 8], ["東京", 161], ["広島", 16], ["島根", 5], ["茨城", 4], ["千葉", 1], ["北海道", 2], ["山梨", 4]]

てなる。

["都道府県","回数"] は地図を作るのに必要。

それ以外はマッピングするのに使う

あとは県とか都とか府が入ると認識されない。
北海道の道は必要。

③
gon っていう gem を使う。

これをいれて

gon.usermapping = mapping_count

ってすると js のファイルで gon.usermapping っていうプロパティが使えるようになる

④

これも公式を参考にして

document.addEventListener("turbolinks:load", function(){

  google.charts.load('current', {
      'packages':['geochart']
  });
  google.charts.setOnLoadCallback(drawMap);
  
})

document.addEventListener("turbolinks:load", function(){
  
})


function drawMap() {
  //都道府県単位のデータ
  let map = gon.usermapping
  var data = map;
  var dt = google.visualization.arrayToDataTable(data);
  var options = {
    region: 'JP',  //地域
    displayMode: 'regions', // regions=塗りつぶし, markers=マーカー 
    backgroundColor: '#ebf7fe', //背景色
    resolution: 'provinces',
    colorAxis: {colors: ["#CBDDC3", "#99E6B2", "#7AD2A8", "#5CBE9D", "#3DAA93", "#1F9688", "#00827E"], maxSize: 60 },
    colors:['white','green'], //階層の色
  };
  //出力するDivを指定して chart を生成
  var chart = new google.visualization.GeoChart(document.getElementById('region-div'));
  //描画
  chart.draw(dt, options);
}


google.charts.load('current', {
  'packages':['geochart']
});
google.charts.setOnLoadCallback(drawMap);

とした

自分の環境は document.addEventListener("turbolinks:load", function(){　で
ラッピングしないと turbolink が邪魔して jQuery が動かないのでこうしている

gon.mapping で変数をセットしてそれをデータとして渡している。

細かい色とかスケールの色とかは調整した