jVectorMap error: "jvm is not defined"

Asked 14/1, 2013 at 10:0 Answered 22/5, 2018 at 18:34

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>

Unbelievable answered 14/1, 2013 at 10:0 Comment(0)

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.

Adios answered 4/2, 2013 at 6:58 Comment(3)

This answer did not really help me but i bought a theme (Color Admin) that is providing a different version of jvectormap that i wanted to include (the last open source), os i got this error, in that case, use the provided version. – Sudorific 11/3, 2016 at 4:39

I was using a js file from cloudflare CDN for jvactormap library version 2.0.4, was not working. I replaced it with a local js file version 1.2.2 mentioned above and it worked. The map cannot find the jvm in the 2.0.4 library for some reason. – Fimbriate 20/8, 2017 at 13:16

Please, read my comments here: #33776373 – Dynamism 27/8, 2020 at 13:51

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

Surcease answered 24/1, 2013 at 10:44 Comment(1)

Oh geez, why don't they have this on their website? Do they presume this to be common knowledge? – Kuhlmann 29/12, 2016 at 14:48

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

Skid answered 17/9, 2016 at 22:44 Comment(0)

The statesValues, metroPopValues, and metroUnempValues variable declarations should be their own statement terminated with a ;. You currently end the lines with a ,.

var val = 2009;
var statesValues = jvm.values.apply({}, jvm.values(data.states));
var metroPopValues = Array.prototype.concat.apply([], jvm.values(data.metro.population));
var metroUnemplValues = Array.prototype.concat([], jvm.values(data.metro.unemployment));

Hydrosphere answered 15/1, 2013 at 1:11 Comment(2)

Thanks for the suggestion, I made the change but it didn't help with the error! – Unbelievable 19/1, 2013 at 15:17

also verify that the paths to the resource files are correct and are successfully being loaded. – Hydrosphere 19/1, 2013 at 16:23

If you still want to save the correct files locally, for example if you are using bower, then you can use this "built" version of jvectormap also on GitHub.

Gadget answered 27/12, 2014 at 17:33 Comment(0)

If you downloaded the zip or cloned from GitHub: Go to the directory where you downloaded and execute the build.sh file. That will generate the minified file for you to use with all of the proper dependencies.

On Mac: source build.sh

Or you can just use npm Install the dependency: npm install jvectormap --save and then use the minified file in you node_modules.

Lout answered 22/5, 2018 at 18:34 Comment(0)

-3

Donno much about jVectorMap but a simple observation.

In your code, the variable 'jvm' is nowhere defined. Wouldn't it be a good idea to check the JS files used in the code and look out for any initialization of the 'jvm' variable ?

Competency answered 14/1, 2013 at 10:13 Comment(0)

Recommended topics

Hot tags