Selecting multiple areas map
Click on several states on the map - each state will change it's color. Using this feature you can easily create fun and interactive applications.
HTML
<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/usaLow.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;
}
JavaScript
var map;
AmCharts.ready(function() {
map = new AmCharts.AmMap();
map.pathToImages = "http://www.amcharts.com/lib/3/images/";
map.panEventsEnabled = true;
map.backgroundColor = "#666666";
map.backgroundAlpha = 1;
map.zoomControl.panControlEnabled = true;
map.zoomControl.zoomControlEnabled = true;
var dataProvider = {
map: "usaLow",
getAreasFromMap: true,
areas: [{
id: "US-TX",
color: "#999",
images: [{
type: "circle",
width: 20,
title: "Image 1",
latitude: -50,
longitude: 0,
selectable: true
}, {
type: "circle",
width: 20,
title: "Image 2",
latitude: -70,
longitude: 30,
selectable: true
}]
}, {
id: "US-AK",
color: "#999",
images: [{
type: "circle",
width: 20,
title: "Image 3",
latitude: -85,
longitude: -140,
selectable: true
}, {
type: "circle",
width: 20,
title: "Image 4",
latitude: -80,
longitude: -120,
selectable: true
}]
}]
};
map.dataProvider = dataProvider;
map.areasSettings = {
autoZoom: false,
color: "#CDCDCD",
colorSolid: "#5EB7DE",
selectedColor: "#5EB7DE",
outlineColor: "#666666",
rollOverColor: "#88CAE7",
rollOverOutlineColor: "#FFFFFF",
selectable: true
};
map.imagesSettings = {
selectedColor: "#528297",
selectable: true
};
//map.allowClickOnSelectedObject = false;
map.mySelectedArea = false;
map.addListener('clickMapObject',...