Bubble Click Handler
atareshawty opened this issue · 1 comments
atareshawty commented
What do you think about adding a click event to the map bubbles? It could make the map a lot more interactive this way. If you want, I'll make a PR
btmills commented
Summarizing a discussion @atareshawty and I had offline: The goal here is to translate the existing DataMaps API to React as closely as possible. While click handlers for bubbles are useful, that falls more toward extending the DataMaps with new functionality, so it's better for that to live outside the React translation layer. Here's an example of how you'd accomplish this today, based on this StackOverflow answer:
import React from 'react';
import Datamap from 'react-datamaps';
export default component CoolMap extends React.Component {
addClickHandlers = (ref) => {
if (ref && ref.map) {
ref.map.svg.selectAll('.datamaps-bubble').on('click', (bubble) => {
console.log(`You clicked on ${bubble.name}`);
});
}
};
render() {
return (
<Datamap
ref={this.addClickHandlers}
bubbles={[/*...*/]}
/>
);
}
}