datamaps
datamaps copied to clipboard
markmarkoh
Using the "USA" map throws an exception of "Cannot read property 'world' of undefined"
Using the following code, I get an exception of Cannot read property 'world' of undefined:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Map Testing</title>
</head>
<body>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>
<script src="d3.min.js"></script>
<script src="topojson.min.js"></script>
<script src="datamaps.usa.js"></script>
<script>
var map =
new Datamap(
{
element: document.getElementById('container'),
responsive: true
}
);
window.addEventListener('resize', function() { map.resize(); });
</script>
</body>
</html>
However, it works if I change the code to the following:
var map =
new Datamap(
{
element: document.getElementById('container'),
responsive: true,
scope: "usa"
}
);
I'm using Google Chrome Version 47.0.2526.106 m on a Windows 7 machine.
You're only loading the USA-specific datamaps code () but the default scope is world which it won't find if you don't include the world-specific JS.
I am getting the same error, though I have included scope: 'usa'. I am using the US-only map.
I have the same issue as well and I also have scope: 'usa' set as well. Has anyone figured out a solution @davidrhoden
I'm sorry; I did get it working but I'm not sure how. Leave the scope:usa, make sure you are loading the topojson. Try wrapping the code in document(ready).
@davidrhoden Ha lol, yea I'm in your same boat, in the end I think I had conflicting dependencies which may have caused it. I had to nuke my node_modules and then rerun install process, that fixed it for me.
