I'm trying to switch between maps using Jvectormap.
Currently I have two divs, one "world-map" and one "us-map". The US Map is hidden. When someone clicks on the USA on the world map the world map div closes and the US map opens, works nicely.
On showing the US map I also reveal a button that is designed to take the user back to the world map. However, when this is clicked it shows TWO world maps. I'm sure I'm doing something fundamentally wrong but can' find any documentation on this. I would have thought this was a mon thing to want to do.
Any pointers would be great.
DIVS and Back button image:
<table width="900" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="left"><img src="images/titletext.png"></td>
<td align="right"><img src="images/backtoworld.png" border="0" id="backtoworld" style="display:none;" onClick="showworldmap()"></td>
</tr>
</table>
</td>
</tr>
<Tr>
<Td align="center">
<div id="world-map" style="display:block;"></div>
<div id="us-map" style="display:none;"></div>
JQuery/JavaScript:
function showusmap() {
document.getElementById("world-map").style.display = 'none';
document.getElementById("us-map").style.display = 'block';
document.getElementById("backtoworld").style.display = 'block';
openusmap()
}
function openusmap() {
$('#us-map').vectorMap({
map: "us_aea_en",
normalizeFunction: 'polynomial',
backgroundColor: 'transparent',
regionStyle: {
initial: {
fill: '#128da7',
}},
onRegionClick: function(event, code){
// if (code == "US") { showmap('us_aea_en') }
},
series: {
regions: [{
values: {
"US-CA":'#006633',
"US-IL":'#006633',
"US-IN":'#006633',
"US-DC":'#006633',
"US-WA":'#006633',
"US-FL":'#006633',
"US-TX":'#006633',
"US-OR":'#006633',
"US-OH":'#006633',
"US-MS":'#006633',
"US-OK":'#006633',
"US-MI":'#006633',
"US-PA":'#006633',
"US-NY":'#006633',
"US-MN":'#006633',
"US-NC":'#006633',
"US-GA":'#006633',
"US-AL":'#006633',
"US-VA":'#006633',
"US-VT":'#006633',
"US-CT":'#006633',
"US-MO":'#006633',
"US-AZ":'#006633',
"US-NJ":'#006633',
}
}]
}
})
}
function showworldmap() {
document.getElementById("us-map").style.display = 'none';
document.getElementById("world-map").style.display = 'block';
document.getElementById("backtoworld").style.display = 'none';
openworldmap()
}
function openworldmap() {
$('#world-map').vectorMap({
map: "world_mill_en",
normalizeFunction: 'polynomial',
backgroundColor: 'transparent',
regionStyle: {
initial: {
fill: '#128da7'
}},
onRegionClick: function(event, code){
if (code == "US") { showusmap() }
},
series: {
regions: [{
values: {
CZ:'#006633',
FR:'#006633',
IT:'#006633',
NL:'#006633',
US:'#006633',
CH:'#006633',
NO:'#006633',
SE:'#006633',
FI:'#006633',
AT:'#006633',
GR:'#006633',
CY:'#006633',
AU:'#006633',
BE:'#006633',
HU:'#006633',
GB:'#006633',
ZA:'#006633',
BR:'#006633',
CA:'#006633',
MX:'#006633',
PR:'#006633',
IL:'#006633',
PK:'#006633',
MY:'#006633',
JP:'#006633',
}
}]
}
});
}
I'm trying to switch between maps using Jvectormap.
Currently I have two divs, one "world-map" and one "us-map". The US Map is hidden. When someone clicks on the USA on the world map the world map div closes and the US map opens, works nicely.
On showing the US map I also reveal a button that is designed to take the user back to the world map. However, when this is clicked it shows TWO world maps. I'm sure I'm doing something fundamentally wrong but can' find any documentation on this. I would have thought this was a mon thing to want to do.
Any pointers would be great.
DIVS and Back button image:
<table width="900" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="left"><img src="images/titletext.png"></td>
<td align="right"><img src="images/backtoworld.png" border="0" id="backtoworld" style="display:none;" onClick="showworldmap()"></td>
</tr>
</table>
</td>
</tr>
<Tr>
<Td align="center">
<div id="world-map" style="display:block;"></div>
<div id="us-map" style="display:none;"></div>
JQuery/JavaScript:
function showusmap() {
document.getElementById("world-map").style.display = 'none';
document.getElementById("us-map").style.display = 'block';
document.getElementById("backtoworld").style.display = 'block';
openusmap()
}
function openusmap() {
$('#us-map').vectorMap({
map: "us_aea_en",
normalizeFunction: 'polynomial',
backgroundColor: 'transparent',
regionStyle: {
initial: {
fill: '#128da7',
}},
onRegionClick: function(event, code){
// if (code == "US") { showmap('us_aea_en') }
},
series: {
regions: [{
values: {
"US-CA":'#006633',
"US-IL":'#006633',
"US-IN":'#006633',
"US-DC":'#006633',
"US-WA":'#006633',
"US-FL":'#006633',
"US-TX":'#006633',
"US-OR":'#006633',
"US-OH":'#006633',
"US-MS":'#006633',
"US-OK":'#006633',
"US-MI":'#006633',
"US-PA":'#006633',
"US-NY":'#006633',
"US-MN":'#006633',
"US-NC":'#006633',
"US-GA":'#006633',
"US-AL":'#006633',
"US-VA":'#006633',
"US-VT":'#006633',
"US-CT":'#006633',
"US-MO":'#006633',
"US-AZ":'#006633',
"US-NJ":'#006633',
}
}]
}
})
}
function showworldmap() {
document.getElementById("us-map").style.display = 'none';
document.getElementById("world-map").style.display = 'block';
document.getElementById("backtoworld").style.display = 'none';
openworldmap()
}
function openworldmap() {
$('#world-map').vectorMap({
map: "world_mill_en",
normalizeFunction: 'polynomial',
backgroundColor: 'transparent',
regionStyle: {
initial: {
fill: '#128da7'
}},
onRegionClick: function(event, code){
if (code == "US") { showusmap() }
},
series: {
regions: [{
values: {
CZ:'#006633',
FR:'#006633',
IT:'#006633',
NL:'#006633',
US:'#006633',
CH:'#006633',
NO:'#006633',
SE:'#006633',
FI:'#006633',
AT:'#006633',
GR:'#006633',
CY:'#006633',
AU:'#006633',
BE:'#006633',
HU:'#006633',
GB:'#006633',
ZA:'#006633',
BR:'#006633',
CA:'#006633',
MX:'#006633',
PR:'#006633',
IL:'#006633',
PK:'#006633',
MY:'#006633',
JP:'#006633',
}
}]
}
});
}
- I did, yes. I'll send you what I have via email @chishaku – Dan Commented Nov 4, 2014 at 0:35
- my username at gmail – chishaku Commented Nov 4, 2014 at 2:16
- @DanJamesPalmer digging this up from the grave, would it be possible for you to recover what you did and post in the thread? :) – Aaron Lavers Commented Dec 7, 2016 at 1:17
2 Answers
Reset to default 7You can do what Alex Williams suggested and trigger a resize() on the Map container after showing it. Then it gets scaled before you can see it (at least if you fade in).
var $container = $('#yourHiddenMap');
map = new jvm.WorldMap({
container: $container,
map: ...
});
$('#yourSwitchButton').click(function() {
$container.fadeIn().resize();
});
I didn't download the vectorMap library. However, it appears that you are loading the widget onto $('#world-map') each time openusmap() is called. I would initialize the widget only once on both the US and the world maps and use JQuery's toggle function to hide and show the maps. Alternatively, you could use the widget's destroy method or some equivalent.