Switch maps in Jvectormap?

Question

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 common 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',
                    }
                }]
            }
        });
}

Partitive

I did, yes. I'll send you what I have via email @chishaku – Partitive

my username at gmail – Stopwatch

@DanJamesPalmer digging this up from the grave, would it be possible for you to recover what you did and post in the thread? :) – Bimah

Answer 1

You 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();
});

Crusted

Thanks for leading me to what I needed as well -> $container.resize(); – Roscoe

Answer 2

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.

Spasmodic

I'll look into what you have suggested, thanks for your input! – Partitive

By using .toggle do you simply mean hide and show the div I want accordingly? If that is the case it won't work as initializing a map in a hidden div will result in a tiny map when it's brought into view – Partitive