Jvectormap molto piccolo sul cambio div

Question

Ho due div, uno con la mappa del mondo e uno con la mappa degli Stati Uniti. Quando si fa clic sugli Stati Uniti sulla mappa del mondo, voglio nascondere quel div e visualizzare la mappa degli Stati Uniti.

Questo funziona ma la mappa è piccola, anche se la posizione dei pulsanti di zoom indica che la dimensione del div è come dovrebbe essere.

Tutte le idee?

Se entrambi i div sono impostati su "blocco" dall'inizio, sono entrambi della dimensione corretta, è solo quando si richiama il codice per passare a div che non riesce.

onRegionClick: function(event, code){ 
         if (code == "US") { openUS('us-map') } 
      }, 

    function openUS(a) { 

    document.getElementById("world-map").style.display = 'none'; 
    document.getElementById(a).style.display = 'block'; 
    } 

Answer 1

Questo problema è causato dal fatto che si inizializza mappa sul elemento nascosto, la cui dimensione non può essere calcolata correttamente in quel momento. Prova a cambiare la tua logica in modo che jVectorMap venga inizializzato dopo che l'elemento diventa visibile.

Answer 2

È inoltre possibile attivare un ridimensionamento() sul contenitore di tale mappa dopo averlo visualizzato.

ho fatto un esempio in questo post: Switch maps in Jvectormap?

Answer 3

ho avuto lo stesso problema con jVectorMap visualizzazione dimensionamento e trovato un modo per farli per visualizzare correttamente.

Il problema è quando si crea l'oggetto della mappa. Per visualizzarlo correttamente, l'oggetto vectorMap deve essere visibile quando lo si crea. Detto questo, quando li metti in schede, devi:

1. Fare clic sulla prima scheda.
2. Crea la prima mappa.
3. Fare clic sulla seconda scheda.
4. Crea seconda mappa .. ..
   È possibile infine fare nuovamente clic sulla prima scheda in modo che sia quella attiva sul caricamento della pagina.

Spero che questo aiuti chiunque abbia lo stesso problema.

Answer 4

È inoltre possibile aggiungere la logica al codice che quando il contenitore della mappa viene visualizzato il codice esegue un metodo denominato updateSize. In particolare, questo si presenta come:

$('$world-map').vectorMap('get','mapObject').updateSize(); 

Answer 5

Il problema è che il div con la mappa degli Stati Uniti è nascosta, quindi non può calcolare la dimensione della mappa (larghezza) in modo corretto. Invece puoi css quel div per avere l'altezza: 0.

Ho riscontrato questo problema utilizzando Highcharts, lo stesso per jvectormap. Di seguito il codice risolto il problema (con bootstrap):

/* bootstrap hack: fix content width inside hidden tabs */ 
.tab-content > .tab-pane:not(.active), 
.pill-content > .pill-pane:not(.active) { 
    display: block; 
    height: 0; 
    overflow-y: hidden; 
} 
/* bootstrap hack end */