XRaderViewとりあえずすぎるバージョン

app.js

var initAreaKey = 'kinki01';
var areaList = new (require('area'))();
var map = new (require('xmap'))(areaList, initAreaKey);
var appWindow = Titanium.UI.createWindow({
    title : 'XRaderView',
    backgroundColor : '#fff',
    tabBarHidden : true
});

var sideView = Ti.UI.createView({
    backgroundColor : Ti.UI.iOS.COLOR_SCROLLVIEW_BACKGROUND,
    width : 202,
    left : -202,
    zIndex : 100
});

var miniMap = Ti.UI.createImageView({
    image : 'http://www.river.go.jp/xbandradar/map/kinki01/minimap.png',
    width : areaList[initAreaKey].mwidth,
    height : areaList[initAreaKey].mheight,
    top : 0,
    left : 0
});

var location = Ti.UI.createView({
    backgroundColor : 'gray',
    opacity : 0.5,
    zIndex : 200,
    width : 30,
    height : 30,
    borderWidth : 2,
    borderColor : 'black'
});

miniMap.addEventListener('click', function(e) {
    var x = (areaList[initAreaKey].dwidth / areaList[initAreaKey].mwidth) * e.x - (Ti.Platform.displayCaps.platformWidth / 2);
    var y = (areaList[initAreaKey].dheight / areaList[initAreaKey].mheight) * e.y - (Ti.Platform.displayCaps.platformHeight / 2);
    map.view.scrollTo(x, y);
});

var legend = Ti.UI.createImageView({
    image : 'http://www.river.go.jp/xbandradar/common/img/legend_cast.gif',
    width : 122,
    height : 170,
    bottom : 8
});
sideView.add(miniMap);
sideView.add(legend);
sideView.add(location);

var isSideViewOpen = false;

appWindow.leftNavButton = (function() {
    var button = Ti.UI.createButton({
        systemButton : Ti.UI.iPhone.SystemButton.BOOKMARKS
    });
    button.addEventListener('click', function() {
        if (isSideViewOpen) {
            sideView.animate({
                left : -202,
                duration : 300
            });
        }
        else {
            sideView.animate({
                left : 0,
                duration : 300
            });
        }
        isSideViewOpen = !isSideViewOpen;
    });
    return button;
})();

appWindow.rightNavButton = (function() {
    var button = Ti.UI.createButton({
        systemButton : Ti.UI.iPhone.SystemButton.REFRESH
    });
    button.addEventListener('click', function() {
        map.refreshDetail(initAreaKey);
    });
    return button;
})();
appWindow.add(map.view);
appWindow.add(sideView);

map.view.addEventListener('scroll', function(e) {
    var x = (areaList[initAreaKey].mwidth / areaList[initAreaKey].dwidth) * e.x;
    var y = (areaList[initAreaKey].mheight / areaList[initAreaKey].dheight) * e.y;
    location.left = x;
    location.top  = y;
});
map.view.addEventListener('singletap', function(e){
    if(isSideViewOpen){
        isSideViewOpen = false;
        sideView.animate({
            left : -202,
            duration : 300
        });
    }
});
var tabGroup = Titanium.UI.createTabGroup();
tabGroup.addTab(Titanium.UI.createTab({
    window : appWindow
}));
tabGroup.open();

area.js

module.exports = function(){

    var arealist = {};
    
    arealist["tohoku01"] = {
        name:"栗駒山周辺",
        width:651,
        height:659,
        dwidth:3877,
        dheight:3925,
        mwidth:200,
        mheight:202,
        x1:504000.00,
        y1:142830.00,
        x2:511560.00,
        y2:136800.00
    };
    arealist["kanto01"] = {
            name:"関東",
            width:571,
            height:699,
            dwidth:3400,
            dheight:4160,
            mwidth:200,
            mheight:245,
            x1:499320.00,
            y1:131850.00,
            x2:505950.00,
            y2:125460.00
    };
    arealist["hokuriku02"] = {
        name:"新潟",
        width:649,
        height:653,
        dwidth:3862,
        dheight:3886,
        mwidth:200,
        mheight:201,
        x1:496800.00,
        y1:138810.00,
        x2:504330.00,
        y2:132840.00
    };
    arealist["hokuriku01"] = {
            name:"富山・石川",
            width:729,
            height:673,
            dwidth:4339,
            dheight:4003,
            mwidth:200,
            mheight:181,
            x1:488880.00,
            y1:134760.00,
            x2:497340.00,
            y2:128610.00
    };
    arealist["chubu02"] = {
        name:"静岡",
        width:512,
        height:568,
        dwidth:3046,
        dheight:3378,
        mwidth:200,
        mheight:222,
        x1:496710.00,
        y1:129300.00,
        x2:502650.00,
        y2:124110.00
    };
    arealist["chubu01"] = {
            name:"中部",
            width:708,
            height:738,
            dwidth:4216,
            dheight:4394,
            mwidth:200,
            mheight:208,
            x1:488490.00,
            y1:129720.00,
            x2:496710.00,
            y2:122970.00
    };
    arealist["kinki01"] = {
            name:"近畿",
            width:760,
            height:768,
            dwidth:4523,
            dheight:4570,
            mwidth:200,
            mheight:202,
            x1:483690.00,
            y1:128040.00,
            x2:492510.00,
            y2:121020.00
    };
    arealist["chugoku01"] = {
        name:"岡山",
        width:625,
        height:676,
        dwidth:3723,
        dheight:4023,
        mwidth:200,
        mheight:216,
        x1:478800.00,
        y1:127800.00,
        x2:486060.00,
        y2:121620.00
    };
    arealist["chugoku02"] = {
        name:"広島",
        width:698,
        height:636,
        dwidth:4154,
        dheight:3789,
        mwidth:200,
        mheight:182,
        x1:472950.00,
        y1:126900.00,
        x2:481050.00,
        y2:121080.00
    };
    arealist["kyushu01"] = {
        name:"九州北部",
        width:721,
        height:781,
        dwidth:4292,
        dheight:4648,
        mwidth:200,
        mheight:217,
        x1:466380.00,
        y1:124800.00,
        x2:474750.00,
        y2:117660.00
    };
    arealist["kyushu02"] = {
        name:"桜島周辺",
        width:548,
        height:548,
        dwidth:3000,
        dheight:3261,
        mwidth:200,
        mheight:200,
        x1:467550.00,
        y1:116010.00,
        x2:473400.00,
        y2:111000.00 
    };

    return arealist;    
};

xmap.js

module.exports = function(areaList, initKey){

    var obj = {};
    
    obj.view = Titanium.UI.createScrollView({
        contentWidth:'auto',
        contentHeight:'auto',
        showVerticalScrollIndicator:true,
        showHorizontalScrollIndicator:true,
        scrollsToTop: false        
    });
    obj.baseMap = null;
    obj.detailMap = null;
    
    obj.getUrlBaseMap = function(key){
        var url = 'http://www.river.go.jp/xbandradar/map/' + key + '/2/basemap1.png';
        return url;
    };
    obj.getUrlDetailMap = function(key){
        // 早すぎたらデータがないので１分前を取得する
        var now = new Date();
        now.setTime(now.getTime() - 60000);
        var pad = function(n){ return(n < 10 ? '0'+ n : '' + n)};
        var yyyymmdd = '' + now.getFullYear() + pad(now.getMonth() + 1) + pad(now.getDate());
        var hhmm     = '' + pad(now.getHours()) + pad(now.getMinutes());

        var dir = '';
        if(hhmm < '0600'){
            dir = '0000';
        }
        else if(hhmm < '1200'){
            dir = '0600';
        }
        else if(hhmm < '1800'){
            dir = '1200';
        }
        else{
            dir = '1800';
        }

        var url = 'http://www.river.go.jp/xbandradar/rdimg/' + key + '/' + yyyymmdd +'/' + dir + '/'+ key + yyyymmdd + 'T' + hhmm + '_detail.png';
        return url;        
    };

    obj.setArea = function(key){
        if(obj.baseMap !== null){
            obj.view.remove(obj.baseMap);
            obj.baseMap = null;
        }
        if(obj.detailMap !== null){
            obj.view.remove(obj.detailMap);
            obj.detailMap = null;
        }
        var area = areaList[key];
        obj.baseMap = Titanium.UI.createImageView({
            top:0,
            left:0,
            image: obj.getUrlBaseMap(key),
            width: area.dwidth,
            height: area.dheight,
            zIndex:0    
        }); 
        obj.detailMap = Titanium.UI.createImageView({
            top:0,
            left:0,
            image: obj.getUrlDetailMap(key),
            width: area.dwidth,
            height: area.dheight,
            opacity:0.5,
            zIndex:1
        });
        obj.view.add(obj.baseMap);
        obj.view.add(obj.detailMap);         
        obj.view.scrollTo(area.dwidth / 2, area.dheight / 2);
    };
    
    obj.refreshDetail = function(key){
        obj.detailMap.image = obj.getUrlDetailMap(key);
    }
    
    obj.setArea(initKey);

    return obj;    
};