--- title: "ImageViewerMarker | 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 ImageViewerMarker`Maptiler` #### Hierarchy ([View Summary](https://docs.maptiler.com/sdk-js/api-reference/hierarchy/#ImageViewerMarker)) - [Evented](https://docs.maptiler.com/sdk-js/api-reference/variables/Externals.Evented-1/) - ImageViewerMarker ##### Index ### Constructors[](#constructors) [constructor](#constructor) ### Methods[](#methods) [addClassName](#addclassname) [addTo](#addto) [fire](#fire) [getElement](#getelement) [getOffset](#getoffset) [getPitchAlignment](#getpitchalignment) [getPopup](#getpopup) [getPosition](#getposition) [getRotation](#getrotation) [getRotationAlignment](#getrotationalignment) [isDraggable](#isdraggable) [isWithinImageBounds](#iswithinimagebounds) [listens](#listens) [off](#off) [on](#on) [once](#once) [remove](#remove) [removeClassName](#removeclassname) [setDraggable](#setdraggable) [setEventedParent](#seteventedparent) [setOffset](#setoffset) [setOpacity](#setopacity) [setPitchAlignment](#setpitchalignment) [setPopup](#setpopup) [setPosition](#setposition) [setRotation](#setrotation) [setRotationAlignment](#setrotationalignment) [setSubpixelPositioning](#setsubpixelpositioning) [toggleClassName](#toggleclassname) [togglePopup](#togglepopup) ## Constructors[](#constructors-1) ### `Maptiler`constructor[](#constructor) - new ImageViewerMarker(\_\_namedParameters: [MarkerOptions](https://docs.maptiler.com/sdk-js/api-reference/types/MarkerOptions/)): ImageViewerMarker[](#constructorimageviewermarker) #### Parameters - \_\_namedParameters: [MarkerOptions](https://docs.maptiler.com/sdk-js/api-reference/types/MarkerOptions/) #### Returns ImageViewerMarker Overrides Evented.constructor ## Methods[](#methods-1) ### `Maptiler`addClassName[](#addclassname) - addClassName(className: string): ImageViewerMarker[](#addclassname-1) Adds a class name to the ImageViewerMarker. #### Parameters - className: string The class name to add to the ImageViewerMarker. #### Returns ImageViewerMarker The ImageViewerMarker instance. ### `Maptiler`addTo[](#addto) - addTo(viewer: [ImageViewer](https://docs.maptiler.com/sdk-js/api-reference/classes/ImageViewer/)): ImageViewerMarker[](#addto-1) Adds the ImageViewerMarker to an instance of ImageViewer. #### Parameters - viewer: [ImageViewer](https://docs.maptiler.com/sdk-js/api-reference/classes/ImageViewer/) The instance of ImageViewer to add the ImageViewerMarker to. #### Returns ImageViewerMarker The ImageViewerMarker instance. ### `Maptiler`fire[](#fire) - fire(     event: Event | "dragstart" | "drag" | "dragend",     data?: [Record](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Record/), ): ImageViewerMarker[](#fire-1) Fires an event on the ImageViewerMarker. #### Parameters - event: Event | "dragstart" | "drag" | "dragend" The event to fire. - `Optional`data: [Record](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Record/) The data to fire the event with. #### Returns ImageViewerMarker The ImageViewerMarker instance. Overrides Evented.fire ### `Maptiler`getElement[](#getelement) - getElement(): [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/)[](#getelement-1) Gets the element of the ImageViewerMarker. #### Returns [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/) The element of the ImageViewerMarker. ### `Maptiler`getOffset[](#getoffset) - getOffset(): [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)[](#getoffset-1) Gets the offset of the ImageViewerMarker. #### Returns [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/) The offset of the ImageViewerMarker. #### See[](#see) [PointLike](https://docs.maptiler.com/sdk-js/api/geography/#pointlike) ### `Maptiler`getPitchAlignment[](#getpitchalignment) - getPitchAlignment(): [Alignment](https://docs.maptiler.com/sdk-js/api-reference/types/Alignment/)[](#getpitchalignment-1) Gets the pitch alignment of the ImageViewerMarker. #### Returns [Alignment](https://docs.maptiler.com/sdk-js/api-reference/types/Alignment/) The pitch alignment of the ImageViewerMarker. #### See[](#see-1) [MapLibreGL.Alignment](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/Alignment/) ### `Maptiler`getPopup[](#getpopup) - getPopup(): [Popup](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Popup/)[](#getpopup-1) Gets the popup of the ImageViewerMarker. #### Returns [Popup](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Popup/) The popup of the ImageViewerMarker. #### See[](#see-2) [Popup](https://docs.maptiler.com/sdk-js/api/markers/#popup) ### `Maptiler`getPosition[](#getposition) - getPosition(): \[number, number\][](#getposition-1) Gets the position of the ImageViewerMarker. #### Returns \[number, number\] The position of the ImageViewerMarker. #### See[](#see-3) [PointLike](https://docs.maptiler.com/sdk-js/api/geography/#pointlike) ### `Maptiler`getRotation[](#getrotation) - getRotation(): number[](#getrotation-1) Gets the rotation of the ImageViewerMarker. #### Returns number The rotation of the ImageViewerMarker. ### `Maptiler`getRotationAlignment[](#getrotationalignment) - getRotationAlignment(): [Alignment](https://docs.maptiler.com/sdk-js/api-reference/types/Alignment/)[](#getrotationalignment-1) Gets the rotation alignment of the ImageViewerMarker. #### Returns [Alignment](https://docs.maptiler.com/sdk-js/api-reference/types/Alignment/) The rotation alignment of the ImageViewerMarker. #### See[](#see-4) [MapLibreGL.Alignment](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/Alignment/) ### `Maptiler`isDraggable[](#isdraggable) - isDraggable(): boolean[](#isdraggable-1) Checks if the ImageViewerMarker is draggable. #### Returns boolean True if the ImageViewerMarker is draggable, false otherwise. ### `Maptiler`isWithinImageBounds[](#iswithinimagebounds) - isWithinImageBounds(): boolean[](#iswithinimagebounds-1) Checks if the ImageViewerMarker is within the image bounds. #### Returns boolean True if the ImageViewerMarker is within the image bounds, false otherwise. ### 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.listens ### `Maptiler`off[](#off) - off(     event: "dragstart" | "drag" | "dragend",     listener: (e: [ImageViewerMarkerEvent](https://docs.maptiler.com/sdk-js/api-reference/classes/ImageViewerMarkerEvent/)) \=> void, ): ImageViewerMarker[](#off-1) Removes an event listener from the ImageViewerMarker. #### Parameters - event: "dragstart" | "drag" | "dragend" The event to remove the listener from. - listener: (e: [ImageViewerMarkerEvent](https://docs.maptiler.com/sdk-js/api-reference/classes/ImageViewerMarkerEvent/)) \=> void The listener to remove. #### Returns ImageViewerMarker The ImageViewerMarker instance. Overrides Evented.off ### `Maptiler`on[](#on) - on(     event: "dragstart" | "drag" | "dragend",     listener: (e: [ImageViewerMarkerEvent](https://docs.maptiler.com/sdk-js/api-reference/classes/ImageViewerMarkerEvent/)) \=> void, ): [Subscription](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Subscription/)[](#on-1) Adds an event listener to the ImageViewerMarker. #### Parameters - event: "dragstart" | "drag" | "dragend" The event to add the listener to. - listener: (e: [ImageViewerMarkerEvent](https://docs.maptiler.com/sdk-js/api-reference/classes/ImageViewerMarkerEvent/)) \=> void The listener to add. #### Returns [Subscription](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Subscription/) The ImageViewerMarker instance. Overrides Evented.on ### once[](#once) - once(type: string, listener?: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/)): Promise | ImageViewerMarker[](#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 Promise | ImageViewerMarker `this` or a promise if a listener is not provided Inherited from Evented.once ### `Maptiler`remove[](#remove) - remove(): ImageViewerMarker[](#remove-1) Removes the ImageViewerMarker from the ImageViewer and cleans up the event listeners. #### Returns ImageViewerMarker The ImageViewerMarker instance. ### `Maptiler`removeClassName[](#removeclassname) - removeClassName(className: string): ImageViewerMarker[](#removeclassname-1) Removes a class name from the ImageViewerMarker dom element. #### Parameters - className: string The class name to remove from the ImageViewerMarker. #### Returns ImageViewerMarker The ImageViewerMarker instance. ### `Maptiler`setDraggable[](#setdraggable) - setDraggable(draggable: boolean): ImageViewerMarker[](#setdraggable-1) Sets the draggable state of the ImageViewerMarker. #### Parameters - draggable: boolean The draggable state of the ImageViewerMarker. #### Returns ImageViewerMarker The ImageViewerMarker instance. ### 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.setEventedParent ### `Maptiler`setOffset[](#setoffset) - setOffset(offset: [PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/)): ImageViewerMarker[](#setoffset-1) Sets the offset of the ImageViewerMarker. #### Parameters - offset: [PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/) The offset of the ImageViewerMarker. #### Returns ImageViewerMarker The ImageViewerMarker instance. ### `Maptiler`setOpacity[](#setopacity) - setOpacity(opacity?: string, opacityWhenCovered?: string): ImageViewerMarker[](#setopacity-1) Sets the opacity of the ImageViewerMarker. #### Parameters - `Optional`opacity: string The opacity of the ImageViewerMarker. - `Optional`opacityWhenCovered: string The opacity of the ImageViewerMarker when covered. #### Returns ImageViewerMarker The ImageViewerMarker instance. ### `Maptiler`setPitchAlignment[](#setpitchalignment) - setPitchAlignment(pitchAlignment: [Alignment](https://docs.maptiler.com/sdk-js/api-reference/types/Alignment/)): ImageViewerMarker[](#setpitchalignment-1) Sets the pitch alignment of the ImageViewerMarker. #### Parameters - pitchAlignment: [Alignment](https://docs.maptiler.com/sdk-js/api-reference/types/Alignment/) The pitch alignment of the ImageViewerMarker. #### Returns ImageViewerMarker The ImageViewerMarker instance. #### See[](#see-5) [MapLibreGL.Alignment](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/Alignment/) ### `Maptiler`setPopup[](#setpopup) - setPopup(popup: [Popup](https://docs.maptiler.com/sdk-js/api-reference/classes/Popup/)): ImageViewerMarker[](#setpopup-1) Sets the popup of the ImageViewerMarker. #### Parameters - popup: [Popup](https://docs.maptiler.com/sdk-js/api-reference/classes/Popup/) The popup of the ImageViewerMarker. #### Returns ImageViewerMarker The ImageViewerMarker instance. #### See[](#see-6) [Popup](https://docs.maptiler.com/sdk-js/api/markers/#popup) ### `Maptiler`setPosition[](#setposition) - setPosition(px: \[number, number\]): ImageViewerMarker[](#setposition-1) Sets the position of the ImageViewerMarker. #### Parameters - px: \[number, number\] The position of the ImageViewerMarker in image pixels. #### Returns ImageViewerMarker The ImageViewerMarker instance. ### `Maptiler`setRotation[](#setrotation) - setRotation(rotation: number): ImageViewerMarker[](#setrotation-1) Sets the rotation of the ImageViewerMarker. #### Parameters - rotation: number The rotation of the ImageViewerMarker. #### Returns ImageViewerMarker The ImageViewerMarker instance. ### `Maptiler`setRotationAlignment[](#setrotationalignment) - setRotationAlignment(rotationAlignment: [Alignment](https://docs.maptiler.com/sdk-js/api-reference/types/Alignment/)): ImageViewerMarker[](#setrotationalignment-1) Sets the rotation alignment of the ImageViewerMarker. #### Parameters - rotationAlignment: [Alignment](https://docs.maptiler.com/sdk-js/api-reference/types/Alignment/) The rotation alignment of the ImageViewerMarker. #### Returns ImageViewerMarker The ImageViewerMarker instance. #### See[](#see-7) [MapLibreGL.Alignment](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/Alignment/) ### `Maptiler`setSubpixelPositioning[](#setsubpixelpositioning) - setSubpixelPositioning(subpixelPositioning: boolean): ImageViewerMarker[](#setsubpixelpositioning-1) Sets if subpixel positioning is enabled for the ImageViewerMarker. #### Parameters - subpixelPositioning: boolean The subpixel positioning of the ImageViewerMarker. #### Returns ImageViewerMarker The ImageViewerMarker instance. ### `Maptiler`toggleClassName[](#toggleclassname) - toggleClassName(className: string): ImageViewerMarker[](#toggleclassname-1) Toggles a class name on the ImageViewerMarker dom element. #### Parameters - className: string The class name to toggle on the ImageViewerMarker. #### Returns ImageViewerMarker The ImageViewerMarker instance. ### `Maptiler`togglePopup[](#togglepopup) - togglePopup(): ImageViewerMarker[](#togglepopup-1) Toggles the popup of the ImageViewerMarker. #### Returns ImageViewerMarker The ImageViewerMarker instance.