Showing lines from each map area to each other area on hover
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="aa"></div>
<div id="chartdiv"></div>
CSS
#chartdiv {
width : 100%;
height : 500px;
}
JavaScript
var map = AmCharts.makeChart("chartdiv", {
type: "map",
"theme": "none",
pathToImages: "http://www.amcharts.com/lib/3/images/",
dataProvider: {
map: "usaLow",
getAreasFromMap: true
},
areasSettings: {
autoZoom: false
},
linesSettings: {
alpha: 0.5,
thickness: 2
}
});
// on map init, create lines from each state to each state
map.addListener("init", function (event) {
// gather center coordinates for each state
map.myData = {};
for(var x in map.dataProvider.areas) {
var area = map.dataProvider.areas[x];
map.myData[area.id] = {
latitude: map.getAreaCenterLatitude(area),
longitude: map.getAreaCenterLongitude(area)
};
}
// add lines to each state
for(var x in map.dataProvider.areas) {
var area = map.dataProvider.areas[x];
for(var id in map.myData) {
if(id == area.id)
continue;
var line = new AmCharts.MapLine();
line.arc = -0.50 ;
line.latitudes = [map.myData[area.id].latitude, map.myData[id].latitude];
line.longitudes = [map.myData[area.id].longitude, map.myData[id].longitude];
area.lines.push(line);
}
}
map.validateData();
});
// simulate object click on hover
map.addListener("rollOverMapObject", function (event) {
if ("MapArea" == event.mapObject.objectType)
map.clickMapObject(event.mapObject);
});
map.addListener("click", function (event) {
});