You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
4.2 KiB
122 lines
4.2 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
|
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|
<title>amMap examples</title> |
|
|
|
<link rel="stylesheet" href="../ammap/ammap.css" type="text/css"> |
|
<script src="../ammap/ammap.js" type="text/javascript"></script> |
|
<!-- map file should be included after ammap.js --> |
|
<script src="../ammap/maps/js/worldLow.js" type="text/javascript"></script> |
|
|
|
<script> |
|
var map; |
|
|
|
// svg path for target icon |
|
var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z"; |
|
// svg path for plane icon |
|
var planeSVG = "m2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47"; |
|
|
|
AmCharts.ready(function() { |
|
map = new AmCharts.AmMap(); |
|
|
|
var dataProvider = { |
|
mapVar: AmCharts.maps.worldLow |
|
}; |
|
|
|
map.areasSettings = { |
|
unlistedAreasColor: "#8dd9ef" |
|
}; |
|
|
|
map.imagesSettings = { |
|
color: "#585869", |
|
rollOverColor: "#585869", |
|
selectedColor: "#585869", |
|
pauseDuration: 0.2, |
|
animationDuration:2.5, |
|
adjustAnimationSpeed:true |
|
}; |
|
|
|
map.linesSettings = { |
|
color: "#585869", |
|
alpha: 0.4 |
|
}; |
|
|
|
// LONDON |
|
var lines = [{ |
|
id: "line1", |
|
arc: -0.85, |
|
alpha: 0.3, |
|
latitudes: [48.8567, 43.8163, 34.3, 23], |
|
longitudes: [2.3510, -79.4287, -118.15, -82] |
|
}, { |
|
id: "line2", |
|
alpha: 0, |
|
color: "#000000", |
|
latitudes: [48.8567, 43.8163, 34.3, 23], |
|
longitudes: [2.3510, -79.4287, -118.15, -82] |
|
}]; |
|
|
|
|
|
|
|
// cities |
|
var cities = [{ |
|
svgPath: targetSVG, |
|
title: "Paris", |
|
latitude: 48.8567, |
|
longitude: 2.3510 |
|
}, { |
|
svgPath: targetSVG, |
|
title: "Toronto", |
|
latitude: 43.8163, |
|
longitude: -79.4287 |
|
}, { |
|
svgPath: targetSVG, |
|
title: "Los Angeles", |
|
latitude: 34.3, |
|
longitude: -118.15 |
|
}, { |
|
svgPath: targetSVG, |
|
title: "Havana", |
|
latitude: 23, |
|
longitude: -82 |
|
}, { |
|
svgPath: planeSVG, |
|
positionOnLine: 0, |
|
color: "#000000", |
|
alpha: 0.1, |
|
animateAlongLine: true, |
|
lineId: "line2", |
|
flipDirection: true, |
|
loop: true, |
|
scale: 0.03, |
|
positionScale: 1.3 |
|
}, { |
|
svgPath: planeSVG, |
|
positionOnLine: 0, |
|
color: "#585869", |
|
animateAlongLine: true, |
|
lineId: "line1", |
|
flipDirection: true, |
|
loop: true, |
|
scale: 0.03, |
|
positionScale: 1.8 |
|
}]; |
|
|
|
dataProvider.images = cities; |
|
dataProvider.lines = lines; |
|
dataProvider.zoomLevel = 3.5; |
|
dataProvider.zoomLongitude = -55; |
|
dataProvider.zoomLatitude = 42; |
|
map.dataProvider = dataProvider; |
|
map.write("mapdiv"); |
|
}); |
|
</script> |
|
</head> |
|
|
|
<body> |
|
<div id="mapdiv" style="width: 100%; background-color:#d5eff7; height: 500px;"></div> |
|
</body> |
|
|
|
</html> |