How to create a Mapbox GL map with a transparent background?

Question

I'm working on a project that utilizes Mapbox GL to display maps. I would like to create a Mapbox GL map with a transparent background, so that only the map / globe is visible without any background.

I've tried modifying the map style and setting the background color to transparent, but it doesn't seem to work as expected.

Here's an example of the code I've tried:

const mapStyle = {
  version: 8,
  sources: {},
  layers: [
  ],
  background: 'transparent',
};

const map = new mapboxgl.Map({
  container: 'map-container',
  style: mapStyle,
  // Other map options...
});

Currently it looks like that: And I want to remove the dark/blue background

Is there a proper way to achieve a Mapbox GL map/globe with a transparent background? Am I missing something in my approach?

Any guidance or suggestions would be greatly appreciated. Thank you in advance!

Answer 1

The default globe style is defined by mapbox itself, like in this example:

const map = new mapboxgl.Map({
  container: 'map',
  // Choose from Mapbox's core styles, or make your own style with Mapbox 
  Studio
  style: 'mapbox://styles/mapbox/satellite-streets-v11',
  zoom: 1.5,
  center: [30, 50],
 projection: 'globe'
});

The simplest solution I know is to go to https://studio.mapbox.com/ (you should have an account, otherwise you cannot use mapbox-gl).

Here you can define your own style, where the atmosphere is deactivated.

Go to global -> Atmosphere -> Enable Atmosphere "off".

When saved it will generate a user/style specific url, which you can use for the initialisation of your map. It looks like this: mapbox://styles/your_username/clk26nhw400c501qjee71cyzu