---
title: "PopupOptions | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Type Alias PopupOptions

The [Popup](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Popup/) options object

type PopupOptions \= {  
    [anchor](#anchor)?: [PositionAnchor](https://docs.maptiler.com/sdk-js/api-reference/types/PositionAnchor/);  
    [className](#classname)?: string;  
    [closeButton](#closebutton)?: boolean;  
    [closeOnClick](#closeonclick)?: boolean;  
    [closeOnMove](#closeonmove)?: boolean;  
    [focusAfterOpen](#focusafteropen)?: boolean;  
    [locationOccludedOpacity](#locationoccludedopacity)?: number | string;  
    [maxWidth](#maxwidth)?: string;  
    [offset](#offset)?: [Offset](https://docs.maptiler.com/sdk-js/api-reference/types/Offset/);  
    [padding](#padding)?: [PaddingOptions](https://docs.maptiler.com/sdk-js/api-reference/types/PaddingOptions/);  
    [subpixelPositioning](#subpixelpositioning)?: boolean;  
}

##### Index

### Properties[](#properties)

[anchor?](#anchor) [className?](#classname) [closeButton?](#closebutton) [closeOnClick?](#closeonclick) [closeOnMove?](#closeonmove) [focusAfterOpen?](#focusafteropen) [locationOccludedOpacity?](#locationoccludedopacity) [maxWidth?](#maxwidth) [offset?](#offset) [padding?](#padding) [subpixelPositioning?](#subpixelpositioning)

## Properties[](#properties-1)

### `Optional`anchor[](#anchor)

anchor?: [PositionAnchor](https://docs.maptiler.com/sdk-js/api-reference/types/PositionAnchor/)

A string indicating the part of the Popup that should be positioned closest to the coordinate set via [Popup.setLngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Popup/#setlnglat). Options are `'center'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`, `'top-right'`, `'bottom-left'`, and `'bottom-right'`. If unset the anchor will be dynamically set to ensure the popup falls within the map container with a preference for `'bottom'`.

### `Optional`className[](#classname)

className?: string

Space-separated CSS class names to add to popup container

### `Optional`closeButton[](#closebutton)

closeButton?: boolean

If `true`, a close button will appear in the top right corner of the popup.

#### Default Value[](#default-value)

```typescript
true
```

### `Optional`closeOnClick[](#closeonclick)

closeOnClick?: boolean

If `true`, the popup will closed when the map is clicked.

#### Default Value[](#default-value-1)

```typescript
true
```

### `Optional`closeOnMove[](#closeonmove)

closeOnMove?: boolean

If `true`, the popup will closed when the map moves.

#### Default Value[](#default-value-2)

```typescript
false
```

### `Optional`focusAfterOpen[](#focusafteropen)

focusAfterOpen?: boolean

If `true`, the popup will try to focus the first focusable element inside the popup.

#### Default Value[](#default-value-3)

```typescript
true
```

### `Optional`locationOccludedOpacity[](#locationoccludedopacity)

locationOccludedOpacity?: number | string

Optional opacity when the location is behind the globe. Note that if a number is provided, it will be converted to a string.

#### Default Value[](#default-value-4)

```typescript
undefined
```

### `Optional`maxWidth[](#maxwidth)

maxWidth?: string

A string that sets the CSS property of the popup's maximum width, eg `'300px'`. To ensure the popup resizes to fit its content, set this property to `'none'`. Available values can be found here: [https://developer.mozilla.org/en-US/docs/Web/CSS/max-width](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width)

#### Default Value[](#default-value-5)

```typescript
'240px'
```

### `Optional`offset[](#offset)

offset?: [Offset](https://docs.maptiler.com/sdk-js/api-reference/types/Offset/)

A pixel offset applied to the popup's location

### `Optional`padding[](#padding)

padding?: [PaddingOptions](https://docs.maptiler.com/sdk-js/api-reference/types/PaddingOptions/)

A pixel padding applied to the popup's positioning constraints. The popup will be positioned to avoid being placed within this padding area from the edges of the map container.

#### Default Value[](#default-value-6)

```typescript
undefined
```

### `Optional`subpixelPositioning[](#subpixelpositioning)

subpixelPositioning?: boolean

If `true`, rounding is disabled for placement of the popup, allowing for subpixel positioning and smoother movement when the popup is translated.

#### Default Value[](#default-value-7)

```typescript
false
```