カナダとアメリカの地図を単一のページに作成する

私はDatamapsを使ってカナダとアメリカの地図を作成しています。私はチュートリアルやウェブサイトの例を見て、 "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>

だから私はあなたも "カナダマップのみ"を作成することができると仮定します。しかし、問題は、私はどのように2国を結合するのか分からないということです。

私はラベルを狙っています。ホバー情報とjsonは、私がデータマップを使用している理由です。

出典

2016-09-28 Hello World

Mark DiMarcoのDatamapsのCustom Map Dataという名前のこのURLが見つかったので、彼が行ったことをコピーして使用しました。そのリンクで、彼はDatamapsウェブサイトの主な例には含まれていないアフガニスタンの地図を作成しました。しかし、1カ国の代わりに、Datamapsを使用して2カ国のカスタムマップを組み合わせます。これは私が作った実験ですが、これがあなたの問題に対する答えになることを願っています。

最初に、彼はアフガニスタンのカスタムトポJsonを作成しました。彼はカスタム地図データを作成する方法についてのチュートリアルを公開しましたが、私はアクセスがないと思います。なぜなら、私は404を取得しているか、または彼がそれを取り下げたからです。戻って、彼がカスタムtopo jsonのために使用したコードは、Datamapsウェブサイトの「More Versions」リンクにある他の作品にもあります。カスタムトポJsonを作るために必要な国を探す必要があります。最後に、datamaps.afg.jsとdatamaps.usa.jsを探します。 jsonを取得します。

私は評判が1つしかなく、私は2つのURLで制限しています。ちょうどこのGitHubのサイトにアクセスし、カナダとアメリカの2つのカスタムトポ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

出典

2016-10-03 08:13:29

うわー！どうもありがとうございました。これは本当に必要なものです。私はデザインを編集するだけです。ありがとう！ –

ようこそ。 :) –

投影の中心とスケールをどのように決定しますか？ jsonの地形によれば？ – weilah

カナダとアメリカの地図を単一のページに作成する

答えて

関連する問題