Скачать или смотреть Displaying Two Maps in a Single Page with Mapbox

Learn how to effectively display two interactive maps using `Mapbox` on a single HTML page with tabbed navigation. Get step-by-step instructions and helpful tips to troubleshoot common issues.
---
This video is based on the question https://stackoverflow.com/q/64438462/ asked by the user 'Thamsanqa' ( https://stackoverflow.com/u/11147049/ ) and on the answer https://stackoverflow.com/a/64447568/ provided by the user 'Bosc' ( https://stackoverflow.com/u/3365721/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to display Two Maps in a single page using Mapbox

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Displaying Two Maps in a Single Page with Mapbox: A Comprehensive Guide

Are you looking to showcase two different maps on a single webpage using Mapbox? If so, you’re not alone. Many developers encounter challenges in displaying multiple maps, especially when using tabbed interfaces. In this guide, we'll explore a common issue and provide a clear, step-by-step solution to ensure that both maps render correctly on your page.

The Problem

You have a setup where you've attempted to display two maps within an HTML structure that uses Bootstrap tabs. While the first map displays perfectly, the second one fails to appear. This is a common problem caused by various factors, including improper HTML structure and the way the JavaScript initializes the maps.

Analyzing the HTML Structure

To illustrate the problem, let’s start with the HTML structure you provided:

[[See Video to Reveal this Text or Code Snippet]]

Key Issues to Address

Duplicate Class Names: You are using the tab-content class twice which can lead to confusion in rendering.

Initialization Timing: When a tab is not displayed (i.e., hidden), the Mapbox map container does not have dimensions, leading to the second map potentially not initializing properly.

The Solution

To resolve the issues, follow these steps:

Step 1: Correct the HTML Structure

Make sure to use a single container for tab-content and ensure that each tab pane is uniquely identified.

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Initialize Maps Properly

Use the following JavaScript code to initialize both maps. Ensure that your access token and map style are correctly placed.

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Handle Tab Events

To ensure the second map initializes correctly when the tab is opened, add an event listener that resizes the map when its tab is activated:

[[See Video to Reveal this Text or Code Snippet]]

Final Code Example

Here’s how your final code might look:

HTML

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

Displaying two maps on a single page with Mapbox requires careful attention to both the HTML and JavaScript. By fixing the structure and ensuring the maps are properly initialized and resized, you can create an effective tab-driven interface that showcases multiple maps seamlessly.

Feel free to reach out if you have any questions or run into any issues while implementing this solution!