Simile Timemap for iPad with scroll!

Tweet

Pocket

I am writing this in English because I believe this info is quite useful for everyone.
I wanted to use SIMILE Timemap but it wouldn’t scroll on the iPad (probably iPhone too). Googling led me to this page:

Working example here:

• Kamakura event map http://aboutkamakura.com/event-map/
• Kamakura historical event map http://aboutkamakura.com/history-map/

To set up timemap, download from here. The above page is using timemap.2.0.1.
To make timemap work on iPad, you need to edit timeline-1.2.js in timemap2.0.1/lib. Deobfuscate by using tools like http://jsbeautifier.org/ and find where it says

    Timeline.DOM.registerEventWithObject(this._div, "mouseout", this, this._onMouseOut);
    Timeline.DOM.registerEventWithObject(this._div, "dblclick", this, this._onDblClick);

Under it, add:

    Timeline.DOM.registerEventWithObject(this._div,"touchstart",this,this._onTouchStart);
    Timeline.DOM.registerEventWithObject(this._div,"touchmove",this,this._onTouchMove);

Next, after where Timeline._Band = function (f, g, c) {} ends, add:

Timeline._Band.prototype._onTouchStart=function(D,A,E)
{
    if(A.touches.length == 1)
    {
        var touch = A.changedTouches[0];
        this._dragX=touch.clientX;
        this._dragY=touch.clientY;
    }
}
Timeline._Band.prototype._onTouchMove=function(D,A,E)
{
    if(A.touches.length == 1)
    {
        A.preventDefault();
        var touch = A.changedTouches[0];
        var C=touch.clientX-this._dragX;
        var B=touch.clientY-this._dragY;
        this._dragX=touch.clientX;
        this._dragY=touch.clientY;
        this._moveEther(this._timeline.isHorizontal()?C:B);
        this._positionHighlight();
        this._fireOnScroll();
        this._setSyncWithBandDate();
    }
};

Also in the iPad, when you click on the timeline the keyboard will show up. To disable this, find where it says this._keyboardInput.focus(); and comment it out.
Thanks to Kartik for his working demo.