Menu
I'm trying to recreate the jVectorMap example visualization of US unemployment. I took the code straight from github. The map, won't load and the console gives me this error: "jvm is not defined."
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Maps</title>
<link rel="stylesheet" media="all" href="../jvectormap/jquery-jvectormap.css"/>
<link rel="stylesheet" media="all" href="css/jquery-ui-1.8.21.custom.css"/>
<script src="../jvectormap/tests/assets/jquery-1.8.2.js"></script>
<script src="../jquery-jvectormap.js"></script>
<script src="../jvectormap/tests/assets/jquery-jvectormap-us-aea-en.js"></script>
<script src="jquery-ui-1.8.21.custom.min.js"></script>
<script>
$(function(){
$.getJSON('data.json', function(data){
var val = 2009;
statesValues = jvm.values.apply({}, jvm.values(data.states)),
metroPopValues = Array.prototype.concat.apply([], jvm.values(data.metro.population)),
metroUnemplValues = Array.prototype.concat.apply([], jvm.values(data.metro.unemployment));
$('.map').vectorMap({
map: 'us_aea_en',
markers: data.metro.coords,
series: {
markers: [{
attribute: 'fill',
scale: ['#FEE5D9', '#A50F15'],
values: data.metro.unemployment[val],
min: jvm.min(metroUnemplValues),
max: jvm.max(metroUnemplValues)
},{
attribute: 'r',
scale: [5, 20],
values: data.metro.population[val],
min: jvm.min(metroPopValues),
max: jvm.max(metroPopValues)
}],
regions: [{
scale: ['#DEEBF7', '#08519C'],
attribute: 'fill',
values: data.states[val],
min: jvm.min(statesValues),
max: jvm.max(statesValues)
}]
},
onMarkerLabelShow: function(event, label, index){
label.html(
'<b>'+data.metro.names[index]+'</b><br/>'+
'<b>Population: </b>'+data.metro.population[val][index]+'</br>'+
'<b>Unemployment rate: </b>'+data.metro.unemployment[val][index]+'%'
);
},
onRegionLabelShow: function(event, label, code){
label.html(
'<b>'+label.html()+'</b></br>'+
'<b>Unemployment rate: </b>'+data.states[val][code]+'%'
);
}
});
var mapObject = $('.map').vectorMap('get', 'mapObject');
$(".slider").slider({
value: val,
min: 2005,
max: 2009,
step: 1,
slide: function( event, ui ) {
val = ui.value;
mapObject.series.regions[0].setValues(data.states[ui.value]);
mapObject.series.markers[0].setValues(data.metro.unemployment[ui.value]);
mapObject.series.markers[1].setValues(data.metro.population[ui.value]);
}
});
});
})
</script>
</head>
<body>
<div class="map" style="width: 800px; height: 600px"></div>
<div class="slider" style="width: 280px; margin: 10px"></div>
</body>
</html>
585
I had this exact same problem. The problem is the ZIP file you downloaded that redirects you to
<script src="../jquery-jvectormap.js"></script>
Is actually a JS file that invokes JVM, not the actual JVM library (Which is why you're getting the "JVM Is not Defined" error.
The way I fixed it was to take the file
http://jvectormap.com/js/jquery-jvectormap-1.2.2.min.js
and include it in my project.
That's the ACTUAL JVM library, so as long as that's included before you make any .vectorMap calls, it'll work out just great for you.
165
So you are using not minified js file. It contains only main code without libraries.
To fix this error you have 2 solutions:
Add all needed libraries. You can find it in lib/ directory. Example with files and with which order you need to add you find in tests/index.html file
Create minified js. You need to use NIX system and execute ./build.sh. Maybe you will need to install uglifyjs utility, for example you can install npm from here and then execute npm install uglify-js@1
33
It appears the minified file contains all the various files needed while jquery-jvectormap.js does not. So if you want to use the non-minified version then you should be prepared to manually load all the various files needed by jquery-jvectormap.js for example map.js, vector-canvas.js, e.t.c.
These can be found in /src directory if you get your files from the jvector maps website
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
