備忘録のために。
旅行した場所を投稿するアプリを作成する上で投稿をする→旅行した都道府県に色を付ける機能を作成しました。
参考までに。こんな感じです。
↓ ↓ ↓
◆参考サイト
【Rails】日本地図を簡単に出力できるjapanMapの導入方法
まずは日本地図の表示方法から。
(1)下記サイトよりjsファイルをダウンロードする。
Japan Map(jQuery plugin)
解凍後のファイルの中から、
「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);