Subversion Repositories qbpwcf-lib(archive)

Rev

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

Rev Author Line No. Line
1 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 
		<style type="text/css">
14 
            .amcharts-map-line {
15 
                stroke-dasharray: 2px 2px;
16 
                stroke-linejoin: round;
17 
                stroke-linecap: round;
18 
                -webkit-animation: am-moving-dashes 3s linear infinite;
19 
                animation: am-moving-dashes 3s linear infinite;
20 
            }
21 
 
22 
            @-webkit-keyframes am-moving-dashes {
23 
                100% {
24 
                    stroke-dashoffset: -30px;
25 
                }
26 
            }
27 
            @keyframes am-moving-dashes {
28 
                100% {
29 
                    stroke-dashoffset: -30px;
30 
                }
31 
            }
32 
 
33 
 
34 
            .amcharts-map-image-london {
35 
                -webkit-animation: am-pulsating 1s ease-out infinite;
36 
                animation: am-pulsating 1s ease-out infinite;
37 
            }
38 
            @-webkit-keyframes am-pulsating {
39 
                0% {
40 
                    transform: scale(0);
41 
                    opacity:1;
42 
                }
43 
                100% {
44 
                    transform: scale(4);
45 
                    opacity:0;
46 
                }
47 
            }
48 
            @keyframes am-pulsating {
49 
                0% {
50 
                    transform: scale(0);
51 
                    opacity:1;
52 
                }
53 
                100% {
54 
                    transform: scale(4);
55 
                    opacity:0;
56 
                }
57 
            }
58 
 
59 
 
60 
            .amcharts-map-area {
61 
                -webkit-transition: all .3s .3s ease-out;
62 
                transition: all .3s .3s ease-out;
63 
            }
64 
            .amcharts-map-area:hover {
65 
                fill: #93c765;
66 
                stroke: #93c765;
67 
                -webkit-transition: all .3s ease-out;
68 
                transition: all .3s ease-out;
69 
            }
70 
 
71 
        </style>
72 
 
73 
		<script>
74 
			// svg path for target icon
75 
			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";
76 
			// svg path for plane icon
77 
			var planeSVG = "M19.671,8.11l-2.777,2.777l-3.837-0.861c0.362-0.505,0.916-1.683,0.464-2.135c-0.518-0.517-1.979,0.278-2.305,0.604l-0.913,0.913L7.614,8.804l-2.021,2.021l2.232,1.061l-0.082,0.082l1.701,1.701l0.688-0.687l3.164,1.504L9.571,18.21H6.413l-1.137,1.138l3.6,0.948l1.83,1.83l0.947,3.598l1.137-1.137V21.43l3.725-3.725l1.504,3.164l-0.687,0.687l1.702,1.701l0.081-0.081l1.062,2.231l2.02-2.02l-0.604-2.689l0.912-0.912c0.326-0.326,1.121-1.789,0.604-2.306c-0.452-0.452-1.63,0.101-2.135,0.464l-0.861-3.838l2.777-2.777c0.947-0.947,3.599-4.862,2.62-5.839C24.533,4.512,20.618,7.163,19.671,8.11z";
78 
 
79 
			AmCharts.makeChart("mapdiv", {
80 
				type: "map",
81 
				addClassNames:true,
82 
 
83 
				dataProvider: {
84 
					map: "worldLow",
85 
					getAreasFromMap:true,
86 
					linkToObject: "london",
87 
					images: [{
88 
							id: "london",
89 
							color: "#000000",
90 
							type: "circle",
91 
							title: "London",
92 
							latitude: 51.5002,
93 
							longitude: -0.1262,
94 
							scale: 1.5,
95 
							zoomLevel: 2.74,
96 
							zoomLongitude: -20.1341,
97 
							zoomLatitude: 49.1712,
98 
 
99 
							lines: [{
100 
								latitudes: [51.5002, 50.4422],
101 
								longitudes: [-0.1262, 30.5367]
102 
							}, {
103 
								latitudes: [51.5002, 46.9480],
104 
								longitudes: [-0.1262, 7.4481]
105 
							}, {
106 
								latitudes: [51.5002, 59.3328],
107 
								longitudes: [-0.1262, 18.0645]
108 
							}, {
109 
								latitudes: [51.5002, 40.4167],
110 
								longitudes: [-0.1262, -3.7033]
111 
							}, {
112 
								latitudes: [51.5002, 46.0514],
113 
								longitudes: [-0.1262, 14.5060]
114 
							}, {
115 
								latitudes: [51.5002, 48.2116],
116 
								longitudes: [-0.1262, 17.1547]
117 
							}, {
118 
								latitudes: [51.5002, 44.8048],
119 
								longitudes: [-0.1262, 20.4781]
120 
							}, {
121 
								latitudes: [51.5002, 55.7558],
122 
								longitudes: [-0.1262, 37.6176]
123 
							}, {
124 
								latitudes: [51.5002, 38.7072],
125 
								longitudes: [-0.1262, -9.1355]
126 
							}, {
127 
								latitudes: [51.5002, 54.6896],
128 
								longitudes: [-0.1262, 25.2799]
129 
							}, {
130 
								latitudes: [51.5002, 64.1353],
131 
								longitudes: [-0.1262, -21.8952]
132 
							}, {
133 
								latitudes: [51.5002, 40.4300],
134 
								longitudes: [-0.1262, -74.0000]
135 
							}],
136 
 
137 
							images: [{
138 
								label: "Flights from London",
139 
								svgPath: planeSVG,
140 
								left: 100,
141 
								top: 45,
142 
								labelShiftY: 5,
143 
								color: "#CC0000",
144 
								labelColor: "#CC0000",
145 
								labelRollOverColor: "#CC0000",
146 
								labelFontSize: 20
147 
							}, {
148 
								label: "show flights from Vilnius",
149 
								left: 106,
150 
								top: 70,
151 
								labelColor: "#000000",
152 
								labelRollOverColor: "#CC0000",
153 
								labelFontSize: 11,
154 
								linkToObject: "vilnius"
155 
							}]
156 
						},
157 
 
158 
						{
159 
							id: "vilnius",
160 
							color: "#000000",
161 
							svgPath: targetSVG,
162 
							title: "Vilnius",
163 
							latitude: 54.6896,
164 
							longitude: 25.2799,
165 
							scale: 1.5,
166 
							zoomLevel: 4.92,
167 
							zoomLongitude: 15.4492,
168 
							zoomLatitude: 50.2631,
169 
 
170 
							lines: [{
171 
								latitudes: [54.6896, 50.8371],
172 
								longitudes: [25.2799, 4.3676]
173 
							}, {
174 
								latitudes: [54.6896, 59.9138],
175 
								longitudes: [25.2799, 10.7387]
176 
							}, {
177 
								latitudes: [54.6896, 40.4167],
178 
								longitudes: [25.2799, -3.7033]
179 
							}, {
180 
								latitudes: [54.6896, 50.0878],
181 
								longitudes: [25.2799, 14.4205]
182 
							}, {
183 
								latitudes: [54.6896, 48.2116],
184 
								longitudes: [25.2799, 17.1547]
185 
							}, {
186 
								latitudes: [54.6896, 44.8048],
187 
								longitudes: [25.2799, 20.4781]
188 
							}, {
189 
								latitudes: [54.6896, 55.7558],
190 
								longitudes: [25.2799, 37.6176]
191 
							}, {
192 
								latitudes: [54.6896, 37.9792],
193 
								longitudes: [25.2799, 23.7166]
194 
							}, {
195 
								latitudes: [54.6896, 54.6896],
196 
								longitudes: [25.2799, 25.2799]
197 
							}, {
198 
								latitudes: [54.6896, 51.5002],
199 
								longitudes: [25.2799, -0.1262]
200 
							}, {
201 
								latitudes: [54.6896, 53.3441],
202 
								longitudes: [25.2799, -6.2675]
203 
							}],
204 
 
205 
							images: [{
206 
								label: "Flights from Vilnius",
207 
								svgPath: planeSVG,
208 
								left: 100,
209 
								top: 45,
210 
								labelShiftY: 5,
211 
								color: "#CC0000",
212 
								labelColor: "#CC0000",
213 
								labelRollOverColor: "#CC0000",
214 
								labelFontSize: 20
215 
							}, {
216 
								label: "show flights from London",
217 
								left: 106,
218 
								top: 70,
219 
								labelColor: "#000000",
220 
								labelRollOverColor: "#CC0000",
221 
								labelFontSize: 11,
222 
								linkToObject: "london"
223 
							}]
224 
						}, {
225 
							svgPath: targetSVG,
226 
							title: "Brussels",
227 
							latitude: 50.8371,
228 
							longitude: 4.3676
229 
						}, {
230 
							svgPath: targetSVG,
231 
							title: "Prague",
232 
							latitude: 50.0878,
233 
							longitude: 14.4205
234 
						}, {
235 
							svgPath: targetSVG,
236 
							title: "Athens",
237 
							latitude: 37.9792,
238 
							longitude: 23.7166
239 
						}, {
240 
							svgPath: targetSVG,
241 
							title: "Reykjavik",
242 
							latitude: 64.1353,
243 
							longitude: -21.8952
244 
						}, {
245 
							svgPath: targetSVG,
246 
							title: "Dublin",
247 
							latitude: 53.3441,
248 
							longitude: -6.2675
249 
						}, {
250 
							svgPath: targetSVG,
251 
							title: "Oslo",
252 
							latitude: 59.9138,
253 
							longitude: 10.7387
254 
						}, {
255 
							svgPath: targetSVG,
256 
							title: "Lisbon",
257 
							latitude: 38.7072,
258 
							longitude: -9.1355
259 
						}, {
260 
							svgPath: targetSVG,
261 
							title: "Moscow",
262 
							latitude: 55.7558,
263 
							longitude: 37.6176
264 
						}, {
265 
							svgPath: targetSVG,
266 
							title: "Belgrade",
267 
							latitude: 44.8048,
268 
							longitude: 20.4781
269 
						}, {
270 
							svgPath: targetSVG,
271 
							title: "Bratislava",
272 
							latitude: 48.2116,
273 
							longitude: 17.1547
274 
						}, {
275 
							svgPath: targetSVG,
276 
							title: "Ljubljana",
277 
							latitude: 46.0514,
278 
							longitude: 14.5060
279 
						}, {
280 
							svgPath: targetSVG,
281 
							title: "Madrid",
282 
							latitude: 40.4167,
283 
							longitude: -3.7033
284 
						}, {
285 
							svgPath: targetSVG,
286 
							title: "Stockholm",
287 
							latitude: 59.3328,
288 
							longitude: 18.0645
289 
						}, {
290 
							svgPath: targetSVG,
291 
							title: "Bern",
292 
							latitude: 46.9480,
293 
							longitude: 7.4481
294 
						}, {
295 
							svgPath: targetSVG,
296 
							title: "Kiev",
297 
							latitude: 50.4422,
298 
							longitude: 30.5367
299 
						}, {
300 
							svgPath: targetSVG,
301 
							title: "Paris",
302 
							latitude: 48.8567,
303 
							longitude: 2.3510
304 
						}, {
305 
							svgPath: targetSVG,
306 
							title: "New York",
307 
							latitude: 40.43,
308 
							longitude: -74
309 
						}
310 
					]
311 
				},
312 
 
313 
				areasSettings: {
314 
					unlistedAreasColor: "#FFCC00"
315 
				},
316 
 
317 
				imagesSettings: {
318 
					color: "#CC0000",
319 
					rollOverColor: "#CC0000",
320 
					selectedColor: "#000000"
321 
				},
322 
 
323 
				linesSettings: {
324 
					color: "#CC0000",
325 
					alpha: 0.4
326 
				},
327 
 
328 
 
329 
				backgroundZoomsToTop: true,
330 
				linesAboveImages: true
331 
			});
332 
        </script>
333 
    </head>
334 
 
335 
    <body>
336 
    	<div class="ammapAlert">Attention! CSS animations of SVG elements do not work on any version of IE</div>
337 
        <div id="mapdiv" style="width: 100%; background-color:#eeeeee; height: 500px;"></div>
338 
    </body>
339 
 
340 
</html>