Subversion Repositories php-qbpwcf

Rev

Rev 23 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
23 liveuser 1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 
<html>
3 
 
4 
    <head>
5 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6 
        <title>amMap examples</title>
7 
 
8 
        <link rel="stylesheet" href="../ammap/ammap.css" type="text/css">
9 
        <script src="../ammap/ammap.js" type="text/javascript"></script>
10 
        <!-- map file should be included after ammap.js -->
11 
		<script src="../ammap/maps/js/worldLow.js" type="text/javascript"></script>
12 
 
13 
		<script>
14 
            var map;
15 
 
16 
             // svg path for target icon
17 
            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";
18 
             // svg path for plane icon
19 
            var planeSVG = "m2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47";
20 
 
21 
            AmCharts.ready(function() {
22 
                map = new AmCharts.AmMap();
23 
 
24 
                var dataProvider = {
25 
                    mapVar: AmCharts.maps.worldLow
26 
                };
27 
 
28 
                map.areasSettings = {
29 
                    unlistedAreasColor: "#8dd9ef"
30 
                };
31 
 
32 
                map.imagesSettings = {
33 
                    color: "#585869",
34 
                    rollOverColor: "#585869",
35 
                    selectedColor: "#585869",
36 
                    pauseDuration: 0.2,
37 
                    animationDuration:2.5,
38 
                    adjustAnimationSpeed:true
39 
                };
40 
 
41 
                map.linesSettings = {
42 
                    color: "#585869",
43 
                    alpha: 0.4
44 
                };
45 
 
46 
                // LONDON
47 
                var lines = [{
48 
                    id: "line1",
49 
                    arc: -0.85,
50 
                    alpha: 0.3,
51 
                    latitudes: [48.8567, 43.8163, 34.3, 23],
52 
                    longitudes: [2.3510, -79.4287, -118.15, -82]
53 
                }, {
54 
                    id: "line2",
55 
                    alpha: 0,
56 
                    color: "#000000",
57 
                    latitudes: [48.8567, 43.8163, 34.3, 23],
58 
                    longitudes: [2.3510, -79.4287, -118.15, -82]
59 
                }];
60 
 
61 
 
62 
 
63 
                // cities
64 
                var cities = [{
65 
                    svgPath: targetSVG,
66 
                    title: "Paris",
67 
                    latitude: 48.8567,
68 
                    longitude: 2.3510
69 
                }, {
70 
                    svgPath: targetSVG,
71 
                    title: "Toronto",
72 
                    latitude: 43.8163,
73 
                    longitude: -79.4287
74 
                }, {
75 
                    svgPath: targetSVG,
76 
                    title: "Los Angeles",
77 
                    latitude: 34.3,
78 
                    longitude: -118.15
79 
                }, {
80 
                    svgPath: targetSVG,
81 
                    title: "Havana",
82 
                    latitude: 23,
83 
                    longitude: -82
84 
                }, {
85 
                    svgPath: planeSVG,
86 
                    positionOnLine: 0,
87 
                    color: "#000000",
88 
                    alpha: 0.1,
89 
                    animateAlongLine: true,
90 
                    lineId: "line2",
91 
                    flipDirection: true,
92 
                    loop: true,
93 
                    scale: 0.03,
94 
                    positionScale: 1.3
95 
                }, {
96 
                    svgPath: planeSVG,
97 
                    positionOnLine: 0,
98 
                    color: "#585869",
99 
                    animateAlongLine: true,
100 
                    lineId: "line1",
101 
                    flipDirection: true,
102 
                    loop: true,
103 
                    scale: 0.03,
104 
                    positionScale: 1.8
105 
                }];
106 
 
107 
                dataProvider.images = cities;
108 
                dataProvider.lines = lines;
109 
                dataProvider.zoomLevel = 3.5;
110 
                dataProvider.zoomLongitude = -55;
111 
                dataProvider.zoomLatitude = 42;
112 
                map.dataProvider = dataProvider;
113 
                map.write("mapdiv");
114 
            });
115 
        </script>
116 
    </head>
117 
 
118 
    <body>
119 
        <div id="mapdiv" style="width: 100%; background-color:#d5eff7; height: 500px;"></div>
120 
    </body>
121 
 
122 
</html>