Merge branch '3-uses-react-component-for-popups'

src/datamap.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Datamaps from 'datamaps';
+import ExtendedDatamaps from './extended_datamaps';
 
 const MAP_CLEARING_PROPS = [
 	'setProjection', 'scope', 'height', 'width'
@@ -69,7 +69,7 @@ export default class Datamap extends React.Component {
 		let map = this.map;
 
 		if (!map) {
-			map = this.map = new Datamaps({
+			map = this.map = new ExtendedDatamaps({
 				...props,
 				data,
 				element: this.refs.container

src/extended_datamaps.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Datamaps from 'datamaps';
+import d3 from 'd3';
+
+export default class ExtendedDatamaps extends Datamaps {
+
+	updatePopup(element, d, options) {
+		const self     = this,
+					data     = JSON.parse(element.attr('data-info')),
+					reactObj = options.popupTemplate(d, data);
+
+		if (!React.isValidElement(reactObj)) {
+			return super.updatePopup(element, d, options);
+		}
+
+		const hoverObj = d3.select(self.svg[0][0].parentNode).select('.datamaps-hoverover');
+
+		element.on('mousemove', null);
+		element.on('mouseenter', null);
+		element.on('mouseleave', null);
+
+		element.on('mouseenter', function() {
+			hoverObj.style('display', 'block');
+			ReactDOM.render(reactObj, hoverObj[0][0]);
+		});
+
+		element.on('mousemove', function() {
+			let position = d3.mouse(self.options.element);
+
+			hoverObj
+				.style('top', (position[1] + 30) + "px")
+				.style('left', position[0] + "px");
+		});
+
+		element.on('mouseleave', function() {
+			hoverObj
+				.style('display', 'none')
+				.html('');
+		});
+	}
+
+}