CODEWITHSUNDEEP
jquerycsstwitter-bootstrapsvgjqvmap
Alexandre Rivara
Alexandre Rivara

Reputation: 93

Jqvmap how to make svg resize with the div and zoom buttons work

I am trying to make a simple website where you can see a map and click on the different countries.

I use bootstrap for the look and want to use jqvmap for the map.

I have read that it can be tricky to make the map adjust dynamically to the resize of a window but I really need to make it work. For now I managed to make the dimensions of the <div> adapt to the size of the window but I don't know how to make the svg adapt as well. It may be linked, the zoom in and out button do not work either even with enableZoom: true parameter.

When I look at the console I have the errors bellow but I found no solution when searching them on internet:

Error: <g> attribute transform: Expected number, "…le(0) translate(Infinity, 0)".

and

Error: <g> attribute transform: Expected number, "scale(NaN) translate(0…".

They are pretty similar and I guess they are coming from the same issue.

This tag <g transform="scale(NaN) translate(NaN, NaN)"> is the direct child of the <svg> tag. I have tried to use jQuery to modify this attribute and make wild guesses but I guessed wrong.

Here is my code :

    <head>
    .
    .
    .
        <script type="text/javascript">
            var ratio=0.60;
            $(document).ready(function() {
                $('#vmapWorld').vectorMap({
                    map: 'world_en',
                    backgroundColor: null,
                    color: '#ffffff',
                    hoverOpacity: 0.7,
                    selectedColor: '#666666',
                    enableZoom: true
                });
                $("#vmapWorld > svg").css("height", $(this).width()*ratio);
            });
            $(window).resize(function(){
                $("#vmapWorld > svg").css("height", $(this).width()*ratio);
            });
        </script>
    </head>
    <body style="background-color: #a5bfdd">        
        <div class="container-fluid" id="vmapWorld" style="background-color: #16982a">
        </div>
    </body>

Any help is welcomed.

Upvotes: 3

Views: 1309

Answers (1)

Marco Aur&#233;lio Bomfim
Marco Aur&#233;lio Bomfim

Reputation: 51

Try specifying both the width and the height for your container-fluid element.

I've seen the same issue, and by specifying those, the error went away. It seems you can't use a element without those to store your map, as it would be considered infinite. I haven't looked deeper onto the code to see why this happens, but if someone else faces this issue, let me know how it goes.

Hope this helps.

Upvotes: 3

Related Questions