Disable click zoom ON plot

[dnsBlah]

Hi Neveldo,

first I want to thank you again for all your help on: https://github.com/neveldo/jQuery-Mapael/issues/160

I am now trying to disable the zoom, when I clicked on a plot. I tried it by using click eventHandler, and a boolean.

Unfortunally the global mouseup function:

$(".maparea .map").mousedown(function(e) {
        mouseDown = true;
    }).mousemove(function(e) {
        if(mouseDown) {
            mouseDragging = true;
            $("#plotInfo").hide();
        } else {
            mouseDragging = false;
        }
    }).mouseup(function(e) {

Is called before the eventhandler.

I even tried a timeout function on this mouseup function, to make a new function for the actual zoom trigger ( $(".maparea").trigger('zoom', {, but also somehow it's being called directly.

Is there any way we can detect if the mouseup function is on a plot ? Else continue the code :-)

[dnsBlah]

Keep playing playing playing. I made the zoomLevel, xMap and yMap a 'global' variable within the script.

After that everything worked out fine, as I just read that '''this''' variables will give issue's while calling timeOut functions with paramenters.

full codes

$(".maparea").mapael({
..............
..............
                    eventHandlers: {
                        click: function (e, id, mapElem, textElem, elemOptions) {
                            clickedPlot = false;
                            if (typeof elemOptions.myText != 'undefined') {
                                if(elemOptions.title !== '') {
                                    clickedPlot = true;
                                }
                            }
                        }
                    }
..............
..............

/*mouse handles*/
var mouseDragging = false;
var mouseDown = false;

var clickedZoom = false, zoomLevel, xMap, yMap;

    $(".maparea .map").mousedown(function(e) {
        mouseDown = true;
    }).mousemove(function(e) {
        if(mouseDown) {
            mouseDragging = true;
            $("#plotInfo").hide();
        } else {
            mouseDragging = false;
        }
    }).mouseup(function(e) {
        var wasDragging = mouseDragging;
        mouseDragging = false;
        mouseDown = false;
        if (!wasDragging) {
            $("#plotInfo").hide();
            var offset = $(this).offset();
            var map = $.fn.mapael.maps["world_countries"];
            zoomLevel = $(".maparea").data("zoomLevel");
            var zoomRatioX = (zoomLevel * $.fn.mapael.defaultOptions.map.zoom.step) + 1;
            var zoomRatioY = (zoomLevel * $.fn.mapael.defaultOptions.map.zoom.step) + 1;

            var panX = $(".maparea").data("panX");
            var panY = $(".maparea").data("panY");

            var ratioX = map.width / $(this).width();
            var ratioY = map.height / $(this).height();

            var x = (e.pageX - offset.left);
            var y = (e.pageY - offset.top);
            xMap = x * ratioX;
            yMap = y * ratioY;
            xMap = xMap / zoomRatioX;
            yMap = yMap / zoomRatioY;
            xMap = xMap + panX;
            yMap = yMap + panY;
            setTimeout(doZoom, 100);
        }
    });
function doZoom() {
    if(clickedPlot === false) {
        $(".maparea").trigger('zoom', {
            fixedCenter: true,
            level : zoomLevel + 10, 
            x:xMap,
            y:yMap
        });
    }
}

[neveldo]

Hello @dnsBlah ,

Thank you for having shared the answer !

[dnsBlah]

It's buggy on mobile devices :(

-- Added touchup on every click event, and it's working now.

[neveldo]

Thank you for keeping updated :)