Jump To …

boxselector.js

wax = wax || {};
wax.mm = wax.mm || {};

Box Selector

wax.mm.boxselector = function(map, tilejson, opts) {
    var mouseDownPoint = null,
        MM = com.modestmaps,
        callback = ((typeof opts === 'function') ?
            opts :
            opts.callback),
        boxDiv,
        box,
        boxselector = {};

    function getMousePoint(e) {

start with just the mouse (x, y)

        var point = new MM.Point(e.clientX, e.clientY);

correct for scrolled document

        point.x += document.body.scrollLeft + document.documentElement.scrollLeft;
        point.y += document.body.scrollTop + document.documentElement.scrollTop;

correct for nested offsets in DOM

        for (var node = map.parent; node; node = node.offsetParent) {
            point.x -= node.offsetLeft;
            point.y -= node.offsetTop;
        }
        return point;
    }

    function mouseDown(e) {
        if (!e.shiftKey) return;

        mouseDownPoint = getMousePoint(e);

        boxDiv.style.left = mouseDownPoint.x + 'px';
        boxDiv.style.top = mouseDownPoint.y + 'px';

        MM.addEvent(map.parent, 'mousemove', mouseMove);
        MM.addEvent(map.parent, 'mouseup', mouseUp);

        map.parent.style.cursor = 'crosshair';
        return MM.cancelEvent(e);
    }


    function mouseMove(e) {
        var point = getMousePoint(e);
        boxDiv.style.display = 'block';
        if (point.x < mouseDownPoint.x) {
            boxDiv.style.left = point.x + 'px';
        } else {
            boxDiv.style.left = mouseDownPoint.x + 'px';
        }
        if (point.y < mouseDownPoint.y) {
            boxDiv.style.top = point.y + 'px';
        } else {
            boxDiv.style.top = mouseDownPoint.y + 'px';
        }
        boxDiv.style.width = Math.abs(point.x - mouseDownPoint.x) + 'px';
        boxDiv.style.height = Math.abs(point.y - mouseDownPoint.y) + 'px';
        return MM.cancelEvent(e);
    }

    function mouseUp(e) {
        var point = getMousePoint(e),
            l1 = map.pointLocation(point),
            l2 = map.pointLocation(mouseDownPoint),

Format coordinates like mm.map.getExtent().

            extent = [
                new MM.Location(
                    Math.max(l1.lat, l2.lat),
                    Math.min(l1.lon, l2.lon)),
                new MM.Location(
                    Math.min(l1.lat, l2.lat),
                    Math.max(l1.lon, l2.lon))
            ];

        box = [l1, l2];
        callback(extent);

        MM.removeEvent(map.parent, 'mousemove', mouseMove);
        MM.removeEvent(map.parent, 'mouseup', mouseUp);

        map.parent.style.cursor = 'auto';
    }

    function drawbox(map, e) {
        if (!boxDiv || !box) return;
        var br = map.locationPoint(box[0]),
            tl = map.locationPoint(box[1]);

        boxDiv.style.display = 'block';
        boxDiv.style.height = 'auto';
        boxDiv.style.width = 'auto';
        boxDiv.style.left = Math.max(0, tl.x) + 'px';
        boxDiv.style.top = Math.max(0, tl.y) + 'px';
        boxDiv.style.right = Math.max(0, map.dimensions.x - br.x) + 'px';
        boxDiv.style.bottom = Math.max(0, map.dimensions.y - br.y) + 'px';
    }

    boxselector.add = function(map) {
        boxDiv = document.createElement('div');
        boxDiv.id = map.parent.id + '-boxselector-box';
        boxDiv.className = 'boxselector-box';
        map.parent.appendChild(boxDiv);

        MM.addEvent(map.parent, 'mousedown', mouseDown);
        map.addCallback('drawn', drawbox);
        return this;
    };

    boxselector.remove = function() {
        map.parent.removeChild(boxDiv);
        map.removeCallback('mousedown', drawbox);
    };

    return boxselector.add(map);
};