2
Answers

How to display Two Mapbox Maps in a single page (HTML)

Photo of Thamsanqa Ngcongwane

Thamsanqa Ngcongwane
4y
2k
1
Hey guys,
 
I trust you are well.
 
I have a problem I want to display two maps in a tab driven page in html.
 
My HTML:
  1. <ul class="nav nav-tabs">  
  2. <li class="active"><a data-toggle="tab" href="#Tab1">Tab 1</a></li>  
  3. <li><a data-toggle="tab" href="#Tab2">Tab 2</a></li>  
  4. </ul>  
  5. <div class="tab-content">  
  6. <div class="tab-content">  
  7. <div id="Tab1" class="tab-pane fade in active">  
  8. <div class="custom-popup" id="map1"></div>  
  9. </div>  
  10. <div id="Tab2" class="tab-pane fade in active">  
  11. <div class="custom-popup" id="map2"></div>  
  12. </div>  
  13. </div>  
  14. </div>  
My JS:
  1. <script>  
  2. mapboxgl.accessToken = 'MyAccessToken';  
  3. var map1 = new mapboxgl.Map({  
  4. container: 'mapid',  
  5. style: 'mapbox://styles/mapbox/outdoors-v11',  
  6. center: [25.771944, -30.241943],  
  7. zoom: 5  
  8. });  
  9. //Second Map  
  10. var map2 = new mapboxgl.Map({  
  11. container: 'advisorymap',  
  12. style: 'mapbox://styles/mapbox/outdoors-v11',  
  13. center: [25.771944, -30.241943],  
  14. zoom: 5  
  15. });  
  16. </script>  
The first map is dispalyed but the second one doesnt show.
 
What is it I might be doing wrong?

Answers (2)

Next Recommended Forum