worldmapjs を使ってみた
4872 ワード
https://worldmapjs.org/ を使ってみました。
が、先に書いておくと、うまく利用できませんでした
やったこと
-
https://worldmapjs.org/ から
worldmap.v1.js と worldmap.v1.css をダウンロード
- ページ内のリンクは 404 になってしまう。
- なので、上記ページ自体が利用している下記の URL からダウンロードした
- 上記を自前の 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>
結果
worldmap.v1.js と worldmap.v1.css をダウンロード
- ページ内のリンクは 404 になってしまう。
- なので、上記ページ自体が利用している下記の URL からダウンロードした
- 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 という変数が未定義の様子だった。
ほかの地図ライブラリも試したいので、いったんここで調査打ち切り。
Author And Source
この問題について(worldmapjs を使ってみた), 我々は、より多くの情報をここで見つけました https://qiita.com/09v/items/51e256fefec1d43df1b6著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .