how bind a event on each area

[ghost]

please

[markmarkoh]

What are you trying to accomplish?

[illnino]

Hi, Mark

I have the same concern. Could I enable onClick event on each area? Say, when I click on one region, it will redirect me to its wiki page.

I find it in a gist of yours.

Events emitted: - map-click - map-mouseover - map-mouseout - map-touchstart

[markmarkoh]

Events are emitted to the container you call datamap on, so if it were #container1, you would do:

$("#container1").on('map-click', function(event, data) {
   // data.geography is the geoJSON
  alert( data.geography.id ); //alerts "CA" if you clicked California
  //  data.data is the data you passed in to render the map, so in the ch
  alert( data.data.electoralVotes ); //alerts 32 if you clicked California
});

Since it's not an A tag but a PATH element, you'll have to do your redirection in javascript. So in your case, pass in the Wikipedia link alongside electoralVotes (in that example).

[ghost]

good answer

[vrocha]

Was this removed from the newest version?? I cannot get it to work. I looked at the source and I could not find any binding to the onclick event.

[markmarkoh]

It was changed pretty drastically, checkout this example here:

https://github.com/markmarkoh/datamaps#events

Basically you use the done callback, which gives you the datamaps object as a parameter, which has a svg property which is the actual SVG DOM element. Then you can bind events there.

.datamaps-subunit is the class to bind to for the actual geography elements (like the state of Texas).

[vrocha]

Thank you for the quick response! Something may have changed, I am not getting the datamaps object which would have been great, I am instead getting the svg object pass into the function.

[markmarkoh]

Hmph, that might be an oversight. I meant it to be the datamaps object. I'm on vacation at the moment - if you can figure it out and send a pull request I'd gladly pull it in, otherwise I'll fix that later this week.

For the meantime you should be able to attach events to the svg directly, like d3.select(svg).selectAll('.datamaps-subunit').on('click'....

[vrocha]

I see the problem it is not in the repo, the repo is fine. However, on the homepage for datamap links to this file (http://datamaps.github.io/scripts/datamaps.world.min.js) which is the problem. If you do a quick search for "done", you can this the problem -- b.options.done(b.svg).

[FreelanceWebNinja]

How do you invoke a click on a path? I'm looking to call the Geography popUp externally.