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>
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
If true, the names of prefectures are shown on the map. Default value is false.
showsPrefectureName : true
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".
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 object array is 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.