---
title: "MapboxFog"
description: "Set the map atmosphere/fog effect, forwarding options to the Mapbox fog specification."
canonical_url: "https://mapbox.mhaibaraai.cn/en/docs/environment/fog"
---
# MapboxFog

> Set the map atmosphere/fog effect, forwarding options to the Mapbox fog specification.

## Introduction

`MapboxFog` calls `setFog` to add a fog/atmosphere effect to the map. The `options` prop is forwarded directly to the Mapbox fog specification (`color`, `high-color`, `horizon-blend`, `space-color`, `range`, etc.). Omit it to use the style's default atmosphere. The effect is most visible with a camera tilt or globe projection.

## Usage

Overlay a tinted atmosphere and star field at a tilted view angle:

```vue [FogExample.vue]
<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MapboxMap
      :options="{
        style: 'mapbox://styles/mapbox/standard',
        center: [116.391, 39.908],
        zoom: 15,
        pitch: 70,
        bearing: -20
      }"
    >
      <MapboxFog
        :options="{
          'color': '#dbeafe',
          'high-color': '#a5b4fc',
          'horizon-blend': 0.3,
          'space-color': '#0b1026',
          'star-intensity': 0.15,
          'range': [1, 12]
        }"
      />
    </MapboxMap>
  </div>
</template>
```

## API

### Props

```ts
/**
 * Props for the MapboxFog component
 */
interface MapboxFogProps {
  /**
   * 大气/雾效果选项；缺省 {} 使用样式默认大气
   */
  options?: mapboxgl.FogSpecification | undefined;
}
```

## Changelog

See commit history for [src/runtime/components/environment/Fog.vue](https://github.com/mhaibaraai/movk-mapbox/commits/main/src/runtime/components/environment/Fog.vue).


## Sitemap

See the full [sitemap](https://mapbox.mhaibaraai.cn/sitemap.md) for all pages.