markmarkoh / datamaps

Customizable SVG map visualizations for the web in a single Javascript file using D3.js
http://datamaps.github.io
MIT License
3.78k stars 1.01k forks source link

Link when click on country #433

Closed AdrienAdB closed 6 years ago

AdrienAdB commented 6 years ago

Hi, I wish to add a link when I click on a country. Below is my code and I don't where and how to add link url for each country? I believe I should add onClick event somewhere?

Thanks for help.

var mapL = new Datamap({
   element: document.getElementById("map-left"),
   setProjection: function(element) {
   var projection = d3.geo.equirectangular()
   .center([105, 14])
   .rotate([0, 0])
   .scale(800)
   .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
   var path = d3.geo.path()
  .projection(projection);  
   return {path: path, projection: projection};
   },
   projection: 'mercator',
   fills: {
   defaultFill: "#B7C731",
   activatedCountry: "#912022",
   },
   geographyConfig: {
   highlightOnHover: true,
   highlightFillColor: '#D4B72B',
   },
   data: {
   THA: {  fillKey: "activatedCountry" },
   VNM: {  fillKey: "activatedCountry" },                
   KOR: {  fillKey: "activatedCountry" },
   KHM: {  fillKey: "activatedCountry" },
   }
 });
AdrienAdB commented 6 years ago

Solved, I added this

var mapL = new Datamap({
......
......
    done: function(datamap) {
            datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
                link = geography.properties.name;
                location.href = link;
});