Quick Start
Include jquery-japan-map.js after jQuery. Then $(selector).japanMap(options) method will create most simple clickable canvas map of prefectures of Japan.
The $.japanMap method take an object as argument which defines options. At least, you may have to implement onSelect event handler, which runs when a prefecture of the map is clicked or touched.
Here is most simple example.
<!DOCTYPE html>
<html>
<head>
<title>Japan Map - EXAMPLE 1</title>
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.japan-map.min.js"></script>
<script>
$(function(){
$("#map-container").japanMap({
onSelect : function(data){
alert(data.name);
}
});
});
</script>
</head>
<body>
<div id="map-container"></div>
</body>
</html>
Examples
You can change definition of the areas as you like.
<script>
$(function(){
var areas = [
{code : 1, name: "北海道地方", color: "#7f7eda", hoverColor: "#b3b2ee", prefectures: [1]},
{code : 2, name: "東北地方", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [2,3,4,5,6,7]},
{code : 3, name: "関東地方", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [8,9,10,11,12,13,14]},
{code : 4, name: "中部地方", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [15,16,17,18,19,20,21,22,23]},
{code : 5, name: "近畿地方", color: "#ffe966", hoverColor: "#fff19c", prefectures: [24,25,26,27,28,29,30]},
{code : 6, name: "中国地方", color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [31,32,33,34,35]},
{code : 7, name: "四国地方", color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [36,37,38,39]},
{code : 8, name: "九州地方", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [40,41,42,43,44,45,46]},
{code : 9, name: "沖縄地方", color: "#eb98ff", hoverColor: "#f5c9ff", prefectures: [47]},
];
$("#map-container").japanMap({
width: 800,
selection: "area",
areas: areas,
backgroundColor : "#f2fcff",
borderLineColor: "#f2fcff",
borderLineWidth : 0.25,
lineColor : "#a0a0a0",
lineWidth: 1,
drawsBoxLine: true,
showsPrefectureName: true,
prefectureNameType: "short",
movesIslands : true,
fontSize : 11,
onSelect : function(data){
alert(data.name);
}
});
});
</script>
<script type="text/javascript">
$(function(){
var areas = [
{"code": 1 , "name":"北海道地方", "color":"#ca93ea", "hoverColor":"#e0b1fb", "prefectures":[1]},
{"code": 2 , "name":"東北地方", "color":"#a7a5ea", "hoverColor":"#d6d4fd", "prefectures":[2,3,4,5,6,7]},
{"code": 3 , "name":"関東地方", "color":"#84b0f6", "hoverColor":"#c1d8fd", "prefectures":[8,9,10,11,12,13,14]},
{"code": 4 , "name":"北陸・甲信越地方", "color":"#52d49c", "hoverColor":"#93ecc5", "prefectures":[15,16,17,18,19,20]},
{"code": 4 , "name":"東海地方", "color":"#77e18e", "hoverColor":"#aff9bf", "prefectures":[21,22,23,24]},
{"code": 6 , "name":"近畿地方", "color":"#f2db7b", "hoverColor":"#f6e8ac", "prefectures":[25,26,27,28,29,30]},
{"code": 7 , "name":"中国地方", "color":"#f9ca6c", "hoverColor":"#ffe5b0", "prefectures":[31,32,33,34,35]},
{"code": 8 , "name":"四国地方", "color":"#fbad8b", "hoverColor":"#ffd7c5", "prefectures":[36,37,38,39]},
{"code": 9 , "name":"九州地方", "color":"#f7a6a6", "hoverColor":"#ffcece", "prefectures":[40,41,42,43,44,45,46]},
{"code":10 , "name":"沖縄地方", "color":"#ea89c4", "hoverColor":"#fdcae9", "prefectures":[47]}
];
$("#map").japanMap(
{
areas : areas,
selection : "prefecture",
borderLineWidth: 0.25,
drawsBoxLine : false,
movesIslands : true,
showsAreaName : true,
width: 800,
font : "MS Mincho",
fontSize : 12,
fontColor : "areaColor",
fontShadowColor : "black",
onSelect:function(data){
alert(data.name);
},
}
);
});
</script>
Options
japamMap method takes an options object as an argument. this object has parameters as following. Unit of sizes is px.
type
Type of the element created by the plugin. Because only "canvas" is defined as far, this parameter has no meaning. Default value is "canvas".
type : "canvas"
width, height
Width and height of the element (such as canvas) of hole clickable map. When both values are set, larger values which keep aspect ratio of the map are used. Default value is 651 and 571.
width : 800
color
Base background color of prefectures or areas. This value is used when vakues of areasObject.color (see below) are not defined. This value also used as text color whent options.showsPrefectureName parameter (see below) is true. Default value is "#a0a0a0".
color : "#000000"
hoverColor
Base background color of prefectures or areas when mouse is on. This value is used when vakues of areasObject.color (see below) are not defined. 20% brightened of color is used as default value.
hoverColor : "red"
backgroundColor
Background color of element of the map, "canvas" for example. Default value is "transparent".
backgroundColor : "#eef8ff"
lineColor, lineWidth
Color and width of border lines of element of the map. Also used as separating line when options.movesIslands is true. Default values are "#a0a0a0" and 1.
lineColor : "#ffffff",
lineWidth : 0.5
drawsBoxLine
Flags if border lines of element of the map are drawn or not. Default value is true.
drawsBoxLine : false
borderLineColor, borderLineWidth
Color and width of border lines of prefectures. Default values are "#ffffff" and 0.25.
borderLineColor : "#eef8ff",
borderLineWidth : 0.5
showsPrefectureName, showsAreaName
If true, the names of prefectures (or areas) are shown on the map. Default value is false. If you set both of parameters are true, which is draw on map is depends on selection parameter.
showsPrefectureName : true
showsAreaName parameter is available in >= 0.0.4.
font, fontSize, fontColor, fontShadowColor
You can set font styles to draw names of prefectures or areas on the map. font parameter means font's name and if not set client default font is used. You can set fontSize as number. However, if you set "areaColor" to this parameter, colors of fonts will be the same as that of area's background. Default font color is that of options.color parameter. If you set fontShadowColor, fonts will have shadow (or blur) around them.
font : "MS mincho",
fontSize : 12,
fontColor : "#000000",
fontShadowColor : "white"
These parameters are available in >= 0.0.4.
prefectureNameType
String parameter how shows the names of prefectures. "full" or "kanji" shows full name as Kanji like 東京都 or 大阪府. "short" shows shorten name as Kanji like 東京 or 大阪. "english" or "romaji" shows alphabetical name like Tokyo or Osaka. Default value is "full".
areaNameType
String parameter how shows the names of areas. "full" shows full name of each area you defined. "short" shows shorten name which "地方" is omitted. "english" shows alphabetical name if you define english parameter to each of areasObject which is set to options.areas parameter (see below).
This parameter is available in >= 0.0.4.
movesIslands
Flags if Nansei Islands are moved to top-left separated space of the map, so that width of the map is used economically. Default value is false.
movesIslands : true
selection
You can choose which is selected on the map, "prefecture" or "area" of Japan. Here the "area" means group of prefectures, such as 関東(Kanto) or 近畿(Kinki). Default value is "prefecture".
selection : "area"
areas
If you set "area" to the selection parameter, you have to define areas by creating areas array of object.
areas : areasObject
areas parameter requires array of object like
var areasObject = [
...,
{
"code": 3,
"name":"関東地方",
"color":"#84b0f6",
"hoverColor":"#c1d8fd",
"prefectures":[8,9,10,11,12,13,14]
},
...
];
Each object must have parameters as following.
code (required)
Any number or string to recognize different areas. This code can be referred in onSelect and onHover event handlers.
name (required)
Any string which represents the area, such as "関東地方"(Kanto) or "近畿地方"(Kinki). This code can be referred in onSelect and onHover event handlers.
prefectures (required)
Array of the prefecture code (see definition below) which belongs to the area.
color
Background color of the area. Usually colors are important to classify different areas. If not set, value of options.color parameter will be used as Default value.
hoverColor
Background color of the area when mouse pointer is on. If not set, 20% brighten value of color will be used.
event handlers
onSelect : function(data)
It runs when you click or tap some prefecture (or area, it depends on options.selection). The argument data has parameters data.code, data.name, data.area (an object you defined for options.areas). data.code equals to data.area.code when you set options.selection = "area".
onSelect : function(data){
alert(data.name);
}
onHover : function(data)
It runs when your mouse is on some prefecture (or area). The argument data is the same as that of onSelect.
onHover: function(data){
console.log(data);
}
Prefecture codes
| code | name ("full" or "kanji") | name ("short") | name ("english" or "romaji") |
|---|---|---|---|
| 1 | 北海道 | 北海道 | Hokkaido |
| 2 | 青森県 | 青森 | Aomori |
| 3 | 岩手県 | 岩手 | Iwate |
| 4 | 宮城県 | 宮城 | Miyagi |
| 5 | 秋田県 | 秋田 | Akita |
| 6 | 山形県 | 山形 | Yamagata |
| 7 | 福島県 | 福島 | Fukushima |
| 8 | 茨城県 | 茨城 | Ibaraki |
| 9 | 栃木県 | 栃木 | Tochigi |
| 10 | 群馬県 | 群馬 | Gunma |
| 11 | 埼玉県 | 埼玉 | Saitama |
| 12 | 千葉県 | 千葉 | Chiba |
| 13 | 東京都 | 東京 | Tokyo |
| 14 | 神奈川県 | 神奈川 | Kanagawa |
| 15 | 新潟県 | 新潟 | Niigata |
| 16 | 富山県 | 富山 | Toyama |
| 17 | 石川県 | 石川 | Ishikawa |
| 18 | 福井県 | 福井 | Fukui |
| 19 | 山梨県 | 山梨 | Yamanashi |
| 20 | 長野県 | 長野 | Nagano |
| 21 | 岐阜県 | 岐阜 | Gifu |
| 22 | 静岡県 | 静岡 | Shizuoka |
| 23 | 愛知県 | 愛知 | Aichi |
| 24 | 三重県 | 三重 | Mie |
| 25 | 滋賀県 | 滋賀 | Shiga |
| 26 | 京都府 | 京都 | Kyoto |
| 27 | 大阪府 | 大阪 | Osaka |
| 28 | 兵庫県 | 兵庫 | Hyogo |
| 29 | 奈良県 | 奈良 | Nara |
| 30 | 和歌山県 | 和歌山 | Wakayama |
| 31 | 鳥取県 | 鳥取 | Tottori |
| 32 | 島根県 | 島根 | Shimane |
| 33 | 岡山県 | 岡山 | Okayama |
| 34 | 広島県 | 広島 | Hiroshima |
| 35 | 山口県 | 山口 | Yamaguchi |
| 36 | 徳島県 | 徳島 | Tokushima |
| 37 | 香川県 | 香川 | Kagawa |
| 38 | 愛媛県 | 愛媛 | Ehime |
| 39 | 高知県 | 高知 | Kochi |
| 40 | 福岡県 | 福岡 | Fukuoka |
| 41 | 佐賀県 | 佐賀 | Saga |
| 42 | 長崎県 | 長崎 | Nagasaki |
| 43 | 熊本県 | 熊本 | Kumamoto |
| 44 | 大分県 | 大分 | Oita |
| 45 | 宮崎県 | 宮崎 | Miyazaki |
| 46 | 鹿児島県 | 鹿児島 | Kagoshima |
| 47 | 沖縄県 | 沖縄 | Okinawa |