Создайте карту Канады и США с картами данных на одной странице

Я использую 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.

Источник

1 ответ

Решение

Таким образом, я нашел этот URL под названием "Пользовательские данные карты в картах данных" Марка ДиМарко, и я использовал и попытался скопировать то, что он сделал. По этой ссылке он создал карту Афганистана, которая не была включена в его основные примеры на веб-сайте Datamaps. Но вместо одной страны мы будем объединять пользовательские карты двух стран с использованием карт данных. Это эксперимент, который я провел, но я надеюсь, что это ответ на вашу проблему

Во-первых, он создал обычай topo json для Афганистана. Он опубликовал учебное пособие по созданию пользовательских картографических данных, но я думаю, что у меня нет доступа, потому что я получаю 404, или он снял его. Возвращаясь к этому, код, который он использовал для этого пользовательского topo json, также можно найти в других его работах, расположенных по ссылке "More Versions" на веб-сайте Datamaps. Вам просто нужно найти страну / страны, в которых вы хотите создать свой топо-джон. С вашей стороны ищите datamaps.afg.js и datamaps.usa.js; и получить JSON.

У меня только 1 репутация, и я ограничен двумя URL. Просто зайдите на этот сайт GitHub, где я разместил эти два пользовательских топо-джона для Канады и США.

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

Источник
Другие вопросы по тегам