Marker

Markers are interactive map elements placed at precise geographic coordinates, commonly used to highlight points of interest, locations, or other key features.

Constructor

new gtswebsdkgl.Marker(options)

new gtswebsdkgl.Marker(options: MarkerOptions)

Creates a new Marker with the specified options.

Parameters:

Name	Type	Description
options	MarkerOptions	Options for configuring the marker's appearance and behavior.

Example:

                        import { Marker } from 'gtswebsdkgl'; 

                        // Create a red, draggable marker

                        const marker = new Marker({

                            color: '#FF0000',

                            draggable: true,

                            anchor: 'bottom',

                            rotation: 45

                          })

                          .setLngLat([12.55, 55.66])

                          .addTo(map);

Properties

The following properties are set via the MarkerOptions object during construction and can be accessed or modified via the respective getter/setter methods.

element

element :HTMLElement

The DOM element that represents the marker on the map. If not provided in options, a default element is created.

color

color : string

The color to use for the default marker if no custom element is provided. Default: #3FB1CE (light blue).

draggable

draggable : boolean

If true, the marker can be dragged to a new position on the map. Default: false.

anchor

anchor : string

A string indicating which part of the marker should be positioned closest to the coordinate set via setLngLat. Valid values include: 'center', 'top', 'bottom', 'top-left', etc. Default: 'center'.

offset

offset : PointLike

The offset in pixels to apply relative to the element's center. Useful for adjusting the position of custom icons. Default: [0, 0].

rotation

rotation : number

The rotation angle of the marker in degrees, relative to its rotationAlignment setting. Default: 0.

rotationAlignment

rotation : Alignment

The alignment of the marker's rotation. Can be 'map', 'viewport', or 'auto'. Default: 'auto' (viewport).

pitchAlignment

pitchAlignment : Alignment

The alignment of the marker to the map's pitch. Can be 'map', 'viewport', or 'auto'. Default: 'auto' (matches rotationAlignment).

Events

The Marker class emits various events that developers can listen to.

click

// 1. Get the marker's HTML element
const markerElement = marker.getElement();
// 2. Attach a standard DOM click event listener to the element
markerElement.addEventListener('click', (e) => {
console.log('Marker was clicked!');
});

Fired when the marker element is clicked.

dragstart

marker.on('dragstart', () => {
console.log('Drag started!');
});

Fired when the user starts dragging the marker.

drag

marker.on('drag', () => {
console.log('Drag!');
});

Fired repeatedly while the marker is being dragged.

dragend

marker.on('dragend', () => {
console.log('Drag started!');
});

Fired when the user stops dragging the marker.

Methods

addTo()

addTo(map: Map): this

Adds the marker to the given map. This is required for the marker to become visible.

Parameters:

Parameter	Description
map	The map object to add the marker to.

Returns: this (The Marker instance)

remove()

remove(): this

Removes the marker from the map.

Returns: this (The Marker instance)

setLngLat()

setLngLat(lngLat: LngLatLike): this

Sets the marker's geographical position.

Parameters:

Parameter	Description
lngLat	The new longitude and latitude array, or LngLat object.

Returns: this (The Marker instance)

getLngLat()

getLngLat(): LngLat

Gets the marker's current geographical location.

Returns: LngLat (A LngLat describing the marker's location)

setOffset()

setOffset(offset: PointLike): this

Sets the offset of the marker, in pixels, relative to the anchor.

Parameters:

Parameter	Description
offset	The offset in pixels (e.g., `[0, -10]`).

Returns: this (The Marker instance)

setDraggable()

setDraggable(draggable: boolean): this

Sets whether the marker can be dragged by the user.

Parameters:

Parameter	Description
draggable	A boolean indicating whether the marker is draggable.

Returns: this (The Marker instance)

isDraggable()

isDraggable(): boolean

Returns true if the marker is draggable.

Returns: boolean

setPopup()

setPopup(popup?: Popup): this

Binds a Popup instance to the Marker. The popup will toggle on click.

Parameters:

Parameter	Description
popup	The Popup instance to bind, or `undefined` to unbind.

Returns: this (The Marker instance)

togglePopup()

togglePopup(): this

Toggles the visibility of the Popup bound to this Marker.

Returns: this (The Marker instance)

getElement()

getElement(): HTMLElement

Returns the marker's underlying HTML element.

Returns: HTMLElement

setRotation()

setRotation(rotation: number): this

Sets the rotation angle of the marker in degrees.

Parameters:

Parameter	Description
rotation	The new rotation angle in degrees.

Returns: this (The Marker instance)