Search code examples
jquerysvgraphaelmapael

Jquery Mousewheel issue

I am using a svg map, where I want to be able to zoom in/out and pan around. Using the mousewheel plugin but getting an error:

Error: Invalid value for <svg> attribute viewBox="NaN NaN NaN NaN"

So the zoom is not working correctly, please have a look at my example:

http://jsfiddle.net/41sz0068/14/

I am using Mapael:

$(".container").mapael({
    map : {
        name : "my_map"
        , zoom : {
            enabled : true,
            maxLevel : 10
        }
    }
});
Solution

  • As specified in the comments, this happens because some value is not initialized accordingly, and you get an error when using the mousewheel. It doesn't happen if you have previously used the zoom In/zoom Out features.

    One possible workaround: trigger the zoom out function on page load. As the image will start always without zoom, zooming out will not affect the svg and it will initialize whichever variables were not initialized at the beginning:

    $(function() {
    $("div.zoomOut").click();
});

    You can see it on your JSFiddle: http://jsfiddle.net/41sz0068/15/