Question

我正在使用Datamaps创建加拿大和美国的地图。我在其网站上看到了教程和/或示例，我看到了“仅限美国地图”的示例。我这样做了：

    <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>

所以我假设你也可以创建一个“加拿大地图”。但问题是，我不知道如何将两个国家合并。

我的目标是标签，hover-info和json，这就是我使用Datamaps的原因。

Answer 1

所以我在Mark DiMarco找到了这个名为“数据地图中的自定义地图数据”的网址，我使用并尝试复制他所做的事情。在那个链接上，他创建了一张阿富汗地图，这张地图没有包含在他在Datamaps网站上的主要例子中。但是，我们将使用Datamaps将两个国家/地区自定义地图结合起来，而不是一个国家这是我做过的一个实验，但我希望这将是您问题的答案

首先，他为阿富汗创造了一个定制的topo json。他发布了一个关于如何创建自定义地图数据的教程，但我认为我没有访问权限，因为我得到了404或者他已经将其删除了。回过头来，他用于自定义topo json的代码也可以在他的其他作品中找到，这些作品位于＆＃34;更多版本＆＃34;链接Datamaps网站。您只需要查找制作自定义topo json所需的国家/地区。在您的最后，查找datamaps.afg.js和datamaps.usa.js;并获得json。

我只有1个声誉，我限制了两个网址。只需访问这个GitHub网站，我将这两个自定义topo 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};
        }
    });
});

此处的工作代码=＆gt; JS FIDDLE

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

1 个答案: