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 mented 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()?
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 mented 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()?
- have you tried loading the map without the "randon colors" function? – CHEBURASHKA Commented Apr 30, 2013 at 0:42
- @Kamil yes, I have mented 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 unment the code for simply loading the map and ment out the "random color" function, it will work just fine. The map loads ok. Could you help me with the "random colors" function? – Buras Commented Apr 30, 2013 at 0:44
- why do you have ', map;' at the end of generateColors()? – Ringo Commented Apr 30, 2013 at 7:46
- Your question uses the code from: jvectormap./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. – Menelaos Commented Apr 30, 2013 at 9:35
-
@Ringo 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,eexcept in this case it is being added after the function definition which is the first time I've seen that. – Menelaos Commented Apr 30, 2013 at 14:35
1 Answer
Reset to default 9Your Question is related to code directly copies from http://jvectormap./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./u/6465647/mapRandom.html