Login/Register
Randomly colored US map using JVector
Asked Answered
Solved javascriptdictionaryjvectormap
A

1

7

I have issues with coding US Map that would allow randomly assing colors to the US states map using JVector API. Here is the code:

<html>
  <script src="scripts/jquery-1.8.2.js"></script>
  <script src="scripts/jquery-jvectormap-1.2.2.min.js"></script>
  <script src="scripts/jquery-jvectormap-us-aea-en.js"></script>
<body>
  <div  id="us-map" style="position: relative;   width: 800px; height: 600px"></div>
  <script>

  <!--// I commented out this piece of script. It works fine. This is a test trial to load the map
    // $(function(){
    // $('#us-map').vectorMap({map: 'us_aea_en'});
    // });
    -->

    <!-- I have issues with the following function -->
/*it does not even load the map. What it should do is to generate random colors
* for the map as the "update" button is pressed 
*/
$(function(){
  var palette = ['#66C2A5', '#FC8D62', '#8DA0CB', '#E78AC3', '#A6D854'];
      generateColors = function(){
        var colors = {},
            key;

        for (key in map.regions) {
          colors[key] = palette[Math.floor(Math.random()*palette.length)];
        }
        return colors;
      },
      map;

  map = new jvm.USMap({
    map: 'us_aea_en',
    container: $('#map'),
    series: {
      regions: [{
        attribute: 'fill'
      }]
    }
  });
  map.series.regions[0].setValues(generateColors());
  $('#update-colors-button').click(function(e){
    e.preventDefault();
    map.series.regions[0].setValues(generateColors());
  });
})
    </script>
    </div>
  </body>
</html>

Here is the link to my scripts folder where I keep the .js files. What is wrong with the function()?

Ambros answered 30/4, 2013 at 0:8 Comment(5)
have you tried loading the map without the "randon colors" function? – Surplus
@Kamil yes, I have commented out that block in the code above. You can copy-paste the whole code and download the `scripts folder, and try to run it. You will see that if you uncomment the code for simply loading the map and comment out the "random color" function, it will work just fine. The map loads ok. Could you help me with the "random colors" function? – Ambros
why do you have ', map;' at the end of generateColors()? – Copulate
Your question uses the code from: jvectormap.com/examples/random-colors . Unfortunately, their example is missing something so you need to copy/paste directly from the pagesource. I updated my answer to reflect this with the correct code. – Elroy
@Copulate He has the ',map' because it is a variable declaration declaring both a function, and an empty variable. It's like c/java where you do Object a,b,c,d,e except in this case it is being added after the function definition which is the first time I've seen that. – Elroy
E
9

Your Question is related to code directly copies from http://jvectormap.com/examples/random-colors/

The Code to make the random USA map work is this:

Taken from their source with only (Taken from their source with only map: changes to be USA).

<html>
  <script src="scripts/jquery-1.8.2.js"></script>
  <script src="scripts/jquery-jvectormap-1.2.2.min.js"></script>
  <script src="scripts/jquery-jvectormap-us-aea-en.js"></script>
<body>
  <div  id="map" style="position: relative;   width: 800px; height: 600px"></div>

 <script>
      //@code_start
      $(function(){
        var palette = ['#66C2A5', '#FC8D62', '#8DA0CB', '#E78AC3', '#A6D854'];
            generateColors = function(){
              var colors = {},
                  key;

              for (key in map.regions) {
                colors[key] = palette[Math.floor(Math.random()*palette.length)];
              }
              return colors;
            },
            map;

        map = new jvm.WorldMap({
          map: 'us_aea_en',
          container: $('#map'),
          series: {
            regions: [{
              attribute: 'fill'
            }]
          }
        });
        map.series.regions[0].setValues(generateColors());
        $('#update-colors-button').click(function(e){
          e.preventDefault();
          map.series.regions[0].setValues(generateColors());
        });
      })
      //@code_end
    </script>   
    </div>
  </body>
</html>

The error below:

was generated, on first inspection:

Error: ReferenceError: map is not defined
Source File: file:///D:/xampp_october_28_2011/htdocs/stackoverflow/scripts/map.html
Line: 30

You have not the map variable before you attempt to use it. Additionally, it seems your code is hiding various other errors which need repairing.

Also posted to dropbox: https://dl.dropboxusercontent.com/u/6465647/mapRandom.html

Elroy answered 30/4, 2013 at 8:43 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.