JQM Orientation SVG Scale

Question

I am attempting to work on a mobile site using the maps found at jVectorMap http://jvectormap.owl-hollow.net/ I found that when viewing the page on an iphone in landscape mode, I needed to change the scale command to .4. However, when in portrait mode, it needs to be smaller, such as .2.

I am using this code to adjust the scale value found in the js library downloaded from jVectorMap. The commented out code is the original code that i modified in an attempt to fit an iphone screen

    applyTransformParams: function(scale, transX, transY) {
        if (this.mode == 'svg') {
            this.rootGroup.setAttribute('transform', 'scale(.4) translate(30, '+transY+')');
//this.rootGroup.setAttribute('transform', 'scale('+scale+') translate('+transX+', '+transY+')');
        } else {
            this.rootGroup.coordorigin = (this.width-transX)+','+(this.height-transY);
            this.rootGroup.coordsize = this.width/scale+','+this.height/scale;
        }
    }

My question is, is there a way I can determine the screen orientation via the js and have it update the scale numbers? Or perhaps there is a command for a best fit for mobile?

Thanks for any help

Answer 1

You can check if a browser supports the onorientationchange event (or fall back to onresize) like this:

var evt;
if ((typeof window.orientation !== 'undefined') && ('onorientationchange' in window)) {
    evt = 'orientationchange';
} else {
    evt = 'resize';
}

You can always get the orientation like this:

var getOrientation = function () {
    if (evt === 'orientationchange') {
        return = (window.orientation === 0) ? 'portrait' : 'landscape';
    } else {
        return = (window.innerHeight > window.innerWidth) ? 'portrait' : 'landscape';
    }

};

Then you can subscribe to that event & do your scaling there.

var originalOrientation = getOrientation;
window.addEventListener(evt, function () {
    var orientation = getOrientation();
    if (orientation !== originalOrientation) {
        originalOrientation = orientation;
        // do your scaling here...
    }
});