On this page

Class ImageViewer`Maptiler`

Hierarchy (View Summary)

Evented
- ImageViewer

Constructors

`Maptiler`constructor

new ImageViewer(
imageViewerConstructorOptions: Partial<ImageViewerConstructorOptions>,
): ImageViewer

The constructor for the ImageViewer.

Parameters

imageViewerConstructorOptions: Partial<ImageViewerConstructorOptions>
The options for the ImageViewer.

Returns ImageViewer

Example

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
});

Properties

`Maptiler`[lngLatToPxInternalSymbolKey]

"[lngLatToPxInternalSymbolKey]": (lngLat: LngLat) => [number, number] = ...

Type Declaration

- (lngLat: LngLat): [number, number]
- Converts a LngLat to a px coordinate, based on the image metadata.
  Parameters
  - lngLat: LngLat
    The LngLat to convert.
  Returns [number, number]
  The px coordinate.
  
  Internal

`Maptiler`[pxToLngLatInternalSymbolKey]

"[pxToLngLatInternalSymbolKey]": (px: [number, number]) => LngLat = ...

Type Declaration

- (px: [number, number]): LngLat
- Converts a px coordinate to a LngLat, based on the image metadata.
  Parameters
  - px: [number, number]
  Returns LngLat
  The px coordinate.
  
  Internal

`Maptiler`fitToBoundsControlInstance

fitToBoundsControlInstance: ImageViewerFitImageToBoundsControl

The control to fit the image to the viewport.

`Maptiler`shouldFitImageToViewport

shouldFitImageToViewport: boolean = true

Accessors

`Maptiler`boxZoom

get boxZoom(): BoxZoomHandler
The box zoom handler.

Returns BoxZoomHandler
Internal
set boxZoom(value: BoxZoomHandler): void
The box zoom handler.
Parameters
- value: BoxZoomHandler
  The box zoom handler.
Returns void
Internal

`Maptiler`cooperativeGestures

get cooperativeGestures(): CooperativeGesturesHandler
The cooperative gestures handler.

Returns CooperativeGesturesHandler
Internal
set cooperativeGestures(value: CooperativeGesturesHandler): void
The cooperative gestures handler.
Parameters
- value: CooperativeGesturesHandler
  The cooperative gestures handler.
Returns void
Internal

`Maptiler`doubleClickZoom

get doubleClickZoom(): DoubleClickZoomHandler
The double click zoom handler.

Returns DoubleClickZoomHandler
Internal
set doubleClickZoom(value: DoubleClickZoomHandler): void
The double click zoom handler.
Parameters
- value: DoubleClickZoomHandler
  The double click zoom handler.
Returns void
Internal

`Maptiler`dragPan

get dragPan(): DragPanHandler
The drag pan handler.

Returns DragPanHandler
Internal
set dragPan(value: DragPanHandler): void
The drag pan handler.
Parameters
- value: DragPanHandler
  The drag pan handler.
Returns void
Internal

`Maptiler`keyboard

get keyboard(): KeyboardHandler
The keyboard handler.

Returns KeyboardHandler
Internal
set keyboard(value: KeyboardHandler): void
The keyboard handler.
Parameters
- value: KeyboardHandler
  The keyboard handler.
Returns void
Internal

`Maptiler`scrollZoom

get scrollZoom(): ScrollZoomHandler
The scroll zoom handler.

Returns ScrollZoomHandler
Internal
set scrollZoom(value: ScrollZoomHandler): void
The scroll zoom handler.
Parameters
- value: ScrollZoomHandler
  The scroll zoom handler.
Returns void
Internal

`Maptiler`touchZoomRotate

get touchZoomRotate(): TwoFingersTouchZoomRotateHandler
The touch zoom rotate handler.

Returns TwoFingersTouchZoomRotateHandler
Internal
set touchZoomRotate(value: TwoFingersTouchZoomRotateHandler): void
The touch zoom rotate handler.
Parameters
- value: TwoFingersTouchZoomRotateHandler
  The touch zoom rotate handler.
Returns void
Internal

`Maptiler`version

get version(): string
The version of the ImageViewer / SDK.

Returns string

Methods

fire

fire(event: string | Event, properties?: any): this
Parameters
- event: string | Event
- Optionalproperties: any
Returns this
Inherited from Evented.fire

`Maptiler`fitImageBounds

fitImageBounds(bounds: [[number, number], [number, number]]): ImageViewer
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(options?: { ease?: boolean }): void
Fits the image to the viewport.
Parameters
- options: { ease?: boolean } = {}
  The options for the fit image to viewport.
  - Optionalease?: boolean
    Whether to ease to the viewport bounds.
Returns void

`Maptiler`flyTo

flyTo(options: ImageViewerFlyToOptions, eventData?: MapDataEvent): ImageViewer
Fly to a given center.
Parameters
- options: ImageViewerFlyToOptions
  The options for the fly to.
- OptionaleventData: MapDataEvent
  The event data.
Returns ImageViewer
The ImageViewer instance.

`Maptiler`getBearing

getBearing(): number
Get the bearing of the ImageViewer in degrees.

Returns number
The bearing of the ImageViewer.

`Maptiler`getCanvas

getCanvas(): HTMLCanvasElement
Get the canvas of the internal SDK instance.

Returns HTMLCanvasElement
The canvas of the internal SDK instance.

`Maptiler`getCenter

getCenter(): [number, number]
Get the center of the ImageViewer in pixels.

Returns [number, number]
The center of the ImageViewer.

Internal

`Maptiler`getImageBounds

getImageBounds(): number[][]
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(): ImageMetadata | undefined
Get the image metadata.

Returns ImageMetadata | undefined
The image metadata.

`Maptiler`getSDKInternal

getSDKInternal(): Map
Get the internal SDK instance.

Returns Map
The internal SDK instance.

Internal

`Maptiler`getZoom

getZoom(): number
Get the zoom level.

Returns number
The zoom level.

`Maptiler`jumpTo

jumpTo(options: ImageViewerJumpToOptions, eventData?: MapDataEvent): ImageViewer
Jump to a given center.
Parameters
- options: ImageViewerJumpToOptions
  The options for the jump to.
- OptionaleventData: MapDataEvent
  The event data.
Returns ImageViewer
The ImageViewer instance.

listens

listens(type: string): boolean
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(type: string, listener: Listener): this
Removes a previously registered event listener.
Parameters
- type: string
  The event type to remove listeners for.
- listener: Listener
  The listener function to remove.
Returns this
Inherited from Evented.off

on

on(type: string, listener: Listener): Subscription
Adds a listener to a specified event type.
Parameters
- type: string
  The event type to add a listen for.
- listener: 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
Inherited from Evented.on

once

once(type: string, listener?: Listener): Promise<any> | ImageViewer
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.
- Optionallistener: Listener
  The function to be called when the event is fired the first time.
Returns Promise<any> | ImageViewer
this or a promise if a listener is not provided

Inherited from Evented.once

`Maptiler`onReadyAsync

onReadyAsync(): Promise<void>
Waits for the ImageViewer to be ready.

Returns Promise<void>

`Maptiler`panBy

panBy(
    delta: PointLike,
    options?: ImageViewerEaseToOptions,
    eventData?: any,
): ImageViewer
Pan by a given delta in pixels.
Parameters
- delta: PointLike
  The delta to pan by.
- Optionaloptions: ImageViewerEaseToOptions
  The options for the pan.
- OptionaleventData: any
  The event data.
Returns ImageViewer
The ImageViewer instance.

`Maptiler`panTo

panTo(
    center: [number, number],
    options?: ImageViewerEaseToOptions,
    eventData?: any,
): ImageViewer
Pan to a given center in pixels.
Parameters
- center: [number, number]
  The center to pan to.
- Optionaloptions: ImageViewerEaseToOptions
  The options for the pan.
- OptionaleventData: any
  The event data.
Returns ImageViewer
The ImageViewer instance.

`Maptiler`pointIsWithinImageBounds

pointIsWithinImageBounds(px: [number, number]): boolean
Parameters
- px: [number, number]
Returns boolean

`Maptiler`remove

remove(): void
Destroys the ImageViewer, removes the map instance and all event listeners. Useful for cleanup.

Returns void
The ImageViewer instance.

`Maptiler`setBearing

setBearing(bearing: number): ImageViewer
Set the bearing of the ImageViewer in degrees.
Parameters
- bearing: number
  The bearing of the ImageViewer.
Returns ImageViewer
The ImageViewer instance.

`Maptiler`setCenter

setCenter(center: [number, number]): ImageViewer
Set the center of the ImageViewer in pixels.
Parameters
- center: [number, number]
  The center of the ImageViewer.
Returns ImageViewer
The ImageViewer instance.

setEventedParent

setEventedParent(parent?: Evented | null, data?: any): this
Bubble all events fired by this instance of Evented to this parent instance of Evented.
Parameters
- Optionalparent: Evented | null
- Optionaldata: any
Returns this
Inherited from Evented.setEventedParent

`Maptiler`setZoom

setZoom(zoom: number): ImageViewer
Set the zoom level.
Parameters
- zoom: number
  The zoom level.
Returns ImageViewer
The ImageViewer instance.

`Maptiler`triggerRepaint

triggerRepaint(): void
Triggers a repaint of the ImageViewer. Same as map.triggerRepaint().

Returns void
Internal

Was this helpful?

Class ImageViewerMaptiler

Hierarchy (View Summary)

Index

Constructors

Properties

Accessors

Methods

Constructors

Maptilerconstructor

Parameters

Returns ImageViewer

Example

Properties

Maptiler[lngLatToPxInternalSymbolKey]

Type Declaration

Parameters

Returns [number, number]

Internal

Maptiler[pxToLngLatInternalSymbolKey]

Type Declaration

Parameters

Returns LngLat

Internal

MaptilerfitToBoundsControlInstance

MaptilershouldFitImageToViewport

Accessors

MaptilerboxZoom

Returns BoxZoomHandler

Internal

Parameters

Returns void

Internal

MaptilercooperativeGestures

Returns CooperativeGesturesHandler

Internal

Parameters

Returns void

Internal

MaptilerdoubleClickZoom

Returns DoubleClickZoomHandler

Internal

Parameters

Returns void

Internal

MaptilerdragPan

Returns DragPanHandler

Internal

Parameters

Returns void

Internal

Maptilerkeyboard

Returns KeyboardHandler

Internal

Parameters

Returns void

Internal

MaptilerscrollZoom

Returns ScrollZoomHandler

Internal

Parameters

Returns void

Internal

MaptilertouchZoomRotate

Returns TwoFingersTouchZoomRotateHandler

Internal

Parameters

Returns void

Internal

Maptilerversion

Returns string

Methods

fire

Parameters

Returns this

MaptilerfitImageBounds

Parameters

Returns ImageViewer

MaptilerfitImageToViewport

Parameters

Optionalease?: boolean

Class ImageViewer`Maptiler`

`Maptiler`constructor

`Maptiler`[lngLatToPxInternalSymbolKey]

`Maptiler`[pxToLngLatInternalSymbolKey]

`Maptiler`fitToBoundsControlInstance

`Maptiler`shouldFitImageToViewport

`Maptiler`boxZoom

`Maptiler`cooperativeGestures

`Maptiler`doubleClickZoom

`Maptiler`dragPan

`Maptiler`keyboard

`Maptiler`scrollZoom

`Maptiler`touchZoomRotate

`Maptiler`version

`Maptiler`fitImageBounds

`Maptiler`fitImageToViewport

`Optional`ease?: boolean

`Maptiler`flyTo

`Maptiler`getBearing

`Maptiler`getCanvas

`Maptiler`getCenter

`Maptiler`getImageBounds

`Maptiler`getImageMetadata

`Maptiler`getSDKInternal

`Maptiler`getZoom

`Maptiler`jumpTo

`Maptiler`onReadyAsync

`Maptiler`panBy

`Maptiler`panTo

`Maptiler`pointIsWithinImageBounds

`Maptiler`remove

`Maptiler`setBearing

`Maptiler`setCenter

`Maptiler`setZoom