diff --git a/.gitignore b/.gitignore
index b0d5211..4a701f8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ node_modules
 lib
 dist
 coverage
+.vscode
\ No newline at end of file
diff --git a/README.md b/README.md
index c601886..3a8f781 100644
--- a/README.md
+++ b/README.md
@@ -122,7 +122,7 @@ ReactDOM.render(
 | map | object | **required** | Describe SVG map to display. See [maps section](#maps) for more details. |
 | className | string | `'svg-map'` | CSS class of `<svg>`. |
 | role | string | `'none'` | ARIA role of `<svg>`. |
-| locationClassName | string | `'svg-map__location'` | CSS class of each `<path>`. |
+| locationClassName | string or function | `'svg-map__location'` | CSS class of each `<path>`. |
 | locationTabIndex | string or function | `'0'` | Tabindex each `<path>`. |
 | locationRole | string | `'none'` | ARIA role of each `<path>`. |
 | onLocationMouseOver | function |  | Invoked when the user puts the mouse over a location. |
@@ -136,6 +136,7 @@ ReactDOM.render(
 | tabIndex | string | `'0'` | **DEPRECATED:** Although this property still works, it has been replaced by `locationTabIndex` and will be removed in next major version. |
 | type | string | `'none'` | **DEPRECATED:** Although this property still works, it has been replaced by `locationRole` and will be removed in next major version. |
 
+
 ### CheckboxSVGMap
 
 | Prop | Type | Default | Description |
@@ -326,8 +327,8 @@ You can modify existing maps or create your own.
 #### Modify a map
 
 1. Import the map to modify.
-1. Create a new object from this map.
-1. Pass this new object as `map` prop of `<SVGMap />` component.
+2. Create a new object from this map.
+3. Pass this new object as `map` prop of `<SVGMap />` component.
 
 ```javascript
 import React from 'react';
diff --git a/__tests__/__snapshots__/svg-map.test.js.snap b/__tests__/__snapshots__/svg-map.test.js.snap
index 824ee2d..cd8c256 100644
--- a/__tests__/__snapshots__/svg-map.test.js.snap
+++ b/__tests__/__snapshots__/svg-map.test.js.snap
@@ -2248,6 +2248,34 @@ exports[`SVGMap component Maps displays map of Utah 1`] = `
 </svg>
 `;
 
+exports[`SVGMap component Properties displays heat map with custom location css 1`] = `
+<svg
+  aria-label="label"
+  className="className"
+  role="role"
+  viewBox="viewBox"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    aria-checked="isLocationSelected"
+    aria-label="name"
+    className="svg-map__location heat0"
+    d="path"
+    id="id"
+    name="name"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseMove={[Function]}
+    onMouseOut={[Function]}
+    onMouseOver={[Function]}
+    role="locationRole"
+    tabIndex="locationTabIndex"
+  />
+</svg>
+`;
+
 exports[`SVGMap component Properties displays map with custom props 1`] = `
 <svg
   aria-label="label"
diff --git a/__tests__/svg-map.test.js b/__tests__/svg-map.test.js
index 22b1b41..ca9fcbb 100644
--- a/__tests__/svg-map.test.js
+++ b/__tests__/svg-map.test.js
@@ -45,8 +45,35 @@ describe('SVGMap component', () => {
 
 			expect(tree).toMatchSnapshot();
 		});
+
+		test('displays heat map with custom location css', () => {
+			const eventHandler = () => 'eventHandler';
+			const isLocationSelected = () => 'isLocationSelected';
+			const generateHeat = () => 'svg-map__location heat0';
+			const component = renderer.create(
+				<SVGMap map={map}
+					className="className"
+					role="role"
+					locationTabIndex="locationTabIndex"
+					locationRole="locationRole"
+					onLocationMouseOver={eventHandler}
+					onLocationMouseOut={eventHandler}
+					onLocationMouseMove={eventHandler}
+					onLocationClick={eventHandler}
+					onLocationKeyDown={eventHandler}
+					onLocationFocus={eventHandler}
+					onLocationBlur={eventHandler}
+					isLocationSelected={isLocationSelected}
+					locationClassName={generateHeat}
+				/>
+			);
+			const tree = component.toJSON();
+
+			expect(tree).toMatchSnapshot();
+		});
 	});
 
+
 	describe('Maps', () => {
 		test('displays map of Australia', () => {
 			const component = renderer.create(<SVGMap map={Australia} />);
diff --git a/examples/src/components/examples-app.jsx b/examples/src/components/examples-app.jsx
index 8a556fc..eeecdda 100644
--- a/examples/src/components/examples-app.jsx
+++ b/examples/src/components/examples-app.jsx
@@ -3,6 +3,7 @@ import CheckboxMap from './checkbox-map';
 import RadioMap from './radio-map';
 import LinkMap from './link-map';
 import TooltipMap from './tooltip-map';
+import HeatMap from './heat-map';
 import './examples-app.scss';
 
 class ExamplesApp extends React.Component {
@@ -20,6 +21,7 @@ class ExamplesApp extends React.Component {
 				<CheckboxMap />
 				<LinkMap />
 				<TooltipMap />
+				<HeatMap />
 			</section>
 		);
 	}
diff --git a/examples/src/components/examples-app.scss b/examples/src/components/examples-app.scss
index b04a2a7..eaf3cda 100644
--- a/examples/src/components/examples-app.scss
+++ b/examples/src/components/examples-app.scss
@@ -51,6 +51,19 @@
 
 			&--usa {
 				width: 800px; // USA needs more space	for tooltip
+				.svg-map{
+					&__location {
+						&.heat1{
+							opacity:0.8;
+						}
+						&.heat2{
+							opacity:0.6;
+						}
+						&.heat3{
+							opacity:0.4;
+						}
+					}
+				}
 			}
 
 			&__tooltip {
diff --git a/examples/src/components/heat-map.jsx b/examples/src/components/heat-map.jsx
new file mode 100644
index 0000000..c125a41
--- /dev/null
+++ b/examples/src/components/heat-map.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { SVGMap, USA } from '../../../src/';
+import { getLocationName } from '../utils';
+import '../../../src/svg-map.scss';
+
+class HeatMap extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			pointedLocation: null,
+			tooltipStyle: {
+				display: 'none'
+			}
+		};
+
+		this.handleLocationMouseOver = this.handleLocationMouseOver.bind(this);
+		this.handleLocationMouseOut = this.handleLocationMouseOut.bind(this);
+		this.handleLocationMouseMove = this.handleLocationMouseMove.bind(this);
+	}
+
+	handleLocationMouseOver(event) {
+		const pointedLocation = getLocationName(event);
+		this.setState({ pointedLocation });
+	}
+
+	handleLocationMouseOut() {
+		this.setState({ pointedLocation: null, tooltipStyle: { display: 'none' } });
+	}
+
+	handleLocationMouseMove(event) {
+		const tooltipStyle = {
+			display: 'block',
+			top: event.clientY + 10,
+			left: event.clientX - 100
+		};
+		this.setState({ tooltipStyle });
+	}
+
+	generateHeat(location, index) {
+		return 'svg-map__location heat' + (index % 4);
+	}
+
+	render() {
+		return (
+			<article className="examples__block">
+				<h2 className="examples__block__title">
+					USA SVG map with tooltips and a heat map
+				</h2>
+				<div className="examples__block__map examples__block__map--usa">
+					<SVGMap
+						map={USA}
+						onLocationMouseOver={this.handleLocationMouseOver}
+						onLocationMouseOut={this.handleLocationMouseOut}
+						onLocationMouseMove={this.handleLocationMouseMove}
+						locationClassName={this.generateHeat}
+					/>
+					<div className="examples__block__map__tooltip" style={this.state.tooltipStyle}>
+						{this.state.pointedLocation}
+					</div>
+				</div>
+			</article>
+		);
+	}
+}
+
+export default HeatMap;
diff --git a/package-lock.json b/package-lock.json
index 3513726..54bf83a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "react-svg-map",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
@@ -4464,7 +4464,8 @@
 				"ansi-regex": {
 					"version": "2.1.1",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"aproba": {
 					"version": "1.2.0",
@@ -4485,12 +4486,14 @@
 				"balanced-match": {
 					"version": "1.0.0",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"brace-expansion": {
 					"version": "1.1.11",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"balanced-match": "^1.0.0",
 						"concat-map": "0.0.1"
@@ -4505,17 +4508,20 @@
 				"code-point-at": {
 					"version": "1.1.0",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"concat-map": {
 					"version": "0.0.1",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"console-control-strings": {
 					"version": "1.1.0",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"core-util-is": {
 					"version": "1.0.2",
@@ -4632,7 +4638,8 @@
 				"inherits": {
 					"version": "2.0.3",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"ini": {
 					"version": "1.3.5",
@@ -4644,6 +4651,7 @@
 					"version": "1.0.0",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"number-is-nan": "^1.0.0"
 					}
@@ -4658,6 +4666,7 @@
 					"version": "3.0.4",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"brace-expansion": "^1.1.7"
 					}
@@ -4665,12 +4674,14 @@
 				"minimist": {
 					"version": "0.0.8",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"minipass": {
 					"version": "2.3.5",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"safe-buffer": "^5.1.2",
 						"yallist": "^3.0.0"
@@ -4689,6 +4700,7 @@
 					"version": "0.5.1",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"minimist": "0.0.8"
 					}
@@ -4769,7 +4781,8 @@
 				"number-is-nan": {
 					"version": "1.0.1",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"object-assign": {
 					"version": "4.1.1",
@@ -4781,6 +4794,7 @@
 					"version": "1.4.0",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"wrappy": "1"
 					}
@@ -4866,7 +4880,8 @@
 				"safe-buffer": {
 					"version": "5.1.2",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"safer-buffer": {
 					"version": "2.1.2",
@@ -4902,6 +4917,7 @@
 					"version": "1.0.2",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"code-point-at": "^1.0.0",
 						"is-fullwidth-code-point": "^1.0.0",
@@ -4921,6 +4937,7 @@
 					"version": "3.0.1",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"ansi-regex": "^2.0.0"
 					}
@@ -4964,12 +4981,14 @@
 				"wrappy": {
 					"version": "1.0.2",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"yallist": {
 					"version": "3.0.3",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				}
 			}
 		},
diff --git a/package.json b/package.json
index 2cf2d81..a94c6d2 100644
--- a/package.json
+++ b/package.json
@@ -79,4 +79,4 @@
 			"src/*.jsx"
 		]
 	}
-}
\ No newline at end of file
+}
diff --git a/src/svg-map.jsx b/src/svg-map.jsx
index 5d5575c..dbc410d 100644
--- a/src/svg-map.jsx
+++ b/src/svg-map.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 function SVGMap(props) {
+
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
@@ -16,7 +17,7 @@ function SVGMap(props) {
 						id={location.id}
 						name={location.name}
 						d={location.path}
-						className={props.locationClassName}
+						className={typeof props.locationClassName === 'function' ? props.locationClassName(location, index) : props.locationClassName}
 						tabIndex={typeof props.locationTabIndex === 'function' ? props.locationTabIndex(location, index) : props.locationTabIndex || props.tabIndex}
 						role={props.locationRole || props.type}
 						aria-label={location.name}
@@ -53,7 +54,7 @@ SVGMap.propTypes = {
 	role: PropTypes.string,
 
 	// Locations properties
-	locationClassName: PropTypes.string,
+	locationClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 	locationTabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 	locationRole: PropTypes.string,
 	onLocationMouseOver: PropTypes.func,
@@ -64,6 +65,7 @@ SVGMap.propTypes = {
 	onLocationFocus: PropTypes.func,
 	onLocationBlur: PropTypes.func,
 	isLocationSelected: PropTypes.func,
+	handleLocationClasses: PropTypes.func,
 
 	// Deprecated properties
 	tabIndex: PropTypes.string,