JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map">
    <img id="marker" width="30" height="30" src="http://i.imgur.com/MUlVIyg.png" />
</div>

CSS

#map {
    background-image:url('http://i.imgur.com/ZZHnuaf.png');
    width:517px;
    height:374px;
    position: absolute;
}
#marker {
    position: relative;
}

JavaScript

(function () {
    var INITIAL_X = 300,
        INITIAL_Y = 140;
    
    // f(v) -> {"x" : x, "y" : y}
    var calculatePosition = function (value) {
        var result = {};

        result.x = INITIAL_X + 4 * value;
        result.y = INITIAL_Y + 2 * value;

        return result;
    }

    var map = {
        marker : null,
        value : 0,

        setPosition : function (x, y) {
            marker.style.left = x + "px";
            marker.style.top  = y + "px";
        },

        init : function () {
            marker = document.getElementById("marker");
            this.setPosition(INITIAL_X, INITIAL_Y);
        },

        increment : function () {
            this.value++;
            var result = calculatePosition(this.value);
            this.setPosition(result.x, result.y);
        },
        
        decrement : function() {
            this.value--;
            var result = calculatePosition(this.value);
            this.setPosition(result.x, result.y);
        }
    };
 
    map.init();
    for (var i  = 0; i < 25; i++) {
        map.decrement();
    }
})();