訪問した都道府県を日本地図に表示する方法


備忘録のために。
旅行した場所を投稿するアプリを作成する上で投稿をする→旅行した都道府県に色を付ける機能を作成しました。


参考までに。こんな感じです。
↓　↓　↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557043/60ff4500-c97b-2bc5-115a-56614cfe441d.png)



◆参考サイト

[【Rails】日本地図を簡単に出力できるjapanMapの導入方法](https://miau-katze.com/2019/02/01/260/)

まずは日本地図の表示方法から。


(1)下記サイトよりjsファイルをダウンロードする。
[Japan Map(jQuery plugin)](http://takemaru-hirai.github.io/japan-map/)

解凍後のファイルの中から、
「jquery.japan-map.min.js」のみ
「app/assets/javascripts」　配下に格納。


(2)asset.rb配下に記述。
```
Rails.application.config.assets.precompile += %w( jquery.japan-map.js )
```


(3)application.jsへ記述。

```
import "jquery";
import "popper.js";
import "bootstrap";
import "../stylesheets/application";
```

(4)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 id="map-container"></div>
```

(5)コントローラーに記述。
@map_prefsという空の配列を作り、
投稿のprefecture（enum管理）を全て@map_prefsへ代入する。（記録をする際に、都道府県を選択する仕様にしています。）
※@posts.pluck(:prefecture)→投稿に紐づいている都道府県を配列として代入。
uniqを付ける事で、同じ都道府県の投稿があっても重複しないように。

```
def top
  @map_prefs = []
  @posts.pluck(:prefecture).uniq.each do |pref|
  @map_prefs << Post.prefectures[pref]
  end
end
```

(6)enum管理の都道府県の番号と、「jquery.japan-map.min.js」に記載の都道府県の番号(code)について。
※「jquery.japan-map.min.js」の番号-1の番号をつける。enumの番号を配列として定義しているため。


```
 enum prefecture: {
                    hokkaido: 0,
                    aomori: 1,
                    iwate: 2,
                    miyagi: 3,
                    akita: 4,
                    yamagata: 5,
                    fukushima:6,
                    ibaraki: 7,
                    tochigi: 8,
                    gunma: 9,
                    saitama: 10,
                    chiba: 11,
                    tokyo: 12,
                    kanagawa: 13,
                    nigata: 14,
                    toyama: 15,
                    ishikawa: 16,
                    fukui: 17,
                    yamanashi: 18,
                    nagano: 19,
                    gifu: 20,
                    shizuoka: 21,
                    aichi: 22,
                    mie: 23,
                    shiga: 24,
                    kyoto: 25,
                    osaka: 26,
                    hyogo: 27,
                    nara: 28,
                    wakayama: 29,
                    tottori: 30,
                    shimane: 31,
                    okayama: 32,
                    hiroshima: 33,
                    yamaguchi: 34,
                    tokushima: 35,
                    kagawa: 36,
                    ehime: 37,
                    kochi: 38,
                    fukuoka: 39,
                    saga: 40,
                    nagasaki: 41,
                    kumamoto: 42,
                    oita: 43,
                    miyazaki: 44,
                    kagoshima: 45,
                    okinawa: 46,
  }
```
```
 var definition_of_prefectures = [

        {
            "code" : 1,
            "name" : "北海道",
            "path" : [
                {
                    "coords" : [483,92,483,93,483,95,483,97,482,99,481,100,482,101,483,103,484,103,484,104,485,105,487,106,488,107,489,109,489,110,489,111,488,114,488,114,487,114,486,116,486,119,486,121,486,122,487,124,488,124,490,124,491,124,493,122,494,122,495,119,495,117,496,117,497,116,498,116,499,114,499,113,501,114,500,114,500,115,500,115,501,115,502,115,504,115,505,116,506,116,507,116,508,114,509,114,510,114,510,113,509,113,509,112,507,111,505,110,504,109,504,108,502,107,502,106,501,106,501,105,499,105,498,105,495,103,493,102,492,101,492,100,493,96,494,95,497,93,499,93,500,93,501,94,502,95,502,95,503,96,504,97,505,99,505,99,505,99,505,99,505,100,505,100,506,100,506,100,507,99,508,97,509,96,511,96,511,95,516,92,522,92,525,93,527,95,531,97,534,99,535,100,536,100,539,102,540,102,542,103,544,104,546,104,547,105,549,107,551,108,551,108,552,106,553,105,553,102,553,101,552,98,554,95,556,91,557,89,565,81,566,80,567,80,570,78,571,78,572,79,573,79,575,79,578,79,579,79,580,79,579,79,579,78,581,76,581,76,582,76,582,76,581,76,581,76,581,77,581,77,581,78,583,78,583,78,584,78,584,77,585,77,585,76,586,76,586,75,587,75,586,75,586,74,587,73,587,73,588,73,589,72,590,72,593,71,593,72,593,72,594,71,594,70,594,70,595,69,595,68,596,68,597,67,597,67,598,66,599,66,598,65,589,67,588,65,587,61,586,60,585,59,585,59,584,58,584,57,584,55,584,54,584,53,584,52,586,50,586,48,587,46,588,44,588,43,588,42,587,41,587,41,586,42,586,43,585,43,585,44,584,46,581,48,581,49,580,50,579,51,578,52,576,53,570,53,568,52,568,51,567,50,567,49,566,49,566,50,565,51,565,51,565,50,564,49,561,48,561,48,561,48,561,49,561,50,560,49,558,49,557,49,557,49,556,47,557,47,557,47,550,43,549,43,548,42,546,41,544,39,543,39,541,37,540,35,539,35,537,32,536,31,535,30,535,30,534,29,534,28,533,27,532,25,529,22,526,18,524,16,523,16,522,15,521,14,520,15,520,16,518,17,518,17,517,16,516,16,516,17,516,19,516,20,515,21,516,25,519,34,519,39,519,41,519,43,518,44,518,44,518,45,517,46,517,46,517,50,518,52,518,54,517,55,517,55,517,56,516,58,515,58,514,59,512,60,512,61,511,62,512,63,512,64,512,64,512,65,512,66,512,67,513,69,514,71,512,75,510,77,508,77,507,77,507,76,506,75,506,75,504,75,503,76,502,76,501,76,499,74,499,74,498,73,497,73,495,71,495,72,495,72,494,72,493,73,493,74,492,75,493,77,494,77,495,79,495,79,496,81,495,82,493,84,492,85,492,87,491,87,490,86,489,87,489,88,488,89,487,89,486,90,484,90,483,91,483,91,483,92,483,92]
                },{
                    "name" : "礼文島",
                    "coords" : [506,19,505,20,505,20,505,20,505,19,504,18,504,16,505,15,506,19,506,19]
                },{
                    "name" : "利尻島",
                    "coords" : [508,21,509,21,510,22,511,23,510,25,508,24,507,23,508,21,508,21]
                },{
                    "name" : "奥尻島",
                    "coords" : [477,102,477,103,476,104,476,106,475,107,474,105,474,103,475,103,475,103,476,102,477,102,477,102]
                },

                {
                    "name" : "北方領土",
                    "subpath" : [
                        {
                            "name" : "択捉島",
                            "coords" :  [645,2,647,1,649,1,650,2,649,3,649,3,649,4,649,6,647,7,644,8,643,9,643,9,643,9,641,11,639,12,638,13,638,13,636,16,635,18,632,19,631,19,631,19,630,19,629,18,628,19,629,20,628,22,627,23,625,25,623,28,622,30,621,31,620,31,619,33,618,34,617,35,616,34,616,33,617,32,617,31,616,30,617,29,617,30,618,31,618,30,618,29,619,29,620,29,620,28,621,27,621,26,620,26,619,26,619,25,620,24,621,25,622,24,622,23,622,23,623,22,624,20,625,19,626,18,626,16,628,16,629,15,630,13,631,12,632,10,631,9,632,7,633,7,634,9,635,10,639,9,641,8,642,6,642,6,642,6,644,3,645,2,645,2]
                        },{
                            "name" : "歯舞島",
                            "coords" : [606,61,605,63,604,62,604,61,605,60,606,61,606,61]
                        },{
                            "name" : "色丹島",
                            "coords" : [617,50,618,50,619,51,617,52,616,52,618,53,616,53,615,55,614,55,613,54,613,53,614,52,615,51,616,50,617,50,617,50]
                        },{
                            "name" : "国後島",
                            "coords" : [605,36,608,37,610,35,610,38,609,38,608,38,607,38,607,39,606,40,605,41,603,41,602,42,601,43,601,44,600,45,599,45,599,45,599,46,598,47,599,48,598,48,598,48,597,50,596,51,594,52,594,53,593,55,593,59,593,58,593,57,592,57,591,57,590,56,590,54,591,52,593,50,595,48,596,48,596,46,596,45,597,44,597,43,597,43,599,41,601,37,601,36,602,35,602,35,604,35,605,36,605,36]
                        }
                    ]
                }
            ]
        },

        {
            "code" : 2,
            "name" : "青森",
            "path" : [
                {
                    "coords" : [514,125,515,124,516,124,516,125,515,128,515,142,517,147,518,148,519,148,520,149,521,150,521,151,521,151,521,151,519,152,518,153,517,153,516,153,514,154,514,154,513,154,511,155,509,156,507,157,506,157,506,155,506,154,506,152,506,152,505,152,504,150,503,150,503,151,502,151,501,152,500,152,499,152,498,152,495,151,495,150,493,150,493,151,493,151,489,152,488,151,487,151,486,151,486,152,486,152,485,150,485,148,484,147,484,148,483,147,484,146,485,145,485,144,487,142,488,142,489,143,490,142,491,142,492,138,492,136,493,135,493,135,493,136,494,135,494,135,495,135,493,135,493,134,493,134,493,133,491,133,490,132,491,132,492,132,493,130,493,130,493,129,494,129,495,130,496,130,497,130,499,131,499,134,500,139,501,141,503,140,504,138,504,138,503,137,504,135,506,136,506,137,507,138,507,138,509,139,511,138,511,135,512,132,511,129,510,128,510,128,510,128,509,130,506,131,504,131,502,132,502,131,502,129,503,124,504,123,504,122,504,121,505,121,506,122,509,123,510,124,512,126,514,125,514,125]
                }
            ]
        },

        {
            "code" : 3,
            "name" : "岩手",
            "path" : [
                {
                    "coords" : [521,151,521,151,519,152,518,153,517,153,516,153,514,154,514,154,513,154,511,155,509,156,507,157,506,157,504,160,504,164,504,166,505,167,503,167,503,167,503,168,504,169,504,169,503,170,503,171,503,171,504,172,503,174,502,175,502,175,502,176,501,177,501,179,500,180,501,181,501,182,501,183,503,185,503,185,503,186,503,186,502,187,502,188,503,189,503,189,503,190,503,192,503,192,503,192,503,192,503,192,504,193,506,193,507,194,509,194,510,194,510,195,510,196,511,197,512,197,512,197,512,198,514,196,515,196,515,196,516,197,517,197,517,196,518,193,518,192,518,191,521,192,521,191,521,191,522,191,522,192,523,192,523,192,524,191,523,190,523,189,526,190,525,189,527,189,526,188,525,188,526,188,527,188,527,188,527,187,526,186,527,186,527,185,527,185,528,184,528,184,527,184,527,183,528,183,527,182,528,182,529,181,528,181,527,181,528,180,528,180,528,179,529,179,529,179,530,177,530,177,529,177,527,177,529,176,530,176,530,175,529,174,529,173,529,172,529,172,528,173,528,170,528,168,528,166,527,165,527,164,527,163,527,162,526,162,526,162,526,161,524,160,525,159,525,159,525,158,524,157,524,157,524,156,523,153,522,151,521,151,521,151,521,151]
                }
            ]
        },
~~~~~~

```


（６）先ほど記述した地図を表示させたいページに下記を追記。
変数（areas）を定義し。~46までの数字をiとして配列に代入。
codeには数字が代入されたiに1を加えた数字。（jQueryのjapan-map.jsの設定では各都道府県のcodeは1から始まるため）
colorには、先ほどの（５）で記述した、@map_prefsにiの数字が含まれていれば、#66CC66の色で表示。
含まれていなければ、#f0f0f0の色で表示させる。
prefecturesにはiに1を加えた数字。

```
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<%= javascript_include_tag 'jquery.japan-map.min.js' %>
<script>

~~~~ここから追記~~~~
　let areas = [
    <% (0..46).each do |i| %>
      {code: <%= i + 1 %>, color: '<%= @map_prefs.include?(i) ? '#66CC66' : '#f0f0f0' %>', prefectures: [<%= i + 1 %>]},
　　 <% end %>
　]
~~~~ここまで追記~~~~
    
  $(function(){
　   $("#map-container").japanMap({
          width:600,
          onSelect : function(data){
            　alert(data.name);
        　}
        });
      });
  </script>

```

（補足）
日本地図の都道府県の文字サイズや背景色など、カスタマイズしたい場合は、
（１）で導入した「jquery.japan-map.min.js」の下記の記述部分にて変更ができます。



```
;(function($){
    "use strict";

    $.fn.japanMap = function(options){
        var target = $(this);

        for (var option in options)
            if (options.hasOwnProperty(option) && options[option] == null) options[option] = undefined;

        options = $.extend({
            type                : "canvas",       // Only type of "canvas" exist now. Perhaps "svg" in future.
            selection           : "prefecture",   // "prefecture" or "area"
            width               : null,           // Canvas will be scaled to larger one of "width" and "height".
            height              : null,
            color               : "#a0a0a0",      // Default color, which used if no color is set in "areas" object.
            hoverColor          : null,           // If null, "color" will be 20% brightened when hovered.
            backgroundColor     : "#A7F1FF",  // Background color of the element, like "canvas".
            borderLineColor     : "#222222",      // Border Line of Prefectures.
            borderLineWidth     : 0.25,
            lineColor           : "#222222",      // Border Line of the element and the partition line when "movesIsland" is true.
            lineWidth           : 1,
            drawsBoxLine        : true,
            showsPrefectureName : true,
            prefectureNameType  : "full",
            showsAreaName       : false,
            areaNameType        : "full",
            areas               : definition_of_allJapan,
            prefectures         : definition_of_prefectures,
            movesIslands        : true,          //  Moves Nansei Islands (Okinawa and part of Kagishima) to the left-top space.
            font                : "MS Gothic",
            fontSize            : 10,
            fontColor           : "#000000",
            fontShadowColor     : null,
            onSelect            : function(){},
            onHover             : function(){}
        }, options);

```