Menu
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()?
309
Your Question is related to code directly copies from http://jvectormap.com/examples/random-colors/
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>
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
89
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
