WEBサイトを構築していて、上図のような日本地図を描画したい時があります。

 

 

画像で作ると、
仕上がりが荒くなったてしまったり、
ホバーで色を変えるのに何枚も画像を作らなければならなかったり、
色や座標の変更が非常に面倒です。

 

 

そんな時におすすめなのが、HTML5がサポートしているcanvasを使った方法です。

 

canvasではこのような複雑な画像の描画も実現できます。

 

 

ここでは、canvasを使って日本地図を表示させる基本の手順を紹介していきます。

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

 

既に、日本地図描画用のjQueryプラグインが存在しています。

これを使うと手早く日本地図を描画することができます。

 

 

プラグインは、以下のサイトから一式ダウンロードすることができます。

 

外部ページ>> 日本地図描画jQueryプラグイン「JapanMap」の公式Githubサイト

 

jQueryプラグインをサーバーにアップロードする

ダウンロードしたjQueryプラグインをサーバーにアップロードします。

 

 

このとき、
必要となるのはjQueryの本体プログラムと「jquery.japan-map.min.js」だけです。

 

アップロードの際にはサーバー内が散らからないように、「js」といった名前のディレクトリを作って、その中に格納しておくと良いでしょう。

 

jQueryをサイトに読み込ませる

サイト内のヘッダーまたはフッターに以下のような記述でjQueryファイルを読ませる記述を書きます。

 

ファイルパスは各自調整してください。

 

javascript

 

表示場所にIDを降る

このプラグインでは、
IDを振った表示エリアに対して、表示用javascriptで指定した内容の描画を行うものです。

 

以下のように、表示領域にIDを振っておきましょう。

 

HTML

 

表示用javascriptを記述する

表示用javascriptを記述します。

 

以下のコードは一番シンプルな内容です。

 

javascript

 

他にも以下のような表示方法がありますので、
自分が表示したいスタイルに合わせて参照してください。

 

 

 

おすすめの記事