日本地図を簡単に扱えるjQueryプラグイン「JapanMap」

Japan Map ( jQuery plugin )

都道府県をクリックできる日本地図

甲子園が始まるので代表校をまとめてみようと思い、日本地図をHTMLやCSSで表現できないかなーと探してみるとなかなか無いんですよね。テーブルで書くともの凄くややこしくなりそうだなと思っているところに「Japan Map」というjQueryプラグインに遭遇しました。

「canvas」というHTML5の機能を使用しており、美麗な日本地図が画像無しで使用できます。すごい!

プラグインをダウンロードする

このページ上部にあるリンクから作成者様のサイトへ行き「Japan Map」の本体をダウンロードします。
「tar.gz」と「zip」がありますのでお好みの方でどうぞ。

そして、jQueryを動かすにはjQuery本体も必要ですので、無い場合は公式に拾いに行きましょう。
すでに使用している場合は次に進んで下さい。

Download jQuery | jQuery

記事を書いている時点(2014年8月1日)でのjQuery1系の最新は「1.11.1」ですので、以下は「jquery-1.11.1.min.js」で表記します。

「jQuery1.x系」の一番上、「Download the compressed, production jQuery 1.11.1」をクリックして圧縮版をダウンロードします。

2つのファイルをアップロード

手に入れたjQuery本体「jquery-1.11.1.min.js」と、「Japan Map」からDLしたフォルダを解凍した中にある「jquery.japan-map.min.js」の2つをサーバにアップロードします。

私の場合はテーマフォルダの中に「js」というフォルダを新規作成してその中に2つとも入れました。
ご自身の環境に合わせてアップロードしてあげてください。

さて、ここからちょっと面倒な事をしています。

特定の投稿でだけ読み込む

単純な使い方は「header.php」の<head>内にアップロードした上記2ファイルへのパスと地図用のスクリプトを記述するのですが、地図を使用する投稿は限られていますし各都道府県をクリックしたい時もあれば地方ごとにクリックしたい時もあるだろうと思います。

それら全てをheader内に書くと文量も多く、さらに関係無い投稿でも毎回読み込んでしまいます。

そこで、WordPressの便利な機能「カスタムフィールド」を使用して、地図を使用する投稿の<head>内にだけ必要なjsファイルへのリンクとスクリプトが読み込まれるようにします。

全ての投稿に読み込まれてもよいので「header.php」の<head>内に直接書くという方は「都道府県全てをクリックできる地図を出力する」という項目まで進んで下さい。

functions.phpへ追記

functions.phpに以下を追記します。

functions.phpの編集にはご注意下さい。全角スペースなどが入ってしまうとエラーを起こし真っ白になって、管理画面にも入れなくなります。必ずファイルのバックアップと復帰できる環境を用意してから編集を行って下さい。
functions.php
// header内に任意のコードを読み込む
function head_original_load(){
    if(is_single() || is_page()){
        if($head_original_code = get_post_meta(get_the_ID(), 'head_load', false)){
            foreach($head_original_code as $head_code){
                echo $head_code . "\n";
            }
        }
    }
}
add_action('wp_head', 'head_original_load');
functions.phpは先頭行が <?php で始まり、最終行が ?> になっています。
その間のどこかへ記入して下さい。最終行 ?> のすぐ上で大丈夫です。

こちらのブログ様をそのまま丸ごと参考にさせて頂きました。
参考というより丸ごとそのまま使わせて頂いております。ありがとうございます。

WordPressでカスタムフィールドを使って任意のコードやファイルをhead内に読み込ませる | bl6.jp

functions.phpの上書きが完了したら、投稿画面のカスタムフィールドに新規追加で

cus

「head_load」を作ると、右側の値の中に書いた内容が<head>内に読み込まれるようになります。

cus2

これでカスタムフィールドに「head_load」を作った投稿にだけ、<head>内に指定した好きな内容を読み込ませることが可能になりました。

ここで使う「head_load」という名前は特別なものではありません。functions.phpに書き込んだ内容の4行目で自ら指定したものですので任意で変更も可能です。

都道府県全てをクリックできる地図を出力する

少し寄り道をしましたが、ここから先の内容はどちらにしても<head>内へ読み込まれるため共通の内容です。
「Japan Map」を投稿に出力させるために必要なのは下記のどちらか一方です。

■「header.php」の<head>~</head>内に下のコードを直接記入する
■「functions.php」に必要なコードを書き、投稿画面のカスタムフィールドに下のコードを書いて<head>~</head>内に読み込ませる

やっていることはどちらも同じなのですが、前者の方法では地図を表示させない投稿の時も毎回地図用のスクリプトを読み込んでしまいます。少しでも表示を軽くするために後者の方法を選択しています。


それでは下記の内容を説明していきます。

1~2行目で必要なファイルを読み込んでいます。
「設置場所へのパス」は自身の環境に合わせて書き直して下さい。

4行目からは地図の内容です。

以下の例はプラグイン公式ページにある「DEMO – EXAMPLE 2」を少し変更したものです。

<script type="text/javascript" src="設置場所へのパス/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="設置場所へのパス/jquery.japan-map.min.js"></script>

<script type="text/javascript">
$(function(){        
    var areas = [
{code : 1, name: "北海道", color: "#7f7eda", hoverColor: "#b3b2ee", prefectures: [1]},
{code : 2, name: "青森", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [2]},
{code : 3, name: "岩手", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [3]},
{code : 4, name: "宮城", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [4]},
{code : 5, name: "秋田", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [5]},
{code : 6, name: "山形", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [6]},
{code : 7, name: "福島", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [7]},
{code : 8, name: "茨城", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [8]},
{code : 9, name: "栃木", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [9]},
{code : 10, name: "群馬", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [10]},
{code : 11, name: "埼玉", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [11]},
{code : 12, name: "千葉", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [12]},
{code : 13, name: "東京", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [13]},
{code : 14, name: "神奈川", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [14]},
{code : 15, name: "新潟", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [15]},
{code : 16, name: "富山", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [16]},
{code : 17, name: "石川", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [17]},
{code : 18, name: "福井", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [18]},
{code : 19, name: "山梨", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [19]},
{code : 20, name: "長野", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [20]},
{code : 21, name: "岐阜", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [21]},
{code : 22, name: "静岡", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [22]},
{code : 23, name: "愛知", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [23]},
{code : 24, name: "三重", color: "#ffe966", hoverColor: "#fff19c", prefectures: [24]},
{code : 25, name: "滋賀", color: "#ffe966", hoverColor: "#fff19c", prefectures: [25]},
{code : 26, name: "京都", color: "#ffe966", hoverColor: "#fff19c", prefectures: [26]},
{code : 27, name: "大阪", color: "#ffe966", hoverColor: "#fff19c", prefectures: [27]},
{code : 28, name: "兵庫", color: "#ffe966", hoverColor: "#fff19c", prefectures: [28]},
{code : 29, name: "奈良", color: "#ffe966", hoverColor: "#fff19c", prefectures: [29]},
{code : 30, name: "和歌山", color: "#ffe966", hoverColor: "#fff19c", prefectures: [30]},
{code : 31, name: "鳥取", color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [31]},
{code : 32, name: "島根", color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [32]},
{code : 33, name: "岡山", color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [33]},
{code : 34, name: "広島", color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [34]},
{code : 35, name: "山口", color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [35]},
{code : 36, name: "徳島", color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [36]},
{code : 37, name: "香川", color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [37]},
{code : 38, name: "愛媛", color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [38]},
{code : 39, name: "高知", color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [39]},
{code : 40, name: "福岡", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [40]},
{code : 41, name: "佐賀", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [41]},
{code : 42, name: "長崎", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [42]},
{code : 43, name: "熊本", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [43]},
{code : 44, name: "大分", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [44]},
{code : 45, name: "宮崎", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [45]},
{code : 46, name: "鹿児島", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [46]},
{code : 47, name: "沖縄", color: "#eb98ff", hoverColor: "#f5c9ff", prefectures: [47]},
    ];

    $("#map-container").japanMap({
        width: 730,
        selection: "area",
        areas: areas,
        backgroundColor : "#dcdcdc",
        borderLineColor: "#f2fcff",
        borderLineWidth : 0.25,
        lineColor : "#a0a0a0",
        lineWidth: 1,
        drawsBoxLine: true,
        showsPrefectureName: true,
        prefectureNameType: "short",
        movesIslands : true,
        fontSize : 11,
        fontShadowColor : "#fff",
        onSelect : function(data){
            alert(data.name);
        }
    });
});
</script>

「DEMO – EXAMPLE 2」は東北や関東など地方で分けてありますが、それを各都道府県別にばらしました。

デモでは東北だと「青森,岩手,宮城,秋田,山形,福島」にそれぞれ割り振られた番号「2,3,4,5,6,7」を、

{code : 2, name: “東北地方”, color: “#759ef4”, hoverColor: “#98b9ff”, prefectures: [2,3,4,5,6,7]},

とまとめて書かれています。

すると東北5県がまとまったリンクになり、クリックすると”東北地方”というアラートが開きます。
これを県ごとにばらしました。地方を県名に書き換え code も合わせて変えています。

{code : 2, name: “青森”, color: “#759ef4”, hoverColor: “#98b9ff”, prefectures: [2]},
{code : 3, name: “岩手”, color: “#759ef4”, hoverColor: “#98b9ff”, prefectures: [3]},
{code : 4, name: “宮城”, color: “#759ef4”, hoverColor: “#98b9ff”, prefectures: [4]},
{code : 5, name: “秋田”, color: “#759ef4”, hoverColor: “#98b9ff”, prefectures: [5]},
{code : 6, name: “山形”, color: “#759ef4”, hoverColor: “#98b9ff”, prefectures: [6]},
{code : 7, name: “福島”, color: “#759ef4”, hoverColor: “#98b9ff”, prefectures: [7]},

これで各県をクリックできるようになり、name の中身が表示されます。

その他にいじった部分は以下のとおりです。

57行目で横幅をこのブログに合わせて変更。
60行目もこのブログの色に合わせて背景色を変更。
70行目は都道府県名の視認性を上げるために文字に白い影ができるように追記。(デモではこうなっているのですが、デモのソースにはこの記述が無かったので書き足してあります。また、この影はブラウザによっては逆に見辛くなる事もあるようです。)


あとはワードプレスの記事中で「地図を表示したい箇所」へ下記の1行を記入するだけで地図が出力されます。

<div id="map-container"></div>

↓こんな感じで出力されます。

アラートウィンドウも装飾したいのですが、どこをいじっていいのかすらわからず放置しております。

設定次第では沖縄の位置を左上のウィンドウに簡略化せず正しい位置に表示したり、島名なども表示することができるようです。

Options の説明

変更できるオプションの内容です。

width, height

地図の横幅と高さです。横幅だけ記入すれば高さは合わせてくれます。

color

都道府県、または地方の背景色です。

hoverColor

都道府県、または地方にマウスを乗せた時に変わる背景色です。

backgroundColor

地図の背景色、いわゆる海の部分の色です。

lineColor, lineWidth

地図の大外の枠の色と太さです。

drawsBoxLine

都道府県の境目の線を引くかどうか、デフォルトでは引かれています。

borderLineColor, borderLineWidth

都道府県の境目の線の色と太さです。

showsPrefectureName, showsAreaName

都道府県、または地方名を地図上に表記するかどうか、デフォルトでは表記されます。

font, fontSize, fontColor, fontShadowColor

都道府県、または地方の文字に関する装飾です。
字体、サイズ、色、影。

prefectureNameType

都道府県表示の際に「東京都」「東京」「Tokyo」などの表記を選べます。
full = 東京都
short = 東京
english = Tokyo

areaNameType

地方表示の際に「関東地方」「関東」などの表記を選べます。
full = 関東地方
short = 関東
英語表記にするには「areasObject」へ定義をする必要があるようです。

movesIslands

沖縄を左上に配置するか、地図そのままで表記するかを選べます。
デフォルトではそのままの地図になっています。

selection

都道府県ごとか、地方ごとかを選べます。「prefecture」か「area」を選択します。

areas

上の「selection」パラメータで「area」を選んだ場合、ここでクラス名を決めて中身を個別に決めることができます。仮にクラス名を「areasObject」にするならばこう書きます。

areas : areasObject,

その上で「areasObject」の中身を別途書きます。

var areasObject = [
    {
    "code": 3,
    "name":"関東地方", //ここの中身がアラートで表示される
    "color":"#84b0f6", //都道府県、または地方の色
    "hoverColor":"#c1d8fd", //マウスを乗せた時の色
    "prefectures":[8,9,10,11,12,13,14] //都道府県ナンバーを複数書くと一塊になる
    },
];

この記事で紹介している地図はこの機能を使った上で都道府県をばらばらにしています。
なぜかといいますと、ここから各県の表記内容を変えることで甲子園の代表校などを表示できるようにしたかったからです。

都道府県のナンバーは公式サイトをご参照下さい。

onSelect : function(data) , onHover : function(data)

クリック時にウィンドウが開くか、マウスを乗せた時に内容が表示されるか(デモ3)を変更できます。

間違えているところがあったらすみません。
「Japan Map」のご紹介でした。

コメント

 DISQUSコメントシステムとは?
DISQUSコメントシステムFacebook Twitter Google などのアカウントを使用してコメントを残すことができます。
また、それらを使いたくない場合でも メールアドレスのみ でコメントが可能で、その際のアドレスはもちろん非公開です。
YouTubeTweet などはURLを貼ると自動で埋め込み表示されますし、画像をアップすることもできます。
お気軽にコメント頂けると嬉しいです。

Pingback & Trackback

New Post



Random


CLOSE