https://worldmapjs.org/ を使ってみました。
が、先に書いておくと、うまく利用できませんでした
やったこと
-
https://worldmapjs.org/ から
worldmap.v1.jsとworldmap.v1.cssをダウンロード- ページ内のリンクは 404 になってしまう。
- なので、上記ページ自体が利用している下記の URL からダウンロードした
- ページ内のリンクは 404 になってしまう。
- 上記を自前の index.html にくみこむ。
- DOWNLOADS & INSTALLATION を参考に次のようにしてみた。
<html>
<head>
<title>WorldMap.js のサンプル</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<!-- Latest compiled JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
</head>
<body>
<div id="mapcontainer" align="center"></div>
<link rel="stylesheet" href="worldmap.v1.css">
<script src="worldmap.v1.js"></script>
<script>
var createmap = new Worldmap({
elementid: "#mapcontainer",
});
</script>
</body>
</html>
結果
world という変数が未定義の様子だった。
ほかの地図ライブラリも試したいので、いったんここで調査打ち切り。