使用Datamaps在單個頁面上創建加拿大和美國地圖

我使用Datamaps創建加拿大和美國地圖。我在網站上看到了教程和/或示例，並且看到了「僅美國地圖」示例。我這樣做：使用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的原因。

來源

2016-09-28 Hello World

所以我發現這個URL是由Mark DiMarco在Datamaps中定製的自定義地圖數據，我用它來試着複製他所做的。在那個鏈接上，他創建了一張阿富汗地圖，這張地圖沒有包含在他在Datamaps網站上的主要示例中。但不是一個國家，我們將使用Datamaps將兩個國家的自定義地圖結合起來。這是我做了一個實驗，但我希望這將是回答您的問題

首先，他創造了阿富汗的自定義拓撲JSON。他發佈了一個關於如何創建自定義地圖數據的教程，但我認爲我沒有訪問權限，因爲我得到了404或者他把它取下來了。回顧一下，他用於定製topo json的代碼也可以在Datamaps網站的「更多版本」鏈接中找到。您只需要尋找您需要製作定製拓樸json的國家/地區。在你的最後，尋找datamaps.afg.js和datamaps.usa.js;並獲得json。

我只有1個聲望，我限制了兩個網址。只需訪問這個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

來源

2016-10-03 08:13:29

哇！非常感謝你。這正是我真正需要的。我只是編輯設計。謝了哥們！ –

不客氣。 :) –

你如何確定投影的中心和比例？根據json地形？ – weilah

使用Datamaps在單個頁面上創建加拿大和美國地圖

回答

相關問題