在单个页面中使用 Datamaps 创建加拿大和美国的地图

Question

我正在使用 Datamaps 创建加拿大和美国的地图。我在其网站上看到了教程 and/or 示例，并且看到了 "USA map only" 示例。我做到了：

    <script>
        var addUSA = new Datamap({
            scope: 'usa',
            element: document.getElementById('usa-map'),
            geographyConfig: {
                highlightOnHover: false,
                borderColor: '#006298',
                borderWidth: 0.8,
                popupTemplate: function(geography, data) {
                    return "<div class='hoverinfo'><strong>" + data.info + "</strong></div>";
                }
            },
            dataUrl: 'data.json',
            dataType: 'json',
            data: {},
            fills: {
                defaultFill: '#FFFFFF'
            }
        });
        addUSA.labels();
    </script>

所以我假设您也可以创建一个 "Canada map only"。但问题是，我不知道如何合并两个国家。

我的目标是标签、悬停信息和 json 这就是我使用 Datamaps 的原因。

Answer 1

所以我找到了这个 URL 由 Mark DiMarco 编写的标题为 Datamaps 中的自定义地图数据的文章，我使用并尝试复制他所做的工作。在那 link 上，他创建了一张阿富汗地图，该地图未包含在他在 Datamaps 网站上的主要示例中。但是我们将使用 Datamaps 组合两个国家的自定义地图，而不是一个国家。这是我做过的一个实验，但我希望这能解决您的问题

首先，他为阿富汗创建了一个自定义拓扑 json。他发布了一个关于如何创建自定义地图数据的教程，但我认为我没有访问权限，因为我得到 404 或者他把它记下来了。回过头来看，他用于自定义拓扑 json 的代码也可以在他位于 Datamaps 网站 "More Versions" link 的其他作品中找到。你只需要寻找你需要制作自定义拓扑的 country/ies json。在你这边，寻找 datamaps.afg.js 和 datamaps.usa.js；并得到 json.

我只有 1 个声望，我有两个 URL 的限制。只需访问这个 GitHub 网站，我在其中放置了加拿大和美国的两个自定义拓扑 json。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Canada and USA</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script src="http://rawgithub.com/markmarkoh/datamaps/master/dist/datamaps.none.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <!-- CANADA -->
    <h1>CANADA</h1>
    <div id="canada"></div>
    <!-- USA -->
    <h1>USA</h1>
    <div id="usa"></div>
</body>
</html>

CSS

#canada {
    border: 1px solid #000000;
    height: 450px;
    width: 400px;
}

#usa {
    border: 2px solid #EDA552;
    height: 400px;
    width: 500px;
}

JQUERY

$(function() {
    var canadaMap = new Datamap({
        element: document.getElementById('canada'),
        geographyConfig: {
            dataUrl: 'canada.topo.json'
        },
        scope: 'canada',
        fills: {
            defaultFill: '#bada55'
        },
        setProjection: function(element) {
            var projection = d3.geo.mercator()
                .center([-95, 71])
                .scale(200)
                .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
            var path = d3.geo.path().projection(projection);
            return {path: path, projection: projection};
        }
    });
    var USAmap = new Datamap({
        element: document.getElementById('usa'),
        geographyConfig: {
            dataUrl: 'usa.topo.json'
        },
        scope: 'usa',
        fills: {
            defaultFill: '#bada55'
        },
        setProjection: function(element) {
            var projection = d3.geo.mercator()
                .center([-120, 54])
                .scale(250)
                .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
            var path = d3.geo.path().projection(projection);
            return {path: path, projection: projection};
        }
    });
});

工作代码在这里 => JS FIDDLE

在单个页面中使用 Datamaps 创建加拿大和美国的地图

Create a map of Canada and USA with Datamaps in a single page

datamaps