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