Add support for responsive maps thru a 'responsive' property (#12)

* Add support for responsive maps thru a 'responsive' property and a usage example

* Fix code style format

* Pass npm test

examples/example.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 export default class Example extends React.Component {
 
 	static propTypes = {
+		additionalClasses: React.PropTypes.string,
 		children: React.PropTypes.element.isRequired,
 		label: React.PropTypes.string.isRequired,
 		mapStyle: React.PropTypes.object
@@ -13,9 +14,9 @@ export default class Example extends React.Component {
 			<div className="Example">
 				<h3 className="Example-label">{this.props.label}</h3>
 				<div
-					className="Example-map"
+					className={`Example-map ${this.props.additionalClasses}`}
 					style={this.props.mapStyle}
-				>
+    >
 					{React.Children.only(this.props.children)}
 				</div>
 			</div>

examples/index.jsx

@@ -8,6 +8,7 @@ import ChoroplethExample from './choropleth-example';
 import ProjectionsGraticulesExample from './projections-graticules-example.jsx';
 import StateLabelsExample from './state-labels-example';
 import ZoomExample from './zoom-example';
+import ResponsiveExample from './responsive-example';
 
 class App extends React.Component {
 
@@ -21,6 +22,7 @@ class App extends React.Component {
 				<ArcsExample />
 				<ProjectionsGraticulesExample />
 				<ZoomExample />
+				<ResponsiveExample />
 			</div>
 		);
 	}

examples/responsive-example.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import Datamap from '../src';
+import Example from './example';
+
+const radius = 4;
+
+export default class ResponsiveExample extends React.Component {
+
+	render() {
+		return (
+			<Example additionalClasses="ResponsiveExample" label="Responsive">
+				<Datamap
+					responsive
+					geographyConfig={{
+						popupOnHover: false,
+						highlightOnHover: false
+					}}
+					fills={{
+						defaultFill: '#abdda4',
+						bubbleFill: '#123456'
+					}}
+					bubbles={[
+						{
+							name: 'San Jose',
+							radius,
+							country: 'USA',
+							latitude: 37.2966853,
+							longitude: -122.0975973,
+							fillKey: 'bubbleFill'
+						},
+						{
+							name: 'Dulles',
+							radius,
+							country: 'USA',
+							latitude: 38.9541077,
+							longitude: -77.496101,
+							fillKey: 'bubbleFill'
+						},
+						{
+							name: 'London',
+							radius,
+							country: 'UK',
+							latitude: 51.501364,
+							longitude: -0.1440787,
+							fillKey: 'bubbleFill'
+						},
+						{
+							name: 'Buenos Aires',
+							radius,
+							latitude: -34.6157142,
+							longitude: -58.5033602,
+							fillKey: 'bubbleFill'
+						},
+						{
+							name: 'Sydney',
+							radius,
+							latitude: -33.8567844,
+							longitude: 151.213108,
+							fillKey: 'bubbleFill'
+						},
+						{
+							name: 'Hong Kong',
+							radius,
+							latitude: 22.3574372,
+							longitude: 113.8408289,
+							fillKey: 'bubbleFill'
+						}
+					]
+					}
+					bubbleOptions={{
+						borderWidth: 1,
+						borderColor: '#ABCDEF'
+					}}
+    />
+			</Example>
+		);
+	}
+
+}

examples/screen.css

@@ -40,3 +40,34 @@ body {
 	font-size: 12px;
 	border: 1px solid #ccc;
 }
+
+/* Extra small devices (phones, less than 768px) */
+/* No media query since this is the default in Bootstrap */
+.ResponsiveExample {
+	width: 405px;
+	height: 270px;
+}
+
+/* Small devices (tablets, 768px and up) */
+@media (min-width: 768px) { 
+	.ResponsiveExample {
+		width: 570px;
+		height: 380px;
+	}
+}
+
+/* Medium devices (desktops, 992px and up) */
+@media (min-width: 992px) { 
+	.ResponsiveExample {
+		width: 660px;
+		height: 440px;
+	}
+}
+
+/* Large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) { 
+	.ResponsiveExample {
+		width: 750px;
+		height: 500px;
+	}	
+ }

src/datamap.jsx

@@ -22,12 +22,21 @@ export default class Datamap extends React.Component {
 		graticule: React.PropTypes.bool,
 		height: React.PropTypes.any,
 		labels: React.PropTypes.bool,
+		responsive: React.PropTypes.bool,
 		style: React.PropTypes.object,
 		updateChoroplethOptions: React.PropTypes.object,
 		width: React.PropTypes.any
 	};
 
+	constructor(props) {
+		super(props);
+		this.resizeMap = this.resizeMap.bind(this);
+	}
+
 	componentDidMount() {
+		if (this.props.responsive) {
+			window.addEventListener('resize', this.resizeMap);
+		}
 		this.drawMap();
 	}
 
@@ -43,6 +52,9 @@ export default class Datamap extends React.Component {
 
 	componentWillUnmount() {
 		this.clear();
+		if (this.props.responsive) {
+			window.removeEventListener('resize', this.resizeMap);
+		}
 	}
 
 	clear() {
@@ -97,6 +109,10 @@ export default class Datamap extends React.Component {
 		}
 	}
 
+	resizeMap() {
+		this.map.resize();
+	}
+
 	render() {
 		const style = {
 			height: '100%',