Join us online - 19th of November
Save your spot

Class ImageViewerMaptiler

Hierarchy (View Summary)

Index
constructor
[lngLatToPxInternalSymbolKey] [pxToLngLatInternalSymbolKey] fitToBoundsControlInstance shouldFitImageToViewport
boxZoom cooperativeGestures doubleClickZoom dragPan keyboard scrollZoom touchZoomRotate version
fire fitImageBounds fitImageToViewport flyTo getBearing getCanvas getCenter getImageBounds getImageMetadata getSDKInternal getZoom jumpTo listens off on once onReadyAsync panBy panTo pointIsWithinImageBounds remove setBearing setCenter setEventedParent setZoom triggerRepaint

  • The constructor for the ImageViewer.

    Parameters

    Returns ImageViewer

    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
});
"[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.

"[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.

fitToBoundsControlInstance: ImageViewerFitImageToBoundsControl

The control to fit the image to the viewport.

shouldFitImageToViewport: boolean = true
  • get version(): string

    The version of the ImageViewer / SDK.

    Returns string

  • Parameters

    • event: string | Event
    • Optionalproperties: any

    Returns this

  • Set the bounds of the image.

    Parameters

    • bounds: [[number, number], [number, number]]

      The bounds of the image.

    Returns ImageViewer

    The ImageViewer instance.

  • 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

  • Get the bearing of the ImageViewer in degrees.

    Returns number

    The bearing of the ImageViewer.

  • Get the center of the ImageViewer in pixels.

    Returns [number, number]

    The center of the ImageViewer.

  • Get the visible bounds of the image in the viewport in imagePixels. [topLeft, bottomRight]

    Returns number[][]

    The visible bounds of the image.

  • Get the internal SDK instance.

    Returns Map

    The internal SDK instance.

  • Get the zoom level.

    Returns number

    The zoom level.

  • 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

  • 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

  • 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

  • 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

  • Waits for the ImageViewer to be ready.

    Returns Promise<void>

  • 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.

  • Parameters

    • px: [number, number]

    Returns boolean

  • Destroys the ImageViewer, removes the map instance and all event listeners. Useful for cleanup.

    Returns void

    The ImageViewer instance.

  • Set the bearing of the ImageViewer in degrees.

    Parameters

    • bearing: number

      The bearing of the ImageViewer.

    Returns ImageViewer

    The ImageViewer instance.

  • Set the center of the ImageViewer in pixels.

    Parameters

    • center: [number, number]

      The center of the ImageViewer.

    Returns ImageViewer

    The ImageViewer instance.

  • Bubble all events fired by this instance of Evented to this parent instance of Evented.

    Parameters

    • Optionalparent: Evented | null
    • Optionaldata: any

    Returns this

  • Set the zoom level.

    Parameters

    • zoom: number

      The zoom level.

    Returns ImageViewer

    The ImageViewer instance.

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

    Returns void

Was this helpful?