JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="map">    
    <div class="map_mini"></div>
    <div class="map_inner"></div>    
</div>

CSS

.map {
    width: 300px;
    height: 300px;
    overflow: hidden;
}

.map_inner {
    background-image: url(https://dl.dropboxusercontent.com/u/825859/L.png);
    background-size: cover;
    width: 900px;
    height: 900px;  
}

.map_mini {
    background-image: url(https://dl.dropboxusercontent.com/u/825859/L.png);
    background-size: cover;    
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid white;
}

JavaScript

$.fn.mapNavigate = function(options) {
    var defaults = {
        context: this,
        offsetX: 2,
        offsetY: 2,
        speed: 200
    };
    
    var opts = $.extend({}, defaults, options);
        
    $(this).on({
        mousedown: function(event) {
            $(this).mousemove(function(event) {
                $(opts.context).scrollLeft(event.pageX * opts.offsetX).scrollTop(event.pageY * opts.offsetY);
            });
        },
        mouseup: function(event) {
            $(this).off('mousemove');
        },
        click: function(event) {
            $(opts.context).animate({
                'scrollTop': event.pageY * opts.offsetY, 
                'scrollLeft': event.pageX * opts.offsetX
            }, opts.speed);
        }
    });
    
    return this;
}

$('.map_mini').mapNavigate({
    context: '.map',
    offsetX: 5,
    offsetY: 5,
    speed: 300
});

$('.map').mapNavigate({
    speed: 300
});