[JS]画像を用意しなくていいから簡単!クリッカブルに対応した日本の都道府県の地図を表示するスクリプト -Japan Map

日本の都道府県の地図をクリッカブルマップで表示する純国産のjQueryのプラグインを紹介します。

地図自体はCanvasで描かれているので、画像を用意する必要はありません。

デモのキャプチャ

Japan Map
Japan Map -GitHub

Japan Mapのデモ

デモはCanvas対応ブラウザでご覧ください。

デモのキャプチャ

デモページ

各都道府県をホバーするとハイライトし、クリックすると名称が表示されます。
名称は「東京都」「Tokyo」の漢字表記と英語表記に対応しています。

デモのキャプチャ

作者様がカラフル版のデモもアップしてくれたので、追加しました。
こちらは名称が最初から表示された状態です。

サイトのキャプチャ

デモページ 2

Japan Mapの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプトを外部ファイルとして記述します。

<head>
  ...
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="jquery.japan-map.min.js"></script>
</head>

Step 2: HTML

日本地図を配置するdivをセットします。

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

Step 3: JavaScript

jQueryのセレクタで配置する場所を指定し、スクリプトを実行します。

<script>
  $(function(){
    $("#map-container").japanMap({
      onSelect : function(data){
        alert(data.name);
      }
    });
  });
</script>

スクリプトのオプションでは、地図のサイズやカラーを変更できます。

width (default: 651)
地図の幅
heigth (default: 571)
地図の高さ
color (default: #a0a0a0)
地図のカラー
hoverColor (default: red)
ホバー時のカラー
backgroundColor (default: #eef8ff)
背景のカラー
lineColor (default: #a0a0a0)
地図の枠のラインのカラー
lineWidth (default: 1)
地図の枠のラインのサイズ
borderLineColor (default: #ffffff)
県境のボーダーのカラー
borderLineWidth (default: 0.25)
県境のボーダーのサイズ

地図のCanvasには、下記を使用しているとのことです。

サイトのキャプチャ

canvas map

sponsors

top of page

©2018 coliss