• Public
  • Public/Protected
  • All

A DepthOfFieldEffect allows you to apply a Depth of Field effect on a 3D WebGLMap.

Depth of Field is an effect that blurs out parts of your map, based on distance to the camera. This mimics the effect of a camera-wide aperture: objects you are focusing on are sharp, while the background is blurred.

Depth Of Field
Left: Depth of Field disabled, Right: Depth of Field enabled, with focus on the church

This implementation uses the GPU to calculate the effects of depth of field on-the-fly for your active view. You can toggle it on and off, as well as change any of its parameters at any time, with no additional overhead.

Depth of field has two main uses:

  • Increase the visual quality of your map.
  • Focus on a specific area of your map, so that it draws the attention of a user more effectively.
Depth of Field only has effect on 3D WebGLMaps.

  map.effect.depthOfField = {
    focalDepth: 300,
    focusRange: 400



  • DepthOfFieldEffect



Optional focalDepth

focalDepth: number

The distance in meters from the camera at which objects should be perfectly in focus.



Optional focusRange

focusRange: number

The range (in meters) around the focal depth at which objects should be perfectly in focus.


half the noFocusRange if provided, else 200

Optional noFocusRange

noFocusRange: number

The threshold in meters around the focal depth at which objects become fully unfocused. Objects between focusRange and noFocusRange are gradually blurred out of focus. NoFocusRange should be larger than focusRange.


twice the focusRange if provided, else 400

Optional scale

scale: number

A scale to increase or decrease the blur effect. It does not affect the other properties.




  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Type alias with type parameter
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method