Black Lives Matter. Please consider donating to Black Girls Code today.

URL in choropleth map

Hello,

Does someone know if it is possible to add clickable urls to choropleth maps, i.e. when data is displayed for a particular country, that also an url link appears below the numerical value and text?

Thank you!

1 Like

Not at the moment. See https://github.com/plotly/plotly.js/issues/998 for the latest development info.

OK. Thank you very much!

Based on Etienne’s solution related to click events Click events in maps, the following should work to open a URL by clicking on a country in a map:

Plotly.newPlot('graph', [{
  type: 'choropleth',
  locations: ['CAN', 'USA', 'RUS'],
  z: [10,20,30]
}])
.then(gd => {
  gd.on('plotly_click', d => {
    var pt = (d.points || [])[0]

    switch(pt.location) {
      case 'CAN':
        window.open("https://www.somedomain1.com","_self")
        break
      case 'USA':
        window.open("https://www.somedomain2.com","_self")
        break
    }
  })
})

This would not display the URL, but it would redirect when country is clicked, which can still be useful in some cases.