Currently, I am working on a website project with a map feature that allows users to click on different countries.
The design of the website is built using Bootstrap and I intend to incorporate jqvmap for the interactive map functionality.
I have encountered challenges in ensuring that the map adjusts dynamically to window resizes. While I have successfully made the <div> dimensions responsive to window size changes, I am struggling to achieve the same for the svg. Additionally, the zoom in and out buttons are not functioning despite setting enableZoom: true.
Upon checking the console, I noticed the following errors which I am unable to resolve:
Error: <g> attribute transform: Expected number, "…le(0) translate(Infinity, 0)".
and
Error: <g> attribute transform: Expected number, "scale(NaN) translate(0…".
These errors seem related and likely stem from the same underlying issue.
The problematic tag is
<g transform="scale(NaN) translate(NaN, NaN)"><svg> element. My attempts to use jQuery for modifying this attribute have been unsuccessful.
Below is a snippet of the code I am currently using:
<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>
If anyone has any insights or suggestions to resolve these issues, your help would be greatly appreciated.