ImageViewer
src/ImageViewer/ImageViewer.ts
MapTiler's ImageViewer component allows you
to display tiled, non-georeferenced images but interact with them in almost the same
way you would if you were displaying map.
These can be handy for zoomable non-georeferenced,
geographically "inaccurate" maps such as hotel maps, golf courses, theme parks etc.
Think pixels instead of lattitudes and longtidues.
You create a ImageViewer by specifying a container and other options.
Then SDK JS initializes the viewer on the page and returns your ImageViewer
object.
Example
Parameters
| options.apiKey
|
Define the MapTiler API key to be used.
This is equivalent to setting config.apiKey and will overwrite it.
|
|---|---|
| options.container (HTMLElement | string)
|
The HTML element in which SDK JS will render the viewer, or
the element's string
id.
|
| options.imageUUID
|
The unique UUID of the image object you are displaying. |
| options.center [number, number]?
default: the center of the image
|
The initial centerpoint in pixels of the viewer. |
| options.zoom
default:
0 |
The initial zoom level of the viewer. |
| options.bearing
default:
0 |
The initial bearing (rotation) of the viewer, measured in degrees counter-clockwise from north. |
| options.debug
default:
false |
Whether to show tiles debug information. |
| options.fitToBoundsControl
default:
true |
Whether to show a control to fit the image to the viewport. |
| options.navigationControl
default:
true |
Whether to show a navigation control. |
| options.maxZoom | The maximum zoom level of the viewer. |
| options.minZoom | The minimum zoom level of the viewer. |
Methods
ImageViewer provides a subset of methods for interaction with the map.
A major caveat is that the ImageViewer component works in pixels and not in LngLat.
Thus, when using methods such as setCenter or
flyTo the pixel values provided refer to
the absolute pixel position on the image, not screen pixel position.
Imagine your image is 10,000px x 10,000px, if regardless if your zoom is 2 or 4,
calling .setCenter(500,500) will always position the viewer over the same part of the image.
Fits the image to the viewport.
(object?)
Options describing the destination.
options.easeboolean?
|
Whether to ease to the viewport bounds.
Default
false |
|---|
void
Fly to a given center.
(ImageViewerFlyToOptions)Options describing the
destination.
| options.center [number, number]
|
The given center. |
|---|
(MapDataEvent?)The event data.
Map:
this
Jump to a given center.
(ImageViewerJumpToOptions)Options describing the
destination.
| options.center [number, number]
|
The given center. |
|---|
(MapDataEvent?)The event data.
Map:
this
Set the center of the ImageViewer in pixels.
([number, number])The
centerpoint to set.
void
Set the bearing of the ImageViewer in degrees..
void
Pan by a given delta in pixels.
(ImageViewerEaseToOptions?)Options
object for the pan.
(any?)Additional properties to be
added to event objects of events triggered by this method.
void
Pan to a given center in pixels.
([number, number])The
location to pan the map to.
(ImageViewerEaseToOptions?)The options for the pan.
(any?)Additional properties to be
added to event objects of events triggered by this method.
void
Adds a listener for events of a specified type.
(Function)
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.
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.
ImageViewer |
Promise<any>
:
this or a promise if a listener is not provided
Events
In a similar manner, a subset of map events are fired by the image viewer.
All UI interaction events that would normally include a LngLat in the
event data instead receive an imageX
and imageY field, representing an absolute pixel position of the image.
This is same for flyTo, jumpTo,
panTo etc.
A full list of supported events can be found in the exported type declaration
ImageViewerEventTypes
