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
1 year ago
|
<!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>
|