1

I need to display two or multiple Carto Maps on the same HTML. No problem with the first map but the second is not displayed properly. I don't understand it. What's the right way to do it? Here is my html prototype http://pixelius.es/labs/servmet with the following code:

var mapDimarts;
var mapDimecres;

function servmet(){
    mapDimarts = new L.Map('cartodbDimarts', {
        center: [41.75, 2.18],
        zoom: 7
    });

    mapDimecres = new L.Map('cartodbDimecres', {
        center: [41.75, 2.18],
        zoom: 7
    });

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
    attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
}).addTo(mapDimarts);

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
    attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
}).addTo(mapDimecres);

cartodb.createLayer(mapDimarts, 'https://pixelius.carto.com/api/v2/viz/1f0fd8ee-9c22-4571-8b25-ef549d716c8f/viz.json')
    .addTo(mapDimarts)
    .on('error', function(err) {
  alert("some error occurred: " + err);
});

cartodb.createLayer(mapDimecres, 'https://pixelius.carto.com/api/v2/viz/6f8ec189-c208-4c5f-9aa2-6cc9ebbc52ac/viz.json')
    .addTo(mapDimecres)
    .on('error', function(err) {
  alert("some error occurred: " + err);
});

}

window.onload = servmet;
Sargasso-400
  • 37
  • 7
  • I have the same problem! I'm using two maps, but indifferent JS files (also with different var names). The second map is loaded, but only shows like one tile and behaves very strange! – alexkaessner Jan 22 '18 at 11:02

1 Answers1

0

The map is initialised when the map container is not visible. So the map is present but of an incorrect size.

I would set up a trigger on the tab to resize the map when/if the tab is clicked...

function predicDia(e,a){
   mapDimecres.invalidateSize(true);
RedCrusador
  • 675
  • 7
  • 19