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); } }); - }; /**