--- title: "ImageViewer | 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 ImageViewer`Maptiler` #### Hierarchy ([View Summary](https://docs.maptiler.com/sdk-js/api-reference/hierarchy/#ImageViewer)) - [Evented](https://docs.maptiler.com/sdk-js/api-reference/variables/Externals.Evented/) - ImageViewer ##### Index ### Constructors[](#constructors) [constructor](#constructor) ### Properties[](#properties) [\[lngLatToPxInternalSymbolKey\]](#lnglattopxinternalsymbolkey) [\[pxToLngLatInternalSymbolKey\]](#pxtolnglatinternalsymbolkey) [fitToBoundsControlInstance](#fittoboundscontrolinstance) [shouldFitImageToViewport](#shouldfitimagetoviewport) ### Accessors[](#accessors) [boxZoom](#boxzoom) [cooperativeGestures](#cooperativegestures) [doubleClickZoom](#doubleclickzoom) [dragPan](#dragpan) [keyboard](#keyboard) [scrollZoom](#scrollzoom) [touchZoomRotate](#touchzoomrotate) [version](#version) ### Methods[](#methods) [fire](#fire) [fitImageBounds](#fitimagebounds) [fitImageToViewport](#fitimagetoviewport) [flyTo](#flyto) [getBearing](#getbearing) [getCanvas](#getcanvas) [getCenter](#getcenter) [getImageBounds](#getimagebounds) [getImageMetadata](#getimagemetadata) [getSDKInternal](#getsdkinternal) [getZoom](#getzoom) [jumpTo](#jumpto) [listens](#listens) [off](#off) [on](#on) [once](#once) [onReadyAsync](#onreadyasync) [panBy](#panby) [panTo](#panto) [pointIsWithinImageBounds](#pointiswithinimagebounds) [remove](#remove) [setBearing](#setbearing) [setCenter](#setcenter) [setEventedParent](#seteventedparent) [setZoom](#setzoom) [triggerRepaint](#triggerrepaint) ## Constructors[](#constructors-1) ### `Maptiler`constructor[](#constructor) - new ImageViewer(     imageViewerConstructorOptions: [Partial](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Partial/)<[ImageViewerConstructorOptions](https://docs.maptiler.com/sdk-js/api-reference/types/ImageViewerConstructorOptions/)\>, ): ImageViewer[](#constructorimageviewer) The constructor for the ImageViewer. #### Parameters - imageViewerConstructorOptions: [Partial](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Partial/)<[ImageViewerConstructorOptions](https://docs.maptiler.com/sdk-js/api-reference/types/ImageViewerConstructorOptions/)\> The options for the ImageViewer. #### Returns ImageViewer #### Example[](#example) ```typescript import "@maptiler/sdk/dist/maptiler-sdk.css"; // import css import { ImageViewer } from "@maptiler/sdk"; // import the sdk const imageViewer = new ImageViewer({ container: document.getElementById("map"), imageUUID: "01986025-ceb9-7487-9ea6-7a8637dcc1a1", debug: true, // show tile boundaries, padding, collision boxes etc fitToBoundsControl: true, // show a control to fit the image to the viewport navigationControl: true, // show a navigation control center: [0, 0], // center in pixels zoom: 1, // zoom level bearing: 0, // bearing }); ``` Overrides Evented.constructor ## Properties[](#properties-1) ### `Maptiler`\[lngLatToPxInternalSymbolKey\][](#lnglattopxinternalsymbolkey) "\[lngLatToPxInternalSymbolKey\]": (lngLat: [LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/)) \=> \[number, number\] = ... #### Type Declaration - - (lngLat: [LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/)): \[number, number\] - Converts a LngLat to a px coordinate, based on the image metadata. #### Parameters - lngLat: [LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/) The LngLat to convert. #### Returns \[number, number\] The px coordinate. #### Internal[](#internal) ### `Maptiler`\[pxToLngLatInternalSymbolKey\][](#pxtolnglatinternalsymbolkey) "\[pxToLngLatInternalSymbolKey\]": (px: \[number, number\]) \=> [LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/) = ... #### Type Declaration - - (px: \[number, number\]): [LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/) - Converts a px coordinate to a LngLat, based on the image metadata. #### Parameters - px: \[number, number\] #### Returns [LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/) The px coordinate. #### Internal[](#internal-1) ### `Maptiler`fitToBoundsControlInstance[](#fittoboundscontrolinstance) fitToBoundsControlInstance: [ImageViewerFitImageToBoundsControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ImageViewerFitImageToBoundsControl/) The control to fit the image to the viewport. ### `Maptiler`shouldFitImageToViewport[](#shouldfitimagetoviewport) shouldFitImageToViewport: boolean = true ## Accessors[](#accessors-1) ### `Maptiler`boxZoom[](#boxzoom) - get boxZoom(): [BoxZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/BoxZoomHandler/) The box zoom handler. #### Returns [BoxZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/BoxZoomHandler/) #### Internal[](#internal-2) - set boxZoom(value: [BoxZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/BoxZoomHandler/)): void The box zoom handler. #### Parameters - value: [BoxZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/BoxZoomHandler/) The box zoom handler. #### Returns void #### Internal[](#internal-3) ### `Maptiler`cooperativeGestures[](#cooperativegestures) - get cooperativeGestures(): [CooperativeGesturesHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/CooperativeGesturesHandler/) The cooperative gestures handler. #### Returns [CooperativeGesturesHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/CooperativeGesturesHandler/) #### Internal[](#internal-4) - set cooperativeGestures(value: [CooperativeGesturesHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/CooperativeGesturesHandler/)): void The cooperative gestures handler. #### Parameters - value: [CooperativeGesturesHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/CooperativeGesturesHandler/) The cooperative gestures handler. #### Returns void #### Internal[](#internal-5) ### `Maptiler`doubleClickZoom[](#doubleclickzoom) - get doubleClickZoom(): [DoubleClickZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DoubleClickZoomHandler/) The double click zoom handler. #### Returns [DoubleClickZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DoubleClickZoomHandler/) #### Internal[](#internal-6) - set doubleClickZoom(value: [DoubleClickZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DoubleClickZoomHandler/)): void The double click zoom handler. #### Parameters - value: [DoubleClickZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DoubleClickZoomHandler/) The double click zoom handler. #### Returns void #### Internal[](#internal-7) ### `Maptiler`dragPan[](#dragpan) - get dragPan(): [DragPanHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DragPanHandler/) The drag pan handler. #### Returns [DragPanHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DragPanHandler/) #### Internal[](#internal-8) - set dragPan(value: [DragPanHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DragPanHandler/)): void The drag pan handler. #### Parameters - value: [DragPanHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DragPanHandler/) The drag pan handler. #### Returns void #### Internal[](#internal-9) ### `Maptiler`keyboard[](#keyboard) - get keyboard(): [KeyboardHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/KeyboardHandler/) The keyboard handler. #### Returns [KeyboardHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/KeyboardHandler/) #### Internal[](#internal-10) - set keyboard(value: [KeyboardHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/KeyboardHandler/)): void The keyboard handler. #### Parameters - value: [KeyboardHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/KeyboardHandler/) The keyboard handler. #### Returns void #### Internal[](#internal-11) ### `Maptiler`scrollZoom[](#scrollzoom) - get scrollZoom(): [ScrollZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/ScrollZoomHandler/) The scroll zoom handler. #### Returns [ScrollZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/ScrollZoomHandler/) #### Internal[](#internal-12) - set scrollZoom(value: [ScrollZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/ScrollZoomHandler/)): void The scroll zoom handler. #### Parameters - value: [ScrollZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/ScrollZoomHandler/) The scroll zoom handler. #### Returns void #### Internal[](#internal-13) ### `Maptiler`touchZoomRotate[](#touchzoomrotate) - get touchZoomRotate(): [TwoFingersTouchZoomRotateHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TwoFingersTouchZoomRotateHandler/) The touch zoom rotate handler. #### Returns [TwoFingersTouchZoomRotateHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TwoFingersTouchZoomRotateHandler/) #### Internal[](#internal-14) - set touchZoomRotate(value: [TwoFingersTouchZoomRotateHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TwoFingersTouchZoomRotateHandler/)): void The touch zoom rotate handler. #### Parameters - value: [TwoFingersTouchZoomRotateHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TwoFingersTouchZoomRotateHandler/) The touch zoom rotate handler. #### Returns void #### Internal[](#internal-15) ### `Maptiler`version[](#version) - get version(): string The version of the ImageViewer / SDK. #### Returns string ## Methods[](#methods-1) ### 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.fire ### `Maptiler`fitImageBounds[](#fitimagebounds) - fitImageBounds(bounds: \[\[number, number\], \[number, number\]\]): ImageViewer[](#fitimagebounds-1) Set the bounds of the image. #### Parameters - bounds: \[\[number, number\], \[number, number\]\] The bounds of the image. #### Returns ImageViewer The ImageViewer instance. ### `Maptiler`fitImageToViewport[](#fitimagetoviewport) - fitImageToViewport(options?: { ease?: boolean }): void[](#fitimagetoviewport-1) Fits the image to the viewport. #### Parameters - options: { ease?: boolean } = {} The options for the fit image to viewport. - ##### `Optional`ease?: boolean Whether to ease to the viewport bounds. #### Returns void ### `Maptiler`flyTo[](#flyto) - flyTo(options: [ImageViewerFlyToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/ImageViewerFlyToOptions/), eventData?: [MapDataEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapDataEvent/)): ImageViewer[](#flyto-1) Fly to a given center. #### Parameters - options: [ImageViewerFlyToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/ImageViewerFlyToOptions/) The options for the fly to. - `Optional`eventData: [MapDataEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapDataEvent/) The event data. #### Returns ImageViewer The ImageViewer instance. ### `Maptiler`getBearing[](#getbearing) - getBearing(): number[](#getbearing-1) Get the bearing of the ImageViewer in degrees. #### Returns number The bearing of the ImageViewer. ### `Maptiler`getCanvas[](#getcanvas) - getCanvas(): [HTMLCanvasElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLCanvasElement/)[](#getcanvas-1) Get the canvas of the internal SDK instance. #### Returns [HTMLCanvasElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLCanvasElement/) The canvas of the internal SDK instance. ### `Maptiler`getCenter[](#getcenter) - getCenter(): \[number, number\][](#getcenter-1) Get the center of the ImageViewer in pixels. #### Returns \[number, number\] The center of the ImageViewer. #### Internal[](#internal-16) ### `Maptiler`getImageBounds[](#getimagebounds) - getImageBounds(): number\[\]\[\][](#getimagebounds-1) Get the visible bounds of the image in the viewport in imagePixels. \[topLeft, bottomRight\] #### Returns number\[\]\[\] The visible bounds of the image. ### `Maptiler`getImageMetadata[](#getimagemetadata) - getImageMetadata(): [ImageMetadata](https://docs.maptiler.com/sdk-js/api-reference/types/ImageMetadata/) | undefined[](#getimagemetadata-1) Get the image metadata. #### Returns [ImageMetadata](https://docs.maptiler.com/sdk-js/api-reference/types/ImageMetadata/) | undefined The image metadata. ### `Maptiler`getSDKInternal[](#getsdkinternal) - getSDKInternal(): [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/)[](#getsdkinternal-1) Get the internal SDK instance. #### Returns [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/) The internal SDK instance. #### Internal[](#internal-17) ### `Maptiler`getZoom[](#getzoom) - getZoom(): number[](#getzoom-1) Get the zoom level. #### Returns number The zoom level. ### `Maptiler`jumpTo[](#jumpto) - jumpTo(options: [ImageViewerJumpToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/ImageViewerJumpToOptions/), eventData?: [MapDataEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapDataEvent/)): ImageViewer[](#jumpto-1) Jump to a given center. #### Parameters - options: [ImageViewerJumpToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/ImageViewerJumpToOptions/) The options for the jump to. - `Optional`eventData: [MapDataEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapDataEvent/) The event data. #### Returns ImageViewer The ImageViewer instance. ### 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 ### 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.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.on ### once[](#once) - once(type: string, listener?: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/)): Promise | ImageViewer[](#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 | ImageViewer `this` or a promise if a listener is not provided Inherited from Evented.once ### `Maptiler`onReadyAsync[](#onreadyasync) - onReadyAsync(): Promise[](#onreadyasync-1) Waits for the ImageViewer to be ready. #### Returns Promise ### `Maptiler`panBy[](#panby) - panBy(     delta: [PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/),     options?: [ImageViewerEaseToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ImageViewerEaseToOptions/),     eventData?: any, ): ImageViewer[](#panby-1) Pan by a given delta in pixels. #### Parameters - delta: [PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/) The delta to pan by. - `Optional`options: [ImageViewerEaseToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ImageViewerEaseToOptions/) The options for the pan. - `Optional`eventData: any The event data. #### Returns ImageViewer The ImageViewer instance. ### `Maptiler`panTo[](#panto) - panTo(     center: \[number, number\],     options?: [ImageViewerEaseToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ImageViewerEaseToOptions/),     eventData?: any, ): ImageViewer[](#panto-1) Pan to a given center in pixels. #### Parameters - center: \[number, number\] The center to pan to. - `Optional`options: [ImageViewerEaseToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ImageViewerEaseToOptions/) The options for the pan. - `Optional`eventData: any The event data. #### Returns ImageViewer The ImageViewer instance. ### `Maptiler`pointIsWithinImageBounds[](#pointiswithinimagebounds) - pointIsWithinImageBounds(px: \[number, number\]): boolean[](#pointiswithinimagebounds-1) #### Parameters - px: \[number, number\] #### Returns boolean ### `Maptiler`remove[](#remove) - remove(): void[](#remove-1) Destroys the ImageViewer, removes the map instance and all event listeners. Useful for cleanup. #### Returns void The ImageViewer instance. ### `Maptiler`setBearing[](#setbearing) - setBearing(bearing: number): ImageViewer[](#setbearing-1) Set the bearing of the ImageViewer in degrees. #### Parameters - bearing: number The bearing of the ImageViewer. #### Returns ImageViewer The ImageViewer instance. ### `Maptiler`setCenter[](#setcenter) - setCenter(center: \[number, number\]): ImageViewer[](#setcenter-1) Set the center of the ImageViewer in pixels. #### Parameters - center: \[number, number\] The center of the ImageViewer. #### Returns ImageViewer The ImageViewer 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`setZoom[](#setzoom) - setZoom(zoom: number): ImageViewer[](#setzoom-1) Set the zoom level. #### Parameters - zoom: number The zoom level. #### Returns ImageViewer The ImageViewer instance. ### `Maptiler`triggerRepaint[](#triggerrepaint) - triggerRepaint(): void[](#triggerrepaint-1) Triggers a repaint of the ImageViewer. Same as map.triggerRepaint(). #### Returns void #### Internal[](#internal-18)