admin管理员组文章数量:1022476
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
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
本文标签： javascriptRandomly colored US map using JVectorStack Overflow
版权声明：本文标题：javascript - Randomly colored US map using JVector - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745531562a2154773.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论