diff --git a/examples/ow-scrub.html b/examples/ow-scrub.html
index 5d1483e..56dfcb7 100644
--- a/examples/ow-scrub.html
+++ b/examples/ow-scrub.html
@@ -15,6 +15,25 @@
right:25px;
width:300px;
}
+ #torque-pause{
+ position:absolute;
+ bottom:12px;
+ right:345px;
+ width:28px;
+ height: 26px;
+ padding: 1px 2px 2px 2px;
+ z-index: 1000;
+ border-radius: 3px;
+ cursor: pointer;
+ }
+ .playing {background-color: white; background-image: url(../img/pause.png); background-repeat:no-repeat; background-position:center; }
+ .paused { background-color: white; background-image: url(../img/play.png);background-repeat:no-repeat; background-position:center;}
+/* #torque-pause .playing {
+ background-image: url('../img/pause.png');
+ }
+ #torque-pause .paused{
+ background-image: url('../img/play.png');
+ }*/
@@ -84,7 +103,7 @@
trails:true,
point_type:'circle',
cellsize:1,
- scrub: true
+ scrub: true,
}
var torque = null;
@@ -92,8 +111,26 @@
Torque.app = new env.app.Instance();
torque = new Torque.app.addLayer(map, TorqueOptions);
Torque.env = env;
+
+ // TODO pause method needs to be added to Torque UI options
+ var pause = $('');
+ $(pause).attr('id','torque-pause')
+ $(pause).addClass("playing");
+ $('body').append(pause);
+ $(pause).click(function(){
+ if($(this).hasClass('paused')){
+ torque.pause();
+ $(this).removeClass("paused");
+ $(this).addClass("playing");
+ } else {
+ $(this).removeClass("playing");
+ $(this).addClass("paused");
+ torque.pause();
+ }
+ });
});
+
}
diff --git a/img/pause.png b/img/pause.png
new file mode 100755
index 0000000..90d5b44
Binary files /dev/null and b/img/pause.png differ
diff --git a/img/play.png b/img/play.png
new file mode 100755
index 0000000..941d3fb
Binary files /dev/null and b/img/play.png differ
diff --git a/src/torque.js b/src/torque.js
index 5bcf7b0..8344edc 100644
--- a/src/torque.js
+++ b/src/torque.js
@@ -350,7 +350,6 @@ function init_slider( that ){
that.scrub(ui.value);
}
});
-
};
/**