btmills/react-datamaps

Bubble Click Handler

atareshawty opened this issue · 1 comments

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

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={[/*...*/]}
            />
        );
    }

}