Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Future is now, demo etc

  • Loading branch information...
commit 8883f523667f7af4e02c21b610344c20377b3b59 1 parent d679ecd
@tmcw tmcw authored
Showing with 131 additions and 18 deletions.
  1. +31 −12 index.html
  2. +28 −0 index.js
  3. +70 −0 site.css
  4. +2 −6 src/easey.js
View
43 index.html
@@ -14,22 +14,41 @@
<link href='site.css' type='text/css' rel='stylesheet' />
</head>
<body>
- <div id='map'></div>
+ <div id='header'>
+ <strong>Easey</strong> is a simple map animation library.
+ </div>
<div class='right'>
- <div class='intro'>
- <p><strong>easey</strong> is an easing library for
- <a href='http://github.com/stamen/modestmaps-js'>Modest Maps</a> that
- makes your map transitions slick and fancy. You can <a href='http://ds.io/ooBi3R'>read
- a bit about easey</a> on our blog.</p>
-
- <p>Easey has two parts: handlers, that make your normal interaction with
- a map slicker, and an API, that lets you run transitions robotically.</p>
+<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>
- <p><a href='https://github.com/mapbox/easey'>get it on GitHub</a>
- and do cool things with it.</p>
+ <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>
+ <div id='map'></div>
+
<script src='index.js' type='text/javascript'></script>
<script type="text/javascript">
var _gaq = _gaq || [];
View
28 index.js
@@ -12,5 +12,33 @@ window.onload = function() {
easey.DoubleClickHandler()
]);
map.setCenterZoom(new com.modestmaps.Location(-10, 50), 3);
+
+ var pres = document.getElementsByTagName('pre');
+
+ for (var i = 0; i < pres.length; i++) {
+ pres[i].onclick = function() {
+ eval(this.innerHTML);
+ };
+ }
+
+
+ var scrolly = document.getElementById('scrolly');
+
+ var positions = [
+ map.locationCoordinate({ lat: 33.5, lon: 65.6 }).zoomTo(6),
+ map.locationCoordinate({ lat: 33.1, lon: 44.6 }).zoomTo(6),
+ map.locationCoordinate({ lat: 28.7, lon: 69.2 }).zoomTo(6)];
+
+ var ea = easey().map(map);
+
+ function update() {
+ var pos = scrolly.scrollTop / 200;
+
+ ea.from(positions[Math.floor(pos)])
+ .to(positions[Math.ceil(pos)])
+ .t(pos - Math.floor(pos));
+ }
+
+ scrolly.addEventListener('scroll', update, false);
});
};
View
70 site.css
@@ -0,0 +1,70 @@
+body, button {
+ font:13px/20px "Helvetica Neue", "Helvetica", sans-serif;
+}
+body {
+ background:#9098a1;
+}
+html, body, pre, h1, h2, h3, p {
+ margin:0;padding:0;
+}
+a { color: #A50B00; }
+div.intro {
+ padding:10px;
+ margin-bottom:20px;
+ border:1px solid #000;
+ background:#fff;
+}
+#map {
+ background:#d7edf8;
+ position:absolute;
+ top:50px;
+ right:400px;
+ left:0;
+ bottom:0;
+}
+
+#header {
+ position:absolute;
+ top:0px;
+ right:0;
+ left:0;
+ height:29px;
+ padding:10px;
+ background:#fff;
+ border-bottom:1px solid #aaa;
+}
+
+.right {
+ position:absolute;
+ top:50px;
+ right:0px;
+ background:#fff;
+ padding:10px;
+ z-index:999;
+ width:380px;
+}
+
+pre.live {
+ margin-top:5px;
+ color:#444;
+}
+
+pre.live:hover {
+ color:#000;
+}
+
+div.codeblock {
+ background:#fff;
+ padding:10px;
+ width:448px;
+ margin-bottom:10px;
+}
+
+#scrolly {
+ height:200px;
+ overflow:auto;
+}
+
+#scrolly div.topic {
+ height:200px;
+}
View
8 src/easey.js
@@ -42,11 +42,6 @@
return easey;
};
- easey.time = function(x) {
- time = x;
- return easey;
- };
-
easey.from = function(x) {
if (!arguments.length) return from.copy();
from = x.copy();
@@ -140,7 +135,8 @@
}, 1);
};
- easey.run = function(callback) {
+ easey.run = function(time, callback) {
+
var start = (+new Date());
running = true;
Please sign in to comment.
Something went wrong with that request. Please try again.