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 
        <link rel="stylesheet" href="style.css" type="text/css">
13 
		<script>
14 
            // svg path for target icon
15 
            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";
16 
            // svg path for plane icon
17 
            var planeSVG = "m2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47";
18 
 
19 
 
20 
            var map = AmCharts.makeChart("mapdiv", {
21 
                type: "map",
22 
 
23 
                dataProvider: {
24 
                    map: "worldLow",
25 
 
26 
                    lines: [{
27 
                        id: "line1",
28 
                        arc: -0.85,
29 
                        alpha: 0.3,
30 
                        latitudes: [48.8567, 43.8163, 34.3, 23],
31 
                        longitudes: [2.3510, -79.4287, -118.15, -82]
32 
                    }],
33 
                    images: [{
34 
                        svgPath: targetSVG,
35 
                        title: "Paris",
36 
                        latitude: 48.8567,
37 
                        longitude: 2.3510
38 
                    }, {
39 
                        svgPath: targetSVG,
40 
                        title: "Toronto",
41 
                        latitude: 43.8163,
42 
                        longitude: -79.4287
43 
                    }, {
44 
                        svgPath: targetSVG,
45 
                        title: "Los Angeles",
46 
                        latitude: 34.3,
47 
                        longitude: -118.15
48 
                    }, {
49 
                        svgPath: targetSVG,
50 
                        title: "Havana",
51 
                        latitude: 23,
52 
                        longitude: -82
53 
                    },{
54 
                        svgPath: planeSVG,
55 
                        positionOnLine: 0,
56 
                        color: "#585869",
57 
                        animateAlongLine: true,
58 
                        lineId: "line1",
59 
                        flipDirection: true,
60 
                        loop: true,
61 
                        scale: 0.03,
62 
                        positionScale: 1.8
63 
                    }]
64 
                },
65 
 
66 
                areasSettings: {
67 
                    unlistedAreasColor: "#8dd9ef"
68 
                },
69 
 
70 
                imagesSettings: {
71 
                    color: "#585869",
72 
                    rollOverColor: "#585869",
73 
                    selectedColor: "#585869",
74 
                    pauseDuration: 0.2,
75 
                    animationDuration: 2.5,
76 
                    adjustAnimationSpeed: true
77 
                },
78 
 
79 
                linesSettings: {
80 
                    color: "#585869",
81 
                    alpha: 0.4
82 
                }
83 
            });
84 
        </script>
85 
    </head>
86 
 
87 
    <body>
88 
 
89 
        <div id="mapdiv" style="width: 100%; background-color:#d5eff7; height: 500px;"></div>
90 
        <br>
91 
        <div style="text-align:center; font-size:10px">
92 
            <a href="#" onclick="map.setProjection('winkel3')">Winkel 3</a> |
93 
            <a href="#" onclick="map.setProjection('eckert3')">Eckert 3</a> |
94 
            <a href="#" onclick="map.setProjection('eckert5')">Eckert 5</a> |
95 
            <a href="#" onclick="map.setProjection('eckert6')">Eckert 6</a> |
96 
            <a href="#" onclick="map.setProjection('miller')">Miller</a> |
97 
            <a href="#" onclick="map.setProjection('equirectangular')">Equirectangular</a> |
98 
            <a href="#" onclick="map.setProjection('mercator')">Mercator</a>
99 
        </div>
100 
    </body>
101 
 
102 
</html>