Tuesday, April 17, 2012

OpenLayers Zoom Fade + Resize Transition Effect

Taking the inspiration from Leaffet which uses modern browsers' css3 transition effect to add a fade effect to map zoom/pan, I quickly customised OpenLayers to do similar thing.

The fade effect is supported well in modern version of Firefox and Chrome, as well as in IE10+.
For IE 6, 7 and 8, I use the javascript timer to transition the opacity of a tile.

Get the code from
https://github.com/lydonchandra/openlayers/blob/release-2.11/lib/OpenLayers/Tile/Image.js
or
OpenLayers-distro/OpenLayers-2.11/lib/OpenLayers/Tile/Image.js



    show: function(isResize, ratio) {

        if( OpenLayers.Util.getBrowserName() === 'msie' ) {

                if(  isResize &&  
                        this.frame.style.display === 'none' &&
                        ratio !== undefined && ratio > 1 ) {

                            //console.log( 'resizing, ratio==' + ratio + ' display==' + this.frame.style.display );

                            this.frame.style.display = '';

                            // style.opacity is only supported by IE9+
                            this.frame.style.opacity = 0;

                            // have to use filter for IE7 and IE8
                            this.frame.style.filter = 'alpha(opacity=' + 0 + ')';
                            var theFrame0 = this.frame;
                            window.setTimeout(
                                    function() {
                                        theFrame0.style.opacity = 0.5;

                                        theFrame0.style.filter = 'alpha(opacity=' + 50 + ')';
//                                        window.setTimeout(
//                                                function() {
//                                                    theFrame0.style.opacity = 0.4;
//                                                    theFrame0.style.filter = 'alpha(opacity=' + 40 + ')';
//                                                    window.setTimeout(
//                                                            function() {
//                                                                theFrame0.style.opacity = 0.6;
//                                                                theFrame0.style.filter = 'alpha(opacity=' + 60 + ')';
//                                                                window.setTimeout(
//                                                                        function() {
//                                                                            theFrame0.style.opacity = 0.8;
//                                                                            theFrame0.style.filter = 'alpha(opacity=' + 80 + ')';
//                                                                                      

                                                                                    window.setTimeout( function(){

                                                                                        theFrame0.style.opacity = 1;

                                                                                        theFrame0.style.filter = 'alpha(opacity=' + 100 + ')';

                                                                                    }, 100);

                                                                          

//                                                                        }, 100
//                                                              
//                                                                );
//                                                              
//                                                            }, 100
//                                                  
//                                                    );
//                                                  
//                                                }, 100
//                                           );

                                       

                                }, 100 );

                } else if( !isResize && ratio === 1 && this.frame.style.display === 'none'){

    //                console.log('resizing, ratio==' + ratio);
   
                    this.frame.style.opacity = 1;
                    this.frame.style.display = '';
                    this.frame.style.filter = 'alpha(opacity=' + 100 + ')';

                }  else {

//                console.log('else --- ratio==' + ratio + ' display==' + this.frame.style.display + ' isResize==' + isResize );
//                 this.frame.style.opacity = 1;
//                 this.frame.style.display = '';
//                 this.frame.style.filter = 'alpha(opacity=' + 100 + ')';

                if( this.frame.style.display === 'none' ) {

                        this.frame.style.display = '';

                        // style.opacity is only supported by IE9+
                        this.frame.style.opacity = 0;

                        // have to use filter for IE7 and IE8
                        this.frame.style.filter = 'alpha(opacity=' + 0 + ')';

                        var theFrame0 = this.frame;

                        window.setTimeout(

                                function() {

                                    theFrame0.style.opacity = 0.5;

                                    theFrame0.style.filter = 'alpha(opacity=' + 50 + ')';
                                  

//                                    window.setTimeout(

//                                            function() {

//                                                theFrame0.style.opacity = 0.4;
//                                                theFrame0.style.filter = 'alpha(opacity=' + 40 + ')';
//                                                window.setTimeout(
//                                                        function() {
//                                                            theFrame0.style.opacity = 0.6;
//                                                            theFrame0.style.filter = 'alpha(opacity=' + 60 + ')';
//                                                            window.setTimeout(
//                                                                    function() {
//                                                                        theFrame0.style.opacity = 0.8;
//                                                                        theFrame0.style.filter = 'alpha(opacity=' + 80 + ')';

                                                                                window.setTimeout( function(){
                                                                                        theFrame0.style.opacity = 1;
                                                                                        theFrame0.style.filter = 'alpha(opacity=' + 100 + ')';

                                                                                }, 200);

//                                                                    }, 100
//                                                            );
//                                                        }, 100

//                                                );
//                                              
//                                            }, 100
//                                       );

                            }, 200 );

                }
            }
        }

        else {
                                       

          if(  !isResize &&   
   
                  this.frame.style.display === 'none' ) {
   
                  this.frame.style.opacity = 0;
                this.frame.style.display = '';
                this.frame.style.transition = 'opacity 0.5s ease-in';
                this.frame.style.WebkitTransition = 'opacity 0.5s ease-in';
                this.frame.style.MozTransition = 'opacity 0.5s ease-in';
       
                var theFrame = this.frame;
                setTimeout( function() {
       
                // have to give it some time and then set the opacity
                // otherwise the transition effect won't kick in
                theFrame.style.opacity = 1;
                }, 50 );
   
            } else {
   
                this.frame.style.opacity = 1;
                // remove transition effect so it doesn't get applied everytime,
                // we control when it gets applied (only when showing the tile as above)
                this.frame.style.transition = '';
                this.frame.style.WebkitTransition = '';
                this.frame.style.MozTransition = '';
                this.frame.style.display = '';
            }
       }

       

        // Force a reflow on gecko based browsers to actually show the element

            // before continuing execution.

            if (OpenLayers.Util.indexOf(this.layer.SUPPORTED_TRANSITIONS,

                    this.layer.transitionEffect) != -1) {

                if (OpenLayers.IS_GECKO === true) {

//                    this.frame.scrollLeft = this.frame.scrollLeft;

                }

            }

        }

2 comments:

  1. Hi! I tried to implement this code in my application and the resize method is working as before. There is any special property which must be activated ?

    Thanks !

    ReplyDelete
  2. Great post. Thank you very very much.This article is efficient. Thank you for sharing it with us. I am visiting this
    blog on a daily basis and I am finding so much helpful article each time.
    Keep working on this and thank you once again.Do you know about adulterant. xnxx

    ReplyDelete