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');

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 new_width = ui.value;
        var width_change = new_width - old_width;

        var x_offset = ((map.position().left-150))/(old_width/2);
        var y_offset = ((map.position().top-150))/(old_width/2);
        
        var css_properties = {
            width: new_width,

            // this is where I'm stuck...
            // dividing by 2 makes the map zoom
            // from the center, but if I've panned
            // the map to a different location I'd
            // like that reference point to change.
            // So instead of zooming relative to
            // the map image center point, it would
            // appear to zoom relative to the center
            // of the viewport. 
            left: (new_width * x_offset /2 ) + 150 + "px", 
            top: (new_width * y_offset /2 ) + 150 + "px"
        };

        map.css(css_properties);

        trace(offset);
    }
});