View on GitHub

Japan Map ( jQuery plugin )

jQuery plugin to show clickable map of prefectures (or area) of Japan.

Download this project as a .zip file Download this project as a tar.gz file

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>

DEMO - EXAMPLE 1

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>

DEMO - EXAMPLE 2

<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>

DEMO - EXAMPLE 3

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