---
title: "Marker | 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.
# Class Marker
Creates a marker component
#### Example[](#example)
```typescript
let marker = new Marker()
.setLngLat([30.5, 50.5])
.addTo(map);
```
#### Example[](#example-1)
Set options
```typescript
let marker = new Marker({
color: "#FFFFFF",
draggable: true
}).setLngLat([30.5, 50.5])
.addTo(map);
```
#### See[](#see)
- [Add a default marker](https://maplibre.org/maplibre-gl-js/docs/examples/add-a-default-marker/)
- [Add custom icons with Markers](https://maplibre.org/maplibre-gl-js/docs/examples/add-custom-icons-with-markers/)
- [Create a draggable Marker](https://maplibre.org/maplibre-gl-js/docs/examples/create-a-draggable-marker/)
- [Animate a marker](https://maplibre.org/maplibre-gl-js/docs/examples/animate-a-marker/)
- [Attach a popup to a marker instance](https://maplibre.org/maplibre-gl-js/docs/examples/attach-a-popup-to-a-marker-instance/)
## Events[](#events)
**Event** `dragstart` of type [Event](https://docs.maptiler.com/sdk-js/api-reference/classes/Event/) will be fired when dragging starts.
**Event** `drag` of type [Event](https://docs.maptiler.com/sdk-js/api-reference/classes/Event/) will be fired while dragging.
**Event** `dragend` of type [Event](https://docs.maptiler.com/sdk-js/api-reference/classes/Event/) will be fired when the marker is finished being dragged.
**Event** `click` of type [Event](https://docs.maptiler.com/sdk-js/api-reference/classes/Event/) will be fired when the marker is clicked.
## CSS Classes[](#css-classes)
**CSS class** `maplibregl-marker-covered` is toggled on the marker element when the marker is hidden behind 3D terrain or on the back of a globe. Use this class to apply custom styles to covered markers.
#### Example[](#example-2)
```typescript
.maplibregl-marker-covered {
pointer-events: none;
cursor: default;
}
```
#### Hierarchy ([View Summary](https://docs.maptiler.com/sdk-js/api-reference/hierarchy/#Externals.Marker))
- [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/)
- Marker
- [Marker](https://docs.maptiler.com/sdk-js/api-reference/classes/Marker/)
##### Index
### Constructors[](#constructors)
[constructor](#constructor)
### Methods[](#methods)
[addClassName](#addclassname) [addTo](#addto) [fire](#fire) [getElement](#getelement) [getLngLat](#getlnglat) [getOffset](#getoffset) [getPitchAlignment](#getpitchalignment) [getPopup](#getpopup) [getRotation](#getrotation) [getRotationAlignment](#getrotationalignment) [isDraggable](#isdraggable) [listens](#listens) [off](#off) [on](#on) [once](#once) [remove](#remove) [removeClassName](#removeclassname) [setDraggable](#setdraggable) [setEventedParent](#seteventedparent) [setLngLat](#setlnglat) [setOffset](#setoffset) [setOpacity](#setopacity) [setPitchAlignment](#setpitchalignment) [setPopup](#setpopup) [setRotation](#setrotation) [setRotationAlignment](#setrotationalignment) [setSubpixelPositioning](#setsubpixelpositioning) [toggleClassName](#toggleclassname) [togglePopup](#togglepopup)
## Constructors[](#constructors-1)
### constructor[](#constructor)
- new Marker(options?: [MarkerOptions](https://docs.maptiler.com/sdk-js/api-reference/types/MarkerOptions/)): Marker[](#constructormarker)
#### Parameters
- `Optional`options: [MarkerOptions](https://docs.maptiler.com/sdk-js/api-reference/types/MarkerOptions/)
the options
#### Returns Marker
Overrides [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/).[constructor](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/#constructor)
## Methods[](#methods-1)
### addClassName[](#addclassname)
- addClassName(className: string): void[](#addclassname-1)
Adds a CSS class to the marker element.
#### Parameters
- className: string
on-empty string with CSS class name to add to marker element
#### Returns void
#### Example[](#example-3)
```typescript
let marker = new Marker()
marker.addClassName('some-class')
```
### addTo[](#addto)
- addTo(map: [MapLibreMap](https://docs.maptiler.com/sdk-js/api-reference/classes/MapLibreMap/)): this[](#addto-1)
Attaches the `Marker` to a `Map` object.
#### Parameters
- map: [MapLibreMap](https://docs.maptiler.com/sdk-js/api-reference/classes/MapLibreMap/)
The MapLibre GL JS map to add the marker to.
#### Returns this
#### Example[](#example-4)
```typescript
let marker = new Marker()
.setLngLat([30.5, 50.5])
.addTo(map); // add the marker to the map
```
### fire[](#fire)
- fire(event: string | [Event](https://docs.maptiler.com/sdk-js/api-reference/classes/Event/), properties?: any): this[](#fire-1)
#### Parameters
- event: string | [Event](https://docs.maptiler.com/sdk-js/api-reference/classes/Event/)
- `Optional`properties: any
#### Returns this
Inherited from [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/).[fire](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/#fire)
### getElement[](#getelement)
- getElement(): [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/)[](#getelement-1)
Returns the `Marker`'s HTML element.
#### Returns [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/)
element
### getLngLat[](#getlnglat)
- getLngLat(): [LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/)[](#getlnglat-1)
Get the marker's geographical location.
The longitude of the result may differ by a multiple of 360 degrees from the longitude previously set by `setLngLat` because `Marker` wraps the anchor longitude across copies of the world to keep the marker on screen.
#### Returns [LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/)
A [LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/) describing the marker's location.
#### Example[](#example-5)
```typescript
// Store the marker's longitude and latitude coordinates in a variable
let lngLat = marker.getLngLat();
// Print the marker's longitude and latitude values in the console
console.log('Longitude: ' + lngLat.lng + ', Latitude: ' + lngLat.lat )
```
#### See[](#see-1)
[Create a draggable Marker](https://maplibre.org/maplibre-gl-js/docs/examples/create-a-draggable-marker/)
### getOffset[](#getoffset)
- getOffset(): [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)[](#getoffset-1)
Get the marker's offset.
#### Returns [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)
The marker's screen coordinates in pixels.
### getPitchAlignment[](#getpitchalignment)
- getPitchAlignment(): [Alignment](https://docs.maptiler.com/sdk-js/api-reference/types/Alignment/)[](#getpitchalignment-1)
Returns the current `pitchAlignment` property of the marker.
#### Returns [Alignment](https://docs.maptiler.com/sdk-js/api-reference/types/Alignment/)
The current pitch alignment of the marker in degrees.
### getPopup[](#getpopup)
- getPopup(): [Popup](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Popup/)[](#getpopup-1)
Returns the [Popup](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Popup/) instance that is bound to the [Marker](#).
#### Returns [Popup](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Popup/)
popup
#### Example[](#example-6)
```typescript
let marker = new Marker()
.setLngLat([0, 0])
.setPopup(new Popup().setHTML("Hello World!
"))
.addTo(map);
console.log(marker.getPopup()); // return the popup instance
```
### getRotation[](#getrotation)
- getRotation(): number[](#getrotation-1)
Returns the current rotation angle of the marker (in degrees).
#### Returns number
The current rotation angle of the marker.
### getRotationAlignment[](#getrotationalignment)
- getRotationAlignment(): [Alignment](https://docs.maptiler.com/sdk-js/api-reference/types/Alignment/)[](#getrotationalignment-1)
Returns the current `rotationAlignment` property of the marker.
#### Returns [Alignment](https://docs.maptiler.com/sdk-js/api-reference/types/Alignment/)
The current rotational alignment of the marker.
### isDraggable[](#isdraggable)
- isDraggable(): boolean[](#isdraggable-1)
Returns true if the marker can be dragged
#### Returns boolean
True if the marker is draggable.
### listens[](#listens)
- listens(type: string): boolean[](#listens-1)
Returns a true if this instance of Evented or any forwardeed instances of Evented have a listener for the specified type.
#### Parameters
- type: string
The event type
#### Returns boolean
`true` if there is at least one registered listener for specified event type, `false` otherwise
Inherited from [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/).[listens](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/#listens)
### off[](#off)
- off(type: string, listener: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/)): this[](#off-1)
Removes a previously registered event listener.
#### Parameters
- type: string
The event type to remove listeners for.
- listener: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/)
The listener function to remove.
#### Returns this
Inherited from [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/).[off](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/#off)
### on[](#on)
- on(type: string, listener: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/)): [Subscription](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Subscription/)[](#on-1)
Adds a listener to a specified event type.
#### Parameters
- type: string
The event type to add a listen for.
- listener: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/)
The function to be called when the event is fired. The listener function is called with the data object passed to `fire`, extended with `target` and `type` properties.
#### Returns [Subscription](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Subscription/)
Inherited from [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/).[on](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/#on)
### once[](#once)
- once(type: string, listener?: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/)): Marker | Promise[](#once-1)
Adds a listener that will be called only once to a specified event type.
The listener will be called first time the event fires after the listener is registered.
#### Parameters
- type: string
The event type to listen for.
- `Optional`listener: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/)
The function to be called when the event is fired the first time.
#### Returns Marker | Promise
`this` or a promise if a listener is not provided
Inherited from [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/).[once](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/#once)
### remove[](#remove)
- remove(): this[](#remove-1)
Removes the marker from a map
#### Returns this
#### Example[](#example-7)
```typescript
let marker = new Marker().addTo(map);
marker.remove();
```
### removeClassName[](#removeclassname)
- removeClassName(className: string): void[](#removeclassname-1)
Removes a CSS class from the marker element.
#### Parameters
- className: string
Non-empty string with CSS class name to remove from marker element
#### Returns void
#### Example[](#example-8)
```typescript
let marker = new Marker()
marker.removeClassName('some-class')
```
### setDraggable[](#setdraggable)
- setDraggable(shouldBeDraggable?: boolean): this[](#setdraggable-1)
Sets the `draggable` property and functionality of the marker
#### Parameters
- `Optional`shouldBeDraggable: boolean
Turns drag functionality on/off
#### Returns this
### setEventedParent[](#seteventedparent)
- setEventedParent(parent?: [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/) | null, data?: any): this[](#seteventedparent-1)
Bubble all events fired by this instance of Evented to this parent instance of Evented.
#### Parameters
- `Optional`parent: [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/) | null
- `Optional`data: any
#### Returns this
Inherited from [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/).[setEventedParent](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/#seteventedparent)
### setLngLat[](#setlnglat)
- setLngLat(lnglat: [LngLatLike](https://docs.maptiler.com/sdk-js/api-reference/types/LngLatLike/)): this[](#setlnglat-1)
Set the marker's geographical position and move it.
#### Parameters
- lnglat: [LngLatLike](https://docs.maptiler.com/sdk-js/api-reference/types/LngLatLike/)
A [LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/) describing where the marker should be located.
#### Returns this
#### Example[](#example-9)
Create a new marker, set the longitude and latitude, and add it to the map
```typescript
new Marker()
.setLngLat([-65.017, -16.457])
.addTo(map);
```
#### See[](#see-2)
- [Add custom icons with Markers](https://maplibre.org/maplibre-gl-js/docs/examples/add-custom-icons-with-markers/)
- [Create a draggable Marker](https://maplibre.org/maplibre-gl-js/docs/examples/create-a-draggable-marker/)
### setOffset[](#setoffset)
- setOffset(offset: [PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/)): this[](#setoffset-1)
Sets the offset of the marker
#### Parameters
- offset: [PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/)
The offset in pixels as a [PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/) object to apply relative to the element's center. Negatives indicate left and up.
#### Returns this
### setOpacity[](#setopacity)
- setOpacity(
opacity?: string | number,
opacityWhenCovered?: string | number,
): this[](#setopacity-1)
Sets the `opacity` and `opacityWhenCovered` properties of the marker. When called without arguments, resets opacity and opacityWhenCovered to defaults
#### Parameters
- `Optional`opacity: string | number
Sets the `opacity` property of the marker.
- `Optional`opacityWhenCovered: string | number
Sets the `opacityWhenCovered` property of the marker.
#### Returns this
### setPitchAlignment[](#setpitchalignment)
- setPitchAlignment(alignment?: [Alignment](https://docs.maptiler.com/sdk-js/api-reference/types/Alignment/)): this[](#setpitchalignment-1)
Sets the `pitchAlignment` property of the marker.
#### Parameters
- `Optional`alignment: [Alignment](https://docs.maptiler.com/sdk-js/api-reference/types/Alignment/)
Sets the `pitchAlignment` property of the marker. If alignment is 'auto', it will automatically match `rotationAlignment`.
#### Returns this
### setPopup[](#setpopup)
- setPopup(popup?: [Popup](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Popup/) | null): this[](#setpopup-1)
Binds a [Popup](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Popup/) to the [Marker](#).
#### Parameters
- `Optional`popup: [Popup](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Popup/) | null
An instance of the [Popup](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Popup/) class. If undefined or null, any popup set on this [Marker](#) instance is unset.
#### Returns this
#### Example[](#example-10)
```typescript
let marker = new Marker()
.setLngLat([0, 0])
.setPopup(new Popup().setHTML("Hello World!
")) // add popup
.addTo(map);
```
#### See[](#see-3)
[Attach a popup to a marker instance](https://maplibre.org/maplibre-gl-js/docs/examples/attach-a-popup-to-a-marker-instance/)
### setRotation[](#setrotation)
- setRotation(rotation?: number): this[](#setrotation-1)
Sets the `rotation` property of the marker.
#### Parameters
- `Optional`rotation: number
The rotation angle of the marker (clockwise, in degrees), relative to its respective [Marker.setRotationAlignment](#setrotationalignment) setting.
#### Returns this
### setRotationAlignment[](#setrotationalignment)
- setRotationAlignment(alignment?: [Alignment](https://docs.maptiler.com/sdk-js/api-reference/types/Alignment/)): this[](#setrotationalignment-1)
Sets the `rotationAlignment` property of the marker.
#### Parameters
- `Optional`alignment: [Alignment](https://docs.maptiler.com/sdk-js/api-reference/types/Alignment/)
Sets the `rotationAlignment` property of the marker. defaults to 'auto'
#### Returns this
### setSubpixelPositioning[](#setsubpixelpositioning)
- setSubpixelPositioning(value: boolean): this[](#setsubpixelpositioning-1)
Set the option to allow subpixel positioning of the marker by passing a boolean
#### Parameters
- value: boolean
when set to `true`, subpixel positioning is enabled for the marker.
#### Returns this
#### Example[](#example-11)
```typescript
let marker = new Marker()
marker.setSubpixelPositioning(true);
```
### toggleClassName[](#toggleclassname)
- toggleClassName(className: string): boolean[](#toggleclassname-1)
Add or remove the given CSS class on the marker element, depending on whether the element currently has that class.
#### Parameters
- className: string
Non-empty string with CSS class name to add/remove
#### Returns boolean
if the class was removed return false, if class was added, then return true
#### Example[](#example-12)
```typescript
let marker = new Marker()
marker.toggleClassName('toggleClass')
```
### togglePopup[](#togglepopup)
- togglePopup(): this[](#togglepopup-1)
Opens or closes the [Popup](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Popup/) instance that is bound to the [Marker](#), depending on the current state of the [Popup](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Popup/).
#### Returns this
#### Example[](#example-13)
```typescript
let marker = new Marker()
.setLngLat([0, 0])
.setPopup(new Popup().setHTML("Hello World!
"))
.addTo(map);
marker.togglePopup(); // toggle popup open or closed
```