From ca3bf45def2f8d2ce11d8aa81ad3c8b2c77eb74f Mon Sep 17 00:00:00 2001
From: Sankho Mallik <smallik@nsone.net>
Date: Mon, 25 Jul 2016 16:41:41 -0400
Subject: [PATCH 1/2] extends datamaps JS class to override updatePopup method

---
 src/datamap.jsx          |  4 ++--
 src/extended_datamaps.js | 43 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 src/extended_datamaps.js

diff --git a/src/datamap.jsx b/src/datamap.jsx
index a71b2f3..18e112c 100644
--- a/src/datamap.jsx
+++ b/src/datamap.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Datamaps from 'datamaps';
+import ExtendedDatamaps from './extended_datamaps';
 
 export default class Datamap extends React.Component {
 
@@ -64,7 +64,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
diff --git a/src/extended_datamaps.js b/src/extended_datamaps.js
new file mode 100644
index 0000000..88a0b52
--- /dev/null
+++ b/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('');
+		});
+	}
+
+}

From 385287e95dad90568f447d2785f7550ba230444c Mon Sep 17 00:00:00 2001
From: Sankho Mallik <smallik@nsone.net>
Date: Mon, 25 Jul 2016 21:43:07 -0400
Subject: [PATCH 2/2] unmounts component to fulfill React lifecycle

---
 src/extended_datamaps.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/extended_datamaps.js b/src/extended_datamaps.js
index 88a0b52..7da707c 100644
--- a/src/extended_datamaps.js
+++ b/src/extended_datamaps.js
@@ -34,6 +34,8 @@ export default class ExtendedDatamaps extends Datamaps {
 		});
 
 		element.on('mouseleave', function() {
+			ReactDOM.unmountComponentAtNode(hoverObj[0][0])
+
 			hoverObj
 				.style('display', 'none')
 				.html('');