各都道府県をそれぞれ選択・クリック可能なインタラクティブな日本地図を生成するネイティブJavaScript建てのプラグイン「SVG Japan」を作ったので、その紹介と使い方をまとめておく。ちなみにソースコードはgithubにて公開中。
プラグインの機能
- 複数の種類の日本地図を生成可能（v1.1.0時点で3種類）。
- 地図のアウトライン、都道府県の境界線を表示／非表示できる（線の色変更も可能）。
- 各都道府県を自由にグループ化してオリジナルの地域を設定できる。
- 地図全体を任意の統一色に変更できる。
- 各都道府県、地域の通常時とアクティブ時の色を設定できる。
- 都道府県にマウスオーバーした時のチップヘルパーを表示／非表示できる。
- 都道府県がクリックされた時のイベントをJavaScriptで取得できる。
導入方法
- githubリポジトリからcloneする:
git clone https://github.com/ka215/svg-japan.git
- npmからインストールする:
npm install svg-japan
- 最新リリースパッケージ（アーカイブファイル）をダウンロードする:
ZIP／TAR.GZ形式のダウンロード - CDNからHTML内に直接読み込む:
<script src="https://cdn.jsdelivr.net/gh/ka215/svg-japan@main/dist/svg-japan.min.js"></script>
使用方法
1. HTML内にプラグインスクリプトを読み込む。
<script src="/path/to/svg-japan.min.js"></script>
2. 日本地図を表示したい要素をマークアップする。
<div id="my-map-container"></div>
3. プラグインを実行する。
svgJapan({ element: "#my-map-container" })
または、2. を省略して、JavaScriptで直接日本地図を出力することもできます。
var map = svgJapan()
document.body.appendChild( map.map_container )
なお、プラグインスクリプトが完全に読み込まれる前にプラグインの実行処理が行われると、エラーとなります。プラグインの処理がDOMコンテンツの読み込みが終了した後に、プラグインが実行されるようにしてください（下記参照）。
document.addEventListener( 'DOMContentLoaded', function() {
svgJapan()
}, false)
対応ブラウザ
JSのトランスパイル処理の対象ブラウザ指定は下記のようになっています。
targets: {
chrome: "67",
edge: "17",
firefox: "60",
ie: "11",
safari: "11.1",
},
スマホでも動作しますが、マウスオーバーのイベントは発生しません。
なお、IE10以下等のレガシーブラウザでは動作しません（もし動かしたいのであれば、ソースのトランスパイルターゲットを拡張してから必要なpolyfill入れてBabelり直す必要があるでしょう）。
デモページ
オプション
プラグインの実行時にオプションを指定することで、生成される日本地図の動作を制御できます。オプション指定は例えば下記のようになります。
svgJapan({
element: "#my-map",
type: "dense",
regionality: true,
})
オプション一覧
| オプション(キー)名 | 値の型 | 初期値 | 説明 |
|---|---|---|---|
| element | String | – | 日本地図が挿入される親要素のセレクタ |
| type | String | "full" |
full: 全景型の日本地図を生成 dense: 密集型の日本地図を生成 deform: デフォルメ型の日本地図を生成 |
| stroked | Boolean | true |
地図に枠線を描画するかどうか |
| strokeColor | String | "#333333" |
枠線の色 |
| activeColor | String | "#D70035" |
オンマウス時の都道府県の色 |
| withTips | Boolean | true |
オンマウス時にチップヘルパーを表示するかどうか |
| regionality | Boolean | false |
地域表示を有効化するかどうか |
| regions | Array(Object) | null |
地域の定義。初期プリセットとして「八地方区分」が定義されている |
| uniformly | Boolean | false |
地図を統一色で塗りつぶすかどうか。この設定は regions や prefColors より優先される |
| uniformColor | String | "#C0C0C0" |
統一色の色 |
| prefColors | Object | {} |
各都道府県の個別通常色。"Tokyo": "#777777",...のように英記（キャピタルケース）の都道府県名をキー、色を値としたペア値で指定する |
| width | String | – | 地図の表示横幅。未指定時は max-content となる |
| height | String | – | 地図の表示縦幅。未指定時は max-content となる |
※ prefColors のキーとなる英記の都道府県名は ISO 3166-2:JP に準じています。
地域の定義
オプションのregionsに地域設定のオブジェクト型配列を定義することで、都道府県をグループ化することができる。グループ化された地域はregionalityを有効化することで、地図の表示に反映される。
地域の指定方法は下記の例を参照してほしい。
regions: [
{ id: 1,
name: "人口500万人以上",
prefs: [ 13, 14, 27, 23, 11, 12, 28, 1, 40 ],
color: "#EF857D",
active: "#00A960"
},
{ id: 2,
name: "人口200万人以上500万人未満",
prefs: [ 22, 8, 34, 26, 4, 15, 20 ],
color: "#F6B483",
active: "#00A960"
},
{ id: 3,
name: "人口100万人以上200万人未満",
prefs: [ 21, 9, 10, 33, 7, 24, 43, 46, 47, 25, 35, 38, 29, 42, 2, 3, 17, 44, 6, 45, 16 ],
color: "#F7B977",
active: "#00A960"
},
{ id: 4,
name: "人口100万人未満",
prefs: [ 5, 37, 30, 41, 19, 18, 36, 39, 32, 31 ],
color: "#FAD09E",
active: "#00A960"
}
]
地域オブジェクトについて
| プロパティ名 | 値の型 | 説明 |
|---|---|---|
| id | Integer | 地域ID（Region ID）として内部処理の識別子に使用される。クリック時などに参照可能 |
| name | String | 地域名。チップヘルパーに表示される文字列 |
| prefs | Array(Number) | 地域に属する都道府県。都道府県コード（整数値）を列挙して定義する |
| color | String | 地域の通常色。 |
| active | String | 地域のアクティブ色。地域に属する都道府県にマウスオーバーした時に地域全体に適用される色 |
※ 都道府県コードはJISコード（JIS X 0401）に準じた整数値となっている。
メソッド
今のところなし。
将来的に initialized と destroy を追加する予定。
イベント
日本地図の都道府県をクリックした時にプラグイン専用のイベント svgmap.click が発生する。このイベントはJavaScriptのグローバルスコープのイベントハンドラでキャッチすることができる。
使用例は下記の通り。
document.addEventListener('svgmap.click', function(e) {
var prefName = e.target.getAttribute('data-name')
alert( prefName + 'がクリックされました。' )
}, false)
ライセンス
このプラグインはMITライセンスです。
個人・商用問わず、ご自由にお使いください。
こんな使い方してます──とか教えていただけるととても嬉しいですw
その他
オリジナルソースは github で公開しています。
不具合等はgithubのissuesまでお願いします。
今後も選べる地図のパターンを増やしていこうと思ってますが、SVGのパスデータが結構重たいので、どこかのタイミングでパスデータを分離する構造にリファクタリングしなきゃならないかも知れないな……。
