Handler for a control to pan a map in four directions
A few improvements:


replace magic numbers
extract repetition into a function
dynamically calculate dimensions


Example code:



function getDelta(clickPoint, controlDimension, threshold){
    var delta;
    if (clickPoint &lt; threshold) {
        delta = +1;
    } else if (clickPoint &gt; controlDimension- threshold) {
        delta = -1;
    } else {
        delta = 0;
    }
    return delta;
}

$(document).ready(function () {
    var control = $('#example');
    var controlHeight = control.height();
    var controlWidth = control.width();
    var widthThreshold = controlHeight/3;
    var heightThreshold = controlWidth/3;
    
    $(control).click(function (evt) {
        var clickPointX = (evt.layerX || evt.offsetX);
        var clickPointY = (evt.layerY || evt.offsetY);
        var deltaX = getDelta(clickPointX, controlWidth, widthThreshold);
        var deltaY = getDelta(clickPointY, controlHeight, heightThreshold);
        alert('delta x: ' + deltaX + '\n' + 'delta y: ' + deltaY);
        //map.panDirection(deltaX, deltaY);
    });
});
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;html&gt;
    &lt;div id='example' style='background-color: red; height: 50px; width: 50px;' /&gt;
&lt;/html&gt;