Map With Patterns
Areas (Countries) in our maps can be filled with patterns. We offer several patterns in our package, or you can build your own fancy patterns and use them to create nice map designs.
Demo source
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/continentsLow.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<!-- Chart code -->
<script>
var map = AmCharts.makeChart( "chartdiv", {
"type": "map",
"theme": "none",
"dragMap": false,
"projection": "eckert3",
"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": "https://www.amcharts.com/lib/3/patterns/black/pattern1.png",
"width": 4,
"height": 4
}
}, {
"id": "asia",
"title": "Asia",
"pattern": {
"url": "https://www.amcharts.com/lib/3/patterns/black/pattern2.png",
"width": 4,
"height": 4
}
}, {
"id": "australia",
"title": "Australia",
"pattern": {
"url": "https://www.amcharts.com/lib/3/patterns/black/pattern3.png",
"width": 4,
"height": 4,
"color": "#BBBB00"
}
}, {
"id": "europe",
"title": "Europe",
"pattern": {
"url": "https://www.amcharts.com/lib/3/patterns/black/pattern4.png",
"width": 4,
"height": 4
}
}, {
"id": "north_america",
"title": "North America",
"pattern": {
"url": "https://www.amcharts.com/lib/3/patterns/black/pattern5.png",
"width": 4,
"height": 4
}
}, {
"id": "south_america",
"title": "South America",
"pattern": {
"url": "https://www.amcharts.com/lib/3/patterns/black/pattern6.png",
"width": 4,
"height": 4
}
} ]
},
"zoomControl": {
"panControlEnabled": false,
"zoomControlEnabled": false,
"homeButtonEnabled": false
},
"export": {
"enabled": true
}
} );
</script>
<!-- HTML -->
<div id="chartdiv"></div>