how are you? I am trying to make a form that contains a map in which to select the country of birth. For this I am using JVectorMap. However, in the Google Chrome developer console I get the following message

jquery-jvectormap-2.0.5.min.js:1 Error: <g> attribute transform: Expected number, "scale(NaN) translate(N…".

Does anyone know what it can be the problem? This is my map code:

<div id="world-map-log" style="width:100%;height:175px;"></div>

<script>
$(function() {
    $('#world-map-log').vectorMap({

        map : 'world_mill',
        backgroundColor : '#F9F9F9', //#F9F9F9
        regionsSelectable : true,

        regionStyle : {
            initial : {
                fill : '#B8E186'
            },
            selected : {
                fill : '#F4A582'
            }
        },
        
        zoomOnScroll: false,
        zoomButtons : false

    });
});

Along with these libraries

    <script src="js/jquery.js"></script>
    <script src="js/jquery-jvectormap-2.0.5.min.js"></script>
    <script src="js/jquery-jvectormap-world-mill.js"></script>
    <link rel="stylesheet" href="css/jquery-jvectormap-2.0.5.css" type="text/css" media="screen" />

Thank you, I hope someone can help me, David

how are you? I am trying to make a form that contains a map in which to select the country of birth. For this I am using JVectorMap. However, in the Google Chrome developer console I get the following message

jquery-jvectormap-2.0.5.min.js:1 Error: <g> attribute transform: Expected number, "scale(NaN) translate(N…".

Does anyone know what it can be the problem? This is my map code:

<div id="world-map-log" style="width:100%;height:175px;"></div>

<script>
$(function() {
    $('#world-map-log').vectorMap({

        map : 'world_mill',
        backgroundColor : '#F9F9F9', //#F9F9F9
        regionsSelectable : true,

        regionStyle : {
            initial : {
                fill : '#B8E186'
            },
            selected : {
                fill : '#F4A582'
            }
        },
        
        zoomOnScroll: false,
        zoomButtons : false

    });
});

Along with these libraries

    <script src="js/jquery.js"></script>
    <script src="js/jquery-jvectormap-2.0.5.min.js"></script>
    <script src="js/jquery-jvectormap-world-mill.js"></script>
    <link rel="stylesheet" href="css/jquery-jvectormap-2.0.5.css" type="text/css" media="screen" />

Thank you, I hope someone can help me, David

• javascript
• html
• css
• jvectormap

2 Answers 2

Are you using Jvectormap in a Bootstrap ponent that gets hidden by a toggle? BS Collapse or tab for example? Jvectormap and some other SVG libs don't like the default way Bootstrap handles this (via display:none). They get caught in a negative feedback loop trying to determine scale values against null/non numeric values.

You need to override the default behaviour of the displayed element with some CSS, the below example will cover the tab ponent. Some may use '.show' class to control it.

.tab-content > .tab-pane:not(.active) {
    display: block;
    height: 0;
    overflow-y: hidden;
}

Find this script in jquery-jvectormap-2.0.5.min.js jvm.SVGCanvasElement.prototype.applyTransformParams=function(scale,transX,transY){this.scale=scale,this.transX=transX,this.transY=transY,this.rootElement.node.setAttribute("transform","scale("+scale+") translate("+transX+", "+transY+")")}

Replace with
jvm.SVGCanvasElement.prototype.applyTransformParams=function(scale,transX,transY){if (isNaN(scale) && isNaN(transX) && isNaN(transY)) return;this.scale=scale,this.transX=transX,this.transY=transY,this.rootElement.node.setAttribute("transform","scale("+scale+") translate("+transX+", "+transY+")")}