Zoom into viewbox svg - Mapael

Question

So I have a simple map divided into different states and everytime I click one state I want it to zoom in into that region, so it fills the screen.

I'm using Mapael with the zoom enabled, but when I specify a region, see the code below, it does zoom in but then it zooms back when i try to pan around or zoom closer. What can I do to make it smoother? Like if it was a "natural" zoom in? Thank you!

$(document).ready(function() {
    $('path').click(function() {
        $('svg').each(function() {
            $(this)[0].setAttribute('viewBox', '256 68 600 300');
        });
    });
});

Answer 1

May I suggest you take a look at jquery Transit, a library built for smooth animations by targeting DOM elements in the standard jquery method? I am currently using it an am very satisfied with the results.

You can find it at http://ricostacruz.com/jquery.transit/

Answer 2

There is a trigger function for the zoom:

$(".mapcontainer").trigger('zoom', {level : 10, x : 100, y : 200});