A CodePen by Michael Dobekidis. Globe SVG animation - The world map with SVG injection, animation and drag&drop with JQueryUI.

index.html

<div id='mainBG'>

  
</div>


        <div id="mainBox">

        </div>

        <div id="toolbox">
             <div class="animateSignal" id="zoom1">
                Zoom In
            </div>

            <div class="animateSignal" id="zoom2">
                Zoom out
            </div>

            <div class="animateSignal" id="zoom3">
                Reset
            </div>

             <div class="animateSignal" id="zoom4">
                Center
            </div>
        </div>

script.js

$(document).ready(function($) {

    var mainContainer = $("#mainBox");

    mainContainer.append(svgMapVector);

    var svgChildren = $('g').children();
    var svgMain     = $("#Layer_1");

    svgMain.draggable();
    svgChildren.css({'fill':'#444444'});

    svgChildren.each(function(index){
        $(this).attr('id','element_'+index);

        $(this)
    });

    $("#zoom1").on('click',function(){

        TweenMax.to(svgMain,0.5,{css:{scaleX:'+=0.5',scaleY:'+=0.5'}});

    });

     $("#zoom2").on('click',function(){

        TweenMax.to(svgMain,0.5,{css:{scaleX:'-=0.5',scaleY:'-=0.5'}});

    });

    $("#zoom3").on('click',function(){

         TweenMax.to(svgMain,0.5,{css:{scaleX:'1',scaleY:'1','top':0,'left':0}});

    });

     $("#zoom4").on('click',function(){

        TweenMax.to(svgMain,0.5,{css:{'top':0,'left':0}});

    });

});

style.css

body{
    margin:0px;
}

#mainBG{
    background: #63b6db; /* Old browsers */
    background: -moz-linear-gradient(top,  #63b6db 0%, #309dcf 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#63b6db), color-stop(100%,#309dcf)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #63b6db 0%,#309dcf 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #63b6db 0%,#309dcf 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #63b6db 0%,#309dcf 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #63b6db 0%,#309dcf 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63b6db', endColorstr='#309dcf',GradientType=0 ); /* IE6-9 */
    margin: 0px;
    position:fixed;
    width: 100%;
    height: 100%;

}

html{
    height: 100%;
}

#mainBox{
    margin: 0 auto;
    position: relative;
    float: left;
    left: 50%;
    margin-left: -250px;
    top: 100px;
}

.animateSignal{
    width:100px;
    height:30px;
    line-height: 27px;
    border:1px solid #000;
    background-color:#cdcdcd;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom:8px;
}

#toolbox{
    float:left;
    position:fixed;
    width:100px;
    height:400px;
    horizontal-align:center;
    text-align: center;
    top: 100px;
    left: 20px;
}

/* LOADING SCREEN */

#loadingBox{
    position:relative;
    margin:0 auto;
    width:400px;
    height:250px;
    border-radius:5px;
    background-color:#cdcdcd;
    border:2px solid #444;
    z-index:110;
    position:absolute;
}


#modal{
    position:fixed;
    width:100%;
    height:100%;
    opacity:0.70;
    background-color:#cdcdcd;
    z-index: 100;
}

#xBtn {
    background-image: url('buttons.png');
    width: 42px;
    height: 42px;
    background-position: 47px 387px;
    position: absolute;
    top: 20px;
    left: 20px;
}

#xBtn:hover{
    background-position: 47px -4px;
}