CODEWITHSUNDEEP
javascriptjqueryjvectormap
nontoxicjon
nontoxicjon

Reputation: 153

Load another jvectormap on region click

I'm trying to load the specific region map onRegionClick. However it seems as though the region is loading after the change is made. Here's my code:

function switchMap(code) {
    $.getScript('maps/'+ code +'.js');
    $('#map').vectorMap({map: code});
}

$('#map').vectorMap({
    map: 'world_mill_en',
    onRegionClick: function(event, code) {
        if (code == "CA") {switchMap(code)}
        if (code == "AF") {switchMap(code)}
        if (code == "AL") {switchMap(code)}
        if (code == "AR") {switchMap(code)}
        if (code == "CH") {switchMap(code)}
    }
});

The console output is this:

Uncaught Error: Attempt to use map which was not loaded: CA world-map.js:82

OPTIONS file:///C:/Users/D-4/Desktop/find-a-bible/maps/CA.js?_=1364318443130  jquery-1.8.2.js:8416

Upvotes: 13

Views: 5999

Answers (2)

Thesane
Thesane

Reputation: 1398

you should only put the height or the width of the div to render the map properly. jvectormap will compute the missing dimension automatically to maintain the map aspect ratio. In case you are changing the height dynamically using javascript, make sure you call updateSize on your map object. Note that you can get the map object using this var mapObject = $('#world-map-gdp').vectorMap('get', 'mapObject'); then call mapObject.updateSize();

Upvotes: 1

Cristi Marian
Cristi Marian

Reputation: 453

In order to use the switchMap function, you must initialize the new vectorMap after the file was fully loaded, thus intializing it in a callback. . 

function switchMap(code) {
    $.getScript('maps/'+ code +'.js' , function (data){
        $('#map').vectorMap({map: code});
    });
}

Upvotes: 4

Related Questions