How to display Two Maps in a single page using Mapbox

Question

I trust you are well. I have a problem I want to display two maps in a tab driven page in html. The first map is dispalyed but the second one doesnt show. What is it I might be doing wrong?

My HTML:


Tab 1
Tab 2

My Script:

user_11959296 · Answer

It looks as though you are running into a CSS issue here with the positioning. You could try absolute positioning the two maps like in the code sample below:

var long = -71.2145400;
var lat = 46.8122800;
var long2 = -73.589;
var lat2 = 45.485;
var zoom = 12;
mapboxgl.accessToken = 'pk.eyJ1IjoicGxtYXBib3giLCJhIjoiY2tnaHl1Nm5kMGFuejMxbHYxdXNiZTdmaSJ9.NzXqTSavz0iRskwUmt5kPw';

// Map 1
var map1 = new mapboxgl.Map({
container: 'map1', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [long, lat], // starting position [long, lat]
zoom: zoom // starting zoom
});
  

// Map 2
var map2 = new mapboxgl.Map({
container: 'map2', // container id
style: 'mapbox://styles/mapbox/dark-v10', // stylesheet location
center: [long2, lat2], // starting position [long, lat]
zoom: zoom // starting zoom
});

body { margin:0; padding:0;}
#map1 { position:absolute; top:0; bottom:0; left: 0; width:50%; }
#map2 { position:absolute; top:0; bottom:0; right: 0; width:50%;}
.maplabel {
  position: absolute;
  background: white;
  z-index: 1000;
  font-size: 20px;
  padding: 10px;
}
.map2 {
 right: 0;
}




Map Comparison





  Map 1
  
  Map 2

user_3365721 · Answer

Tabs look to be working fine, using two tab-content classes is probably messing with things. Can you reproduce in a jsfiddle?

In the past I had issues adding a map to a hidden div and to fix this needed to call a map_resize on said div when it was shown, but this was with leaflet.js which your not using.

mapboxgl.accessToken = 'pk.eyJ1IjoiZnJhbmtub2hvIiwiYSI6ImNpeTRuc2RlNTAwMjcycW82YXFqb25zeWUifQ.rZInQYYcrTLa-0oyP2kcbQ';
var map1 = new mapboxgl.Map({
container: 'map1',
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});

var map2 = new mapboxgl.Map({
container: 'map2',
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [-77.5, 50], // starting position [lng, lat]
zoom: 5 // starting zoom
});

var map3 = new mapboxgl.Map({
container: 'map3',
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [37.5, 50], // starting position [lng, lat]
zoom: 2 // starting zoom
});










  
    
      
        Home
      
      
        Profile
      
      
        Contact

user_10102695 · Answer

I believe this might be the CSS problem:

I am attaching working JS fiddle with JS tabbing having two mapbox map instance:

https://jsfiddle.net/dollysingh3192/whzq5f1e/1/

I fixed:

#map1 {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

 #map2 {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

and gif:

user_14472371 · Answer

mapboxgl.accessToken = 'pk.eyJ1IjoiYWJyYWFvYWx2ZXMiLCJhIjoiY2oxbTRzZXBmMDA1ZjJ3bzI3ODZucTM2dCJ9.AICaNFFp-vS2tD5mEHulmA';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-98, 38.88],
    maxZoom: 5,
    minZoom: 1,
    zoom: 3
});
mapboxgl.accessToken = 'pk.eyJ1IjoiYWJyYWFvYWx2ZXMiLCJhIjoiY2oxbTRzZXBmMDA1ZjJ3bzI3ODZucTM2dCJ9.AICaNFFp-vS2tD5mEHulmA';
var map = new mapboxgl.Map({
    container: 'map2',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-98, 38.88],
    maxZoom: 5,
    minZoom: 1,
    zoom: 3
});

body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }

#map {
    position:absolute;
    left:25%;
    top:0;
    bottom:0;
    width: 75%;
}
.map-overlay {
    position: absolute;
    width: 25%;
    top: 0;
    bottom: 0;
    left: 0;
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    background-color: #fff;
    max-height: 100%;
    overflow: hidden;
}

.map-overlay fieldset {
    display: none;
    background: #ddd;
    border: none;
    padding: 10px;
    margin: 0;
}

.map-overlay input {
    display: block;
    border: none;
    width: 100%;
    border-radius: 3px;
    padding: 10px;
    margin: 0;
}

.map-overlay .listing {
    overflow: auto;
    max-height: 100%;
}

.map-overlay .listing > * {
    display: block;
    padding: 5px 10px;
    margin: 0;
}

.map-overlay .listing a {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    color: #404;
    text-decoration: none;
}

.map-overlay .listing a:last-child {
    border: none;
}

.map-overlay .listing a:hover {
    background: #f0f0f0;
}

How to display Two Maps in a single page using Mapbox

4 Answers