#6868

by amcharts

HTML

<link rel="stylesheet" href="http://www.amcharts.com/lib/3/ammap.css">
<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/continentsLow.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
	width	: 100%;
	height	: 500px;
    position: absolute;
    top: 100px;
    left: 100px;
}

JavaScript

var map = AmCharts.makeChart("chartdiv", {

	type: "map",
    pathToImages: "http://www.amcharts.com/lib/3/images/",
	handDrawn: true,
	dragMap: false,

	areasSettings: {
		autoZoom: false,
		rollOverOutlineColor: "#000000",
		selectedColor: "#000000",
		outlineAlpha: 1,
		outlineColor: "#FFFFFF",
		outlineThickness: 1,
		color: "#000000"
	},

	dataProvider: {
		map: "continentsLow",

		areas: [{
			"id": "africa",
			"title": "Africa",
			"pattern": {
				"url": "http://www.amcharts.com/lib/3/patterns/black/pattern1.png",
				width: 4,
				height: 4
			}
		}, {
			"id": "asia",
			"title": "Asia",
            "description": "Description",
            "pattern": {
				"url": "http://www.amcharts.com/lib/3/patterns/black/pattern2.png",
				width: 4,
				height: 4
			}
		}, {
			"id": "australia",
			"title": "Australia",
			"pattern": {
				"url": "http://www.amcharts.com/lib/3/patterns/black/pattern3.png",
				width: 4,
				height: 4
			}
		}, {
			"id": "europe",
			"title": "Europe",
			"pattern": {
				"url": "http://www.amcharts.com/lib/3/patterns/black/pattern4.png",
				width: 4,
				height: 4
			}
		}, {
			"id": "north_america",
			"title": "North America",
			"pattern": {
				"url": "http://www.amcharts.com/lib/3/patterns/black/pattern5.png",
				width: 4,
				height: 4
			}
		}, {
			"id": "south_america",
			"title": "South America",
			"pattern": {
				"url": "http://www.amcharts.com/lib/3/patterns/black/pattern6.png",
				width: 4,
				height: 4
			}
		}]
	},
	zoomControl: {
		panControlEnabled: false,
		zoomControlEnabled: false
	}

});