-
Notifications
You must be signed in to change notification settings - Fork 15
/
index.html
83 lines (82 loc) · 3.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<meta name='apple-mobile-web-app-status-bar-style' content='black' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>easey</title>
<link href='site.css' rel='stylesheet' />
</head>
<body>
<div id='header'>
<strong>Easey</strong> is a simple map animation library. | <a href='https://github.com/mapbox/easey/wiki'>API Docs on the Wiki</a> | <a href='https://github.com/mapbox/easey'>Clone & Get on GitHub</a>
<a href='http://mapbox.com/easey/test/'>Tests</a> | <a href='https://modestmaps.com/'>Modest Maps</a>
</div>
<div class='right'>
<p>Easey is a map animation library. It works with <a href='http://modestmaps.com/'>Modest Maps</a> and provides
advanced <a href='http://www.robertpenner.com/easing/'>easing</a> as well as inertial panning and zooming.</p>
<pre id='console'></pre>
<pre class='live'>
easey().map(map)
.to(map.locationCoordinate({ lat: 38, lon: -80 })
.zoomTo(5)).run(2000);
</pre>
<pre class='live'>
easey().map(map)
.to(map.locationCoordinate({ lat: 38, lon: 80 })
.zoomTo(10))
.path('about')
.run(2000);
</pre>
<pre class='live'>
easey().map(map)
.to(map.locationCoordinate({ lat: 60, lon: 11}))
.zoom(8).optimal();
</pre>
<div id='scrolly'>
<div class='topic'>
<h3>Afghanistan</h3>
<small>The country sits at an important geostrategic location that connects the Middle East with Central Asia and the Indian subcontinent,[12] which has been home to various peoples through the ages</small>
</div>
<div class='topic'>
<h3>Iraq</h3>
<small>Iraq borders Syria to the northwest, Turkey to the north, Iran to the east, Jordan to the southwest and Kuwait and Saudi Arabia to the south. Iraq has a narrow section of coastline measuring 58 km (36 mi) on the northern Persian Gulf. The capital city, Baghdad is in the center-east of the country.</small>
</div>
<div class='topic'>
<h3>Pakistan</h3>
<small>The region forming modern Pakistan was the site of several ancient cultures including the neolithic Mehrgarh and the bronze era Indus Valley Civilisation. Subsequently it has seen invasions or settlements by Hindu, Persian, Indo-Greek, Islamic, Turco-Mongol, Afghan and Sikh cultures.</small>
</div>
</div>
</div>
<div id='map'></div>
<script src='ext/modestmaps.min.js'></script>
<script src='src/easey.js'></script>
<script src='src/easey.handlers.js'></script>
<script src='ext/ender.js'></script>
<script src='ext/wax.mm.min.js'></script>
<script src='index.js'></script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12158002-1']);
_gaq.push(['_setDomainName', '.mapbox.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '4e57cacc613f5d762a000001');
t.src = '//secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>
</body>
</html>