JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://dl.dropbox.com/u/107346/share/ui-lightness/jquery-ui.css">
<div id="viewport">
    <img id="crosshairs" src="http://dl.dropbox.com/u/107346/share/crosshairs.png" alt="" />
    <img id="map" src="http://dl.dropbox.com/u/107346/share/fake-map.png" alt="" />
</div>

<div id="zoom-control"></div>
<p>&uarr; zoom</p>

<p id="debug"></p>

CSS

body{
 margin: 40px;   
}

#viewport{
    overflow: hidden;
    position: relative;
    width: 300px;
    height: 300px;
    border: 3px solid #555;
}

#map{
    position: relative;
    left: -500px;
    top: -500px;  
}

#crosshairs{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5000;
    pointer-events: none;
}

#debug{
    margin: 20px 0;
    padding: 10px;
    border: 1px solid #ccc;
    background: #f1f1f1;
}

#zoom-control{
    margin: 20px 0;
}

JavaScript

function trace(message) {
    $('#debug').html(message);
}

var map = $('#map');
var viewport = $('#viewport');
var viewport_size = {
    x: viewport.width(),
    y: viewport.height()
};

map.draggable();

$('#zoom-control').slider({
    min: 300,
    max: 1020,
    value: 300,
    step: 24,
    create: function() {
        map.css({
            'width': 300,
            'left': 0,
            'top': 0
        });
    },
    slide: function(event, ui) {
        var old_width = map.width();
        var old_height = map.height();
        var viewport_offset = viewport.offset();
        var offset = map.offset();
        offset = {
            top: viewport_offset.top - offset.top + .5*viewport_size.y +3,
            left: viewport_offset.left - offset.left + .5*viewport_size.x +3
        };
        // Relative offsets, relative to the center!
        offset.top = offset.top / old_height;
        offset.left = offset.left / old_width;
        
        var new_width = ui.value;
        var relative = new_width / old_width;
        var new_height = relative * old_height;
        
        offset = {
            top: -offset.top * new_height + .5*viewport_size.y,
            left: -offset.left * new_width + .5*viewport_size.x
        };

        var css_properties = {
            width: new_width,
            left: offset.left,
            top: offset.top
        };

        map.css(css_properties);

        trace((map.position().left));
    }
});