Add custom fog to a map | Mapbox GL JS

This example uses setFog to add a custom atmosphere effect to a map. It transitions between night and day to change the mood of the environment.

JavaScript

React

JavaScript

React


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add custom fog to a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.13.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.13.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    (async () => {
        const map = new mapboxgl.Map({
            container: 'map',
            zoom: 13,
            center: [6.6301, 45.35625],
            pitch: 80,
            bearing: 160,
            interactive: false,
            // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
            style: 'mapbox://styles/mapbox/satellite-v9'
        });

        await map.once('style.load');

        // Add daytime fog
        map.setFog({
            'range': [-1, 2],
            'horizon-blend': 0.3,
            'color': 'white',
            'high-color': '#add8e6',
            'space-color': '#d8f2ff',
            'star-intensity': 0.0
        });

        // Add 3D terrain
        map.addSource('mapbox-dem', {
            'type': 'raster-dem',
            'url': 'mapbox://mapbox.terrain-rgb',
            'tileSize': 512,
            'maxzoom': 14
        });
        map.setTerrain({
            'source': 'mapbox-dem',
            'exaggeration': 1.5
        });

        // Run a timing loop to switch between day and night
        await map.once('idle');

        let lastTime = 0.0;
        let animationTime = 0.0;
        let cycleTime = 0.0;
        let night = true;

        const initialBearing = map.getBearing();

        function frame(time) {
            const elapsedTime = (time - lastTime) / 1000.0;

            animationTime += elapsedTime;
            cycleTime += elapsedTime;

            if (cycleTime >= 10.0) {
                if (night) {
                    // night fog styling
                    map.setFog({
                        'range': [-1, 2],
                        'horizon-blend': 0.3,
                        'color': '#242B4B',
                        'high-color': '#161B36',
                        'space-color': '#0B1026',
                        'star-intensity': 0.8
                    });
                } else {
                    // day fog styling
                    map.setFog({
                        'range': [-1, 2],
                        'horizon-blend': 0.3,
                        'color': 'white',
                        'high-color': '#add8e6',
                        'space-color': '#d8f2ff',
                        'star-intensity': 0.0
                    });
                }

                night = !night;
                cycleTime = 0.0;
            }

            const rotation = initialBearing + animationTime * 2.0;
            map.setBearing(rotation % 360);

            lastTime = time;

            window.requestAnimationFrame(frame);
        }

        window.requestAnimationFrame(frame);
    })();
</script>

</body>
</html>

This code snippet will not work as expected until you replace YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.

JavaScript

React


import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';

import 'mapbox-gl/dist/mapbox-gl.css';

const MapboxExample = () => {
  const mapContainerRef = useRef();
  const mapRef = useRef();

  useEffect(() => {
    // TO MAKE THE MAP APPEAR YOU MUST
    // ADD YOUR ACCESS TOKEN FROM
    // https://account.mapbox.com
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

    mapRef.current = new mapboxgl.Map({
      container: 'map',
      zoom: 13,
      center: [6.6301, 45.35625],
      pitch: 80,
      bearing: 160,
      interactive: false,
      style: 'mapbox://styles/mapbox/satellite-v9'
    });

    mapRef.current.once('style.load').then(() => {
      mapRef.current.setFog({
        range: [-1, 2],
        'horizon-blend': 0.3,
        color: 'white',
        'high-color': '#add8e6',
        'space-color': '#d8f2ff',
        'star-intensity': 0.0
      });

      mapRef.current.addSource('mapbox-dem', {
        type: 'raster-dem',
        url: 'mapbox://mapbox.terrain-rgb',
        tileSize: 512,
        maxzoom: 14
      });
      mapRef.current.setTerrain({
        source: 'mapbox-dem',
        exaggeration: 1.5
      });

      mapRef.current.once('idle').then(() => {
        let lastTime = 0.0;
        let animationTime = 0.0;
        let cycleTime = 0.0;
        let night = true;

        const initialBearing = mapRef.current.getBearing();

        function frame(time) {
          const elapsedTime = (time - lastTime) / 1000.0;

          animationTime += elapsedTime;
          cycleTime += elapsedTime;

          if (cycleTime >= 10.0) {
            if (night) {
              // night fog styling
              mapRef.current.setFog({
                range: [-1, 2],
                'horizon-blend': 0.3,
                color: '#242B4B',
                'high-color': '#161B36',
                'space-color': '#0B1026',
                'star-intensity': 0.8
              });
            } else {
              // day fog styling
              mapRef.current.setFog({
                range: [-1, 2],
                'horizon-blend': 0.3,
                color: 'white',
                'high-color': '#add8e6',
                'space-color': '#d8f2ff',
                'star-intensity': 0.0
              });
            }

            night = !night;
            cycleTime = 0.0;
          }

          const rotation = initialBearing + animationTime * 2.0;
          mapRef.current.setBearing(rotation % 360);

          lastTime = time;

          window.requestAnimationFrame(frame);
        }

        window.requestAnimationFrame(frame);
      });
    });

    return () => mapRef.current.remove();
  }, []);

  return <div id="map" ref={mapContainerRef} style={{ height: '100%' }} />;
};

export default MapboxExample;

This code snippet will not work as expected until you replace YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.

More Examples

View some examples of our other style features here:

EXAMPLE

Rain Example Mapbox GL JS

This example adds a rain effect to the map by setting the style's rain property. You can adjust the intensity, direction, color, and more of the precipitation presented on screen.

EXAMPLE

Snow Example Mapbox GL JS

This example adds a snow effect to the map by setting the style's snow property. You can adjust the intensity, direction, color, and more of the precipitation presented on screen.

Was this example helpful?

More Examples​

More Examples