There seems to be an error with JVectorMap: the <g> attribute transform is expecting a number but is instead receiving "scale(NaN) translate(N..."

Hey there! I'm currently working on creating a form with a map to select the country of birth using JVectorMap. However, when checking the Google Chrome developer console, I encountered the following error message:

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

Does anyone have any insights into what might be causing this issue? Here is the code for my map:

<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

    });
});

Here are the libraries that I am using:

    <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" />

I would greatly appreciate any assistance, Thanks, David

javascripthtmlcssjvectormap

Answer №1

Are you experiencing issues with Jvectormap when used within a Bootstrap component that is hidden by a toggle function? Perhaps using BS Collapse or tab elements? Jvectormap, along with some other SVG libraries, may not cooperate well with the default way Bootstrap handles hiding components (using display:none). This can result in a problematic cycle where scale values are trying to be determined against null or non-numeric values.

To resolve this issue, you will need to customize the behavior of the displayed element using CSS. The following example demonstrates how to address this specifically for tab components. Some may opt to utilize the '.show' class for better control.

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

Answer №2

Locate this code snippet within the jquery-jvectormap-2.0.5.min.js file: 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+")")}

Update it with the following changes:
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+")")}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize a single JavaScript script to handle numerous HTML forms within the same webpage

I am currently facing an issue with a page that contains multiple forms needing the same JavaScript code. This specific code is designed to add more input fields to the form, which it does successfully. However, the problem lies in the fact that it adds in ...

javascriptjqueryhtmlformsreusability

What is preventing my cookie from being saved?

Whenever a user clicks "sign in", I trigger a POST ajax request. Here is the function handling that request: app.post('/auth', function(req,res,next){ var token = req.body.token ...

javascriptnode.jsexpress

Combining JSON fields and searching based on the combined value within MarkLogic

In the JSON format provided below, I have stored a person's first name and last name along with their nickname. { "Person": { "Records": [ { "nameType": "Primary", "firstName": "Sagar", "lastName" ...

javascriptjsonsearchmarklogic

What is the best way to refresh or reset a component in VueJs: reloading it or destroying it and loading again?

In my VueJs application, I am using a component called Aplayer (or any similar components) to play audio and manage playlists. However, I am facing an issue where I need to reload the component when I change the playlist without changing the routes. Is th ...

javascriptvue.jsvue-componentvue-routerquasar-framework

Positioning a designated div directly above a designated spot on the canvas

I'm grappling with a challenge in my game where the canvas handles most of the animation, but the timer for the game resides outside the canvas in a separate div. I've been struggling to center the timer around the same focal point as the squares ...

javascripthtmlcsscanvas

Utilizing AngularJS to iterate through an array of dictionaries

Within a specific section of my HTML code, I am initializing a scope variable like this: $scope.my_data = [ { c1: "r1c1", c2: "r1c2", c3: "r1c3", ...

javascriptangularjs

Can AJAX be exploited by hackers?

Today, I had a fascinating experience with my built systems. Someone managed to "hack" into everything and attributed the issue to AJAX. Here are his exact words: you are relying on AJAX when I have access to user's browser I have acc ...

javascriptjqueryajax

Incorporate Web-GL sandbox effects into an HTML webpage

I am searching for a method to showcase a Web-gl shader obtained from GLSL Sandbox on the background of an HTML page. Yet, it seems there is no simple embeddable API available. How can I accomplish this task? Can I integrate this specific Shader into an H ...

javascripthtmlglslwebgl

Creating a bootstrap form field that spans 100% in width:

I am encountering an issue with two column divs in a row, each containing two text fields. When resizing on mobile, the width of the textbox is not expanding to 100% and looks unattractive. Below is my Bootstrap code, but strangely, the width looks fine f ...

htmlcsstwitter-bootstrap

Unable to remove data once it exceeds 10 entries while using AJAX, jQuery, and JavaScript/PHP

I am having an issue where I can insert data into the first 10 rows and delete any of them successfully. However, when I try to insert data starting from the 11th row, I am unable to delete any rows past the 10th. UPDATE: The deletion function does not wo ...

javascriptphphtmljqueryajax

What steps should I take to prevent my <mat-card> from expanding whenever messages are shown in Angular 9?

I have a <mat-card> containing a login form on my page. However, when error messages are displayed, the vertical size of the <mat-card> changes and I need it to remain the same. Is there a way to prevent this from happening? Below, you will ...

cssangularbootstrap-4angular-materialng-bootstrap

CSS styles are combined and included at the beginning of the index.html file

During the creation of a production version of my Angular 9.0.4 application, I noticed that the CSS is bundled and placed at the top of the dist/index.html file as shown below: <link rel="stylesheet" href="styles.6ea28d52542acb20a4c6.css"><!docty ...

cssangular

When utilizing the HTML select element, the <option> tag may only display the initial letter of the chosen option

Here is a snippet of my PHP code: <?php if($_POST['post'] == 'Post') { $cat = $_POST['cat']; $update = "UPDATE table SET category='$cat' WHERE id = '$id' "; $result = mys ...

htmlhtml-select

ESLint's feature experimentalObjectRestSpread not being applied with expected behavior

ESLint is showing an unexpected token error, specifically error Parsing error: Unexpected token .., and I'm struggling to identify the root cause. In my .eslintrc.js file, I have: module.exports = { extends: "devmountain/react-config" , rul ...

javascriptreactjseslintbabeljs

Tips for iterating through an array of objects nested within other objects

Good afternoon everyone, I’m having trouble accessing the attributes of a JavaScript object array through AJAX. Can anyone spot where I might be going wrong? View image description This is my AJAX call: $("#cbx1").on("change", func ...

javascriptjsonajax

Adjusting the date format within an AJAX success callback: alter how the date is displayed

Attempting the following code: var second_date = moment(currentdate).format('DD-MM-YYYY'); The result is: Uncaught Reference Error: moment is not defined. success: function(response){ var len = 0; if(response != n ...

javascriptajax

The browser's window.location.href fails to redirect the page

Here are my functions: <a onClick="check_claims(this)" type="button" href="javascript:void(0)" redirurl="www.facebook.com" >Invite</a> function check_claims(ele){ var select_claims = document.getE ...

javascriptdjango

Issue with Typescript and react-create-app integration using Express

I'm relatively new to Typescript and I decided to kickstart a project using create-react-app. However, I encountered an issue while trying to connect my project to a server using express. After creating a folder named src/server/server.ts, React auto ...

javascriptnode.jstypescriptexpress

Creating a dynamic input box that appears when another input box is being filled

I have a form set up like this: <FORM method="post"> <TABLE> <TR> <TD>Username</TD> <TD><INPUT type="text" value="" name="username" title="Enter Username"/><TD> </TR> <TR> <TD>A ...

phpjavascripthtml

Why does AngularJS $watch only execute once?

Why do the codes in the watch only run once? How can I address this issue? this.$rootScope.$watch('tabType', () => { if (this.$rootScope["tabType"] === TabType.Sent) { this.$scope.refreshSentList(); } else if (this.$rootScope[ ...

javascriptangularjs