JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map">
    <img src="http://images.wikia.com/dragonage/images/8/80/ThedasMap.jpg" alt="map" class="worldmap"/>
</div>

CSS

#map, .worldmap, #map:after {
    position: absolute;
    top: 0; left: 0;
}
#map {
    right: 0; bottom: 0;
    background: #ddd;
    overflow: hidden;
}

#map:after {
    content: "";
    margin: 50% 0 0 50%;
    width: 4px; height: 4px;
    top: -2px; left: -2px;
    background: red;
    border-radius: 100%;
}


.worldmap {
    
}

.worldmap.animated {
   
}

JavaScript

var Map, $win, $doc;

$win = $(window);
$doc = $(document);
    
Map = function(){
    this.$map = null;
    this.$container = null;
    
    this.containerWidth = null;
    this.containerHeight = null;
    
    this.mapY = null; // |
    this.mapX = null; // -
    
    this.centerY = null;
    this.centerX = null;
    
    this.timerHelper = null;
};

Map.prototype.init = function($container,$map){
    this.$map = $container;
    this.$container = $map;
};

Map.prototype.mesureContainer = function(){
    this.containerWidth = this.$container.width();
    this.containerHeight = this.$container.height();    
};

Map.prototype.getContainerCenterPosition = function(){
    this.centerX = Math.ceil( this.containerWidth / 2);
    this.centerY = Math.ceil( this.containerHeight / 2);
};

Map.prototype.goToPosition = function(position){ //array y x
    this.$map.css({"top": position[0],"left": position[1]});
};

Map.prototype.animateToPosition = function(position,speed,easing){ //array y x 
    var self = this;
    this.$map.css("transition", "top " + (speed || 300) + "ms " + (easing || "linear") + " ,left " + (speed || 300) + "ms " + (easing || "linear"));
    
    clearTimeout(this.timerHelper);
    this.timerHelper = setTimeout(function(){
        self.goToPosition(position);
    },10)
    
};

Map.prototype.setLocation = function(locationName,position){

};

// init

var M = new Map();

M.init( $("#map"),$(".worldmap").eq(0) );

//build an image preloader
M.goToPosition([-120,-250]);
setTimeout(function(){
    M.animateToPosition([-1200,-2502],3000,"ease-in-out");
},2000);
setTimeout(function(){
    M.animateToPosition([-3000,-5502],3000,"ease-in-out");
},6000);
setTimeout(function(){
    M.animateToPosition([-4300,-202],3000,"ease-in-out");
},12000);