世界地図を描きたい。というわけで、地図の描画ライブラリを試している。
今回試してみたのは svgMap.js。
-
svgMap.js - https://www.cssscript.com/interactive-svg-world-map/
(公式サイトはここでいいのだろうか...)
ここから、 svgMap-master.zip をダウンロードし、利用してみた。
簡単メモ
- 準備する HTML タグは div １つ
- その div の後ろで script タグで svgMap.js を読み込む必要がある (div の前に読み込むとダメ)
- データは js 内でいろいろ準備する
- サンプルでは、マウスオーバーで国の情報を tooltip 的に表示してくれる。
- 国より粒度の小さいデータ (日本でいうと「県」とか) が含まれているかどうか、は調べきれなかった。
- 国情報内の国旗データは https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/us.svg などから取得するようになっている。
単体で完結しないのはちょっと不便かも (インターネットがない環境とか)。- 国旗データの供給元は、オプションで変更できるようだった。
new svgMap({
targetElementID: 'svgMapExample',
data: svgMapDataGPD,
// here !!!
flagURL: 'https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/{0}.svg',
});
試した結果
アフガニスタンだけ詳細データが表示されるのは、後述する my-worldmap.js にて、データを入力しているため。
試したコード
index.html
<html>
<head>
<title>svgMap のサンプル</title>
<link href="svgMap-master/dist/svgMap.css" rel="stylesheet"> <!-- svgMap-master.zip に入っているファイル -->
<script src="svgMap-master/dist/svgMap.js"></script> <!-- 同上 -->
<link href="my-worldmap.css" rel="stylesheet">
</head>
<body>
<div id="svgMapExample"></div>
<script src="my-worldmap.js"></script>
</body>
</html>
my-worldmap.css
(これは適当。なくてよい)
#svgMapExample:before {
content: "my worldmap";
border-bottom: 1px solid #999;
display: block;
text-align: center;
font-family: consolas;
padding: 7px;
background-color: #f9f9f9;
border-radius: 7px 7px 0 0 ;
}
#svgMapExample {
border-radius: 7px;
border: 1px solid #999;
min-height: 100px;
}
my-worldmap.js
https://www.cssscript.com/interactive-svg-world-map/ 内のサンプルコードをただ写経した感じ。
// GDP data
var svgMapDataGPD = {
data: {
gdp: {
name: 'GDP per capita',
format: '{0} USD',
thousandSeparator: ',',
thresholdMax: 50000,
thresholdMin: 1000
},
change: {
name: 'Change to year before',
format: '{0} %'
},
gdpAdjusted: {
name: 'Purchasing Power Parity',
format: '{0} USD',
thousandSeparator: ',',
thresholdMax: 50000,
thresholdMin: 1000
},
changeAdjusted: {
name: 'Change to year before',
format: '{0} %'
}
},
applyData: 'gdpAdjusted',
values: {
AF: {gdp: 587, change: 4.73, gdpAdjusted: 1958, changeAdjusted: 0.02},
// ...
}
}
new svgMap({
targetElementID: 'svgMapExample',
data: svgMapDataGPD,
});
さらなるオプションは？
https://www.cssscript.com/interactive-svg-world-map/ にある通り。
svgMap のコンストラクタとして渡してあげればよい様子。