--- /dev/null
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/**
+ * Convert coordinates from geodetic (WGS84) reference to local topocentric
+ * (ENU) reference.
+ * @param {number} lng Longitude in degrees.
+ * @param {number} lat Latitude in degrees.
+ * @param {number} alt Altitude in meters.
+ * @param {number} refLng Reference longitude in degrees.
+ * @param {number} refLat Reference latitude in degrees.
+ * @param {number} refAlt Reference altitude in meters.
+ * @returns {Array<number>} The x, y, z local topocentric ENU coordinates.
+ */
+declare function geodeticToEnu(
+ lng: number,
+ lat: number,
+ alt: number,
+ refLng: number,
+ refLat: number,
+ refAlt: number
+): number[];
+
+/**
+ * Convert coordinates from local topocentric (ENU) reference to
+ * geodetic (WGS84) reference.
+ * @param {number} x Topocentric ENU coordinate in East direction.
+ * @param {number} y Topocentric ENU coordinate in North direction.
+ * @param {number} z Topocentric ENU coordinate in Up direction.
+ * @param {number} refLng Reference longitude in degrees.
+ * @param {number} refLat Reference latitude in degrees.
+ * @param {number} refAlt Reference altitude in meters.
+ * @returns {Array<number>} The longitude, latitude in degrees
+ * and altitude in meters.
+ */
+declare function enuToGeodetic(
+ x: number,
+ y: number,
+ z: number,
+ refLng: number,
+ refLat: number,
+ refAlt: number
+): number[];
+
+/**
+ * Convert coordinates from Earth-Centered, Earth-Fixed (ECEF) reference
+ * to local topocentric (ENU) reference.
+ * @param {number} X ECEF X-value.
+ * @param {number} Y ECEF Y-value.
+ * @param {number} Z ECEF Z-value.
+ * @param {number} refLng Reference longitude in degrees.
+ * @param {number} refLat Reference latitude in degrees.
+ * @param {number} refAlt Reference altitude in meters.
+ * @returns {Array<number>} The x, y, z topocentric ENU coordinates in East, North
+ * and Up directions respectively.
+ */
+declare function ecefToEnu(
+ X: number,
+ Y: number,
+ Z: number,
+ refLng: number,
+ refLat: number,
+ refAlt: number
+): number[];
+
+/**
+ * Convert coordinates from local topocentric (ENU) reference
+ * to Earth-Centered, Earth-Fixed (ECEF) reference.
+ * @param {number} x Topocentric ENU coordinate in East direction.
+ * @param {number} y Topocentric ENU coordinate in North direction.
+ * @param {number} z Topocentric ENU coordinate in Up direction.
+ * @param {number} refLng Reference longitude in degrees.
+ * @param {number} refLat Reference latitude in degrees.
+ * @param {number} refAlt Reference altitude in meters.
+ * @returns {Array<number>} The X, Y, Z ECEF coordinates.
+ */
+declare function enuToEcef(
+ x: number,
+ y: number,
+ z: number,
+ refLng: number,
+ refLat: number,
+ refAlt: number
+): number[];
+
+/**
+ * Convert coordinates from geodetic reference (WGS84) to Earth-Centered,
+ * Earth-Fixed (ECEF) reference.
+ * @param {number} lng Longitude in degrees.
+ * @param {number} lat Latitude in degrees.
+ * @param {number} alt Altitude in meters.
+ * @returns {Array<number>} The X, Y, Z ECEF coordinates.
+ */
+declare function geodeticToEcef(
+ lng: number,
+ lat: number,
+ alt: number
+): number[];
+
+/**
+ * Convert coordinates from Earth-Centered, Earth-Fixed (ECEF) reference
+ * to geodetic reference (WGS84).
+ * @param {number} X ECEF X-value.
+ * @param {number} Y ECEF Y-value.
+ * @param {number} Z ECEF Z-value.
+ * @returns {Array<number>} The longitude, latitude in degrees
+ * and altitude in meters.
+ */
+declare function ecefToGeodetic(X: number, Y: number, Z: number): number[];
+
+/**
+ * Contract describing triangulated meshes.
+ */
+export interface MeshContract {
+ /**
+ * Flattened array of faces for the mesh. Each face consist
+ * three vertex indices.
+ */
+ faces: number[];
+
+ /**
+ * Flattened array of vertices for the mesh. Each vertex
+ * consists of X, Y and Z coordinates in the camera
+ * reference frame.
+ */
+ vertices: number[];
+}
+/**
+ * Decompress and parse an array buffer containing zipped
+ * json data and return as a json object.
+ * @description Handles array buffers continaing zipped json
+ * data.
+ * @param {ArrayBuffer} buffer - Array buffer to decompress.
+ * @returns {Object} Parsed object.
+ */
+declare function decompress<T>(buffer: ArrayBuffer): T;
+
+/**
+ * Retrieves a resource as an array buffer and returns a promise
+ * to the buffer.
+ * @description Rejects the promise on request failure.
+ * @param {string} url - URL for resource to retrieve.
+ * @param {Promise} [abort] - Optional promise for aborting
+ * the request through rejection.
+ * @returns {Promise<ArrayBuffer>} Promise to the array buffer
+ * resource.
+ */
+declare function fetchArrayBuffer(
+ url: string,
+ abort?: Promise<void>
+): Promise<ArrayBuffer>;
+
+/**
+ * Read the fields of a protobuf array buffer into a mesh
+ * object.
+ * @param {ArrayBuffer} buffer - Protobuf array buffer
+ * to read from.
+ * @returns {MeshContract} Mesh object.
+ */
+declare function readMeshPbf(buffer: ArrayBuffer): MeshContract;
+
+/**
+ * Interface describing event emitter members.
+ *
+ * This is a specification for implementers to model: it is
+ * not an exported method or class.
+ */
+export interface IEventEmitter {
+ fire<T>(type: string, event: T): void;
+ off<T>(type: string, handler: (event: T) => void): void;
+ on<T>(type: string, handler: (event: T) => void): void;
+}
+
+declare class EventEmitter implements IEventEmitter {
+ constructor(): this;
+
+ /**
+ * Subscribe to an event by its name.
+ * @param {string} type - The name of the event
+ * to subscribe to.
+ * @param {(event: T) => void} handler - The
+ * handler called when the event occurs.
+ */
+ on<T>(type: string, handler: (event: T) => void): void;
+
+ /**
+ * Unsubscribe from an event by its name.
+ * @param {string} type - The name of the event
+ * to unsubscribe from.
+ * @param {(event: T) => void} handler - The
+ * handler to remove.
+ */
+ off<T>(type: string, handler: (event: T) => void): void;
+
+ /**
+ * @ignore
+ */
+ fire<T>(type: string, event: T): void;
+}
+/**
+ * Interface that represents a longitude, latitude coordinate,
+ * measured in degrees. Coordinates are defined in the WGS84 datum.
+ */
+export interface LngLat {
+ /**
+ * Latitude, measured in degrees.
+ */
+ lat: number;
+
+ /**
+ * Longitude, measured in degrees.
+ */
+ lng: number;
+}
+/**
+ * Interface that represents longitude-latitude-altitude
+ * coordinates. Longitude and latitude are measured in degrees
+ * and altitude in meters. Coordinates are defined in the WGS84 datum.
+ * @interface
+ */
+export interface LngLatAlt extends LngLat {
+ /**
+ * Altitude, measured in meters.
+ */
+ alt: number;
+}
+
+/**
+ * Contract describing a reconstruction point.
+ */
+export interface PointContract {
+ /**
+ * RGB color vector of the point, normalized to floats
+ * on the interval [0, 1];
+ */
+ color: number[];
+
+ /**
+ * Coordinates in metric scale in topocentric ENU
+ * reference frame with respect to a geo reference.
+ */
+ coordinates: number[];
+}
+/**
+ * Contract describing cluster reconstruction data.
+ */
+export interface ClusterContract {
+ /**
+ * The unique id of the cluster.
+ */
+ id: string;
+
+ /**
+ * The points of the reconstruction.
+ */
+ points: {
+ [pointId: string]: PointContract,
+ ...
+ };
+
+ /**
+ * The reference longitude, latitude, altitude of
+ * the reconstruction. Determines the
+ * position of the reconstruction in world reference
+ * frame.
+ */
+ reference: LngLatAlt;
+}
+/**
+ * Ent representing an entity with a unique ID.
+ * @interface IDEnt
+ */
+export interface IDEnt {
+ /**
+ * Unique ID.
+ */
+ id: string;
+}
+/**
+ * Ent representing core image properties.
+ */
+export type CoreImageEnt = {
+ /**
+ * SfM computed longitude, latitude in WGS84 datum, measured in degrees.
+ * @description Optional - no 3D interaction available
+ * if unset.
+ */
+ computed_geometry?: LngLat,
+
+ /**
+ * Original EXIF longitude, latitude in WGS84 datum, measured in degrees.
+ */
+ geometry: LngLat,
+
+ /**
+ * Sequence that the image is part of.
+ */
+ sequence: IDEnt,
+ ...
+} & IDEnt;
+
+/**
+ * Contract describing core image results.
+ */
+export interface CoreImagesContract {
+ /**
+ * Geometry cell ID.
+ */
+ cell_id: string;
+
+ /**
+ * Array of core image ents.
+ */
+ images: CoreImageEnt[];
+}
+/**
+ * Ent representing camera properties.
+ */
+export interface CameraEnt {
+ /**
+ * Camera type dependent camera parameters.
+ *
+ * For perspective and fisheye camera types,
+ * the camera parameters array should be
+ * constructed according to
+ *
+ * `[focal, k1, k2]`
+ *
+ * where focal is the camera focal length,
+ * and k1, k2 are radial distortion parameters.
+ *
+ * For spherical camera type the camera
+ * parameters should be an emtpy array.
+ */
+ camera_parameters: number[];
+
+ /**
+ * Projection type of the camera.
+ * @description Supported camera types are:
+ *
+ * ```js
+ * 'spherical'
+ * 'fisheye'
+ * 'perspective'
+ * ```
+ *
+ * Other camera types will be treated as
+ * perspective images.
+ */
+ camera_type: string;
+}
+/**
+ * Ent representing URL properties.
+ */
+export type URLEnt = {
+ /**
+ * URL for fetching ent data.
+ */
+ url: string,
+ ...
+} & IDEnt;
+
+/**
+ * Ent representing image creator properties.
+ */
+export type CreatorEnt = {
+ /**
+ * The username of the creator.
+ */
+ username: string,
+ ...
+} & IDEnt;
+
+/**
+ * Ent representing spatial image properties.
+ */
+export type SpatialImageEnt = {
+ /**
+ * Original EXIF altitude above sea level, in meters.
+ */
+ altitude: number,
+
+ /**
+ * Scale of atomic reconstruction.
+ * @description Optional - no 3D interaction available
+ * if unset.
+ */
+ atomic_scale?: number,
+
+ /**
+ * Timestamp representing the capture date and time.
+ * @description Unix epoch timestamp in milliseconds.
+ */
+ captured_at: number,
+
+ /**
+ * Original EXIF compass angle, measured in degrees.
+ */
+ compass_angle: number,
+
+ /**
+ * Computed altitude, in meters.
+ * @description Optional - no 3D interaction available
+ * if unset.
+ */
+ computed_altitude?: number,
+
+ /**
+ * SfM computed compass angle, measured in degrees.
+ * @description Optional - no 3D interaction available
+ * if unset.
+ */
+ computed_compass_angle?: number,
+
+ /**
+ * Rotation vector in angle axis representation.
+ * @description Optional - no 3D interaction available
+ * if unset.
+ */
+ computed_rotation?: number[],
+
+ /**
+ * Cluster reconstruction to which the image belongs.
+ */
+ cluster: URLEnt,
+
+ /**
+ * Image creator.
+ */
+ creator: CreatorEnt,
+
+ /**
+ * EXIF orientation of original image.
+ */
+ exif_orientation: number,
+
+ /**
+ * Height of original image, not adjusted for orientation.
+ */
+ height: number,
+
+ /**
+ * SfM connected component id to which the image belongs.
+ * @description Optional - no 3D interaction available
+ * if unset.
+ */
+ merge_id?: string,
+
+ /**
+ * 3D mesh resource.
+ */
+ mesh: URLEnt,
+
+ /**
+ * Owner to which the image belongs.
+ */
+ owner: IDEnt,
+
+ /**
+ * Value specifying if image is accessible to organization members only
+ * or to everyone.
+ */
+ private?: boolean,
+
+ /**
+ * Image quality score on the interval [0, 1].
+ */
+ quality_score?: number,
+
+ /**
+ * Image thumbnail resource.
+ */
+ thumb: URLEnt,
+
+ /**
+ * Width of original image, not adjusted for orientation.
+ */
+ width: number,
+ ...
+} & CameraEnt &
+ IDEnt;
+
+/**
+ * Contract describing ent results.
+ */
+export interface EntContract<T> {
+ /**
+ * Ent node.
+ */
+ node: T;
+
+ /**
+ * Ent node id.
+ */
+ node_id: string;
+}
+/**
+ * Contract describing spatial image results.
+ */
+export type SpatialImagesContract = EntContract<SpatialImageEnt>[];
+/**
+ * Ent representing image properties.
+ */
+export type ImageEnt = { ... } & CoreImageEnt & SpatialImageEnt;
+
+/**
+ * Contract describing image results.
+ */
+export type ImagesContract = EntContract<ImageEnt>[];
+/**
+ * Ent representing sequence properties.
+ * @interface SequenceEnt
+ */
+export type SequenceEnt = {
+ /**
+ * The image IDs of the sequence sorted in
+ * acsending order based on capture time.
+ */
+ image_ids: string[],
+ ...
+} & IDEnt;
+
+/**
+ * Contract describing sequence results.
+ */
+export type SequenceContract = SequenceEnt;
+/**
+ * Ent representing image tile properties.
+ */
+export interface ImageTileEnt {
+ /**
+ * URL for fetching image tile pixel data.
+ */
+ url: string;
+
+ /**
+ * X tile coordinate.
+ */
+ x: number;
+
+ /**
+ * Y tile coordinate.
+ */
+ y: number;
+
+ /**
+ * Tile level.
+ */
+ z: number;
+}
+/**
+ * Contract describing image tile results.
+ */
+export type ImageTilesContract = EntContract<ImageTileEnt[]>;
+/**
+ * Contract describing image tile requests.
+ */
+export interface ImageTilesRequestContract {
+ /**
+ * ID of the tile's image.
+ */
+ imageId: string;
+
+ /**
+ * Tile level.
+ */
+ z: number;
+}
+/**
+ * @event
+ */
+export type ProviderEventType = "datacreate";
+/**
+ * @interface IGeometryProvider
+ *
+ * Interface describing geometry provider members.
+ *
+ * This is a specification for implementers to model: it
+ * is not an exported method or class.
+ */
+export interface IGeometryProvider {
+ /**
+ * Convert a geodetic bounding box to the the minimum set
+ * of cell ids containing the bounding box.
+ * @description The bounding box needs
+ * to be sufficiently small to be contained in an area with the size
+ * of maximally four tiles. Up to nine adjacent tiles may be returned.
+ * @param {LngLat} sw - South west corner of bounding box.
+ * @param {LngLat} ne - North east corner of bounding box.
+ * @returns {Array<string>} Array of cell ids.
+ */
+ bboxToCellIds(sw: LngLat, ne: LngLat): string[];
+
+ /**
+ * Get the cell ids of all adjacent cells.
+ * @description In the case of approximately rectangular cells
+ * this is typically the eight orthogonally and diagonally adjacent
+ * cells.
+ * @param {string} cellId - Id of cell.
+ * @returns {Array<string>} Array of cell ids. No specific
+ * order is guaranteed.
+ */
+ getAdjacent(cellId: string): string[];
+
+ /**
+ * Get the vertices of a cell.
+ * @description The vertices form an unclosed
+ * clockwise polygon in the 2D longitude, latitude
+ * space. No assumption on the position of the first
+ * vertex relative to the others can be made.
+ * @param {string} cellId - Id of cell.
+ * @returns {Array<LngLat>} Unclosed clockwise polygon.
+ */
+ getVertices(cellId: string): LngLat[];
+
+ /**
+ * Convert geodetic coordinates to a cell id.
+ * @param {LngLat} lngLat - Longitude, latitude to convert.
+ * @returns {string} Cell id for the longitude, latitude.
+ */
+ lngLatToCellId(lngLat: LngLat): string;
+}
+/**
+ * Interface describing data provider members.
+ *
+ * This is a specification for implementers to model: it is
+ * not an exported method or class.
+ * @fires datacreate
+ */
+export interface IDataProvider extends IEventEmitter {
+ /**
+ * Get geometry property.
+ * @returns {IGeometryProvider} Geometry provider instance.
+ */
+ geometry: IGeometryProvider;
+
+ /**
+ * Get core images in a geometry cell.
+ * @param {string} cellId - The id of the geometry cell.
+ * @returns {Promise<CoreImagesContract>} Promise to
+ * the core images of the requested geometry cell id.
+ * @throws Rejects the promise on errors.
+ */
+ getCoreImages(cellId: string): Promise<CoreImagesContract>;
+
+ /**
+ * Get a cluster reconstruction.
+ * @param {string} url - URL for the cluster reconstruction
+ * to retrieve.
+ * @param {Promise} [abort] - Optional promise for aborting
+ * the request through rejection.
+ * @returns {Promise<ClusterContract>} Promise to the
+ * cluster reconstruction.
+ * @throws Rejects the promise on errors.
+ */
+ getCluster(url: string, abort?: Promise<void>): Promise<ClusterContract>;
+
+ /**
+ * Get spatial images.
+ * @param {Array<string>} imageIds - The ids for the
+ * images to retrieve.
+ * @returns {Promise<SpatialImagesContract>} Promise to
+ * the spatial images of the requested image ids.
+ * @throws Rejects the promise on errors.
+ */
+ getSpatialImages(imageIds: string[]): Promise<SpatialImagesContract>;
+
+ /**
+ * Get complete images.
+ * @param {Array<string>} imageIds - The ids for the
+ * images to retrieve.
+ * @returns {Promise<ImagesContract>} Promise to the images of the
+ * requested image ids.
+ * @throws Rejects the promise on errors.
+ */
+ getImages(imageIds: string[]): Promise<ImagesContract>;
+
+ /**
+ * Get an image as an array buffer.
+ * @param {string} url - URL for image to retrieve.
+ * @param {Promise<void>} [abort] - Optional promise for aborting
+ * the request through rejection.
+ * @returns {Promise<ArrayBuffer>} Promise to the array
+ * buffer containing the image.
+ * @throws Rejects the promise on errors.
+ */
+ getImageBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer>;
+
+ /**
+ * Get image tiles urls for a tile level.
+ * @param {ImageTilesRequestContract} tiles - Tiles to request
+ * @returns {Promise<ImageTilesContract>} Promise to the
+ * image tiles response contract
+ * @throws Rejects the promise on errors.
+ * @example ```js
+ * var tileRequest = { imageId: 'image-id', z: 12 };
+ * provider.getImageTiles(tileRequest)
+ * .then((response) => console.log(response));
+ * ```
+ */
+ getImageTiles(tiles: ImageTilesRequestContract): Promise<ImageTilesContract>;
+
+ /**
+ * Get a mesh.
+ * @param {string} url - URL for mesh to retrieve.
+ * @param {Promise<void>} [abort] - Optional promise for aborting
+ * the request through rejection.
+ * @returns {Promise<MeshContract>} Promise to the mesh.
+ * @throws Rejects the promise on errors.
+ */
+ getMesh(url: string, abort?: Promise<void>): Promise<MeshContract>;
+
+ /**
+ * Get sequence.
+ * @param {Array<string>} sequenceId - The id for the
+ * sequence to retrieve.
+ * @returns {Promise} Promise to the sequences of the
+ * requested image ids.
+ * @throws Rejects the promise on errors.
+ */
+ getSequence(sequenceId: string): Promise<SequenceContract>;
+
+ /**
+ * Set an access token for authenticated API requests of
+ * protected resources.
+ * @param {string} [accessToken] accessToken - User access
+ * token or client access token.
+ */
+ setAccessToken(accessToken?: string): void;
+}
+
+/**
+ * Interface for general provider events.
+ */
+export interface ProviderEvent {
+ /**
+ * Data provider target that emitted the event.
+ */
+ target: IDataProvider;
+
+ /**
+ * Provider event type.
+ */
+ type: ProviderEventType;
+}
+/**
+ *
+ * Interface for data provider cell events.
+ */
+export type ProviderCellEvent = {
+ /**
+ * Cell ids for cells where data have been created.
+ */
+ cellIds: string[],
+
+ /**
+ * Provider event type.
+ */
+ type: "datacreate",
+ ...
+} & ProviderEvent;
+
+/**
+ * @class DataProviderBase
+ * @classdesc Base class to extend if implementing a data provider
+ * class.
+ * @fires datacreate
+ * @example ```js
+ * class MyDataProvider extends DataProviderBase {
+ * constructor() {
+ * super(new S2GeometryProvider());
+ * }
+ * ...
+ * }
+ * ```
+ */
+declare class DataProviderBase implements IDataProvider, IEventEmitter {
+ _geometry: IGeometryProvider;
+
+ /**
+ * Create a new data provider base instance.
+ * @param {IGeometryProvider} geometry - Geometry
+ * provider instance.
+ */
+ constructor(_geometry: IGeometryProvider): this;
+
+ /**
+ * Get geometry property.
+ * @returns {IGeometryProvider} Geometry provider instance.
+ */
+ geometry: IGeometryProvider;
+
+ fire<T>(type: string, event: T): void;
+
+ /**
+ * Get core images in a geometry cell.
+ * @param {string} cellId - The id of the geometry cell.
+ * @returns {Promise<CoreImagesContract>} Promise to
+ * the core images of the requested geometry cell id.
+ * @throws Rejects the promise on errors.
+ */
+ getCoreImages(cellId: string): Promise<CoreImagesContract>;
+
+ /**
+ * Get a cluster reconstruction.
+ * @param {string} url - URL for the cluster reconstruction
+ * to retrieve.
+ * @param {Promise} [abort] - Optional promise for aborting
+ * the request through rejection.
+ * @returns {Promise<ClusterContract>} Promise to the
+ * cluster reconstruction.
+ * @throws Rejects the promise on errors.
+ */
+ getCluster(url: string, abort?: Promise<void>): Promise<ClusterContract>;
+
+ /**
+ * Get spatial images.
+ * @param {Array<string>} imageIds - The ids for the
+ * images to retrieve.
+ * @returns {Promise<SpatialImagesContract>} Promise to
+ * the spatial images of the requested image ids.
+ * @throws Rejects the promise on errors.
+ */
+ getSpatialImages(imageIds: string[]): Promise<SpatialImagesContract>;
+
+ /**
+ * Get complete images.
+ * @param {Array<string>} imageIds - The ids for the
+ * images to retrieve.
+ * @returns {Promise<ImagesContract>} Promise to the images of the
+ * requested image ids.
+ * @throws Rejects the promise on errors.
+ */
+ getImages(imageIds: string[]): Promise<ImagesContract>;
+
+ /**
+ * Get an image as an array buffer.
+ * @param {string} url - URL for image to retrieve.
+ * @param {Promise<void>} [abort] - Optional promise for aborting
+ * the request through rejection.
+ * @returns {Promise<ArrayBuffer>} Promise to the array
+ * buffer containing the image.
+ * @throws Rejects the promise on errors.
+ */
+ getImageBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer>;
+
+ /**
+ * Get image tiles urls for a tile level.
+ * @param {ImageTilesRequestContract} tiles - Tiles to request
+ * @returns {Promise<ImageTilesContract>} Promise to the
+ * image tiles response contract
+ * @throws Rejects the promise on errors.
+ * @example ```js
+ * var tileRequest = { imageId: 'image-id', z: 12 };
+ * provider.getImageTiles(tileRequest)
+ * .then((response) => console.log(response));
+ * ```
+ */
+ getImageTiles(tiles: ImageTilesRequestContract): Promise<ImageTilesContract>;
+
+ /**
+ * Get a mesh.
+ * @param {string} url - URL for mesh to retrieve.
+ * @param {Promise<void>} [abort] - Optional promise for aborting
+ * the request through rejection.
+ * @returns {Promise<MeshContract>} Promise to the mesh.
+ * @throws Rejects the promise on errors.
+ */
+ getMesh(url: string, abort?: Promise<void>): Promise<MeshContract>;
+
+ /**
+ * Get sequence.
+ * @param {Array<string>} sequenceId - The id for the
+ * sequence to retrieve.
+ * @returns {Promise} Promise to the sequences of the
+ * requested image ids.
+ * @throws Rejects the promise on errors.
+ */
+ getSequence(sequenceId: string): Promise<SequenceContract>;
+
+ off<T>(type: string, handler: (event: T) => void): void;
+
+ on<T>(type: string, handler: (event: T) => void): void;
+
+ /**
+ * Set an access token for authenticated API requests of
+ * protected resources.
+ * @param {string} [accessToken] accessToken - User access
+ * token or client access token.
+ */
+ setAccessToken(accessToken?: string): void;
+}
+/**
+ * @class GeometryProviderBase
+ * @classdesc Base class to extend if implementing a geometry
+ * provider class.
+ * @example ```js
+ * class MyGeometryProvider extends GeometryProviderBase {
+ * ...
+ * }
+ * ```
+ */
+declare class GeometryProviderBase implements IGeometryProvider {
+ /**
+ * Create a new geometry provider base instance.
+ */
+ constructor(): this;
+
+ /**
+ * Convert a geodetic bounding box to the the minimum set
+ * of cell ids containing the bounding box.
+ * @description The bounding box needs
+ * to be sufficiently small to be contained in an area with the size
+ * of maximally four tiles. Up to nine adjacent tiles may be returned.
+ * @param {LngLat} sw - South west corner of bounding box.
+ * @param {LngLat} ne - North east corner of bounding box.
+ * @returns {Array<string>} Array of cell ids.
+ */
+ bboxToCellIds(sw: LngLat, ne: LngLat): string[];
+
+ /**
+ * Get the cell ids of all adjacent cells.
+ * @description In the case of approximately rectangular cells
+ * this is typically the eight orthogonally and diagonally adjacent
+ * cells.
+ * @param {string} cellId - Id of cell.
+ * @returns {Array<string>} Array of cell ids. No specific
+ * order is guaranteed.
+ */
+ getAdjacent(cellId: string): string[];
+
+ /**
+ * Get the vertices of a cell.
+ * @description The vertices form an unclosed
+ * clockwise polygon in the 2D longitude, latitude
+ * space. No assumption on the position of the first
+ * vertex relative to the others can be made.
+ * @param {string} cellId - Id of cell.
+ * @returns {Array<LngLat>} Unclosed clockwise polygon.
+ */
+ getVertices(cellId: string): LngLat[];
+
+ /**
+ * Convert geodetic coordinates to a cell id.
+ * @param {LngLat} lngLat - Longitude, latitude to convert.
+ * @returns {string} Cell id for the longitude, latitude.
+ */
+ lngLatToCellId(lngLat: LngLat): string;
+
+ /**
+ * @ignore
+ */
+ _approxBboxToCellIds(sw: LngLat, ne: LngLat): string[];
+}
+declare interface GraphCameraContract {
+ focal: number;
+ k1: number;
+ k2: number;
+ projection_type: string;
+}
+declare interface GraphCameraShotContract {
+ camera: string;
+ rotation: number[];
+ translation: number[];
+}
+declare interface GraphReferenceContract {
+ altitude: number;
+ latitude: number;
+ longitude: number;
+}
+declare interface GraphPointContract {
+ color: number[];
+ coordinates: number[];
+}
+declare interface GraphClusterContract {
+ cameras: {
+ [cameraId: string]: GraphCameraContract,
+ ...
+ };
+ points: {
+ [pointId: string]: GraphPointContract,
+ ...
+ };
+ reference_lla: GraphReferenceContract;
+ shots: {
+ [imageKey: string]: GraphCameraShotContract,
+ ...
+ };
+}
+declare interface GraphGeometry {
+ coordinates: [number, number];
+}
+declare type GraphCoreImageEnt = {
+ computed_geometry: GraphGeometry,
+ geometry: GraphGeometry,
+ sequence: string,
+ ...
+} & IDEnt;
+declare type GraphSpatialImageEnt = {
+ merge_cc: number,
+ sfm_cluster: URLEnt,
+ thumb_1024_url: string,
+ thumb_2048_url: string,
+ ...
+} & SpatialImageEnt;
+declare class GraphConverter {
+ clusterReconstruction(source: GraphClusterContract): ClusterContract;
+ coreImage(source: GraphCoreImageEnt): CoreImageEnt;
+ spatialImage(source: GraphSpatialImageEnt): SpatialImageEnt;
+}
+declare interface GraphDataProviderOptions {
+ endpoint?: string;
+ accessToken?: string;
+}
+declare class GraphQueryCreator {
+ +imagesPath: string;
+ +sequencePath: string;
+ +coreFields: string[];
+ +idFields: string[];
+ +spatialFields: string[];
+ +imageTileFields: string[];
+ constructor(): this;
+ images(imageIds: string[], fields: string[]): string;
+ imagesS2(cellId: string, fields: string[]): string;
+ imageTiles(z: number, fields: string[]): string;
+ imageTilesPath(imageId: string): string;
+ sequence(sequenceId: string): string;
+}
+declare class GraphDataProvider extends DataProviderBase {
+ constructor(
+ options?: GraphDataProviderOptions,
+ geometry?: IGeometryProvider,
+ converter?: GraphConverter,
+ queryCreator?: GraphQueryCreator
+ ): this;
+ getCluster(url: string, abort?: Promise<void>): Promise<ClusterContract>;
+ getCoreImages(cellId: string): Promise<CoreImagesContract>;
+ getImageBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer>;
+ getImages(imageIds: string[]): Promise<ImagesContract>;
+ getImageTiles(
+ request: ImageTilesRequestContract
+ ): Promise<ImageTilesContract>;
+ getMesh(url: string, abort?: Promise<void>): Promise<MeshContract>;
+ getSequence(sequenceId: string): Promise<SequenceContract>;
+ getSpatialImages(imageIds: string[]): Promise<SpatialImagesContract>;
+ setAccessToken(accessToken?: string): void;
+}
+/**
+ * @class S2GeometryProvider
+ * @classdesc Geometry provider based on S2 cells.
+ * @example ```js
+ * class MyDataProvider extends DataProviderBase {
+ * ...
+ * }
+ *
+ * const geometryProvider = new S2GeometryProvider();
+ * const dataProvider = new MyDataProvider(geometryProvider);
+ * ```
+ */
+declare class S2GeometryProvider extends GeometryProviderBase {
+ /**
+ * Create a new S2 geometry provider instance.
+ */
+ constructor(_level?: number): this;
+
+ /**
+ * @inheritdoc
+ */
+ bboxToCellIds(sw: LngLat, ne: LngLat): string[];
+
+ /**
+ * @inheritdoc
+ */
+ getAdjacent(cellId: string): string[];
+
+ /**
+ * @inheritdoc
+ */
+ getVertices(cellId: string): LngLat[];
+
+ /**
+ * @inheritdoc
+ */
+ lngLatToCellId(lngLat: LngLat): string;
+}
+export interface ComponentConfiguration {
+ [key: string]: mixed;
+}
+/**
+ * Enumeration for render mode
+ * @enum {number} *
+ * @readonly
+ * @description Modes for specifying how rendering is done
+ * in the viewer. All modes preserves the original aspect
+ * ratio of the images.
+ */
+
+declare var RenderMode: {|
+ +Letterbox: 0, // 0
+ +Fill: 1, // 1
+|};
+declare interface ViewportSize {
+ height: number;
+ width: number;
+}
+declare type CameraType = "spherical" | "fisheye" | "perspective";
+/**
+ * @class Transform
+ * @classdesc Class used for calculating coordinate transformations
+ * and projections.
+ */
+declare class Transform {
+ /**
+ * Create a new transform instance.
+ * @param {number} orientation - Image orientation.
+ * @param {number} width - Image height.
+ * @param {number} height - Image width.
+ * @param {number} focal - Focal length.
+ * @param {number} scale - Atomic scale.
+ * @param {Array<number>} rotation - Rotation vector in three dimensions.
+ * @param {Array<number>} translation - Translation vector in three dimensions.
+ * @param {HTMLImageElement} image - Image for fallback size calculations.
+ */
+ constructor(
+ orientation: number,
+ width: number,
+ height: number,
+ scale: number,
+ rotation: number[],
+ translation: number[],
+ image: HTMLImageElement,
+ textureScale?: number[],
+ cameraParameters?: number[],
+ cameraType?: CameraType
+ ): this;
+ ck1: number;
+ ck2: number;
+ cameraType: CameraType;
+
+ /**
+ * Get basic aspect.
+ * @returns {number} The orientation adjusted aspect ratio.
+ */
+ basicAspect: number;
+
+ /**
+ * Get basic height.
+ * @description Does not fall back to image image height but
+ * uses original value from API so can be faulty.
+ * @returns {number} The height of the basic version image
+ * (adjusted for orientation).
+ */
+ basicHeight: number;
+
+ /**
+ * Get basic width.
+ * @description Does not fall back to image image width but
+ * uses original value from API so can be faulty.
+ * @returns {number} The width of the basic version image
+ * (adjusted for orientation).
+ */
+ basicWidth: number;
+
+ /**
+ * Get focal.
+ * @returns {number} The image focal length.
+ */
+ focal: number;
+
+ /**
+ * Get height.
+ * @description Falls back to the image image height if
+ * the API data is faulty.
+ * @returns {number} The orientation adjusted image height.
+ */
+ height: number;
+
+ /**
+ * Get orientation.
+ * @returns {number} The image orientation.
+ */
+ orientation: number;
+
+ /**
+ * Get scale.
+ * @returns {number} The image atomic reconstruction scale.
+ */
+ scale: number;
+
+ /**
+ * Get has valid scale.
+ * @returns {boolean} Value indicating if the scale of the transform is valid.
+ */
+ hasValidScale: boolean;
+
+ /**
+ * Get radial peak.
+ * @returns {number} Value indicating the radius where the radial
+ * undistortion function peaks.
+ */
+ radialPeak: number;
+
+ /**
+ * Get width.
+ * @description Falls back to the image image width if
+ * the API data is faulty.
+ * @returns {number} The orientation adjusted image width.
+ */
+ width: number;
+
+ /**
+ * Project 3D world coordinates to basic coordinates.
+ * @param {Array<number>} point3d - 3D world coordinates.
+ * @return {Array<number>} 2D basic coordinates.
+ */
+ projectBasic(point3d: number[]): number[];
+
+ /**
+ * Unproject basic coordinates to 3D world coordinates.
+ * @param {Array<number>} basic - 2D basic coordinates.
+ * @param {Array<number>} distance - Distance to unproject from camera center.
+ * @param {boolean} [depth] - Treat the distance value as depth from camera center.
+ * Only applicable for perspective images. Will be
+ * ignored for spherical.
+ * @returns {Array<number>} Unprojected 3D world coordinates.
+ */
+ unprojectBasic(basic: number[], distance: number, depth?: boolean): number[];
+
+ /**
+ * Project 3D world coordinates to SfM coordinates.
+ * @param {Array<number>} point3d - 3D world coordinates.
+ * @return {Array<number>} 2D SfM coordinates.
+ */
+ projectSfM(point3d: number[]): number[];
+
+ /**
+ * Unproject SfM coordinates to a 3D world coordinates.
+ * @param {Array<number>} sfm - 2D SfM coordinates.
+ * @param {Array<number>} distance - Distance to unproject
+ * from camera center.
+ * @param {boolean} [depth] - Treat the distance value as
+ * depth from camera center. Only applicable for perspective
+ * images. Will be ignored for spherical.
+ * @returns {Array<number>} Unprojected 3D world coordinates.
+ */
+ unprojectSfM(sfm: number[], distance: number, depth?: boolean): number[];
+}
+/**
+ * @class Camera
+ * @classdesc Holds information about a camera.
+ */
+declare class Camera {
+ /**
+ * Create a new camera instance.
+ * @param {Transform} [transform] - Optional transform instance.
+ */
+ constructor(transform?: Transform): this;
+
+ /**
+ * Get focal.
+ * @returns {number} The focal length.
+ */
+ focal: number;
+
+ /**
+ * Set focal.
+ */
+ -focal: number;
+
+ /**
+ * Update this camera to the linearly interpolated value of two other cameras.
+ * @param {Camera} a - First camera.
+ * @param {Camera} b - Second camera.
+ * @param {number} alpha - Interpolation value on the interval [0, 1].
+ */
+ lerpCameras(a: Camera, b: Camera, alpha: number): void;
+
+ /**
+ * Copy the properties of another camera to this camera.
+ * @param {Camera} other - Another camera.
+ */
+ copy(other: Camera): void;
+
+ /**
+ * Clone this camera.
+ * @returns {Camera} A camera with cloned properties equal to this camera.
+ */
+ clone(): Camera;
+
+ /**
+ * Determine the distance between this camera and another camera.
+ * @param {Camera} other - Another camera.
+ * @returns {number} The distance between the cameras.
+ */
+ diff(other: Camera): number;
+}
+declare var State: {|
+ +Custom: 0, // 0
+ +Earth: 1, // 1
+ +Traversing: 2, // 2
+ +Waiting: 3, // 3
+ +WaitingInteractively: 4, // 4
+|};
+
+/**
+ * Enumeration for edge directions
+ * @enum {number} *
+ * @readonly
+ * @description Directions for edges in image graph describing
+ * sequence, spatial and image type relations between nodes.
+ */
+
+declare var NavigationDirection: {|
+ +Next: 0, // 0
+ +Prev: 1, // 1
+ +StepLeft: 2, // 2
+ +StepRight: 3, // 3
+ +StepForward: 4, // 4
+ +StepBackward: 5, // 5
+ +TurnLeft: 6, // 6
+ +TurnRight: 7, // 7
+ +TurnU: 8, // 8
+ +Spherical: 9, // 9
+ +Similar: 10, // 10
+|};
+
+/**
+ * Interface that describes additional properties of an edge.
+ * @interface NavigationEdgeData
+ */
+export interface NavigationEdgeData {
+ /**
+ * The edge direction.
+ */
+ direction: $Values<typeof NavigationDirection>;
+
+ /**
+ * The counter clockwise horizontal rotation angle from
+ * the X-axis in a spherical coordiante system of the
+ * motion from the source image to the destination node.
+ */
+ worldMotionAzimuth: number;
+}
+/**
+ * Interface that describes the properties for a
+ * navigation edge from a source image to a
+ * target image.
+ * @interface NavigationEdge
+ */
+export interface NavigationEdge {
+ /**
+ * The id of the source image.
+ */
+ source: string;
+
+ /**
+ * The id of the target image.
+ */
+ target: string;
+
+ /**
+ * Additional data describing properties of the edge.
+ */
+ data: NavigationEdgeData;
+}
+/**
+ * Interface that indicates edge status.
+ * @interface NavigationEdgeStatus
+ */
+export interface NavigationEdgeStatus {
+ /**
+ * Value indicating whether the edges have been cached.
+ */
+ cached: boolean;
+
+ /**
+ * The edges.
+ * @description If the cached property is false the edges
+ * property will always be an empty array. If the cached
+ * property is true, there will exist edges in the the
+ * array if the image has edges.
+ */
+ edges: NavigationEdge[];
+}
+/**
+ * @class ImageCache
+ * @classdesc Represents the cached properties of a image.
+ */
+declare class ImageCache {
+ /**
+ * Create a new image cache instance.
+ */
+ constructor(provider: IDataProvider): this;
+
+ /**
+ * Get image.
+ * @description Will not be set when assets have not been cached
+ * or when the object has been disposed.
+ * @returns {HTMLImageElement} Cached image element of the image.
+ */
+ image: HTMLImageElement;
+
+ /**
+ * Get mesh.
+ * @description Will not be set when assets have not been cached
+ * or when the object has been disposed.
+ * @returns {MeshContract} SfM triangulated mesh of reconstructed
+ * atomic 3D points.
+ */
+ mesh: MeshContract;
+
+ /**
+ * Get sequenceEdges.
+ * @returns {NavigationEdgeStatus} Value describing the status of the
+ * sequence edges.
+ */
+ sequenceEdges: NavigationEdgeStatus;
+
+ /**
+ * Get spatialEdges.
+ * @returns {NavigationEdgeStatus} Value describing the status of the
+ * spatial edges.
+ */
+ spatialEdges: NavigationEdgeStatus;
+
+ /**
+ * Cache the sequence edges.
+ * @param {Array<NavigationEdge>} edges - Sequence edges to cache.
+ */
+ cacheSequenceEdges(edges: NavigationEdge[]): void;
+
+ /**
+ * Cache the spatial edges.
+ * @param {Array<NavigationEdge>} edges - Spatial edges to cache.
+ */
+ cacheSpatialEdges(edges: NavigationEdge[]): void;
+
+ /**
+ * Dispose the image cache.
+ * @description Disposes all cached assets and unsubscribes to
+ * all streams.
+ */
+ dispose(): void;
+
+ /**
+ * Reset the sequence edges.
+ */
+ resetSequenceEdges(): void;
+
+ /**
+ * Reset the spatial edges.
+ */
+ resetSpatialEdges(): void;
+}
+/**
+ * @class Image
+ * @classdesc [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
+ */
+declare class Image {
+ /**
+ * Create a new image instance.
+ * @description Images are always created internally by the library.
+ * Images can not be added to the library through any API method.
+ * @param {CoreImageEnt} core- Raw core image data.
+ * @ignore
+ */
+ constructor(core: CoreImageEnt): this;
+
+ /**
+ * Get assets cached.
+ * @description The assets that need to be cached for this property
+ * to report true are the following: fill properties, image and mesh.
+ * The library ensures that the current image will always have the
+ * assets cached.
+ * @returns {boolean} Value indicating whether all assets have been
+ * cached.
+ * @ignore
+ */
+ assetsCached: boolean;
+
+ /**
+ * Get cameraParameters.
+ * @description Will be undefined if SfM has
+ * not been run.
+ *
+ * Camera type dependent parameters.
+ *
+ * For perspective and fisheye camera types,
+ * the camera parameters array should be
+ * constructed according to
+ *
+ * `[focal, k1, k2]`
+ *
+ * where focal is the camera focal length,
+ * and k1, k2 are radial distortion parameters.
+ *
+ * For spherical camera type the camera
+ * parameters are unset or emtpy array.
+ * @returns {Array<number>} The parameters
+ * related to the camera type.
+ */
+ cameraParameters: number[];
+
+ /**
+ * Get cameraType.
+ * @description Will be undefined if SfM has not been run.
+ * @returns {string} The camera type that captured the image.
+ */
+ cameraType: string;
+
+ /**
+ * Get capturedAt.
+ * @description Timestamp of the image capture date
+ * and time represented as a Unix epoch timestamp in milliseconds.
+ * @returns {number} Timestamp when the image was captured.
+ */
+ capturedAt: number;
+
+ /**
+ * Get clusterId.
+ * @returns {string} Globally unique id of the SfM cluster to which
+ * the image belongs.
+ */
+ clusterId: string;
+
+ /**
+ * Get clusterUrl.
+ * @returns {string} Url to the cluster reconstruction file.
+ * @ignore
+ */
+ clusterUrl: string;
+
+ /**
+ * Get compassAngle.
+ * @description If the SfM computed compass angle exists it will
+ * be returned, otherwise the original EXIF compass angle.
+ * @returns {number} Compass angle, measured in degrees
+ * clockwise with respect to north.
+ */
+ compassAngle: number;
+
+ /**
+ * Get complete.
+ * @description The library ensures that the current image will
+ * always be full.
+ * @returns {boolean} Value indicating whether the image has all
+ * properties filled.
+ * @ignore
+ */
+ complete: boolean;
+
+ /**
+ * Get computedAltitude.
+ * @description If SfM has not been run the computed altitude is
+ * set to a default value of two meters.
+ * @returns {number} Altitude, in meters.
+ */
+ computedAltitude: number;
+
+ /**
+ * Get computedCompassAngle.
+ * @description Will not be set if SfM has not been run.
+ * @returns {number} SfM computed compass angle, measured
+ * in degrees clockwise with respect to north.
+ */
+ computedCompassAngle: number;
+
+ /**
+ * Get computedLngLat.
+ * @description Will not be set if SfM has not been run.
+ * @returns {LngLat} SfM computed longitude, latitude in WGS84 datum,
+ * measured in degrees.
+ */
+ computedLngLat: LngLat;
+
+ /**
+ * Get creatorId.
+ * @description Note that the creator ID will not be set when using
+ * the Mapillary API.
+ * @returns {string} Globally unique id of the user who uploaded
+ * the image.
+ */
+ creatorId: string;
+
+ /**
+ * Get creatorUsername.
+ * @description Note that the creator username will not be set when
+ * using the Mapillary API.
+ * @returns {string} Username of the creator who uploaded
+ * the image.
+ */
+ creatorUsername: string;
+
+ /**
+ * Get exifOrientation.
+ * @returns {number} EXIF orientation of original image.
+ */
+ exifOrientation: number;
+
+ /**
+ * Get height.
+ * @returns {number} Height of original image, not adjusted
+ * for orientation.
+ */
+ height: number;
+
+ /**
+ * Get image.
+ * @description The image will always be set on the current image.
+ * @returns {HTMLImageElement} Cached image element of the image.
+ */
+ image: HTMLImageElement;
+
+ /**
+ * Get id.
+ * @returns {string} Globally unique id of the image.
+ */
+ id: string;
+
+ /**
+ * Get lngLat.
+ * @description If the SfM computed longitude, latitude exist
+ * it will be returned, otherwise the original EXIF latitude
+ * longitude.
+ * @returns {LngLat} Longitude, latitude in WGS84 datum,
+ * measured in degrees.
+ */
+ lngLat: LngLat;
+
+ /**
+ * Get merged.
+ * @returns {boolean} Value indicating whether SfM has been
+ * run on the image and the image has been merged into a
+ * connected component.
+ */
+ merged: boolean;
+
+ /**
+ * Get mergeId.
+ * @description Will not be set if SfM has not yet been run on
+ * image.
+ * @returns {stirng} Id of connected component to which image
+ * belongs after the aligning merge.
+ */
+ mergeId: string;
+
+ /**
+ * Get mesh.
+ * @description The mesh will always be set on the current image.
+ * @returns {MeshContract} SfM triangulated mesh of reconstructed
+ * atomic 3D points.
+ */
+ mesh: MeshContract;
+
+ /**
+ * Get originalAltitude.
+ * @returns {number} EXIF altitude, in meters, if available.
+ */
+ originalAltitude: number;
+
+ /**
+ * Get originalCompassAngle.
+ * @returns {number} Original EXIF compass angle, measured in
+ * degrees.
+ */
+ originalCompassAngle: number;
+
+ /**
+ * Get originalLngLat.
+ * @returns {LngLat} Original EXIF longitude, latitude in
+ * WGS84 datum, measured in degrees.
+ */
+ originalLngLat: LngLat;
+
+ /**
+ * Get ownerId.
+ * @returns {string} Globally unique id of the owner to which
+ * the image belongs. If the image does not belong to an
+ * owner the owner id will be undefined.
+ */
+ ownerId: string;
+
+ /**
+ * Get private.
+ * @returns {boolean} Value specifying if image is accessible to
+ * organization members only or to everyone.
+ */
+ private: boolean;
+
+ /**
+ * Get qualityScore.
+ * @returns {number} A number between zero and one
+ * determining the quality of the image. Blurriness
+ * (motion blur / out-of-focus), occlusion (camera
+ * mount, ego vehicle, water-drops), windshield
+ * reflections, bad illumination (exposure, glare),
+ * and bad weather condition (fog, rain, snow)
+ * affect the quality score.
+ * @description Value should be on the interval [0, 1].
+ */
+ qualityScore: number;
+
+ /**
+ * Get rotation.
+ * @description Will not be set if SfM has not been run.
+ * @returns {Array<number>} Rotation vector in angle axis representation.
+ */
+ rotation: number[];
+
+ /**
+ * Get scale.
+ * @description Will not be set if SfM has not been run.
+ * @returns {number} Scale of reconstruction the image
+ * belongs to.
+ */
+ scale: number;
+
+ /**
+ * Get sequenceId.
+ * @returns {string} Globally unique id of the sequence
+ * to which the image belongs.
+ */
+ sequenceId: string;
+
+ /**
+ * Get sequenceEdges.
+ * @returns {NavigationEdgeStatus} Value describing the status of the
+ * sequence edges.
+ * @ignore
+ */
+ sequenceEdges: NavigationEdgeStatus;
+
+ /**
+ * Get spatialEdges.
+ * @returns {NavigationEdgeStatus} Value describing the status of the
+ * spatial edges.
+ * @ignore
+ */
+ spatialEdges: NavigationEdgeStatus;
+
+ /**
+ * Get width.
+ * @returns {number} Width of original image, not
+ * adjusted for orientation.
+ */
+ width: number;
+
+ /**
+ * Cache the sequence edges.
+ * @description The sequence edges are cached asynchronously
+ * internally by the library.
+ * @param {Array<NavigationEdge>} edges - Sequence edges to cache.
+ * @ignore
+ */
+ cacheSequenceEdges(edges: NavigationEdge[]): void;
+
+ /**
+ * Cache the spatial edges.
+ * @description The spatial edges are cached asynchronously
+ * internally by the library.
+ * @param {Array<NavigationEdge>} edges - Spatial edges to cache.
+ * @ignore
+ */
+ cacheSpatialEdges(edges: NavigationEdge[]): void;
+
+ /**
+ * Dispose the image.
+ * @description Disposes all cached assets.
+ * @ignore
+ */
+ dispose(): void;
+
+ /**
+ * Initialize the image cache.
+ * @description The image cache is initialized internally by
+ * the library.
+ * @param {ImageCache} cache - The image cache to set as cache.
+ * @ignore
+ */
+ initializeCache(cache: ImageCache): void;
+
+ /**
+ * Complete an image with spatial properties.
+ * @description The image is completed internally by
+ * the library.
+ * @param {SpatialImageEnt} fill - The spatial image struct.
+ * @ignore
+ */
+ makeComplete(fill: SpatialImageEnt): void;
+
+ /**
+ * Reset the sequence edges.
+ * @ignore
+ */
+ resetSequenceEdges(): void;
+
+ /**
+ * Reset the spatial edges.
+ * @ignore
+ */
+ resetSpatialEdges(): void;
+
+ /**
+ * Clears the image and mesh assets, aborts
+ * any outstanding requests and resets edges.
+ * @ignore
+ */
+ uncache(): void;
+}
+declare interface IAnimationState {
+ reference: LngLatAlt;
+ alpha: number;
+ camera: Camera;
+ zoom: number;
+ currentImage: Image;
+ currentCamera: Camera;
+ previousImage: Image;
+ trajectory: Image[];
+ currentIndex: number;
+ lastImage: Image;
+ imagesAhead: number;
+ currentTransform: Transform;
+ previousTransform: Transform;
+ motionless: boolean;
+ state: $Values<typeof State>;
+}
+declare interface AnimationFrame {
+ id: number;
+ fps: number;
+ state: IAnimationState;
+}
+declare interface EulerRotation {
+ phi: number;
+ theta: number;
+}
+declare class RenderCamera {
+ constructor(
+ elementWidth: number,
+ elementHeight: number,
+ renderMode: $Values<typeof RenderMode>
+ ): this;
+ alpha: number;
+ camera: Camera;
+ changed: boolean;
+ frameId: number;
+ renderMode: $Values<typeof RenderMode>;
+ rotation: EulerRotation;
+ zoom: number;
+ size: ViewportSize;
+ getTilt(): number;
+ fovToZoom(fov: number): number;
+ setFrame(frame: AnimationFrame): void;
+ setProjectionMatrix(matrix: number[]): void;
+ setRenderMode(renderMode: $Values<typeof RenderMode>): void;
+ setSize(size: ViewportSize): void;
+}
+declare class RenderService {
+ constructor(
+ element: HTMLElement,
+ currentFrame$: mixed,
+ renderMode: $Values<typeof RenderMode>,
+ renderCamera?: RenderCamera
+ ): this;
+ element: HTMLElement;
+ dispose(): void;
+}
+declare interface VirtualNodeHash {
+ name: string;
+}
+declare class DOMRenderer {
+ constructor(element: HTMLElement, renderService: RenderService): this;
+ clear(name: string): void;
+ remove(): void;
+}
+declare type GLRenderFunction = {
+ (): void,
+};
+
+declare var RenderPass$1: {|
+ +Background: 0, // 0
+ +Opaque: 1, // 1
+|};
+declare interface GLFrameRenderer {
+ frameId: number;
+ needsRender: boolean;
+ render: GLRenderFunction;
+ pass: $Values<typeof RenderPass$1>;
+}
+declare interface GLRenderHash {
+ name: string;
+ renderer: GLFrameRenderer;
+}
+declare class GLRenderer {
+ constructor(
+ canvas: HTMLCanvasElement,
+ canvasContainer: HTMLElement,
+ renderService: RenderService
+ ): this;
+ clear(name: string): void;
+ remove(): void;
+ triggerRerender(): void;
+}
+/**
+ * Enumeration for transition mode
+ * @enum {number} *
+ * @readonly
+ * @description Modes for specifying how transitions
+ * between images are performed.
+ */
+
+declare var TransitionMode: {|
+ +Default: 0, // 0
+ +Instantaneous: 1, // 1
+|};
+declare class StateService {
+ constructor(
+ initialState: $Values<typeof State>,
+ transitionMode?: $Values<typeof TransitionMode>
+ ): this;
+ dispose(): void;
+ custom(): void;
+ earth(): void;
+ traverse(): void;
+ wait(): void;
+ waitInteractively(): void;
+ appendImagess(images: Image[]): void;
+ prependImages(images: Image[]): void;
+ removeImages(n: number): void;
+ clearImages(): void;
+ clearPriorImages(): void;
+ cutImages(): void;
+ setImages(images: Image[]): void;
+ setViewMatrix(matrix: number[]): void;
+ rotate(delta: EulerRotation): void;
+ rotateUnbounded(delta: EulerRotation): void;
+ rotateWithoutInertia(delta: EulerRotation): void;
+ rotateBasic(basicRotation: number[]): void;
+ rotateBasicUnbounded(basicRotation: number[]): void;
+ rotateBasicWithoutInertia(basicRotation: number[]): void;
+ rotateToBasic(basic: number[]): void;
+ move(delta: number): void;
+ moveTo(position: number): void;
+ dolly(delta: number): void;
+ orbit(rotation: EulerRotation): void;
+ truck(direction: number[]): void;
+
+ /**
+ * Change zoom level while keeping the reference point position approximately static.
+ * @parameter {number} delta - Change in zoom level.
+ * @parameter {Array<number>} reference - Reference point in basic coordinates.
+ */
+ zoomIn(delta: number, reference: number[]): void;
+ setCenter(center: number[]): void;
+ setSpeed(speed: number): void;
+ setTransitionMode(mode: $Values<typeof TransitionMode>): void;
+ setZoom(zoom: number): void;
+ start(): void;
+ stop(): void;
+}
+declare class DOM {
+ constructor(doc?: Node): this;
+}
+/**
+ * Enumeration for component size.
+ * @enum {number} *
+ * @readonly
+ * @description May be used by a component to allow for resizing
+ * of the UI elements rendered by the component.
+ */
+
+declare var ComponentSize: {|
+ +Automatic: 0, // 0
+ +Large: 1, // 1
+ +Small: 2, // 2
+|};
+export type BearingConfiguration = {
+ /**
+ * The size of the ui elements.
+ * @default ComponentSize.Automatic
+ */
+ size?: $Values<typeof ComponentSize>,
+ ...
+} & ComponentConfiguration;
+
+/**
+ * Interface for configuration of cache depth.
+ * @interface
+ * @example ```js
+ * var viewer = new Viewer({
+ * ...
+ * component: {
+ * cache: {
+ * depth: {
+ * spherical: 2,
+ * sequence: 3,
+ * }
+ * },
+ * },
+ * ...
+ * });
+ * ```
+ */
+export interface CacheDepthConfiguration {
+ /**
+ * Cache depth in the sequence directions.
+ * @description Max value is 4. Value will be clamped
+ * to the interval [0, 4].
+ * @default 2
+ */
+ sequence: number;
+
+ /**
+ * Cache depth in the spherical direction.
+ * @description Max value is 2. Value will be clamped
+ * to the interval [0, 2].
+ * @default 1
+ */
+ spherical: number;
+
+ /**
+ * Cache depth in the step directions.
+ * @description Max value is 3. Value will be clamped
+ * to the interval [0, 3].
+ * @default 1
+ */
+ step: number;
+
+ /**
+ * Cache depth in the turn directions.
+ * @description Max value is 1. Value will be clamped
+ * to the interval [0, 1].
+ * @default 0
+ */
+ turn: number;
+}
+/**
+ * Interface for configuration of cache component.
+ * @interface
+ */
+export type CacheConfiguration = {
+ /**
+ * Cache depth struct.
+ */
+ depth?: CacheDepthConfiguration,
+ ...
+} & ComponentConfiguration;
+
+/**
+ * Interface for configuration of direction component.
+ * @interface
+ * @example ```js
+ * var viewer = new Viewer({
+ * ...
+ * component: {
+ * direction: {
+ * minWidth: 140,
+ * maxWidth: 340,
+ * },
+ * },
+ * ...
+ * });
+ * ```
+ */
+export type DirectionConfiguration = {
+ /**
+ * Determines if the sequence arrow appearance should be different from
+ * the non sequence arrows.
+ * @description Needs to be set to true for the sequence suffixed classes
+ * to be applied to the navigation elements. Additional calculations will be
+ * performed resulting in a performance cost.
+ * @default false
+ */
+ distinguishSequence?: boolean,
+
+ /**
+ * The image id representing the direction arrow to be highlighted.
+ * @description The arrow pointing towards the image corresponding to the
+ * highlight id will be highlighted.
+ * @default undefined
+ */
+ highlightId?: string,
+
+ /**
+ * The min width of the non transformed container element holding
+ * the navigation arrows.
+ * @description Set min width of the non transformed
+ * container element holding the navigation arrows.
+ * If the min width is larger than the max width the
+ * min width value will be used.
+ *
+ * The container element is automatically resized when the resize
+ * method on the Viewer class is called.
+ * @default 260
+ */
+ minWidth?: number,
+
+ /**
+ * The max width of the non transformed container element holding
+ * the navigation arrows.
+ * @description Set max width of the non transformed
+ * container element holding the navigation arrows.
+ * If the min width is larger than the max width the
+ * min width value will be used.
+ *
+ * The container element is automatically resized when the resize
+ * method on the Viewer class is called.
+ * @default 460
+ */
+ maxWidth?: number,
+ ...
+} & ComponentConfiguration;
+
+/**
+ * Interface for configuration of keyboard component.
+ * @interface
+ * @example ```js
+ * var viewer = new Viewer({
+ * ...
+ * component: {
+ * keyboard: {
+ * keyZoom: false,
+ * keySequenceNavigation: false,
+ * keySpatialNavigation: false,
+ * },
+ * },
+ * ...
+ * });
+ * ```
+ */
+export type KeyboardConfiguration = {
+ /**
+ * Enable or disable the `KeyPlayHandler`.
+ * @default true
+ */
+ keyPlay?: boolean,
+
+ /**
+ * Enable or disable the `KeySequenceNavigationHandler`.
+ * @default true
+ */
+ keySequenceNavigation?: boolean,
+
+ /**
+ * Enable or disable the `KeySpatialNavigationHandler`.
+ * @default true
+ */
+ keySpatialNavigation?: boolean,
+
+ /**
+ * Enable or disable the `KeyZoomHandler`.
+ * @default true
+ */
+ keyZoom?: boolean,
+ ...
+} & ComponentConfiguration;
+
+/**
+ * Interface for configuration of marker component.
+ * @interface
+ * @example ```js
+ * var viewer = new Viewer({
+ * ...
+ * component: {
+ * marker: {
+ * visibleBBoxSize: 80,
+ * },
+ * },
+ * ...
+ * });
+ * ```
+ */
+export type MarkerConfiguration = {
+ /**
+ * The size of the bounding box for which markers will be visible.
+ * @description Provided values will be clamped to the [1, 200]
+ * interval.
+ * @default 100
+ */
+ visibleBBoxSize?: number,
+ ...
+} & ComponentConfiguration;
+
+/**
+ * Interface for configuration of mouse component.
+ * @interface
+ * @example ```js
+ * var viewer = new Viewer({
+ * ...
+ * component: {
+ * pointer: {
+ * dragPan: false,
+ * scrollZoom: false,
+ * touchZoom: false,
+ * },
+ * },
+ * ...
+ * });
+ * ```
+ */
+export type PointerConfiguration = {
+ /**
+ * Activate or deactivate the `DragPanHandler`.
+ * @default true
+ */
+ dragPan?: boolean,
+
+ /**
+ * Activate or deactivate the `EarthControlHandler`.
+ * @default true
+ */
+ earthControl?: boolean,
+
+ /**
+ * Activate or deactivate the `ScrollZoomHandler`.
+ * @default true
+ */
+ scrollZoom?: boolean,
+
+ /**
+ * Activate or deactivate the `TouchZoomHandler`.
+ * @default true
+ */
+ touchZoom?: boolean,
+ ...
+} & ComponentConfiguration;
+
+/**
+ * Interface for configuration of sequence component.
+ * @interface
+ * @example ```js
+ * const viewer = new Viewer({
+ * ...
+ * component: {
+ * sequence: {
+ * minWidth: 40,
+ * maxWidth: 80,
+ * visible: false,
+ * },
+ * },
+ * ...
+ * });
+ * ```
+ */
+export type SequenceConfiguration = {
+ /**
+ * Set the direction to follow when playing.
+ * @default EdgeDirection.Next
+ */
+ direction?: $Values<typeof NavigationDirection>,
+
+ /**
+ * The node id representing the direction arrow to be highlighted.
+ * @description When set to null no direction will be highlighted.
+ * The arrow pointing towards the node corresponding to the
+ * highlight id will be highlighted.
+ * @default undefined
+ * @ignore
+ */
+ highlightId?: string,
+
+ /**
+ * The max width of the sequence container.
+ * @description Set max width of the container element holding
+ * the sequence navigation elements. If the min width is larger than the
+ * max width the min width value will be used.
+ *
+ * The container element is automatically resized when the resize
+ * method on the Viewer class is called.
+ * @default 117
+ */
+ maxWidth?: number,
+
+ /**
+ * The min width of the sequence container.
+ * @description Set min width of the container element holding
+ * the sequence navigation elements. If the min width is larger than the
+ * max width the min width value will be used.
+ *
+ * The container element is automatically resized when the resize
+ * method on the Viewer class is called.
+ * @default 70
+ */
+ minWidth?: number,
+
+ /**
+ * Indicating whether the component is playing.
+ * @default false
+ */
+ playing?: boolean,
+
+ /**
+ * Determine whether the sequence UI elements
+ * should be visible.
+ * @default true
+ */
+ visible?: boolean,
+ ...
+} & ComponentConfiguration;
+
+/**
+ * Enumeration for slider mode.
+ * @enum {number} *
+ * @readonly
+ * @description Modes for specifying how transitions
+ * between images are performed in slider mode. Only
+ * applicable when the slider component determines
+ * that transitions with motion is possilble. When it
+ * is not, the stationary mode will be applied.
+ */
+
+declare var SliderConfigurationMode: {|
+ +Motion: 0, // 0
+ +Stationary: 1, // 1
+|};
+
+/**
+ * Interface for configuration of slider ids.
+ * @interface
+ */
+export interface SliderConfigurationIds {
+ /**
+ * Id for the image plane in the background.
+ */
+ background: string;
+
+ /**
+ * Id for the image plane in the foreground.
+ */
+ foreground: string;
+}
+/**
+ * Interface for configuration of slider component.
+ * @interface ```js
+ * var viewer = new Viewer({
+ * ...
+ * component: {
+ * slider: {
+ * initialPosition: 0.5,
+ * ids: {
+ * background: '<background-id>',
+ * foreground: '<foreground-id>',
+ * },
+ * sliderVisible: true,
+ * },
+ * },
+ * ...
+ * });
+ * ```
+ */
+export type SliderConfiguration = {
+ /**
+ * Initial position of the slider on the interval [0, 1].
+ * @description Configures the initial position of the slider.
+ * The inital position value will be used when the component
+ * is activated.
+ * @default 1
+ */
+ initialPosition?: number,
+
+ /**
+ * Slider image ids.
+ * @description Configures the component to show the image
+ * planes for the supplied image ids in the foreground
+ * and the background.
+ */
+ ids?: SliderConfigurationIds,
+
+ /**
+ * Value indicating whether the slider should be visible.
+ * @description Set the value controlling if the
+ * slider is visible.
+ * @default true
+ */
+ sliderVisible?: boolean,
+
+ /**
+ * Mode used for image pair transitions.
+ * @description Configures the mode for transitions between
+ * image pairs.
+ */
+ mode?: $Values<typeof SliderConfigurationMode>,
+ ...
+} & ComponentConfiguration;
+
+declare var CameraVisualizationMode: {|
+ +Hidden: 0, // 0
+ +Homogeneous: 1, // 1
+ +Cluster: 2, // 2
+ +ConnectedComponent: 3, // 3
+ +Sequence: 4, // 4
+|};
+
+declare var OriginalPositionMode: {|
+ +Hidden: 0, // 0
+ +Altitude: 1, // 1
+ +Flat: 2, // 2
+|};
+
+declare var PointVisualizationMode: {|
+ +Hidden: 0, // 0
+ +Original: 1, // 1
+ +Cluster: 2, // 2
+|};
+
+/**
+ * Interface for configuration of spatial component.
+ * @interface
+ * @example ```js
+ * var viewer = new Viewer({
+ * ...
+ * component: {
+ * spatial: {
+ * cameraSize: 0.5,
+ * cameraVisualizationMode: CameraVisualizationMode.Cluster,
+ * cellsVisible: true,
+ * originalPositionMode: OriginalPositionMode.Altitude,
+ * pointSize: 0.5,
+ * pointVisualizationMode: PointVisualizationMode.Hidden,
+ * },
+ * },
+ * ...
+ * });
+ * ```
+ */
+export type SpatialConfiguration = {
+ /**
+ * The camera size on the interval [0.01, 1].
+ * @default 0.1
+ */
+ cameraSize?: number,
+
+ /**
+ * Specify the camera visualization mode.
+ * @default CameraVisualizationMode.Homogeneous
+ */
+ cameraVisualizationMode?: $Values<typeof CameraVisualizationMode>,
+
+ /**
+ * Specify if the currently rendered cells should be visualize on
+ * an approximated ground plane.
+ * @default false
+ */
+ cellsVisible?: boolean,
+
+ /**
+ * Cell grid depth from the cell of the currently
+ * selected camera.
+ * @description Max value is 3. Value will be clamped
+ * to the interval [1, 3].
+ * @default 1
+ */
+ cellGridDepth?: number,
+
+ /**
+ * Specify the original position visualization mode.
+ * @description The original positions are hidden
+ * by default.
+ * @default OriginalPositionMode.Hidden
+ */
+ originalPositionMode?: $Values<typeof OriginalPositionMode>,
+
+ /**
+ * The point size on the interval [0.01, 1].
+ * @default 0.1
+ */
+ pointSize?: number,
+
+ /**
+ * Specify if the points should be visible or not.
+ * @deprecated `pointsVisible` will be removed in
+ * v5.x. Use {@link pointVisualizationMode} instead.
+ * @default true
+ */
+ pointsVisible?: boolean,
+
+ /**
+ * Specify how point clouds should be visualized.
+ * @default PointVisualizationMode.Original
+ */
+ pointVisualizationMode?: $Values<typeof PointVisualizationMode>,
+ ...
+} & ComponentConfiguration;
+
+/**
+ * Enumeration for tag modes
+ * @enum {number} *
+ * @readonly
+ * @description Modes for the interaction in the tag component.
+ */
+
+declare var TagMode: {|
+ +Default: 0, // 0
+ +CreatePoint: 1, // 1
+ +CreatePoints: 2, // 2
+ +CreatePolygon: 3, // 3
+ +CreateRect: 4, // 4
+ +CreateRectDrag: 5, // 5
+|};
+
+/**
+ * Interface for configuration of tag component.
+ * @interface
+ * @example ```js
+ * var viewer = new Viewer({
+ * ...
+ * component: {
+ * tag: {
+ * createColor: 0xFF0000,
+ * mode: TagMode.CreateRect,
+ * },
+ * },
+ * ...
+ * });
+ * ```
+ */
+export type TagConfiguration = {
+ /**
+ * The color of vertices and edges for tags that
+ * are being created.
+ * @default 0xFFFFFF
+ */
+ createColor?: number,
+
+ /**
+ * Show an indicator at the centroid of the points geometry
+ * that creates the geometry when clicked.
+ * @default true
+ */
+ indicatePointsCompleter?: boolean,
+
+ /**
+ * The interaction mode of the tag component.
+ * @default TagMode.Default
+ */
+ mode?: $Values<typeof TagMode>,
+ ...
+} & ComponentConfiguration;
+export type ZoomConfiguration = {
+ /**
+ * The size of the ui elements.
+ * @default ComponentSize.Automatic
+ */
+ size?: $Values<typeof ComponentSize>,
+ ...
+} & ComponentConfiguration;
+
+/**
+ * Interface for configuration of navigation component.
+ * @interface
+ * @example ```js
+ * var viewer = new Viewer({
+ * ...
+ * component: {
+ * fallback: {
+ * navigation: {
+ * spatial: false,
+ * },
+ * },
+ * },
+ * ...
+ * });
+ * ```
+ */
+export type NavigationFallbackConfiguration = {
+ /**
+ * Enable or disable the sequence arrows.
+ * @default true
+ */
+ sequence?: boolean,
+
+ /**
+ * Enable or disable the spatial arrows.
+ * @default true
+ */
+ spatial?: boolean,
+ ...
+} & ComponentConfiguration;
+
+/**
+ * Interface for the fallback component options that can be
+ * provided to the viewer when the browser does not have
+ * WebGL support.
+ * @interface
+ */
+export interface FallbackOptions {
+ /**
+ * Show static images without pan, zoom, or transitions.
+ * @description Fallback for `image` when WebGL is not supported.
+ * @default false
+ */
+ image?: boolean;
+
+ /**
+ * Show static navigation arrows in the corners.
+ * @description Fallback for `direction` and `sequence` when WebGL is not supported.
+ * @default false
+ */
+ navigation?: boolean | NavigationFallbackConfiguration;
+}
+/**
+ * Interface for the component options that can be provided to the viewer.
+ * @interface
+ */
+export interface ComponentOptions {
+ /**
+ * Show attribution.
+ * @default true
+ */
+ attribution?: boolean;
+
+ /**
+ * Show indicator for bearing and field of view.
+ * @default true
+ */
+ bearing?: boolean | BearingConfiguration;
+
+ /**
+ * Cache images around the current one.
+ * @default true
+ */
+ cache?: boolean | CacheConfiguration;
+
+ /**
+ * Use a cover to avoid loading data until viewer interaction.
+ * @default true
+ */
+ cover?: boolean;
+
+ /**
+ * Show spatial direction arrows for navigation.
+ * @description Default spatial navigation when there is WebGL support.
+ * Requires WebGL support.
+ * @default true
+ */
+ direction?: boolean | DirectionConfiguration;
+
+ /**
+ * Enable fallback component options
+ * when the browser does not have WebGL support.
+ * @default undefined
+ */
+ fallback?: FallbackOptions;
+
+ /**
+ * Show image planes in 3D.
+ * @description Requires WebGL support.
+ * @default true
+ */
+ image?: boolean;
+
+ /**
+ * Enable use of keyboard commands.
+ * @description Requires WebGL support.
+ * @default true
+ */
+ keyboard?: boolean | KeyboardConfiguration;
+
+ /**
+ * Enable an interface for showing 3D markers in the viewer.
+ * @description Requires WebGL support.
+ * @default false
+ */
+ marker?: boolean | MarkerConfiguration;
+
+ /**
+ * Enable mouse, pen, and touch interaction for zoom and pan.
+ * @description Requires WebGL support.
+ * @default true
+ */
+ pointer?: boolean | PointerConfiguration;
+
+ /**
+ * Show HTML popups over images.
+ * @description Requires WebGL support.
+ * @default false
+ */
+ popup?: boolean;
+
+ /**
+ * Show sequence related navigation.
+ * @description Default sequence navigation when there is WebGL support.
+ * @default true
+ */
+ sequence?: boolean | SequenceConfiguration;
+
+ /**
+ * Show a slider for transitioning between image planes.
+ * @description Requires WebGL support.
+ * @default false
+ */
+ slider?: boolean | SliderConfiguration;
+
+ /**
+ * Enable an interface for showing spatial data in the viewer.
+ * @description Requires WebGL support.
+ * @default false
+ */
+ spatial?: boolean | SpatialConfiguration;
+
+ /**
+ * Enable an interface for drawing 2D geometries on top of images.
+ * @description Requires WebGL support.
+ * @default false
+ */
+ tag?: boolean | TagConfiguration;
+
+ /**
+ * Show buttons for zooming in and out.
+ * @description Requires WebGL support.
+ * @default true
+ */
+ zoom?: boolean | ZoomConfiguration;
+}
+/**
+ * Interface for the URL options that can be provided to the viewer.
+ * @interface
+ */
+export interface UrlOptions {
+ /**
+ * Explore host.
+ * @description Host used for links to the full
+ * mapillary website.
+ * @default {"www.mapillary.com"}
+ */
+ exploreHost?: string;
+
+ /**
+ * Scheme.
+ * @description Used for all hosts.
+ * @default {"https"}
+ */
+ scheme?: string;
+}
+/**
+ * Enumeration for camera controls.
+ * @description Specifies different modes for how the
+ * camera is controlled through pointer, keyboard or
+ * other modes of input.
+ * @enum {number} *
+ * @readonly
+ */
+
+declare var CameraControls: {|
+ +Custom: 0, // 0
+ +Earth: 1, // 1
+ +Street: 2, // 2
+|};
+
+/**
+ * [object Object],[object Object],[object Object]
+ */
+export interface ViewerOptions {
+ /**
+ * Optional access token for API requests of
+ * resources.
+ * @description [object Object],[object Object],[object Object]
+ */
+ accessToken?: string;
+
+ /**
+ * Value specifying the initial camera controls of
+ * the viewer.
+ * @default [object Object],[object Object]
+ */
+ cameraControls?: $Values<typeof CameraControls>;
+
+ /**
+ * Value specifying if combined panning should be activated.
+ * @default true
+ */
+ combinedPanning?: boolean;
+
+ /**
+ * Component options.
+ */
+ component?: ComponentOptions;
+
+ /**
+ * The HTML element in which MapillaryJS will render the
+ * viewer, or the element's string `id`. The
+ * specified element must have no children.
+ */
+ container: string | HTMLElement;
+
+ /**
+ * Optional data provider class instance for API and static
+ * resource requests.
+ * @description [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
+ */
+ dataProvider?: IDataProvider;
+
+ /**
+ * Optional `image-id` to start from. The id
+ * can be any Mapillary image. If a id is provided the viewer is
+ * bound to that id until it has been fully loaded. If null is provided
+ * no image is loaded at viewer initialization and the viewer is not
+ * bound to any particular id. Any image can then be navigated to
+ * with e.g. `viewer.moveTo("<my-image-id>")`.
+ */
+ imageId?: string;
+
+ /**
+ * Value indicating if the viewer should fetch high resolution
+ * image tiles.
+ * @description Can be used when extending MapillaryJS with
+ * a custom data provider. If no image tiling server exists
+ * the image tiling can be inactivated to avoid error
+ * messages about non-existing tiles in the console.
+ * @default true
+ */
+ imageTiling?: boolean;
+
+ /**
+ * The render mode in the viewer.
+ * @default [object Object],[object Object]
+ */
+ renderMode?: $Values<typeof RenderMode>;
+
+ /**
+ * A base URL for retrieving a PNG sprite image and json metadata file.
+ * File name extensions will be automatically appended.
+ */
+ sprite?: string;
+
+ /**
+ * If `true`, the viewer will automatically resize when the
+ * browser window resizes.
+ * @default true
+ */
+ trackResize?: boolean;
+
+ /**
+ * The transtion mode in the viewer.
+ * @default [object Object],[object Object]
+ */
+ transitionMode?: $Values<typeof TransitionMode>;
+
+ /**
+ * The URL options.
+ */
+ url?: UrlOptions;
+}
+declare class KeyboardService {
+ constructor(canvasContainer: HTMLElement): this;
+}
+declare class MouseService {
+ constructor(
+ container: EventTarget,
+ canvasContainer: EventTarget,
+ domContainer: EventTarget,
+ doc: EventTarget
+ ): this;
+ dispose(): void;
+ claimMouse(name: string, zindex: number): void;
+ unclaimMouse(name: string): void;
+ deferPixels(name: string, deferPixels: number): void;
+ undeferPixels(name: string): void;
+ claimWheel(name: string, zindex: number): void;
+ unclaimWheel(name: string): void;
+}
+/**
+ * Enumeration for alignments
+ * @enum {number} *
+ * @readonly
+ */
+
+declare var Alignment: {|
+ +Bottom: 0, // 0
+ +BottomLeft: 1, // 1
+ +BottomRight: 2, // 2
+ +Center: 3, // 3
+ +Left: 4, // 4
+ +Right: 5, // 5
+ +Top: 6, // 6
+ +TopLeft: 7, // 7
+ +TopRight: 8, // 8
+|};
+declare interface ISpriteAtlas {
+ loaded: boolean;
+}
+declare class SpriteAtlas implements ISpriteAtlas {
+ -json: mixed;
+ -image: mixed;
+ loaded: boolean;
+}
+declare interface Sprite {
+ width: number;
+ height: number;
+ x: number;
+ y: number;
+ pixelRatio: number;
+}
+declare interface Sprites {
+ [key: string]: Sprite;
+}
+declare class SpriteService {
+ constructor(sprite?: string): this;
+ dispose(): void;
+}
+declare interface TouchPinch {
+ /**
+ * X client coordinate for center of pinch.
+ */
+ clientX: number;
+
+ /**
+ * Y client coordinate for center of pinch.
+ */
+ clientY: number;
+
+ /**
+ * X page coordinate for center of pinch.
+ */
+ pageX: number;
+
+ /**
+ * Y page coordinate for center of pinch.
+ */
+ pageY: number;
+
+ /**
+ * X screen coordinate for center of pinch.
+ */
+ screenX: number;
+
+ /**
+ * Y screen coordinate for center of pinch.
+ */
+ screenY: number;
+
+ /**
+ * Distance change in X direction between touches
+ * compared to previous event.
+ */
+ changeX: number;
+
+ /**
+ * Distance change in Y direction between touches
+ * compared to previous event.
+ */
+ changeY: number;
+
+ /**
+ * Pixel distance between touches.
+ */
+ distance: number;
+
+ /**
+ * Change in pixel distance between touches compared
+ * to previous event.
+ */
+ distanceChange: number;
+
+ /**
+ * Distance in X direction between touches.
+ */
+ distanceX: number;
+
+ /**
+ * Distance in Y direction between touches.
+ */
+ distanceY: number;
+
+ /**
+ * Original touch event.
+ */
+ originalEvent: TouchEvent;
+
+ /**
+ * First touch.
+ */
+ touch1: Touch;
+
+ /**
+ * Second touch.
+ */
+ touch2: Touch;
+}
+declare class TouchService {
+ constructor(canvasContainer: HTMLElement, domContainer: HTMLElement): this;
+ dispose(): void;
+}
+/**
+ * Test whether the current browser supports the full
+ * functionality of MapillaryJS.
+ * @description The full functionality includes WebGL rendering.
+ * @return {boolean}
+ * @example `var supported = isSupported();`
+ */
+declare function isSupported(): boolean;
+
+/**
+ * Test whether the current browser supports the fallback
+ * functionality of MapillaryJS.
+ * @description The fallback functionality does not include WebGL
+ * rendering, only 2D canvas rendering.
+ * @return {boolean}
+ * @example `var fallbackSupported = isFallbackSupported();`
+ */
+declare function isFallbackSupported(): boolean;
+export type ComparisonFilterOperator = "==" | "!=" | ">" | ">=" | "<" | "<=";
+export type SetMembershipFilterOperator = "in" | "!in";
+export type CombiningFilterOperator = "all";
+export type FilterOperator =
+ | CombiningFilterOperator
+ | ComparisonFilterOperator
+ | SetMembershipFilterOperator;
+declare type FilterKey =
+ | "cameraType"
+ | "capturedAt"
+ | "clusterId"
+ | "creatorId"
+ | "creatorUsername"
+ | "exifOrientation"
+ | "height"
+ | "id"
+ | "mergeId"
+ | "merged"
+ | "ownerId"
+ | "private"
+ | "qualityScore"
+ | "sequenceId"
+ | "width";
+export type FilterValue = boolean | number | string;
+export type ComparisonFilterExpression = [
+ ComparisonFilterOperator,
+ FilterKey,
+ FilterValue
+];
+export type SetMembershipFilterExpression = (
+ | SetMembershipFilterOperator
+ | FilterKey
+ | FilterValue
+)[];
+export type CombiningFilterExpression = (
+ | CombiningFilterOperator
+ | ComparisonFilterExpression
+ | SetMembershipFilterExpression
+)[];
+export type FilterExpression =
+ | ComparisonFilterExpression
+ | SetMembershipFilterExpression
+ | CombiningFilterExpression;
+/**
+ * @event
+ */
+export type ViewerEventType =
+ | "bearing"
+ | "click"
+ | "contextmenu"
+ | "dblclick"
+ | "fov"
+ | "dataloading"
+ | "load"
+ | "mousedown"
+ | "mousemove"
+ | "mouseout"
+ | "mouseover"
+ | "mouseup"
+ | "moveend"
+ | "movestart"
+ | "navigable"
+ | "image"
+ | "position"
+ | "pov"
+ | "reference"
+ | "remove"
+ | "sequenceedges"
+ | "spatialedges";
+
+declare var RenderPass: {|
+ +Opaque: 0, // 0
+|};
+
+/**
+ * @interface
+ * @description [object Object],[object Object],[object Object],[object Object],[object Object]
+ */
+export interface ICustomRenderer {
+ /**
+ * A unique renderer id.
+ */
+ id: string;
+
+ /**
+ * The custom renderer's render pass.
+ * @description [object Object],[object Object],[object Object]
+ */
+ renderPass: $Values<typeof RenderPass>;
+
+ /**
+ * Method called when the renderer has been added to the
+ * viewer. This gives the
+ * renderer a chance to initialize gl resources and
+ * register event listeners.
+ * @description [object Object],[object Object],[object Object],[object Object],[object Object]
+ * @param {IViewer} viewer - The viewer this custom renderer
+ * was just added to.
+ * @param {LngLatAlt} reference - The viewer's current
+ * reference position.
+ * @param {WebGLRenderingContext | WebGL2RenderingContext} context -
+ * The viewer's gl context.
+ */
+ onAdd(
+ viewer: IViewer,
+ reference: LngLatAlt,
+ context: WebGLRenderingContext
+ ): void;
+
+ /**
+ * Method called when the viewer's reference position has changed.
+ * This gives the renderer a chance to reposition its scene objects.
+ * @description [object Object],[object Object],[object Object]
+ * @param {IViewer} viewer - The viewer this custom renderer
+ * is added to.
+ * @param {LngLatAlt} reference - The viewer's current
+ * reference position.
+ */
+ onReference(viewer: IViewer, reference: LngLatAlt): void;
+
+ /**
+ * Method called when the renderer has been removed from the
+ * viewer. This gives the
+ * renderer a chance to clean up gl resources and event
+ * listeners.
+ * @description [object Object],[object Object],[object Object]
+ * @param {IViewer} viewer - The viewer this custom renderer
+ * was just removed from.
+ * @param {WebGLRenderingContext | WebGL2RenderingContext} context -
+ * The viewer's gl context.
+ */
+ onRemove(viewer: IViewer, context: WebGLRenderingContext): void;
+
+ /**
+ * Called during an animation frame allowing the renderer to draw
+ * into the GL context. The layer cannot make assumptions
+ * about the current GL state.
+ * @description Take a look at the
+ * [WebGL model view projection article](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection)
+ * on MDN for an introduction to the view and projection matrices.
+ * @param {WebGLRenderingContext | WebGL2RenderingContext} context The
+ * viewer's WebGL context.
+ * @param {Array<number>} viewMatrix The viewer's view matrix.
+ * @param {Array<number>} projectionMatrix The viewers's projection
+ * matrix.
+ */
+ render(
+ context: WebGLRenderingContext,
+ viewMatrix: number[],
+ projectionMatrix: number[]
+ ): void;
+}
+/**
+ * @interface PointOfView
+ *
+ * Interface that represents the point of view of the viewer.
+ */
+export interface PointOfView {
+ /**
+ * Value indicating the current bearing of the viewer
+ * measured in degrees clockwise with respect to north.
+ * Ranges from 0° to 360°.
+ */
+ bearing: number;
+
+ /**
+ * The camera tilt in degrees, relative to a horizontal plane.
+ * Ranges from 90° (directly upwards) to -90° (directly downwards).
+ */
+ tilt: number;
+}
+export interface IViewer {
+ +dataProvider: IDataProvider;
+ +isNavigable: boolean;
+ activateCombinedPanning(): void;
+ activateComponent(name: string): void;
+ activateCover(): void;
+ addCustomRenderer(renderer: ICustomRenderer): void;
+ attachCustomCameraControls(controls: ICustomCameraControls): void;
+ deactivateCombinedPanning(): void;
+ deactivateComponent(name: string): void;
+ deactivateCover(): void;
+ detachCustomCameraControls(): Promise<ICustomCameraControls>;
+ fire<T>(type: ViewerEventType, event: T): void;
+ getBearing(): Promise<number>;
+ getCameraControls(): Promise<$Values<typeof CameraControls>>;
+ getCanvas(): HTMLCanvasElement;
+ getCanvasContainer(): HTMLDivElement;
+ getCenter(): Promise<number[]>;
+ getComponent<TComponent: Component<ComponentConfiguration>>(
+ name: string
+ ): TComponent;
+ getContainer(): HTMLElement;
+ getFieldOfView(): Promise<number>;
+ getImage(): Promise<Image>;
+ getPointOfView(): Promise<PointOfView>;
+ getPosition(): Promise<LngLat>;
+ getReference(): Promise<LngLatAlt>;
+ getZoom(): Promise<number>;
+ hasCustomCameraControls(controls: ICustomCameraControls): boolean;
+ hasCustomRenderer(rendererId: string): boolean;
+ moveDir(direction: $Values<typeof NavigationDirection>): Promise<Image>;
+ moveTo(imageId: string): Promise<Image>;
+ off<T>(type: ViewerEventType, handler: (event: T) => void): void;
+ on<T>(type: ViewerEventType, handler: (event: T) => void): void;
+ project(lngLat: LngLat): Promise<number[]>;
+ projectFromBasic(basicPoint: number[]): Promise<number[]>;
+ remove(): void;
+ removeCustomRenderer(rendererId: string): void;
+ resize(): void;
+ setCameraControls(controls: $Values<typeof CameraControls>): void;
+ setCenter(center: number[]): void;
+ setFieldOfView(fov: number): void;
+ setFilter(filter?: FilterExpression): Promise<void>;
+ setRenderMode(renderMode: $Values<typeof RenderMode>): void;
+ setTransitionMode(transitionMode: $Values<typeof TransitionMode>): void;
+ setAccessToken(accessToken?: string): Promise<void>;
+ setZoom(zoom: number): void;
+ triggerRerender(): void;
+ unproject(pixelPoint: number[]): Promise<LngLat>;
+ unprojectToBasic(pixelPoint: number[]): Promise<number[]>;
+}
+/**
+ * @interface
+ * @description [object Object],[object Object],[object Object]
+ */
+export interface ICustomCameraControls {
+ /**
+ * Method called when the camera controls have been
+ * activated and is responsible for moving the
+ * viewer's camera and defining its projection. This
+ * method gives the camera controls a chance to initialize
+ * resources, perform any transitions, and determine
+ * initial state.
+ * @description [object Object],[object Object],[object Object]
+ * @param {IViewer} viewer - The viewer this custom
+ * camera controls instance was just added to.
+ * @param {Array<number>} viewMatrix - The viewer's view matrix.
+ * @param {Array<number>} projectionMatrix - The viewers's
+ * projection matrix.
+ * @param {LngLatAlt} reference - The viewer's reference.
+ */
+ onActivate(
+ viewer: IViewer,
+ viewMatrix: number[],
+ projectionMatrix: number[],
+ reference: LngLatAlt
+ ): void;
+
+ /**
+ * Method called for each animation frame.
+ * @desdcription Custom camera controls can choose to
+ * make updates on each animation frame or only based on
+ * user input. Invoking updates on each animation frame is
+ * more resource intensive.
+ * @param {IViewer} viewer - The viewer this custom
+ * camera controls instance is attached to.
+ * @param {number} frameId - The request animation frame's id.
+ */
+ onAnimationFrame(viewer: IViewer, frameId: number): void;
+
+ /**
+ * Method called when the camera controls have been
+ * attached to the viewer.
+ * This gives the camera controls a chance to initialize
+ * resources.
+ * @description [object Object],[object Object],[object Object]
+ * @param {IViewer} viewer - The viewer this custom
+ * camera controls instance was just added to.
+ */
+ onAttach(
+ viewer: IViewer,
+ viewMatrixCallback: (viewMatrix: number[]) => void,
+ projectionMatrixCallback: (projectionMatrix: number[]) => void
+ ): void;
+
+ /**
+ * Method called when the camera controls have been deactivated.
+ * This gives the camera controls a chance to clean up resources
+ * and event listeners.
+ * @param {IViewer} viewer - The viewer this custom camera controls
+ * instance is attached to.
+ */
+ onDeactivate(viewer: IViewer): void;
+
+ /**
+ * Method called when the camera controls have been detached from
+ * the viewer. This gives the camera controls a chance to clean
+ * up resources and event listeners.
+ * @description [object Object],[object Object],[object Object]
+ * @param {IViewer} viewer - The viewer this custom camera
+ * controls instance was just detached from.
+ */
+ onDetach(viewer: IViewer): void;
+
+ /**
+ * Method called when the viewer's reference position has changed.
+ * This gives the custom camera controls a chance to reposition
+ * the camera.
+ * @description [object Object],[object Object],[object Object],[object Object],[object Object]
+ * @param {IViewer} viewer - The viewer this custom renderer
+ * is added to.
+ * @param {LngLatAlt} reference - The viewer's current
+ * reference position.
+ */
+ onReference(viewer: IViewer, reference: LngLatAlt): void;
+
+ /**
+ * Method called when the viewer has been resized.
+ * @description Use this method to modify the projection.
+ */
+ onResize(viewer: IViewer): void;
+}
+/**
+ * Interface for general viewer events.
+ */
+export interface ViewerEvent {
+ /**
+ * The viewer object that fired the event.
+ */
+ target: IViewer;
+
+ /**
+ * The event type.
+ */
+ type: ViewerEventType;
+}
+/**
+ * Interface for bearing viewer events.
+ */
+export type ViewerBearingEvent = {
+ /**
+ * Bearing is measured in degrees
+ * clockwise with respect to north.
+ * @description [object Object],[object Object],[object Object]
+ */
+ bearing: number,
+ type: "bearing",
+ ...
+} & ViewerEvent;
+
+/**
+ * Interface for viewer data loading events.
+ * @description Fired when any viewer data (image, mesh, metadata, etc)
+ * begins loading or changing asyncronously as a result of viewer
+ * navigation.
+ *
+ * Also fired when the data has finished loading and the viewer
+ * is able to perform the navigation.
+ */
+export type ViewerDataLoadingEvent = {
+ /**
+ * Indicates if the viewer navigation is awaiting data load.
+ */
+ loading: boolean,
+ type: "dataloading",
+ ...
+} & ViewerEvent;
+
+/**
+ * Interface for mouse-related viewer events.
+ * @example ```js
+ * // The `click` event is an example of a `ViewerMouseEvent`.
+ * // Set up an event listener on the viewer.
+ * viewer.on('click', function(e) {
+ * // The event object contains information like the
+ * // coordinates of the point in the viewer that was clicked.
+ * console.log('A click event has occurred at ' + e.lngLat);
+ * });
+ * ```
+ */
+export type ViewerMouseEvent = {
+ /**
+ * The basic coordinates in the current image of the mouse
+ * event target.
+ * @description [object Object],[object Object],[object Object]
+ */
+ basicPoint: number[],
+
+ /**
+ * The geographic location in the viewer of the mouse event target.
+ * @description In some situations the viewer can not determine a valid
+ * geographic location for the mouse event target. In that case the
+ * geographic coordinates will be `null`.
+ */
+ lngLat: LngLat,
+
+ /**
+ * The pixel coordinates of the mouse event target, relative to
+ * the viewer and measured from the top left corner.
+ */
+ pixelPoint: number[],
+
+ /**
+ * The original event that triggered the viewer event.
+ */
+ originalEvent: MouseEvent,
+
+ /**
+ * The event type.
+ */
+ type:
+ | "click"
+ | "contextmenu"
+ | "dblclick"
+ | "mousedown"
+ | "mousemove"
+ | "mouseout"
+ | "mouseover"
+ | "mouseup",
+ ...
+} & ViewerEvent;
+
+/**
+ * Interface for navigable viewer events.
+ */
+export type ViewerNavigableEvent = {
+ /**
+ * The navigable state indicates if the viewer supports
+ * moving, i.e. calling the `moveTo` and `moveDir`
+ * methods. The viewer will not be in a navigable state if the cover
+ * is activated and the viewer has been supplied a id. When the cover
+ * is deactivated or activated without being supplied a id it will
+ * be navigable.
+ */
+ navigable: boolean,
+ type: "navigable",
+ ...
+} & ViewerEvent;
+
+/**
+ * Interface for navigation edge viewer events.
+ */
+export type ViewerNavigationEdgeEvent = {
+ /**
+ * The viewer's current navigation edge status.
+ */
+ status: NavigationEdgeStatus,
+ type: "sequenceedges" | "spatialedges",
+ ...
+} & ViewerEvent;
+
+/**
+ * Interface for viewer image events.
+ */
+export type ViewerImageEvent = {
+ /**
+ * The viewer's current image.
+ */
+ image: Image,
+ type: "image",
+ ...
+} & ViewerEvent;
+
+/**
+ * Interface for viewer state events.
+ * @example ```js
+ * // The `fov` event is an example of a `ViewerStateEvent`.
+ * // Set up an event listener on the viewer.
+ * viewer.on('fov', function(e) {
+ * console.log('A fov event has occured');
+ * });
+ * ```
+ */
+export type ViewerStateEvent = {
+ /**
+ * The event type.
+ */
+ type: "fov" | "moveend" | "movestart" | "position" | "pov" | "remove",
+ ...
+} & ViewerEvent;
+export type ComponentName =
+ | "attribution"
+ | "bearing"
+ | "cache"
+ | "cover"
+ | "direction"
+ | "image"
+ | "keyboard"
+ | "marker"
+ | "pointer"
+ | "popup"
+ | "sequence"
+ | "slider"
+ | "spatial"
+ | "tag"
+ | "zoom";
+export type FallbackComponentName = "imagefallback" | "navigationfallback";
+/**
+ * Interface for viewer load events.
+ * @description Fired immediately after all necessary resources
+ * have been downloaded and the first visually complete
+ * rendering of the viewer has occurred.
+ *
+ * The visually complete rendering does not include custom
+ * renderers.
+ *
+ * This event is only fired for viewer configurations where
+ * the WebGL context is created, i.e. not when using the
+ * fallback functionality only.
+ * @example ```js
+ * // Set up an event listener on the viewer.
+ * viewer.on('load', function(e) {
+ * console.log('A load event has occured');
+ * });
+ * ```
+ */
+export type ViewerLoadEvent = {
+ type: "load",
+ ...
+} & ViewerEvent;
+
+/**
+ * Interface for viewer reference events.
+ */
+export type ViewerReferenceEvent = {
+ /**
+ * The viewer's current reference.
+ */
+ reference: LngLatAlt,
+ type: "reference",
+ ...
+} & ViewerEvent;
+
+/**
+ * @class Viewer
+ * @classdesc The Viewer object represents the navigable image viewer.
+ * Create a Viewer by specifying a container, client ID, image ID and
+ * other options. The viewer exposes methods and events for programmatic
+ * interaction.
+ *
+ * In the case of asynchronous methods, MapillaryJS returns promises to
+ * the results. Notifications are always emitted through JavaScript events.
+ */
+declare class Viewer implements IEventEmitter, IViewer {
+ /**
+ * Create a new viewer instance.
+ * @description The `Viewer` object represents the street imagery
+ * viewer on your web page. It exposes methods and properties that
+ * you can use to programatically change the view, and fires
+ * events as users interact with it.
+ *
+ * It is possible to initialize the viewer with or
+ * without a ID.
+ *
+ * When you want to show a specific image in the viewer from
+ * the start you should initialize it with a ID.
+ *
+ * When you do not know the first image ID at implementation
+ * time, e.g. in a map-viewer application you should initialize
+ * the viewer without a ID and call `moveTo` instead.
+ *
+ * When initializing with an ID the viewer is bound to that ID
+ * until the image for that ID has been successfully loaded.
+ * Also, a cover with the image of the ID will be shown.
+ * If the data for that ID can not be loaded because the ID is
+ * faulty or other errors occur it is not possible to navigate
+ * to another ID because the viewer is not navigable. The viewer
+ * becomes navigable when the data for the ID has been loaded and
+ * the image is shown in the viewer. This way of initializing
+ * the viewer is mostly for embedding in blog posts and similar
+ * where one wants to show a specific image initially.
+ *
+ * If the viewer is initialized without a ID (with null or
+ * undefined) it is not bound to any particular ID and it is
+ * possible to move to any ID with `viewer.moveTo("<my-image-id>")`.
+ * If the first move to a ID fails it is possible to move to another
+ * ID. The viewer will show a black background until a move
+ * succeeds. This way of intitializing is suited for a map-viewer
+ * application when the initial ID is not known at implementation
+ * time.
+ * @param {ViewerOptions} options - Optional configuration object
+ * specifying Viewer's and the components' initial setup.
+ * @example ```js
+ * var viewer = new Viewer({
+ * accessToken: "<my-access-token>",
+ * container: "<my-container-id>",
+ * });
+ * ```
+ */
+ constructor(options: ViewerOptions): this;
+
+ /**
+ * Returns the data provider used by the viewer to fetch
+ * all contracts, ents, and buffers.
+ * @description [object Object],[object Object],[object Object]
+ * @returns {IDataProvider} The viewer's data provider.
+ */
+ dataProvider: IDataProvider;
+
+ /**
+ * Return a boolean indicating if the viewer is in a navigable state.
+ * @description [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
+ * @returns {boolean} Boolean indicating whether the viewer is navigable.
+ */
+ isNavigable: boolean;
+
+ /**
+ * Activate the combined panning functionality.
+ * @description The combined panning functionality is active by default.
+ */
+ activateCombinedPanning(): void;
+
+ /**
+ * Activate a component.
+ * @param {string} name - Name of
+ * the component which will become active.
+ * @example ```js
+ * viewer.activateComponent("marker");
+ * ```
+ */
+ activateComponent(name: string): void;
+
+ /**
+ * Activate the cover (deactivates all other components).
+ */
+ activateCover(): void;
+
+ /**
+ * Add a custom renderer to the viewer's rendering pipeline.
+ * @description During a render pass, custom renderers
+ * are called in the order they were added.
+ * @param renderer - The custom renderer implementation.
+ */
+ addCustomRenderer(renderer: ICustomRenderer): void;
+
+ /**
+ * Attach custom camera controls to control the viewer's
+ * camera pose and projection.
+ * @description [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
+ * @param controls - The custom camera controls implementation.
+ * @throws {MapillaryError} When camera controls attached
+ * are already attached to the viewer.
+ */
+ attachCustomCameraControls(controls: ICustomCameraControls): void;
+
+ /**
+ * Deactivate the combined panning functionality.
+ * @description Deactivating the combined panning functionality
+ * could be needed in scenarios involving sequence only navigation.
+ */
+ deactivateCombinedPanning(): void;
+
+ /**
+ * Deactivate a component.
+ * @param {string} name - Name
+ * of component which become inactive.
+ * @example ```js
+ * viewer.deactivateComponent("pointer");
+ * ```
+ */
+ deactivateComponent(name: string): void;
+
+ /**
+ * Deactivate the cover (activates all components marked as active).
+ */
+ deactivateCover(): void;
+
+ /**
+ * Detach a previously attached custom camera control
+ * instance from the viewer.
+ * @description If no custom camera control instance
+ * has previously been attached, calling this method
+ * has no effect.
+ *
+ * Already attached custom camera controls need to
+ * be detached before attaching another custom camera
+ * control instance.
+ */
+ detachCustomCameraControls(): Promise<ICustomCameraControls>;
+
+ /**
+ * Get the bearing of the current viewer camera.
+ * @description The bearing depends on how the camera
+ * is currently rotated and does not correspond
+ * to the compass angle of the current image if the view
+ * has been panned.
+ *
+ * Bearing is measured in degrees clockwise with respect to
+ * north.
+ * @returns {Promise<number>} Promise to the bearing
+ * of the current viewer camera.
+ * @example ```js
+ * viewer.getBearing().then(b => { console.log(b); });
+ * ```
+ */
+ getBearing(): Promise<number>;
+
+ /**
+ * Get the viewer's camera control mode.
+ * @description The camera control mode determines
+ * how the camera is controlled when the viewer
+ * receives pointer and keyboard input.
+ * @returns {$Values<
+ typeof
+ CameraControls>} controls - Camera control mode.
+ * @example ```js
+ * viewer.getCameraControls().then(c => { console.log(c); });
+ * ```
+ */
+ getCameraControls(): Promise<$Values<typeof CameraControls>>;
+
+ /**
+ * Returns the viewer's canvas element.
+ * @description This is the element onto which the viewer renders
+ * the WebGL content.
+ * @returns {HTMLCanvasElement} The viewer's canvas element, or
+ * null or not initialized.
+ */
+ getCanvas(): HTMLCanvasElement;
+
+ /**
+ * Returns the HTML element containing the viewer's canvas element.
+ * @description This is the element to which event bindings for viewer
+ * interactivity (such as panning and zooming) are attached.
+ * @returns {HTMLDivElement} The container for the viewer's
+ * canvas element.
+ */
+ getCanvasContainer(): HTMLDivElement;
+
+ /**
+ * Get the basic coordinates of the current image that is
+ * at the center of the viewport.
+ * @description Basic coordinates are 2D coordinates on the [0, 1] interval
+ * and have the origin point, (0, 0), at the top left corner and the
+ * maximum value, (1, 1), at the bottom right corner of the original
+ * image.
+ * @returns {Promise<number[]>} Promise to the basic coordinates
+ * of the current image at the center for the viewport.
+ * @example ```js
+ * viewer.getCenter().then(c => { console.log(c); });
+ * ```
+ */
+ getCenter(): Promise<number[]>;
+
+ /**
+ * Get a component.
+ * @param {string} name - Name of component.
+ * @returns {Component} The requested component.
+ * @example ```js
+ * var pointerComponent = viewer.getComponent("pointer");
+ * ```
+ */
+ getComponent<TComponent: Component<ComponentConfiguration>>(
+ name: string
+ ): TComponent;
+
+ /**
+ * Returns the viewer's containing HTML element.
+ * @returns {HTMLElement} The viewer's container.
+ */
+ getContainer(): HTMLElement;
+
+ /**
+ * Get the viewer's current vertical field of view.
+ * @description The vertical field of view rendered on the viewer canvas
+ * measured in degrees.
+ * @returns {Promise<number>} Promise to the current field of view
+ * of the viewer camera.
+ * @example ```js
+ * viewer.getFieldOfView().then(fov => { console.log(fov); });
+ * ```
+ */
+ getFieldOfView(): Promise<number>;
+
+ /**
+ * Get the viewer's current image.
+ * @returns {Promise<Image>} Promise to the current image.
+ * @example ```js
+ * viewer.getImage().then(image => { console.log(image.id); });
+ * ```
+ */
+ getImage(): Promise<Image>;
+
+ /**
+ * Get the viewer's current point of view.
+ * @returns {Promise<PointOfView>} Promise to the current point of view
+ * of the viewer camera.
+ * @example ```js
+ * viewer.getPointOfView().then(pov => { console.log(pov); });
+ * ```
+ */
+ getPointOfView(): Promise<PointOfView>;
+
+ /**
+ * Get the viewer's current position
+ * @returns {Promise<LngLat>} Promise to the viewers's current
+ * position.
+ * @example ```js
+ * viewer.getPosition().then(pos => { console.log(pos); });
+ * ```
+ */
+ getPosition(): Promise<LngLat>;
+
+ /**
+ * Get the viewer's current reference position.
+ * @description The reference position specifies the origin in
+ * the viewer's topocentric coordinate system.
+ * @returns {Promise<LngLatAlt>} Promise to the reference position.
+ * @example ```js
+ * viewer.getReference().then(reference => { console.log(reference); });
+ * ```
+ */
+ getReference(): Promise<LngLatAlt>;
+
+ /**
+ * Get the image's current zoom level.
+ * @returns {Promise<number>} Promise to the viewers's current
+ * zoom level.
+ * @example ```js
+ * viewer.getZoom().then(z => { console.log(z); });
+ * ```
+ */
+ getZoom(): Promise<number>;
+
+ /**
+ * Check if a controls instance is the camera controls that are
+ * currently attached to the viewer.
+ * @param {ICustomCameraControls} controls - Camera controls instance.
+ * @returns {boolean} Value indicating whether the controls instance
+ * is currently attached.
+ */
+ hasCustomCameraControls(controls: ICustomCameraControls): boolean;
+
+ /**
+ * Check if a custom renderer has been added to the viewer's
+ * rendering pipeline.
+ * @param {string} id - Unique ID of the custom renderer.
+ * @returns {boolean} Value indicating whether the customer
+ * renderer has been added.
+ */
+ hasCustomRenderer(rendererId: string): boolean;
+
+ /**
+ * Navigate in a given direction.
+ * @param {$Values<
+ typeof
+ NavigationDirection>} direction - Direction in which which to move.
+ * @returns {Promise<Image>} Promise to the image that was navigated to.
+ * @throws If the current image does not have the edge direction
+ * or the edges has not yet been cached.
+ * @throws Propagates any IO errors to the caller.
+ * @throws When viewer is not navigable.
+ * @throws [object Object],[object Object],[object Object]
+ * @example ```js
+ * viewer.moveDir(NavigationDirection.Next).then(
+ * image => { console.log(image); },
+ * error => { console.error(error); });
+ * ```
+ */
+ moveDir(direction: $Values<typeof NavigationDirection>): Promise<Image>;
+
+ /**
+ * Navigate to a given image ID.
+ * @param {string} imageId - Id of the image to move to.
+ * @returns {Promise<Image>} Promise to the image that was navigated to.
+ * @throws Propagates any IO errors to the caller.
+ * @throws When viewer is not navigable.
+ * @throws [object Object],[object Object],[object Object]
+ * @example ```js
+ * viewer.moveTo("<my-image-id>").then(
+ * image => { console.log(image); },
+ * error => { console.error(error); });
+ * ```
+ */
+ moveTo(imageId: string): Promise<Image>;
+
+ /**
+ * Project geodetic coordinates to canvas pixel coordinates.
+ * @description The geodetic coordinates may not always correspond to pixel
+ * coordinates, e.g. if the geodetic coordinates have a position behind the
+ * viewer camera. In the case of no correspondence the returned value will
+ * be `null`.
+ *
+ * If the distance from the viewer camera position to the provided
+ * longitude-latitude is more than 1000 meters `null` will be returned.
+ *
+ * The projection is performed from the ground plane, i.e.
+ * the altitude with respect to the ground plane for the geodetic
+ * point is zero.
+ *
+ * Note that whenever the camera moves, the result of the method will be
+ * different.
+ * @param {LngLat} lngLat - Geographical coordinates to project.
+ * @returns {Promise<Array<number>>} Promise to the pixel coordinates corresponding
+ * to the lngLat.
+ * @example ```js
+ * viewer.project({ lat: 0, lng: 0 })
+ * .then(pixelPoint => {
+ * if (!pixelPoint) {
+ * console.log("no correspondence");
+ * }
+ *
+ * console.log(pixelPoint);
+ * });
+ * ```
+ */
+ project(lngLat: LngLat): Promise<number[]>;
+
+ /**
+ * Project basic image coordinates for the current image to canvas pixel
+ * coordinates.
+ * @description The basic image coordinates may not always correspond to a
+ * pixel point that lies in the visible area of the viewer container. In the
+ * case of no correspondence the returned value can be `null`.
+ * @param {Array<number>} basicPoint - Basic images coordinates to project.
+ * @returns {Promise<Array<number>>} Promise to the pixel coordinates corresponding
+ * to the basic image point.
+ * @example ```js
+ * viewer.projectFromBasic([0.3, 0.7])
+ * .then(pixelPoint => { console.log(pixelPoint); });
+ * ```
+ */
+ projectFromBasic(basicPoint: number[]): Promise<number[]>;
+
+ /**
+ * Clean up and release all internal resources associated with
+ * this viewer.
+ * @description This includes DOM elements, event bindings, and
+ * WebGL resources.
+ *
+ * Use this method when you are done using the viewer and wish to
+ * ensure that it no longer consumes browser resources. Afterwards,
+ * you must not call any other methods on the viewer.
+ * @fires remove
+ * @example ```js
+ * viewer.remove();
+ * ```
+ */
+ remove(): void;
+
+ /**
+ * Remove a custom renderer from the viewer's rendering pipeline.
+ * @param id - Unique ID of the custom renderer.
+ */
+ removeCustomRenderer(rendererId: string): void;
+
+ /**
+ * Detect the viewer's new width and height and resize it
+ * manually.
+ * @description [object Object],[object Object],[object Object],[object Object],[object Object]
+ * @example ```js
+ * viewer.resize();
+ * ```
+ */
+ resize(): void;
+
+ /**
+ * Set the viewer's camera control mode.
+ * @description The camera control mode determines
+ * how the camera is controlled when the viewer
+ * receives pointer and keyboard input.
+ *
+ * Changing the camera control mode is not possible
+ * when the slider component is active and attempts
+ * to do so will be ignored.
+ * @param {$Values<
+ typeof
+ CameraControls>} controls - Camera control mode.
+ * @example ```js
+ * viewer.setCameraControls(CameraControls.Street);
+ * ```
+ */
+ setCameraControls(controls: $Values<typeof CameraControls>): void;
+
+ /**
+ * Set the basic coordinates of the current image to be in the
+ * center of the viewport.
+ * @description Basic coordinates are 2D coordinates on the [0, 1] interval
+ * and has the origin point, (0, 0), at the top left corner and the
+ * maximum value, (1, 1), at the bottom right corner of the original
+ * image.
+ * @param {number[]} The basic coordinates of the current
+ * image to be at the center for the viewport.
+ * @example ```js
+ * viewer.setCenter([0.5, 0.5]);
+ * ```
+ */
+ setCenter(center: number[]): void;
+
+ /**
+ * Set the viewer's current vertical field of view.
+ * @description Sets the vertical field of view rendered
+ * on the viewer canvas measured in degrees. The value
+ * will be clamped to be able to set a valid zoom level
+ * based on the projection model of the current image and
+ * the viewer's current render mode.
+ * @param {number} fov - Vertical field of view in degrees.
+ * @example ```js
+ * viewer.setFieldOfView(45);
+ * ```
+ */
+ setFieldOfView(fov: number): void;
+
+ /**
+ * Set the filter selecting images to use when calculating
+ * the spatial edges.
+ * @description [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
+ * @param {FilterExpression} [filter] - The filter expression.
+ * Applied filter is cleared if omitted.
+ * @returns {Promise<void>} Promise that resolves after filter is applied.
+ * @example ```js
+ * // Examples
+ * viewer.setFilter(["==", "cameraType", "spherical"]);
+ * viewer.setFilter([">=", "capturedAt", <my-time-stamp>]);
+ * viewer.setFilter(["in", "sequenceId", "<sequence-id-1>", "<sequence-id-2>"]);
+ * ```
+ */
+ setFilter(filter?: FilterExpression): Promise<void>;
+
+ /**
+ * Set the viewer's render mode.
+ * @param {$Values<
+ typeof
+ RenderMode>} renderMode - Render mode.
+ * @example ```js
+ * viewer.setRenderMode(RenderMode.Letterbox);
+ * ```
+ */
+ setRenderMode(renderMode: $Values<typeof RenderMode>): void;
+
+ /**
+ * Set the viewer's transition mode.
+ * @param {$Values<
+ typeof
+ TransitionMode>} transitionMode - Transition mode.
+ * @example ```js
+ * viewer.setTransitionMode(TransitionMode.Instantaneous);
+ * ```
+ */
+ setTransitionMode(transitionMode: $Values<typeof TransitionMode>): void;
+
+ /**
+ * Set an access token for authenticated API requests of protected
+ * resources.
+ *
+ * The token may be a user access token or a client access token.
+ * @description [object Object],[object Object],[object Object]
+ * @param {string} [accessToken] accessToken - Optional user
+ * access token or client access token.
+ * @returns {Promise<void>} Promise that resolves after token
+ * is set.
+ * @throws When viewer is not navigable.
+ * @example ```js
+ * viewer.setAccessToken("<my access token>")
+ * .then(() => { console.log("user token set"); });
+ * ```
+ */
+ setAccessToken(accessToken?: string): Promise<void>;
+
+ /**
+ * Set the image's current zoom level.
+ * @description Possible zoom level values are on the [0, 3] interval.
+ * Zero means zooming out to fit the image to the view whereas three
+ * shows the highest level of detail.
+ * @param {number} The image's current zoom level.
+ * @example ```js
+ * viewer.setZoom(2);
+ * ```
+ */
+ setZoom(zoom: number): void;
+
+ /**
+ * Trigger the rendering of a single frame.
+ * @description Use this method with custom renderers to
+ * force the viewer to rerender when the custom content
+ * changes. Calling this multiple times before the next
+ * frame is rendered will still result in only a single
+ * frame being rendered.
+ */
+ triggerRerender(): void;
+
+ /**
+ * Unproject canvas pixel coordinates to geodetic
+ * coordinates.
+ * @description The pixel point may not always correspond to geodetic
+ * coordinates. In the case of no correspondence the returned value will
+ * be `null`.
+ *
+ * The unprojection to a lngLat will be performed towards the ground plane, i.e.
+ * the altitude with respect to the ground plane for the returned lngLat is zero.
+ * @param {Array<number>} pixelPoint - Pixel coordinates to unproject.
+ * @returns {Promise<LngLat>} Promise to the lngLat corresponding to the pixel point.
+ * @example ```js
+ * viewer.unproject([100, 100])
+ * .then(lngLat => { console.log(lngLat); });
+ * ```
+ */
+ unproject(pixelPoint: number[]): Promise<LngLat>;
+
+ /**
+ * Unproject canvas pixel coordinates to basic image coordinates for the
+ * current image.
+ * @description The pixel point may not always correspond to basic image
+ * coordinates. In the case of no correspondence the returned value will
+ * be `null`.
+ * @param {Array<number>} pixelPoint - Pixel coordinates to unproject.
+ * @returns {Promise<LngLat>} Promise to the basic coordinates corresponding
+ * to the pixel point.
+ * @example ```js
+ * viewer.unprojectToBasic([100, 100])
+ * .then(basicPoint => { console.log(basicPoint); });
+ * ```
+ */
+ unprojectToBasic(pixelPoint: number[]): Promise<number[]>;
+
+ fire<T>(type: string, event: T): void;
+ off<T>(type: string, handler: (event: T) => void): void;
+ on<T>(type: string, handler: (event: T) => void): void;
+}
+/**
+ * @class MapillaryError
+ * @classdesc Generic Mapillary error.
+ */
+declare class MapillaryError extends Error {
+ constructor(message?: string): this;
+}
+/**
+ * @class CancelMapillaryError
+ * @classdesc Error thrown when a move to request has been
+ * cancelled before completing because of a subsequent request.
+ */
+declare class CancelMapillaryError extends MapillaryError {
+ constructor(message?: string): this;
+}
+declare class ArgumentMapillaryError extends MapillaryError {
+ constructor(message?: string): this;
+}
+declare class GraphMapillaryError extends MapillaryError {
+ constructor(message: string): this;
+}
+declare class ConfigurationService {
+ constructor(options: ViewerOptions): this;
+}
+declare class Container {
+ id: string;
+ renderService: RenderService;
+ glRenderer: GLRenderer;
+ domRenderer: DOMRenderer;
+ keyboardService: KeyboardService;
+ mouseService: MouseService;
+ touchService: TouchService;
+ spriteService: SpriteService;
+ +configurationService: ConfigurationService;
+ constructor(
+ options: ViewerOptions,
+ stateService: StateService,
+ dom?: DOM
+ ): this;
+ canvas: HTMLCanvasElement;
+ canvasContainer: HTMLDivElement;
+ container: HTMLElement;
+ domContainer: HTMLDivElement;
+ remove(): void;
+}
+declare type Func<T, TResult> = (item: T) => TResult;
+declare type FilterFunction = Func<Image, boolean>;
+/**
+ * @class Filter
+ * @classdesc Represents a class for creating image filters. Implementation and
+ * definitions based on https://github.com/mapbox/feature-filter.
+ */
+declare class FilterCreator {
+ /**
+ * Create a filter from a filter expression.
+ * @description The following filters are supported:
+ *
+ * Comparison
+ * `==`
+ * `!=`
+ * `<`
+ * `<=`
+ * `>`
+ * `>=`
+ *
+ * Set membership
+ * `in`
+ * `!in`
+ *
+ * Combining
+ * `all`
+ * @param {FilterExpression} filter - Comparison, set membership or combinding filter
+ * expression.
+ * @returns {FilterFunction} Function taking a image and returning a boolean that
+ * indicates whether the image passed the test or not.
+ */
+ createFilter(filter: FilterExpression): FilterFunction;
+}
+/**
+ * @class GraphCalculator
+ * @classdesc Represents a calculator for graph entities.
+ */
+declare class GraphCalculator {
+ /**
+ * Get the bounding box corners for a circle with radius of a threshold
+ * with center in a geodetic position.
+ * @param {LngLat} lngLat - Longitude, latitude to encode.
+ * @param {number} threshold - Threshold distance from the position in meters.
+ * @returns {Array<LngLat>} The south west and north east corners of the
+ * bounding box.
+ */
+ boundingBoxCorners(lngLat: LngLat, threshold: number): [LngLat, LngLat];
+
+ /**
+ * Convert a compass angle to an angle axis rotation vector.
+ * @param {number} compassAngle - The compass angle in degrees.
+ * @param {number} orientation - The orientation of the original image.
+ * @returns {Array<number>} Angle axis rotation vector.
+ */
+ rotationFromCompass(compassAngle: number, orientation: number): number[];
+}
+/**
+ * @class Sequence
+ * @classdesc Represents a sequence of ordered images.
+ */
+declare class Sequence {
+ /**
+ * Create a new sequene instance.
+ * @param {SequenceEnt} sequence - Raw sequence data.
+ */
+ constructor(sequence: SequenceEnt): this;
+
+ /**
+ * Get id.
+ * @returns {string} Unique sequence id.
+ */
+ id: string;
+
+ /**
+ * Get ids.
+ * @returns {Array<string>} Array of ordered image ids in the sequence.
+ */
+ imageIds: string[];
+
+ /**
+ * Dispose the sequence.
+ * @description Disposes all cached assets.
+ */
+ dispose(): void;
+
+ /**
+ * Find the next image id in the sequence with respect to
+ * the provided image id.
+ * @param {string} id - Reference image id.
+ * @returns {string} Next id in sequence if it exists, null otherwise.
+ */
+ findNext(id: string): string;
+
+ /**
+ * Find the previous image id in the sequence with respect to
+ * the provided image id.
+ * @param {string} id - Reference image id.
+ * @returns {string} Previous id in sequence if it exists, null otherwise.
+ */
+ findPrev(id: string): string;
+}
+/**
+ * Interface for graph configuration.
+ * @interface GraphConfiguration
+ */
+export interface GraphConfiguration {
+ /**
+ * The maximum number of cached sequences left
+ * after uncache.
+ */
+ maxSequences: number;
+
+ /**
+ * The maximum number of unused cached images left
+ * after uncache.
+ */
+ maxUnusedImages: number;
+
+ /**
+ * The maximum number of unused pre-stored cached images left
+ * after uncache.
+ */
+ maxUnusedPreStoredImages: number;
+
+ /**
+ * The maximum number of unused cached tiles left
+ * after uncache.
+ */
+ maxUnusedTiles: number;
+}
+declare class EdgeCalculatorCoefficients {
+ sphericalPreferredDistance: number;
+ sphericalMotion: number;
+ sphericalSequencePenalty: number;
+ sphericalMergeCCPenalty: number;
+ stepPreferredDistance: number;
+ stepMotion: number;
+ stepRotation: number;
+ stepSequencePenalty: number;
+ stepMergeCCPenalty: number;
+ similarDistance: number;
+ similarRotation: number;
+ turnDistance: number;
+ turnMotion: number;
+ turnSequencePenalty: number;
+ turnMergeCCPenalty: number;
+ constructor(): this;
+}
+declare interface SphericalDirection {
+ direction: $Values<typeof NavigationDirection>;
+ prev: $Values<typeof NavigationDirection>;
+ next: $Values<typeof NavigationDirection>;
+ directionChange: number;
+}
+declare interface StepDirection {
+ direction: $Values<typeof NavigationDirection>;
+ motionChange: number;
+ useFallback: boolean;
+}
+declare interface TurnDirection {
+ direction: $Values<typeof NavigationDirection>;
+ directionChange: number;
+ motionChange?: number;
+}
+declare class EdgeCalculatorDirections {
+ steps: {
+ [direction: string]: StepDirection,
+ ...
+ };
+ turns: {
+ [direction: string]: TurnDirection,
+ ...
+ };
+ spherical: {
+ [direction: string]: SphericalDirection,
+ ...
+ };
+ constructor(): this;
+}
+declare class EdgeCalculatorSettings {
+ sphericalMinDistance: number;
+ sphericalMaxDistance: number;
+ sphericalPreferredDistance: number;
+ sphericalMaxItems: number;
+ sphericalMaxStepTurnChange: number;
+ rotationMaxDistance: number;
+ rotationMaxDirectionChange: number;
+ rotationMaxVerticalDirectionChange: number;
+ similarMaxDirectionChange: number;
+ similarMaxDistance: number;
+ similarMinTimeDifference: number;
+ stepMaxDistance: number;
+ stepMaxDirectionChange: number;
+ stepMaxDrift: number;
+ stepPreferredDistance: number;
+ turnMaxDistance: number;
+ turnMaxDirectionChange: number;
+ turnMaxRigDistance: number;
+ turnMinRigDirectionChange: number;
+ constructor(): this;
+ maxDistance: number;
+}
+/**
+ * Interface that describes the properties for a image that is the destination of a
+ * potential edge from an origin image.
+ * @interface PotentialEdge
+ */
+declare interface PotentialEdge {
+ /**
+ * Timestamp when the image was captured.
+ * @property {number} capturedAt
+ */
+ capturedAt: number;
+
+ /**
+ * Change in viewing direction with respect to the origin image.
+ * @property {number} directionChange
+ */
+ directionChange: number;
+
+ /**
+ * Distance to the origin image.
+ * @property {number} distance
+ */
+ distance: number;
+
+ /**
+ * Determines if the destination image is spherical.
+ * @property {boolean} spherical
+ */
+ spherical: boolean;
+
+ /**
+ * Unique image id.
+ * @property {string} id
+ */
+ id: string;
+
+ /**
+ * Change in motion with respect to the viewing direction
+ * of the origin image.
+ * @property {number} motionChange
+ */
+ motionChange: number;
+
+ /**
+ * General camera rotation with respect to the origin image.
+ * @property {number} rotation
+ */
+ rotation: number;
+
+ /**
+ * Determines if the origin and destination image are considered
+ * to be in the same merge connected component.
+ * @property {boolean} sameMergeCC
+ */
+ sameMergeCC: boolean;
+
+ /**
+ * Determines if the origin and destination image are in the
+ * same sequence.
+ * @property {boolean} sameSequence
+ */
+ sameSequence: boolean;
+
+ /**
+ * Determines if the origin and destination image have been captured
+ * by the same user.
+ * @property {boolean} sameUser
+ */
+ sameUser: boolean;
+
+ /**
+ * Determines which sequence the destination image of the potential edge
+ * belongs to.
+ * @property {string} sequenceId
+ */
+ sequenceId: string;
+
+ /**
+ * Change in viewing direction with respect to the XY-plane.
+ * @property {number} verticalDirectionChange
+ */
+ verticalDirectionChange: number;
+
+ /**
+ * The angle between motion vector and the XY-plane
+ * @property {number} verticalMotion
+ */
+ verticalMotion: number;
+
+ /**
+ * The counter clockwise horizontal rotation angle from
+ * the X-axis in a spherical coordiante system.
+ * @property {number} worldMotionAzimuth
+ */
+ worldMotionAzimuth: number;
+}
+/**
+ * @class EdgeCalculator
+ * @classdesc Represents a class for calculating node edges.
+ */
+declare class EdgeCalculator {
+ /**
+ * Create a new edge calculator instance.
+ * @param {EdgeCalculatorSettings} settings - Settings struct.
+ * @param {EdgeCalculatorDirections} directions - Directions struct.
+ * @param {EdgeCalculatorCoefficients} coefficients - Coefficients struct.
+ */
+ constructor(
+ settings?: EdgeCalculatorSettings,
+ directions?: EdgeCalculatorDirections,
+ coefficients?: EdgeCalculatorCoefficients
+ ): this;
+
+ /**
+ * Returns the potential edges to destination nodes for a set
+ * of nodes with respect to a source node.
+ * @param {Image} node - Source node.
+ * @param {Array<Image>} nodes - Potential destination nodes.
+ * @param {Array<string>} fallbackIds - Ids for destination nodes
+ * that should be returned even if they do not meet the
+ * criteria for a potential edge.
+ * @throws {ArgumentMapillaryError} If node is not full.
+ */
+ getPotentialEdges(
+ node: Image,
+ potentialImages: Image[],
+ fallbackIds: string[]
+ ): PotentialEdge[];
+
+ /**
+ * Computes the sequence edges for a node.
+ * @param {Image} node - Source node.
+ * @throws {ArgumentMapillaryError} If node is not full.
+ */
+ computeSequenceEdges(node: Image, sequence: Sequence): NavigationEdge[];
+
+ /**
+ * Computes the similar edges for a node.
+ * @description Similar edges for perspective images
+ * look roughly in the same direction and are positioned closed to the node.
+ * Similar edges for spherical only target other spherical.
+ * @param {Image} node - Source node.
+ * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
+ * @throws {ArgumentMapillaryError} If node is not full.
+ */
+ computeSimilarEdges(
+ node: Image,
+ potentialEdges: PotentialEdge[]
+ ): NavigationEdge[];
+
+ /**
+ * Computes the step edges for a perspective node.
+ * @description Step edge targets can only be other perspective nodes.
+ * Returns an empty array for spherical.
+ * @param {Image} node - Source node.
+ * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
+ * @param {string} prevId - Id of previous node in sequence.
+ * @param {string} nextId - Id of next node in sequence.
+ * @throws {ArgumentMapillaryError} If node is not full.
+ */
+ computeStepEdges(
+ node: Image,
+ potentialEdges: PotentialEdge[],
+ prevId: string,
+ nextId: string
+ ): NavigationEdge[];
+
+ /**
+ * Computes the turn edges for a perspective node.
+ * @description Turn edge targets can only be other perspective images.
+ * Returns an empty array for spherical.
+ * @param {Image} node - Source node.
+ * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
+ * @throws {ArgumentMapillaryError} If node is not full.
+ */
+ computeTurnEdges(
+ node: Image,
+ potentialEdges: PotentialEdge[]
+ ): NavigationEdge[];
+
+ /**
+ * Computes the spherical edges for a perspective node.
+ * @description Perspective to spherical edge targets can only be
+ * spherical nodes. Returns an empty array for spherical.
+ * @param {Image} node - Source node.
+ * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
+ * @throws {ArgumentMapillaryError} If node is not full.
+ */
+ computePerspectiveToSphericalEdges(
+ node: Image,
+ potentialEdges: PotentialEdge[]
+ ): NavigationEdge[];
+
+ /**
+ * Computes the spherical and step edges for a spherical node.
+ * @description Spherical to spherical edge targets can only be
+ * spherical nodes. spherical to step edge targets can only be perspective
+ * nodes.
+ * @param {Image} node - Source node.
+ * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
+ * @throws {ArgumentMapillaryError} If node is not full.
+ */
+ computeSphericalEdges(
+ node: Image,
+ potentialEdges: PotentialEdge[]
+ ): NavigationEdge[];
+}
+/**
+ * @class API
+ * @classdesc Provides methods for access to the API.
+ */
+declare class APIWrapper {
+ constructor(_data: IDataProvider): this;
+ data: IDataProvider;
+ setAccessToken(accessToken?: string): void;
+}
+/**
+ * @class Graph
+ * @classdesc Represents a graph of nodes with edges.
+ */
+declare class Graph {
+ /**
+ * Create a new graph instance.
+ * @param {APIWrapper} [api] - API instance for retrieving data.
+ * @param {rbush.RBush<NodeIndexItem>} [nodeIndex] - Node index for fast spatial retreival.
+ * @param {GraphCalculator} [graphCalculator] - Instance for graph calculations.
+ * @param {EdgeCalculator} [edgeCalculator] - Instance for edge calculations.
+ * @param {FilterCreator} [filterCreator] - Instance for filter creation.
+ * @param {GraphConfiguration} [configuration] - Configuration struct.
+ */
+ constructor(
+ api: APIWrapper,
+ nodeIndex?: mixed,
+ graphCalculator?: GraphCalculator,
+ edgeCalculator?: EdgeCalculator,
+ filterCreator?: FilterCreator,
+ configuration?: GraphConfiguration
+ ): this;
+ static register(spatialIndex: (...args: mixed[]) => mixed): void;
+
+ /**
+ * Get api.
+ * @returns {APIWrapper} The API instance used by
+ * the graph.
+ */
+ api: APIWrapper;
+
+ /**
+ * Cache sequence edges for a node.
+ * @param {string} key - Key of node.
+ * @throws {GraphMapillaryError} When the operation is not valid on the
+ * current graph.
+ */
+ cacheSequenceEdges(key: string): void;
+
+ /**
+ * Cache spatial edges for a node.
+ * @param {string} key - Key of node.
+ * @throws {GraphMapillaryError} When the operation is not valid on the
+ * current graph.
+ */
+ cacheSpatialEdges(key: string): void;
+
+ /**
+ * Initialize the cache for a node.
+ * @param {string} key - Key of node.
+ * @throws {GraphMapillaryError} When the operation is not valid on the
+ * current graph.
+ */
+ initializeCache(key: string): void;
+
+ /**
+ * Get a value indicating if the graph is fill caching a node.
+ * @param {string} key - Key of node.
+ * @returns {boolean} Value indicating if the node is being fill cached.
+ */
+ isCachingFill(key: string): boolean;
+
+ /**
+ * Get a value indicating if the graph is fully caching a node.
+ * @param {string} key - Key of node.
+ * @returns {boolean} Value indicating if the node is being fully cached.
+ */
+ isCachingFull(key: string): boolean;
+
+ /**
+ * Get a value indicating if the graph is caching a sequence of a node.
+ * @param {string} key - Key of node.
+ * @returns {boolean} Value indicating if the sequence of a node is
+ * being cached.
+ */
+ isCachingNodeSequence(key: string): boolean;
+
+ /**
+ * Get a value indicating if the graph is caching a sequence.
+ * @param {string} sequenceKey - Key of sequence.
+ * @returns {boolean} Value indicating if the sequence is
+ * being cached.
+ */
+ isCachingSequence(sequenceKey: string): boolean;
+
+ /**
+ * Get a value indicating if the graph is caching sequence nodes.
+ * @param {string} sequenceKey - Key of sequence.
+ * @returns {boolean} Value indicating if the sequence nodes are
+ * being cached.
+ */
+ isCachingSequenceNodes(sequenceKey: string): boolean;
+
+ /**
+ * Get a value indicating if the graph is caching the tiles
+ * required for calculating spatial edges of a node.
+ * @param {string} key - Key of node.
+ * @returns {boolean} Value indicating if the tiles of
+ * a node are being cached.
+ */
+ isCachingTiles(key: string): boolean;
+
+ /**
+ * Get a value indicating if the cache has been initialized
+ * for a node.
+ * @param {string} key - Key of node.
+ * @returns {boolean} Value indicating if the cache has been
+ * initialized for a node.
+ */
+ hasInitializedCache(key: string): boolean;
+
+ /**
+ * Get a value indicating if a node exist in the graph.
+ * @param {string} key - Key of node.
+ * @returns {boolean} Value indicating if a node exist in the graph.
+ */
+ hasNode(key: string): boolean;
+
+ /**
+ * Get a value indicating if a node sequence exist in the graph.
+ * @param {string} key - Key of node.
+ * @returns {boolean} Value indicating if a node sequence exist
+ * in the graph.
+ */
+ hasNodeSequence(key: string): boolean;
+
+ /**
+ * Get a value indicating if a sequence exist in the graph.
+ * @param {string} sequenceKey - Key of sequence.
+ * @returns {boolean} Value indicating if a sequence exist
+ * in the graph.
+ */
+ hasSequence(sequenceKey: string): boolean;
+
+ /**
+ * Get a value indicating if sequence nodes has been cached in the graph.
+ * @param {string} sequenceKey - Key of sequence.
+ * @returns {boolean} Value indicating if a sequence nodes has been
+ * cached in the graph.
+ */
+ hasSequenceNodes(sequenceKey: string): boolean;
+
+ /**
+ * Get a value indicating if the graph has fully cached
+ * all nodes in the spatial area of a node.
+ * @param {string} key - Key of node.
+ * @returns {boolean} Value indicating if the spatial area
+ * of a node has been cached.
+ */
+ hasSpatialArea(key: string): boolean;
+
+ /**
+ * Get a value indicating if the graph has a tiles required
+ * for a node.
+ * @param {string} key - Key of node.
+ * @returns {boolean} Value indicating if the the tiles required
+ * by a node has been cached.
+ */
+ hasTiles(key: string): boolean;
+
+ /**
+ * Get a node.
+ * @param {string} key - Key of node.
+ * @returns {Image} Retrieved node.
+ */
+ getNode(key: string): Image;
+
+ /**
+ * Get a sequence.
+ * @param {string} sequenceKey - Key of sequence.
+ * @returns {Image} Retrieved sequence.
+ */
+ getSequence(sequenceKey: string): Sequence;
+
+ /**
+ * Reset all spatial edges of the graph nodes.
+ */
+ resetSpatialEdges(): void;
+
+ /**
+ * Reset the complete graph but keep the nodes corresponding
+ * to the supplied keys. All other nodes will be disposed.
+ * @param {Array<string>} keepKeys - Keys for nodes to keep
+ * in graph after reset.
+ */
+ reset(keepKeys: string[]): void;
+
+ /**
+ * Set the spatial node filter.
+ * @emits [object Object],[object Object],[object Object]
+ * @param {FilterExpression} filter - Filter expression to be applied
+ * when calculating spatial edges.
+ */
+ setFilter(filter: FilterExpression): void;
+
+ /**
+ * Uncache the graph according to the graph configuration.
+ * @description Uncaches unused tiles, unused nodes and
+ * sequences according to the numbers specified in the
+ * graph configuration. Sequences does not have a direct
+ * reference to either tiles or nodes and may be uncached
+ * even if they are related to the nodes that should be kept.
+ * @param {Array<string>} keepIds - Ids of nodes to keep in
+ * graph unrelated to last access. Tiles related to those keys
+ * will also be kept in graph.
+ * @param {Array<string>} keepCellIds - Ids of cells to keep in
+ * graph unrelated to last access. The nodes of the cells may
+ * still be uncached if not specified in the keep ids param
+ * but are guaranteed to not be disposed.
+ * @param {string} keepSequenceId - Optional id of sequence
+ * for which the belonging nodes should not be disposed or
+ * removed from the graph. These nodes may still be uncached if
+ * not specified in keep ids param but are guaranteed to not
+ * be disposed.
+ */
+ uncache(
+ keepIds: string[],
+ keepCellIds: string[],
+ keepSequenceId?: string
+ ): void;
+
+ /**
+ * Unsubscribes all subscriptions.
+ * @description Afterwards, you must not call any other methods
+ * on the graph instance.
+ */
+ unsubscribe(): void;
+}
+/**
+ * Enumeration for graph modes.
+ * @enum {number} *
+ * @readonly
+ * @description Modes for the retrieval and caching performed
+ * by the graph service on the graph.
+ */
+
+declare var GraphMode: {|
+ +Sequence: 0, // 0
+ +Spatial: 1, // 1
+|};
+
+/**
+ * @class GraphService
+ * @classdesc Represents a service for graph operations.
+ */
+declare class GraphService {
+ /**
+ * Create a new graph service instance.
+ * @param {Graph} graph - Graph instance to be operated on.
+ */
+ constructor(graph: Graph): this;
+
+ /**
+ * Dispose the graph service and its children.
+ */
+ dispose(): void;
+
+ /**
+ * Set the graph mode.
+ * @description If graph mode is set to spatial, caching
+ * is performed with emphasis on spatial edges. If graph
+ * mode is set to sequence no tile data is requested and
+ * no spatial edges are computed.
+ *
+ * When setting graph mode to sequence all spatial
+ * subscriptions are aborted.
+ * @param {$Values<
+ typeof
+ GraphMode>} mode - Graph mode to set.
+ */
+ setGraphMode(mode: $Values<typeof GraphMode>): void;
+}
+
+declare interface CacheServiceConfiguration {
+ cellDepth: number;
+}
+declare class CacheService {
+ constructor(
+ _graphService: GraphService,
+ _stateService: StateService,
+ _api: APIWrapper
+ ): this;
+ started: boolean;
+ configure(configuration?: CacheServiceConfiguration): void;
+ start(): void;
+ stop(): void;
+}
+declare class LoadingService {
+ constructor(): this;
+ startLoading(task: string): void;
+ stopLoading(task: string): void;
+}
+/**
+ * @class Spatial
+ * @classdesc Provides methods for scalar, vector and matrix calculations.
+ */
+declare class Spatial {
+ /**
+ * Converts azimuthal phi rotation (counter-clockwise with origin on X-axis) to
+ * bearing (clockwise with origin at north or Y-axis).
+ * @param {number} phi - Azimuthal phi angle in radians.
+ * @returns {number} Bearing in radians.
+ */
+ azimuthalToBearing(phi: number): number;
+
+ /**
+ * Converts degrees to radians.
+ * @param {number} deg - Degrees.
+ * @returns {number} Radians.
+ */
+ degToRad(deg: number): number;
+
+ /**
+ * Converts radians to degrees.
+ * @param {number} rad - Radians.
+ * @returns {number} Degrees.
+ */
+ radToDeg(rad: number): number;
+
+ /**
+ * Wrap a number on the interval [min, max].
+ * @param {number} value - Value to wrap.
+ * @param {number} min - Lower endpoint of interval.
+ * @param {number} max - Upper endpoint of interval.
+ * @returns {number} The wrapped number.
+ */
+ wrap(value: number, min: number, max: number): number;
+
+ /**
+ * Wrap an angle on the interval [-Pi, Pi].
+ * @param {number} angle - Value to wrap.
+ * @returns {number} Wrapped angle.
+ */
+ wrapAngle(angle: number): number;
+
+ /**
+ * Limit the value to the interval [min, max] by changing the value to
+ * the nearest available one when it is outside the interval.
+ * @param {number} value - Value to clamp.
+ * @param {number} min - Minimum of the interval.
+ * @param {number} max - Maximum of the interval.
+ * @returns {number} Clamped value.
+ */
+ clamp(value: number, min: number, max: number): number;
+
+ /**
+ * Calculates the counter-clockwise angle from the first
+ * vector (x1, y1)^T to the second (x2, y2)^T.
+ * @param {number} x1 - X coordinate of first vector.
+ * @param {number} y1 - Y coordinate of first vector.
+ * @param {number} x2 - X coordinate of second vector.
+ * @param {number} y2 - Y coordinate of second vector.
+ * @returns {number} Counter clockwise angle between the vectors.
+ */
+ angleBetweenVector2(x1: number, y1: number, x2: number, y2: number): number;
+
+ /**
+ * Calculates the minimum (absolute) angle change for rotation
+ * from one angle to another on the [-Pi, Pi] interval.
+ * @param {number} angle1 - Start angle.
+ * @param {number} angle2 - Destination angle.
+ * @returns {number} Absolute angle change between angles.
+ */
+ angleDifference(angle1: number, angle2: number): number;
+
+ /**
+ * Calculates the relative rotation angle between two
+ * angle-axis vectors.
+ * @param {number} rotation1 - First angle-axis vector.
+ * @param {number} rotation2 - Second angle-axis vector.
+ * @returns {number} Relative rotation angle.
+ */
+ relativeRotationAngle(rotation1: number[], rotation2: number[]): number;
+
+ /**
+ * Calculates the angle from a vector to a plane.
+ * @param {Array<number>} vector - The vector.
+ * @param {Array<number>} planeNormal - Normal of the plane.
+ * @returns {number} Angle from between plane and vector.
+ */
+ angleToPlane(vector: number[], planeNormal: number[]): number;
+ azimuthal(direction: number[], up: number[]): number;
+
+ /**
+ * Calculates the distance between two coordinates
+ * (longitude, latitude pairs) in meters according to
+ * the haversine formula.
+ * @param {number} lat1 - Latitude of the first coordinate in degrees.
+ * @param {number} lng1 - Longitude of the first coordinate in degrees.
+ * @param {number} lat2 - Latitude of the second coordinate in degrees.
+ * @param {number} lng2 - Longitude of the second coordinate in degrees.
+ * @returns {number} Distance between lat lon positions in meters.
+ */
+ distanceFromLngLat(
+ lng1: number,
+ lat1: number,
+ lng2: number,
+ lat2: number
+ ): number;
+}
+/**
+ * @class ViewportCoords
+ * @classdesc Provides methods for calculating 2D coordinate conversions
+ * as well as 3D projection and unprojection.
+ *
+ * Basic coordinates are 2D coordinates on the [0, 1] interval and
+ * have the origin point, (0, 0), at the top left corner and the
+ * maximum value, (1, 1), at the bottom right corner of the original
+ * image.
+ *
+ * Viewport coordinates are 2D coordinates on the [-1, 1] interval and
+ * have the origin point in the center. The bottom left corner point is
+ * (-1, -1) and the top right corner point is (1, 1).
+ *
+ * Canvas coordiantes are 2D pixel coordinates on the [0, canvasWidth] and
+ * [0, canvasHeight] intervals. The origin point (0, 0) is in the top left
+ * corner and the maximum value is (canvasWidth, canvasHeight) is in the
+ * bottom right corner.
+ *
+ * 3D coordinates are in the topocentric world reference frame.
+ */
+declare class ViewportCoords {
+ /**
+ * Convert basic coordinates to canvas coordinates.
+ * @description Transform origin and camera position needs to be the
+ * equal for reliable return value.
+ * @param {number} basicX - Basic X coordinate.
+ * @param {number} basicY - Basic Y coordinate.
+ * @param {HTMLElement} container - The viewer container.
+ * @param {Transform} transform - Transform of the image to unproject from.
+ * @param {THREE.Camera} camera - Camera used in rendering.
+ * @returns {Array<number>} 2D canvas coordinates.
+ */
+ basicToCanvas(
+ basicX: number,
+ basicY: number,
+ container: {
+ offsetHeight: number,
+ offsetWidth: number,
+ ...
+ },
+ transform: Transform
+ ): number[];
+
+ /**
+ * Convert basic coordinates to canvas coordinates safely. If 3D point is
+ * behind camera null will be returned.
+ * @description Transform origin and camera position needs to be the
+ * equal for reliable return value.
+ * @param {number} basicX - Basic X coordinate.
+ * @param {number} basicY - Basic Y coordinate.
+ * @param {HTMLElement} container - The viewer container.
+ * @param {Transform} transform - Transform of the image to unproject from.
+ * @param {THREE.Camera} camera - Camera used in rendering.
+ * @returns {Array<number>} 2D canvas coordinates if the basic point represents a 3D point
+ * in front of the camera, otherwise null.
+ */
+ basicToCanvasSafe(
+ basicX: number,
+ basicY: number,
+ container: {
+ offsetHeight: number,
+ offsetWidth: number,
+ ...
+ },
+ transform: Transform
+ ): number[];
+
+ /**
+ * Convert basic coordinates to viewport coordinates.
+ * @description Transform origin and camera position needs to be the
+ * equal for reliable return value.
+ * @param {number} basicX - Basic X coordinate.
+ * @param {number} basicY - Basic Y coordinate.
+ * @param {Transform} transform - Transform of the image to unproject from.
+ * @param {THREE.Camera} camera - Camera used in rendering.
+ * @returns {Array<number>} 2D viewport coordinates.
+ */
+ basicToViewport(
+ basicX: number,
+ basicY: number,
+ transform: Transform
+ ): number[];
+
+ /**
+ * Convert basic coordinates to viewport coordinates safely. If 3D point is
+ * behind camera null will be returned.
+ * @description Transform origin and camera position needs to be the
+ * equal for reliable return value.
+ * @param {number} basicX - Basic X coordinate.
+ * @param {number} basicY - Basic Y coordinate.
+ * @param {Transform} transform - Transform of the image to unproject from.
+ * @param {THREE.Camera} camera - Camera used in rendering.
+ * @returns {Array<number>} 2D viewport coordinates.
+ */
+ basicToViewportSafe(
+ basicX: number,
+ basicY: number,
+ transform: Transform
+ ): number[];
+
+ /**
+ * Get canvas pixel position from event.
+ * @param {Event} event - Event containing clientX and clientY properties.
+ * @param {HTMLElement} element - HTML element.
+ * @returns {Array<number>} 2D canvas coordinates.
+ */
+ canvasPosition(
+ event: {
+ clientX: number,
+ clientY: number,
+ ...
+ },
+ element: HTMLElement
+ ): number[];
+
+ /**
+ * Convert canvas coordinates to viewport coordinates.
+ * @param {number} canvasX - Canvas X coordinate.
+ * @param {number} canvasY - Canvas Y coordinate.
+ * @param {HTMLElement} container - The viewer container.
+ * @returns {Array<number>} 2D viewport coordinates.
+ */
+ canvasToViewport(
+ canvasX: number,
+ canvasY: number,
+ container: {
+ offsetHeight: number,
+ offsetWidth: number,
+ ...
+ }
+ ): number[];
+
+ /**
+ * Determines the width and height of the container in canvas coordinates.
+ * @param {HTMLElement} container - The viewer container.
+ * @returns {Array<number>} 2D canvas coordinates.
+ */
+ containerToCanvas(container: {
+ offsetHeight: number,
+ offsetWidth: number,
+ ...
+ }): number[];
+
+ /**
+ * Determine if an event occured inside an element.
+ * @param {Event} event - Event containing clientX and clientY properties.
+ * @param {HTMLElement} element - HTML element.
+ * @returns {boolean} Value indicating if the event occured inside the element or not.
+ */
+ insideElement(
+ event: {
+ clientX: number,
+ clientY: number,
+ ...
+ },
+ element: HTMLElement
+ ): boolean;
+
+ /**
+ * Convert viewport coordinates to canvas coordinates.
+ * @param {number} viewportX - Viewport X coordinate.
+ * @param {number} viewportY - Viewport Y coordinate.
+ * @param {HTMLElement} container - The viewer container.
+ * @returns {Array<number>} 2D canvas coordinates.
+ */
+ viewportToCanvas(
+ viewportX: number,
+ viewportY: number,
+ container: {
+ offsetHeight: number,
+ offsetWidth: number,
+ ...
+ }
+ ): number[];
+}
+declare class PanService {
+ constructor(
+ graphService: GraphService,
+ stateService: StateService,
+ enabled?: boolean,
+ graphCalculator?: GraphCalculator,
+ spatial?: Spatial,
+ viewportCoords?: ViewportCoords
+ ): this;
+ dispose(): void;
+ enable(): void;
+ disable(): void;
+ start(): void;
+ stop(): void;
+}
+declare class PlayService {
+ static +sequenceSpeed: number;
+ constructor(graphService: GraphService, stateService: StateService): this;
+ playing: boolean;
+ play(): void;
+ dispose(): void;
+ setDirection(direction: $Values<typeof NavigationDirection>): void;
+ setSpeed(speed: number): void;
+ stop(): void;
+}
+declare class Navigator {
+ constructor(
+ options: ViewerOptions,
+ api?: APIWrapper,
+ graphService?: GraphService,
+ loadingService?: LoadingService,
+ stateService?: StateService,
+ cacheService?: CacheService,
+ playService?: PlayService,
+ panService?: PanService
+ ): this;
+ api: APIWrapper;
+ cacheService: CacheService;
+ graphService: GraphService;
+ loadingService: LoadingService;
+ panService: PanService;
+ playService: PlayService;
+ stateService: StateService;
+ dispose(): void;
+}
+declare class SubscriptionHolder {
+ unsubscribe(): void;
+}
+export interface IComponent {
+ /**
+ * Value indicating if the component is currently active.
+ */
+ +activated: boolean;
+
+ /**
+ * Default configuration for the component.
+ */
+ +defaultConfiguration: ComponentConfiguration;
+
+ /**
+ * The name of the component. Used when interacting with the
+ * component through the Viewer's API.
+ */
+ +name: string;
+
+ /**
+ * Configure the component.
+ */
+ configure(configuration: ComponentConfiguration): void;
+}
+/**
+ * @event
+ */
+export type ComponentEventType =
+ | "geometrycreate"
+ | "hover"
+ | "markerdragend"
+ | "markerdragstart"
+ | "markerposition"
+ | "playing"
+ | "tagcreateend"
+ | "tagcreatestart"
+ | "tagmode"
+ | "tags";
+declare class Component<TConfiguration: ComponentConfiguration>
+ implements IEventEmitter, IComponent
+{
+ static componentName: string;
+ _activated: boolean;
+ _container: Container;
+ _name: string;
+ _navigator: Navigator;
+ +_subscriptions: SubscriptionHolder;
+ constructor(name: string, container: Container, navigator: Navigator): this;
+
+ /**
+ * Get activated.
+ * @returns {boolean} Value indicating if the component is
+ * currently active.
+ */
+ activated: boolean;
+
+ /**
+ * Get default configuration.
+ * @returns {TConfiguration} Default configuration for component.
+ */
+ defaultConfiguration: TConfiguration;
+
+ /**
+ * Get name.
+ * @description The name of the component. Used when interacting with the
+ * component through the Viewer's API.
+ */
+ name: string;
+
+ /**
+ * @ignore
+ */
+ activate(conf?: TConfiguration): void;
+
+ /**
+ * Configure the component.
+ * @param configuration Component configuration.
+ */
+ configure(configuration: ComponentConfiguration): void;
+
+ /**
+ * @ignore
+ */
+ deactivate(): void;
+
+ /**
+ * @inheritdoc
+ */
+ fire<T>(type: string, event: T): void;
+
+ /**
+ * @inheritdoc
+ */
+ off<T>(type: string, handler: (event: T) => void): void;
+
+ /**
+ * @inheritdoc
+ */
+ on<T>(type: string, handler: (event: T) => void): void;
+
+ /**
+ * Detect the viewer's new width and height and resize the component's
+ * rendered elements accordingly if applicable.
+ * @ignore
+ */
+ resize(): void;
+ _activate(): void;
+ _deactivate(): void;
+ _getDefaultConfiguration(): TConfiguration;
+}
+/**
+ * @class BearingComponent
+ * @classdesc Component for indicating bearing and field of view.
+ * @example ```js
+ * var viewer = new Viewer({ ... });
+ * var bearingComponent = viewer.getComponent("bearing");
+ * bearingComponent.configure({ size: ComponentSize.Small });
+ * ```
+ */
+declare class BearingComponent extends Component<BearingConfiguration> {
+ static componentName: string;
+
+ /**
+ * @ignore
+ */
+ constructor(name: string, container: Container, navigator: Navigator): this;
+ _activate(): void;
+ _deactivate(): void;
+ _getDefaultConfiguration(): BearingConfiguration;
+}
+declare class CacheComponent extends Component<CacheConfiguration> {
+ static componentName: string;
+
+ /**
+ * @ignore
+ */
+ constructor(name: string, container: Container, navigator: Navigator): this;
+ _activate(): void;
+ _deactivate(): void;
+ _getDefaultConfiguration(): CacheConfiguration;
+}
+/**
+ * Interface for general component events.
+ */
+export interface ComponentEvent {
+ /**
+ * The component object that fired the event.
+ */
+ target: IComponent;
+
+ /**
+ * The event type.
+ */
+ type: ComponentEventType;
+}
+/**
+ * Interface for component hover events.
+ */
+export type ComponentHoverEvent = {
+ /**
+ * The image id corresponding to the element or object that
+ * is being hovered. When the mouse leaves the element or
+ * object the id will be null.
+ */
+ id: string,
+ type: "hover",
+ ...
+} & ComponentEvent;
+
+/**
+ * @class Geometry
+ * @abstract
+ * @classdesc Represents a geometry.
+ */
+declare class Geometry {
+ /**
+ * Create a geometry.
+ * @constructor
+ * @ignore
+ */
+ constructor(): this;
+
+ /**
+ * Get the 2D basic coordinates for the centroid of the geometry.
+ * @returns {Array<number>} 2D basic coordinates representing the centroid.
+ * @ignore
+ */
+ getCentroid2d(): number[];
+
+ /**
+ * Get the 3D world coordinates for the centroid of the geometry.
+ * @param {Transform} transform - The transform of the image related to the geometry.
+ * @returns {Array<number>} 3D world coordinates representing the centroid.
+ * @ignore
+ */
+ getCentroid3d(transform: Transform): number[];
+
+ /**
+ * Set the 2D centroid of the geometry.
+ * @param {Array<number>} value - The new value of the centroid in basic coordinates.
+ * @param {Transform} transform - The transform of the image related to the geometry.
+ * @ignore
+ */
+ setCentroid2d(value: number[], transform: Transform): void;
+}
+/**
+ * Interface for component geometry events.
+ */
+export type ComponentGeometryEvent = {
+ /**
+ * Geometry related to the event.
+ */
+ geometry: Geometry,
+ type: "geometrycreate",
+ ...
+} & ComponentEvent;
+
+/**
+ * @class Marker
+ * @classdesc Represents an abstract marker class that should be extended
+ * by marker implementations used in the marker component.
+ */
+declare class Marker {
+ constructor(id: string, lngLat: LngLat): this;
+
+ /**
+ * Get id.
+ * @returns {string} The id of the marker.
+ */
+ id: string;
+
+ /**
+ * Get lngLat.
+ * @returns {LngLat} The geographic coordinates of the marker.
+ */
+ lngLat: LngLat;
+
+ /**
+ * @ignore
+ */
+ createGeometry(position: number[]): void;
+
+ /**
+ * @ignore
+ */
+ disposeGeometry(): void;
+
+ /**
+ * @ignore
+ */
+ lerpAltitude(alt: number, alpha: number): void;
+
+ /**
+ * @ignore
+ */
+ updatePosition(position: number[], lngLat?: LngLat): void;
+ _createGeometry(position: number[]): void;
+ _disposeGeometry(): void;
+}
+/**
+ * Interface for component marker events.
+ */
+export type ComponentMarkerEvent = {
+ /**
+ * The marker that was affected by the event.
+ */
+ marker: Marker,
+ type: "markerdragend" | "markerdragstart" | "markerposition",
+ ...
+} & ComponentEvent;
+
+/**
+ * Interface for component play events.
+ */
+export type ComponentPlayEvent = {
+ /**
+ * Value indiciating if the component is playing or not.
+ */
+ playing: boolean,
+ type: "playing",
+ ...
+} & ComponentEvent;
+
+/**
+ * Interface for component state events.
+ * @example ```js
+ * // The `hover` event is an example of a `ComponentStateEvent`.
+ * // Set up an event listener on the direction component.
+ * var directionComponent = viewer.getComponent('direction');
+ * directionComponent.on('hover', function(e) {
+ * console.log('A hover event has occured');
+ * });
+ * ```
+ */
+export type ComponentStateEvent = {
+ type: "tagcreateend" | "tagcreatestart" | "tags",
+ ...
+} & ComponentEvent;
+
+/**
+ * Interface for component tag mode events.
+ */
+export type ComponentTagModeEvent = {
+ /**
+ * Value indicating the current tag mode of the component.
+ */
+ mode: $Values<typeof TagMode>,
+ type: "tagmode",
+ ...
+} & ComponentEvent;
+
+/**
+ * @class DirectionDOMRenderer
+ * @classdesc DOM renderer for direction arrows.
+ */
+declare class DirectionDOMRenderer {
+ constructor(configuration: DirectionConfiguration, size: ViewportSize): this;
+
+ /**
+ * Get needs render.
+ * @returns {boolean} Value indicating whether render should be called.
+ */
+ needsRender: boolean;
+
+ /**
+ * Renders virtual DOM elements.
+ * @description Calling render resets the needs render property.
+ */
+ setEdges(edgeStatus: NavigationEdgeStatus, sequence: Sequence): void;
+
+ /**
+ * Set image for which to show edges.
+ * @param {Image} image
+ */
+ setImage(image: Image): void;
+
+ /**
+ * Set the render camera to use for calculating rotations.
+ * @param {RenderCamera} renderCamera
+ */
+ setRenderCamera(renderCamera: RenderCamera): void;
+
+ /**
+ * Set configuration values.
+ * @param {DirectionConfiguration} configuration
+ */
+ setConfiguration(configuration: DirectionConfiguration): void;
+
+ /**
+ * Detect the element's width and height and resize
+ * elements accordingly.
+ * @param {ViewportSize} size Size of vßiewer container element.
+ */
+ resize(size: ViewportSize): void;
+}
+/**
+ * @class DirectionComponent
+ * @classdesc Component showing navigation arrows for steps and turns.
+ */
+declare class DirectionComponent extends Component<DirectionConfiguration> {
+ /**
+ * @inheritdoc
+ */
+ static componentName: string;
+
+ /**
+ * @ignore
+ */
+ constructor(
+ name: string,
+ container: Container,
+ navigator: Navigator,
+ directionDOMRenderer?: DirectionDOMRenderer
+ ): this;
+
+ _activate(): void;
+ _deactivate(): void;
+ _getDefaultConfiguration(): DirectionConfiguration;
+}
+declare class HandlerBase<TConfiguration: ComponentConfiguration> {
+ _component: Component<TConfiguration>;
+ _container: Container;
+ _navigator: Navigator;
+ _enabled: boolean;
+
+ /**
+ * @ignore
+ */
+ constructor(
+ component: Component<TConfiguration>,
+ container: Container,
+ navigator: Navigator
+ ): this;
+
+ /**
+ * Returns a Boolean indicating whether the interaction is enabled.
+ * @returns {boolean} `true` if the interaction is enabled.
+ */
+ isEnabled: boolean;
+
+ /**
+ * Enables the interaction.
+ * @example ```js
+ * <component-name>.<handler-name>.enable();
+ * ```
+ */
+ enable(): void;
+
+ /**
+ * Disables the interaction.
+ * @example ```js
+ * <component-name>.<handler-name>.disable();
+ * ```
+ */
+ disable(): void;
+ _enable(): void;
+ _disable(): void;
+ _getConfiguration(enable: boolean): TConfiguration;
+}
+/**
+ * The `KeySequenceNavigationHandler` allows the user to navigate through a sequence using the
+ * following key commands:
+ *
+ * `ALT` + `Up Arrow`: Navigate to next image in the sequence.
+ * `ALT` + `Down Arrow`: Navigate to previous image in sequence.
+ * @example ```js
+ * var keyboardComponent = viewer.getComponent("keyboard");
+ *
+ * keyboardComponent.keySequenceNavigation.disable();
+ * keyboardComponent.keySequenceNavigation.enable();
+ *
+ * var isEnabled = keyboardComponent.keySequenceNavigation.isEnabled;
+ * ```
+ */
+declare class KeySequenceNavigationHandler
+ extends HandlerBase<KeyboardConfiguration>
+{
+ _enable(): void;
+ _disable(): void;
+ _getConfiguration(enable: boolean): KeyboardConfiguration;
+}
+/**
+ * The `KeySpatialNavigationHandler` allows the user to navigate through a sequence using the
+ * following key commands:
+ *
+ * `Up Arrow`: Step forward.
+ * `Down Arrow`: Step backward.
+ * `Left Arrow`: Step to the left.
+ * `Rigth Arrow`: Step to the right.
+ * `SHIFT` + `Down Arrow`: Turn around.
+ * `SHIFT` + `Left Arrow`: Turn to the left.
+ * `SHIFT` + `Rigth Arrow`: Turn to the right.
+ * @example ```js
+ * var keyboardComponent = viewer.getComponent("keyboard");
+ *
+ * keyboardComponent.keySpatialNavigation.disable();
+ * keyboardComponent.keySpatialNavigation.enable();
+ *
+ * var isEnabled = keyboardComponent.keySpatialNavigation.isEnabled;
+ * ```
+ */
+declare class KeySpatialNavigationHandler
+ extends HandlerBase<KeyboardConfiguration>
+{
+ /**
+ * @ignore
+ */
+ constructor(
+ component: Component<KeyboardConfiguration>,
+ container: Container,
+ navigator: Navigator,
+ spatial: Spatial
+ ): this;
+ _enable(): void;
+ _disable(): void;
+ _getConfiguration(enable: boolean): KeyboardConfiguration;
+}
+/**
+ * The `KeyZoomHandler` allows the user to zoom in and out using the
+ * following key commands:
+ *
+ * `+`: Zoom in.
+ * `-`: Zoom out.
+ * @example ```js
+ * var keyboardComponent = viewer.getComponent("keyboard");
+ *
+ * keyboardComponent.keyZoom.disable();
+ * keyboardComponent.keyZoom.enable();
+ *
+ * var isEnabled = keyboardComponent.keyZoom.isEnabled;
+ * ```
+ */
+declare class KeyZoomHandler extends HandlerBase<KeyboardConfiguration> {
+ /**
+ * @ignore
+ */
+ constructor(
+ component: Component<KeyboardConfiguration>,
+ container: Container,
+ navigator: Navigator,
+ viewportCoords: ViewportCoords
+ ): this;
+ _enable(): void;
+ _disable(): void;
+ _getConfiguration(enable: boolean): KeyboardConfiguration;
+}
+/**
+ * The `KeyPlayHandler` allows the user to control the play behavior
+ * using the following key commands:
+ *
+ * `Spacebar`: Start or stop playing.
+ * `SHIFT` + `D`: Switch direction.
+ * `<`: Decrease speed.
+ * `>`: Increase speed.
+ * @example ```js
+ * var keyboardComponent = viewer.getComponent("keyboard");
+ *
+ * keyboardComponent.keyPlay.disable();
+ * keyboardComponent.keyPlay.enable();
+ *
+ * var isEnabled = keyboardComponent.keyPlay.isEnabled;
+ * ```
+ */
+declare class KeyPlayHandler extends HandlerBase<KeyboardConfiguration> {
+ _enable(): void;
+ _disable(): void;
+ _getConfiguration(enable: boolean): KeyboardConfiguration;
+}
+/**
+ * @class KeyboardComponent
+ * @classdesc Component for keyboard event handling.
+ *
+ * To retrive and use the keyboard component
+ * @example ```js
+ * var viewer = new Viewer({ ... });
+ *
+ * var keyboardComponent = viewer.getComponent("keyboard");
+ * ```
+ */
+declare class KeyboardComponent extends Component<KeyboardConfiguration> {
+ static componentName: string;
+
+ /**
+ * @ignore
+ */
+ constructor(name: string, container: Container, navigator: Navigator): this;
+
+ /**
+ * Get key play.
+ * @returns {KeyPlayHandler} The key play handler.
+ */
+ keyPlay: KeyPlayHandler;
+
+ /**
+ * Get key sequence navigation.
+ * @returns {KeySequenceNavigationHandler} The key sequence navigation handler.
+ */
+ keySequenceNavigation: KeySequenceNavigationHandler;
+
+ /**
+ * Get spatial.
+ * @returns {KeySpatialNavigationHandler} The spatial handler.
+ */
+ keySpatialNavigation: KeySpatialNavigationHandler;
+
+ /**
+ * Get key zoom.
+ * @returns {KeyZoomHandler} The key zoom handler.
+ */
+ keyZoom: KeyZoomHandler;
+ _activate(): void;
+ _deactivate(): void;
+ _getDefaultConfiguration(): KeyboardConfiguration;
+}
+/**
+ * @interface CircleMarkerOptions
+ *
+ * Interface that represents the options for configuring a `CircleMarker`.
+ */
+export interface CircleMarkerOptions {
+ /**
+ * The color of the marker.
+ * @default "#fff"
+ */
+ color?: number | string;
+
+ /**
+ * The opacity of the marker.
+ * @default 0.4
+ */
+ opacity?: number;
+
+ /**
+ * The radius of the circle in meters.
+ * @default 1
+ */
+ radius?: number;
+}
+/**
+ * @class CircleMarker
+ * @classdesc Non-interactive marker with a flat circle shape. The circle
+ * marker can not be configured to be interactive.
+ *
+ * Circle marker properties can not be updated after creation.
+ *
+ * To create and add one `CircleMarker` with default configuration
+ * and one with configuration use
+ * @example ```js
+ * var defaultMarker = new CircleMarker(
+ * "id-1",
+ * { lat: 0, lng: 0, });
+ *
+ * var configuredMarker = new CircleMarker(
+ * "id-2",
+ * { lat: 0, lng: 0, },
+ * {
+ * color: "#0ff",
+ * opacity: 0.3,
+ * radius: 0.7,
+ * });
+ *
+ * markerComponent.add([defaultMarker, configuredMarker]);
+ * ```
+ */
+declare class CircleMarker extends Marker {
+ constructor(id: string, lngLat: LngLat, options?: CircleMarkerOptions): this;
+ _createGeometry(position: number[]): void;
+ _disposeGeometry(): void;
+}
+/**
+ * @class MarkerComponent
+ * @classdesc Component for showing and editing 3D marker objects.
+ *
+ * The `add` method is used for adding new markers or replacing
+ * markers already in the set.
+ *
+ * If a marker already in the set has the same
+ * id as one of the markers added, the old marker will be removed and
+ * the added marker will take its place.
+ *
+ * It is not possible to update markers in the set by updating any properties
+ * directly on the marker object. Markers need to be replaced by
+ * re-adding them for updates to geographic position or configuration
+ * to be reflected.
+ *
+ * Markers added to the marker component can be either interactive
+ * or non-interactive. Different marker types define their behavior.
+ * Markers with interaction support can be configured with options
+ * to respond to dragging inside the viewer and be detected when
+ * retrieving markers from pixel points with the `getMarkerIdAt` method.
+ *
+ * To retrive and use the marker component
+ * @example ```js
+ * var viewer = new Viewer({ component: { marker: true }, ... });
+ *
+ * var markerComponent = viewer.getComponent("marker");
+ * ```
+ */
+declare class MarkerComponent extends Component<MarkerConfiguration> {
+ static componentName: string;
+
+ /**
+ * @ignore
+ */
+ constructor(name: string, container: Container, navigator: Navigator): this;
+
+ /**
+ * Add markers to the marker set or replace markers in the marker set.
+ * @description If a marker already in the set has the same
+ * id as one of the markers added, the old marker will be removed
+ * the added marker will take its place.
+ *
+ * Any marker inside the visible bounding bbox
+ * will be initialized and placed in the viewer.
+ * @param {Array<Marker>} markers - Markers to add.
+ * @example ```js
+ * markerComponent.add([marker1, marker2]);
+ * ```
+ */
+ add(markers: Marker[]): void;
+
+ /**
+ * Returns the marker in the marker set with the specified id, or
+ * undefined if the id matches no marker.
+ * @param {string} markerId - Id of the marker.
+ * @example ```js
+ * var marker = markerComponent.get("markerId");
+ * ```
+ */
+ get(markerId: string): Marker;
+
+ /**
+ * Returns an array of all markers.
+ * @example ```js
+ * var markers = markerComponent.getAll();
+ * ```
+ */
+ getAll(): Marker[];
+
+ /**
+ * Returns the id of the interactive marker closest to the current camera
+ * position at the specified point.
+ * @description Notice that the pixelPoint argument requires x, y
+ * coordinates from pixel space.
+ *
+ * With this function, you can use the coordinates provided by mouse
+ * events to get information out of the marker component.
+ *
+ * If no interactive geometry of an interactive marker exist at the pixel
+ * point, `null` will be returned.
+ * @param {Array<number>} pixelPoint - Pixel coordinates on the viewer element.
+ * @returns {string} Id of the interactive marker closest to the camera. If no
+ * interactive marker exist at the pixel point, `null` will be returned.
+ * @example ```js
+ * markerComponent.getMarkerIdAt([100, 100])
+ * .then((markerId) => { console.log(markerId); });
+ * ```
+ */
+ getMarkerIdAt(pixelPoint: number[]): Promise<string>;
+
+ /**
+ * Check if a marker exist in the marker set.
+ * @param {string} markerId - Id of the marker.
+ * @example ```js
+ * var markerExists = markerComponent.has("markerId");
+ * ```
+ */
+ has(markerId: string): boolean;
+
+ /**
+ * Remove markers with the specified ids from the marker set.
+ * @param {Array<string>} markerIds - Ids for markers to remove.
+ * @example ```js
+ * markerComponent.remove(["id-1", "id-2"]);
+ * ```
+ */
+ remove(markerIds: string[]): void;
+
+ /**
+ * Remove all markers from the marker set.
+ * @example ```js
+ * markerComponent.removeAll();
+ * ```
+ */
+ removeAll(): void;
+ _activate(): void;
+ _deactivate(): void;
+ _getDefaultConfiguration(): MarkerConfiguration;
+}
+/**
+ * @interface SimpleMarkerOptions
+ *
+ * Interface that represents the options for configuring a `SimpleMarker`.
+ */
+export interface SimpleMarkerOptions {
+ /**
+ * The color of the ball inside the marker.
+ * @default "#f00"
+ */
+ ballColor?: number | string;
+
+ /**
+ * The opacity of the ball inside the marker.
+ * @default 0.8
+ */
+ ballOpacity?: number;
+
+ /**
+ * The color of the ice creame shape.
+ * @default "#f00"
+ */
+ color?: number | string;
+
+ /**
+ * Value indicating if the marker should be interactive or not.
+ * @description If the marker is configured to be interactive
+ * it will be draggable in the viewer and retrievable with the
+ * `getMarkerIdAt` method on the `MarkerComponent`.
+ * @default false
+ */
+ interactive?: boolean;
+
+ /**
+ * The opacity of the ice creame shape.
+ * @default 0.4
+ */
+ opacity?: number;
+
+ /**
+ * The radius of the ice cream shape in meters.
+ * @default 1
+ */
+ radius?: number;
+}
+/**
+ * @class SimpleMarker
+ * @classdesc Interactive marker with ice cream shape. The sphere
+ * inside the ice cream can be configured to be interactive.
+ *
+ * Simple marker properties can not be updated after creation.
+ *
+ * To create and add one `SimpleMarker` with default configuration
+ * (non-interactive) and one interactive with configuration use
+ * @example ```js
+ * var defaultMarker = new SimpleMarker(
+ * "id-1",
+ * { lat: 0, lng: 0, });
+ *
+ * var interactiveMarker = new SimpleMarker(
+ * "id-2",
+ * { lat: 0, lng: 0, },
+ * {
+ * ballColor: "#00f",
+ * ballOpacity: 0.5,
+ * color: "#00f",
+ * interactive: true,
+ * opacity: 0.3,
+ * radius: 0.7,
+ * });
+ *
+ * markerComponent.add([defaultMarker, interactiveMarker]);
+ * ```
+ */
+declare class SimpleMarker extends Marker {
+ constructor(id: string, lngLat: LngLat, options?: SimpleMarkerOptions): this;
+ _createGeometry(position: number[]): void;
+ _disposeGeometry(): void;
+}
+/**
+ * The `DragPanHandler` allows the user to pan the viewer image by clicking and dragging the cursor.
+ * @example ```js
+ * var pointerComponent = viewer.getComponent("pointer");
+ *
+ * pointerComponent.dragPan.disable();
+ * pointerComponent.dragPan.enable();
+ *
+ * var isEnabled = pointerComponent.dragPan.isEnabled;
+ * ```
+ */
+declare class DragPanHandler extends HandlerBase<PointerConfiguration> {
+ /**
+ * @ignore
+ */
+ constructor(
+ component: Component<PointerConfiguration>,
+ container: Container,
+ navigator: Navigator,
+ viewportCoords: ViewportCoords,
+ spatial: Spatial
+ ): this;
+ _enable(): void;
+ _disable(): void;
+ _getConfiguration(enable: boolean): PointerConfiguration;
+}
+declare class EarthControlHandler extends HandlerBase<PointerConfiguration> {
+ /**
+ * @ignore
+ */
+ constructor(
+ component: Component<PointerConfiguration>,
+ container: Container,
+ navigator: Navigator,
+ viewportCoords: ViewportCoords,
+ spatial: Spatial
+ ): this;
+ _enable(): void;
+ _disable(): void;
+ _getConfiguration(): PointerConfiguration;
+}
+/**
+ * The `ScrollZoomHandler` allows the user to zoom the viewer image by scrolling.
+ * @example ```js
+ * var pointerComponent = viewer.getComponent("pointer");
+ *
+ * pointerComponent.scrollZoom.disable();
+ * pointerComponent.scrollZoom.enable();
+ *
+ * var isEnabled = pointerComponent.scrollZoom.isEnabled;
+ * ```
+ */
+declare class ScrollZoomHandler extends HandlerBase<PointerConfiguration> {
+ /**
+ * @ignore
+ */
+ constructor(
+ component: Component<PointerConfiguration>,
+ container: Container,
+ navigator: Navigator,
+ viewportCoords: ViewportCoords
+ ): this;
+ _enable(): void;
+ _disable(): void;
+ _getConfiguration(enable: boolean): PointerConfiguration;
+}
+/**
+ * The `TouchZoomHandler` allows the user to zoom the viewer image by pinching on a touchscreen.
+ * @example ```js
+ * var pointerComponent = viewer.getComponent("pointer");
+ *
+ * pointerComponent.touchZoom.disable();
+ * pointerComponent.touchZoom.enable();
+ *
+ * var isEnabled = pointerComponent.touchZoom.isEnabled;
+ * ```
+ */
+declare class TouchZoomHandler extends HandlerBase<PointerConfiguration> {
+ /**
+ * @ignore
+ */
+ constructor(
+ component: Component<PointerConfiguration>,
+ container: Container,
+ navigator: Navigator,
+ viewportCoords: ViewportCoords
+ ): this;
+ _enable(): void;
+ _disable(): void;
+ _getConfiguration(enable: boolean): PointerConfiguration;
+}
+/**
+ * @class PointerComponent
+ * @classdesc Component handling mouse, pen, and touch events for camera movement.
+ *
+ * To retrive and use the mouse component
+ * @example ```js
+ * var viewer = new Viewer({ ... });
+ *
+ * var pointerComponent = viewer.getComponent("pointer");
+ * ```
+ */
+declare class PointerComponent extends Component<PointerConfiguration> {
+ /**
+ * @inheritdoc
+ */
+ static componentName: string;
+
+ /**
+ * @ignore
+ */
+ constructor(name: string, container: Container, navigator: Navigator): this;
+
+ /**
+ * Get drag pan.
+ * @returns {DragPanHandler} The drag pan handler.
+ */
+ dragPan: DragPanHandler;
+
+ /**
+ * Get earth control.
+ * @returns {EarthControlHandler} The earth control handler.
+ */
+ earthControl: EarthControlHandler;
+
+ /**
+ * Get scroll zoom.
+ * @returns {ScrollZoomHandler} The scroll zoom handler.
+ */
+ scrollZoom: ScrollZoomHandler;
+
+ /**
+ * Get touch zoom.
+ * @returns {TouchZoomHandler} The touch zoom handler.
+ */
+ touchZoom: TouchZoomHandler;
+ _activate(): void;
+ _deactivate(): void;
+ _getDefaultConfiguration(): PointerConfiguration;
+}
+/**
+ * Interface for the popup offset with respect to its anchor point.
+ * @description An object of number arrays specifying an offset for
+ * each float direction. Negative offsets indicate left and up.
+ * @interface
+ * @example ```js
+ * var offset = = {
+ * bottom: [0, 10],
+ * bottomLeft: [-10, 10],
+ * bottomRight: [10, 10],
+ * center: [0, 0],
+ * left: [-10, 0],
+ * right: [10, 0],
+ * top: [0, -10],
+ * topLeft: [-10, -10],
+ * topRight: [10, -10],
+ * }
+ *
+ * var popup = new Popup({ offset: offset });
+ * ```
+ */
+export interface PopupOffset {
+ bottom: number[];
+ bottomLeft: number[];
+ bottomRight: number[];
+ center: number[];
+ left: number[];
+ right: number[];
+ top: number[];
+ topLeft: number[];
+ topRight: number[];
+}
+/**
+ * Interface for the options that define behavior and
+ * appearance of a popup.
+ * @interface
+ */
+export interface PopupOptions {
+ /**
+ * Specify if the popup should capture pointer events.
+ * @description If the popup is specified to not capture
+ * pointer events the provided content can still override
+ * this behavior for the individual content HTML elements
+ * by specifying the appropriate CSS.
+ * @default true
+ */
+ capturePointer?: boolean;
+
+ /**
+ * Specify that the popup should not have any tooltip
+ * like visuals around the provided content.
+ * @default false
+ */
+ clean?: boolean;
+
+ /**
+ * The direction in which the popup floats with respect to the
+ * anchor point or points. If no value is supplied the popup
+ * will change float automatically based on the its position
+ * in the viewport so that as much of its area as possible is
+ * visible.
+ * @description For automatic floating (undefined) the popup
+ * will float in eight directions around a point or a position
+ * in a rect. When a rectangle is set without a position option
+ * specified, the popup will float outward from the rectangle
+ * center based on the side it is currently rendered in. The
+ * default floating direction is to the bottom for both points
+ * and rectangles.
+ * @default undefined
+ */
+ float?: $Values<typeof Alignment>;
+
+ /**
+ * A pixel offset applied to the popup's location specfied as:
+ *
+ * - A single number in pixels in the float direction that the popup
+ * will be translated with respect to the current anchor point.
+ *
+ * - An object of number arrays specifying an offset for
+ * each float direction. Negative offsets indicate left and up.
+ * @default 0
+ */
+ offset?: number | PopupOffset;
+
+ /**
+ * Opacity of the popup visuals.
+ * @default 1
+ */
+ opacity?: number;
+
+ /**
+ * The popup position in a rectangle (does not apply to points).
+ * When not set the popup will change position automatically
+ * based on the viewport so that as much of it as possible is
+ * visible.
+ * @default undefined
+ */
+ position?: $Values<typeof Alignment>;
+}
+/**
+ * @class Popup
+ * @classdesc [object Object],[object Object],[object Object]
+ * @example ```js
+ * var defaultSpan = document.createElement('span');
+ * defaultSpan.innerHTML = 'hello default';
+ *
+ * var defaultPopup = new Popup();
+ * defaultPopup.setDOMContent(defaultSpan);
+ * defaultPopup.setBasicPoint([0.3, 0.3]);
+ *
+ * var cleanSpan = document.createElement('span');
+ * cleanSpan.innerHTML = 'hello clean';
+ *
+ * var cleanPopup = new Popup({
+ * clean: true,
+ * float: Alignment.Top,
+ * offset: 10,
+ * opacity: 0.7,
+ * });
+ *
+ * cleanPopup.setDOMContent(cleanSpan);
+ * cleanPopup.setBasicPoint([0.6, 0.6]);
+ *
+ * popupComponent.add([defaultPopup, cleanPopup]);
+ * ```
+ * @description Implementation of API methods and API documentation inspired
+ * by/used from https://github.com/mapbox/mapbox-gl-js/blob/v0.38.0/src/ui/popup.js
+ */
+declare class Popup {
+ constructor(
+ options?: PopupOptions,
+ viewportCoords?: ViewportCoords,
+ dom?: DOM
+ ): this;
+
+ /**
+ * @description Internal method used by the component to
+ * remove all references to the popup.
+ * @ignore
+ */
+ remove(): void;
+
+ /**
+ * Sets a 2D basic image coordinates point to the popup's anchor, and
+ * moves the popup to it.
+ * @description Overwrites any previously set point or rect.
+ * @param {Array<number>} basicPoint - Point in 2D basic image coordinates.
+ * @example ```js
+ * var popup = new Popup();
+ * popup.setText('hello image');
+ * popup.setBasicPoint([0.3, 0.3]);
+ *
+ * popupComponent.add([popup]);
+ * ```
+ */
+ setBasicPoint(basicPoint: number[]): void;
+
+ /**
+ * Sets a 2D basic image coordinates rect to the popup's anchor, and
+ * moves the popup to it.
+ * @description Overwrites any previously set point or rect.
+ * @param {Array<number>} basicRect - Rect in 2D basic image
+ * coordinates ([topLeftX, topLeftY, bottomRightX, bottomRightY]) .
+ * @example ```js
+ * var popup = new Popup();
+ * popup.setText('hello image');
+ * popup.setBasicRect([0.3, 0.3, 0.5, 0.6]);
+ *
+ * popupComponent.add([popup]);
+ * ```
+ */
+ setBasicRect(basicRect: number[]): void;
+
+ /**
+ * Sets the popup's content to the element provided as a DOM node.
+ * @param {Node} htmlNode - A DOM node to be used as content for the popup.
+ * @example ```js
+ * var div = document.createElement('div');
+ * div.innerHTML = 'hello image';
+ *
+ * var popup = new Popup();
+ * popup.setDOMContent(div);
+ * popup.setBasicPoint([0.3, 0.3]);
+ *
+ * popupComponent.add([popup]);
+ * ```
+ */
+ setDOMContent(htmlNode: Node): void;
+
+ /**
+ * Sets the popup's content to the HTML provided as a string.
+ * @description [object Object],[object Object],[object Object]
+ * @param {string} html - A string representing HTML content for the popup.
+ * @example ```js
+ * var popup = new Popup();
+ * popup.setHTML('<div>hello image</div>');
+ * popup.setBasicPoint([0.3, 0.3]);
+ *
+ * popupComponent.add([popup]);
+ * ```
+ */
+ setHTML(html: string): void;
+
+ /**
+ * Sets the popup's content to a string of text.
+ * @description This function creates a Text node in the DOM, so it cannot insert raw HTML.
+ * Use this method for security against XSS if the popup content is user-provided.
+ * @param {string} text - Textual content for the popup.
+ * @example ```js
+ * var popup = new Popup();
+ * popup.setText('hello image');
+ * popup.setBasicPoint([0.3, 0.3]);
+ *
+ * popupComponent.add([popup]);
+ * ```
+ */
+ setText(text: string): void;
+
+ /**
+ * @description Internal method for attaching the popup to
+ * its parent container so that it is rendered in the DOM tree.
+ * @ignore
+ */
+ setParentContainer(parentContainer: HTMLElement): void;
+
+ /**
+ * @description Internal method for updating the rendered
+ * position of the popup called by the popup component.
+ * @ignore
+ */
+ update(
+ renderCamera: RenderCamera,
+ size: ViewportSize,
+ transform: Transform
+ ): void;
+}
+/**
+ * @class PopupComponent
+ * @classdesc Component for showing HTML popup objects.
+ *
+ * The `add` method is used for adding new popups. Popups are removed by reference.
+ *
+ * It is not possible to update popups in the set by updating any properties
+ * directly on the popup object. Popups need to be replaced by
+ * removing them and creating new ones with relevant changed properties and
+ * adding those instead.
+ *
+ * Popups are only relevant to a single image because they are based on
+ * 2D basic image coordinates. Popups related to a certain image should
+ * be removed when the viewer is moved to another image.
+ *
+ * To retrive and use the popup component
+ * @example ```js
+ * var viewer = new Viewer({ component: { popup: true }, ... });
+ *
+ * var popupComponent = viewer.getComponent("popup");
+ * ```
+ */
+declare class PopupComponent extends Component<ComponentConfiguration> {
+ static componentName: string;
+
+ /**
+ * @ignore
+ */
+ constructor(
+ name: string,
+ container: Container,
+ navigator: Navigator,
+ dom?: DOM
+ ): this;
+
+ /**
+ * Add popups to the popups set.
+ * @description Adding a new popup never replaces an old one
+ * because they are stored by reference. Adding an already
+ * existing popup has no effect.
+ * @param {Array<Popup>} popups - Popups to add.
+ * @example ```js
+ * popupComponent.add([popup1, popup2]);
+ * ```
+ */
+ add(popups: Popup[]): void;
+
+ /**
+ * Returns an array of all popups.
+ * @example ```js
+ * var popups = popupComponent.getAll();
+ * ```
+ */
+ getAll(): Popup[];
+
+ /**
+ * Remove popups based on reference from the popup set.
+ * @param {Array<Popup>} popups - Popups to remove.
+ * @example ```js
+ * popupComponent.remove([popup1, popup2]);
+ * ```
+ */
+ remove(popups: Popup[]): void;
+
+ /**
+ * Remove all popups from the popup set.
+ * @example ```js
+ * popupComponent.removeAll();
+ * ```
+ */
+ removeAll(): void;
+ _activate(): void;
+ _deactivate(): void;
+ _getDefaultConfiguration(): ComponentConfiguration;
+}
+declare class SequenceDOMRenderer {
+ constructor(container: Container): this;
+ activate(): void;
+ deactivate(): void;
+ getContainerWidth(
+ size: ViewportSize,
+ configuration: SequenceConfiguration
+ ): number;
+}
+/**
+ * @class SequenceComponent
+ * @classdesc Component showing navigation arrows for sequence directions
+ * as well as playing button. Exposes an API to start and stop play.
+ */
+declare class SequenceComponent extends Component<SequenceConfiguration> {
+ /**
+ * @inheritdoc
+ */
+ static componentName: string;
+ constructor(
+ name: string,
+ container: Container,
+ navigator: Navigator,
+ renderer?: SequenceDOMRenderer
+ ): this;
+
+ /**
+ * Start playing.
+ * @fires playing
+ */
+ play(): void;
+
+ /**
+ * Stop playing.
+ * @fires playing
+ */
+ stop(): void;
+ _activate(): void;
+ _deactivate(): void;
+ _getDefaultConfiguration(): SequenceConfiguration;
+}
+/**
+ * @class SliderComponent
+ * @classdesc Component for comparing pairs of images. Renders
+ * a slider for adjusting the curtain of the first image.
+ *
+ * Deactivate the sequence, direction and image plane
+ * components when activating the slider component to avoid
+ * interfering UI elements.
+ *
+ * To retrive and use the slider component
+ * @example ```js
+ * var viewer = new Viewer({ ... });
+ *
+ * viewer.deactivateComponent("image");
+ * viewer.deactivateComponent("direction");
+ * viewer.deactivateComponent("sequence");
+ *
+ * viewer.activateComponent("slider");
+ *
+ * var sliderComponent = viewer.getComponent("slider");
+ * ```
+ */
+declare class SliderComponent extends Component<SliderConfiguration> {
+ static componentName: string;
+
+ /**
+ * @ignore
+ */
+ constructor(
+ name: string,
+ container: Container,
+ navigator: Navigator,
+ viewportCoords?: ViewportCoords
+ ): this;
+ _activate(): void;
+ _deactivate(): void;
+ _getDefaultConfiguration(): SliderConfiguration;
+}
+declare class SpatialComponent extends Component<SpatialConfiguration> {
+ static componentName: string;
+
+ /**
+ * @ignore
+ */
+ constructor(name: string, container: Container, navigator: Navigator): this;
+
+ /**
+ * Returns the image id of the camera frame closest to the current
+ * render camera position at the specified point.
+ * @description Notice that the pixelPoint argument requires x, y
+ * coordinates from pixel space.
+ *
+ * With this function, you can use the coordinates provided by mouse
+ * events to get information out of the spatial component.
+ *
+ * If no camera frame exist at the pixel
+ * point, `null` will be returned.
+ * @param {Array<number>} pixelPoint - Pixel coordinates on
+ * the viewer element.
+ * @returns {string} Image id of the camera frame closest to
+ * the camera. If no camera frame is intersected at the
+ * pixel point, `null` will be returned.
+ * @example ```js
+ * spatialComponent.getFrameIdAt([100, 125])
+ * .then((imageId) => { console.log(imageId); });
+ * ```
+ */
+ getFrameIdAt(pixelPoint: number[]): Promise<string>;
+ _activate(): void;
+ _deactivate(): void;
+ _getDefaultConfiguration(): SpatialConfiguration;
+}
+declare class GeometryTagError extends MapillaryError {
+ constructor(message?: string): this;
+}
+/**
+ * @class PointGeometry
+ * @classdesc Represents a point geometry in the 2D basic image coordinate system.
+ * @example ```js
+ * var basicPoint = [0.5, 0.7];
+ * var pointGeometry = new PointGeometry(basicPoint);
+ * ```
+ */
+declare class PointGeometry extends Geometry {
+ /**
+ * Create a point geometry.
+ * @constructor
+ * @param {Array<number>} point - An array representing the basic coordinates of
+ * the point.
+ * @throws {GeometryTagError} Point coordinates must be valid basic coordinates.
+ */
+ constructor(point: number[]): this;
+
+ /**
+ * Get point property.
+ * @returns {Array<number>} Array representing the basic coordinates of the point.
+ */
+ point: number[];
+
+ /**
+ * Get the 2D basic coordinates for the centroid of the point, i.e. the 2D
+ * basic coordinates of the point itself.
+ * @returns {Array<number>} 2D basic coordinates representing the centroid.
+ * @ignore
+ */
+ getCentroid2d(): number[];
+
+ /**
+ * Get the 3D world coordinates for the centroid of the point, i.e. the 3D
+ * world coordinates of the point itself.
+ * @param {Transform} transform - The transform of the image related to the point.
+ * @returns {Array<number>} 3D world coordinates representing the centroid.
+ * @ignore
+ */
+ getCentroid3d(transform: Transform): number[];
+
+ /**
+ * Set the centroid of the point, i.e. the point coordinates.
+ * @param {Array<number>} value - The new value of the centroid.
+ * @param {Transform} transform - The transform of the image related to the point.
+ * @ignore
+ */
+ setCentroid2d(value: number[], transform: Transform): void;
+}
+/**
+ * @class PointsGeometry
+ * @classdesc Represents a point set in the 2D basic image coordinate system.
+ * @example ```js
+ * var points = [[0.5, 0.3], [0.7, 0.3], [0.6, 0.5]];
+ * var pointsGeometry = new PointsGeometry(points);
+ * ```
+ */
+declare class PointsGeometry extends Geometry {
+ /**
+ * Create a points geometry.
+ * @constructor
+ * @param {Array<Array<number>>} points - Array of 2D points on the basic coordinate
+ * system. The number of points must be greater than or equal to two.
+ * @throws {GeometryTagError} Point coordinates must be valid basic coordinates.
+ */
+ constructor(points: number[][]): this;
+
+ /**
+ * Get points property.
+ * @returns {Array<Array<number>>} Array of 2d points.
+ */
+ points: number[][];
+
+ /**
+ * Add a point to the point set.
+ * @param {Array<number>} point - Point to add.
+ * @ignore
+ */
+ addPoint2d(point: number[]): void;
+
+ /**
+ * Get the coordinates of a point from the point set representation of the geometry.
+ * @param {number} index - Point index.
+ * @returns {Array<number>} Array representing the 2D basic coordinates of the point.
+ * @ignore
+ */
+ getPoint2d(index: number): number[];
+
+ /**
+ * Remove a point from the point set.
+ * @param {number} index - The index of the point to remove.
+ * @ignore
+ */
+ removePoint2d(index: number): void;
+
+ /**
+ * @ignore
+ */
+ setVertex2d(index: number, value: number[], transform: Transform): void;
+
+ /**
+ * @ignore
+ */
+ setPoint2d(index: number, value: number[], transform: Transform): void;
+
+ /**
+ * @ignore
+ */
+ getPoints3d(transform: Transform): number[][];
+
+ /**
+ * @ignore
+ */
+ getPoint3d(index: number, transform: Transform): number[];
+
+ /**
+ * @ignore
+ */
+ getPoints2d(): number[][];
+
+ /**
+ * @ignore
+ */
+ getCentroid2d(transform?: Transform): number[];
+
+ /**
+ * @ignore
+ */
+ getCentroid3d(transform: Transform): number[];
+
+ /**
+ * @ignore
+ */
+ getRect2d(transform: Transform): number[];
+
+ /**
+ * @ignore
+ */
+ setCentroid2d(value: number[], transform: Transform): void;
+}
+/**
+ * @class VertexGeometry
+ * @abstract
+ * @classdesc Represents a vertex geometry.
+ */
+declare class VertexGeometry extends Geometry {
+ /**
+ * Create a vertex geometry.
+ * @constructor
+ * @ignore
+ */
+ constructor(): this;
+
+ /**
+ * Get the 3D coordinates for the vertices of the geometry with possibly
+ * subsampled points along the lines.
+ * @param {Transform} transform - The transform of the image related to
+ * the geometry.
+ * @returns {Array<Array<number>>} Polygon array of 3D world coordinates
+ * representing the geometry.
+ * @ignore
+ */
+ getPoints3d(transform: Transform): number[][];
+
+ /**
+ * Get the polygon pole of inaccessibility, the most
+ * distant internal point from the polygon outline.
+ * @returns {Array<number>} 2D basic coordinates for the pole of inaccessibility.
+ * @ignore
+ */
+ getPoleOfInaccessibility2d(): number[];
+
+ /**
+ * Get the polygon pole of inaccessibility, the most
+ * distant internal point from the polygon outline.
+ * @param transform - The transform of the image related to
+ * the geometry.
+ * @returns {Array<number>} 3D world coordinates for the pole of inaccessibility.
+ * @ignore
+ */
+ getPoleOfInaccessibility3d(transform: Transform): number[];
+
+ /**
+ * Get the coordinates of a vertex from the polygon representation of the geometry.
+ * @param {number} index - Vertex index.
+ * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
+ * @ignore
+ */
+ getVertex2d(index: number): number[];
+
+ /**
+ * Get a vertex from the polygon representation of the 3D coordinates for the
+ * vertices of the geometry.
+ * @param {number} index - Vertex index.
+ * @param {Transform} transform - The transform of the image related to the geometry.
+ * @returns {Array<number>} Array representing the 3D world coordinates of the vertex.
+ * @ignore
+ */
+ getVertex3d(index: number, transform: Transform): number[];
+
+ /**
+ * Get a polygon representation of the 2D basic coordinates for the vertices of the geometry.
+ * @returns {Array<Array<number>>} Polygon array of 2D basic coordinates representing
+ * the vertices of the geometry.
+ * @ignore
+ */
+ getVertices2d(): number[][];
+
+ /**
+ * Get a polygon representation of the 3D world coordinates for the vertices of the geometry.
+ * @param {Transform} transform - The transform of the image related to the geometry.
+ * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
+ * the vertices of the geometry.
+ * @ignore
+ */
+ getVertices3d(transform: Transform): number[][];
+
+ /**
+ * Get a flattend array of the 3D world coordinates for the
+ * triangles filling the geometry.
+ * @param {Transform} transform - The transform of the image related to the geometry.
+ * @returns {Array<number>} Flattened array of 3D world coordinates of the triangles.
+ * @ignore
+ */
+ getTriangles3d(transform: Transform): number[];
+
+ /**
+ * Set the value of a vertex in the polygon representation of the geometry.
+ * @description The polygon is defined to have the first vertex at the
+ * bottom-left corner with the rest of the vertices following in clockwise order.
+ * @param {number} index - The index of the vertex to be set.
+ * @param {Array<number>} value - The new value of the vertex.
+ * @param {Transform} transform - The transform of the image related to the geometry.
+ * @ignore
+ */
+ setVertex2d(index: number, value: number[], transform: Transform): void;
+
+ /**
+ * Finds the polygon pole of inaccessibility, the most distant internal
+ * point from the polygon outline.
+ * @param {Array<Array<number>>} points2d - 2d points of outline to triangulate.
+ * @returns {Array<number>} Point of inaccessibility.
+ * @ignore
+ */
+ _getPoleOfInaccessibility2d(points2d: number[][]): number[];
+ _project(points2d: number[][], transform: Transform): number[][];
+ _subsample(points2d: number[][], threshold?: number): number[][];
+
+ /**
+ * Triangulates a 2d polygon and returns the triangle
+ * representation as a flattened array of 3d points.
+ * @param {Array<Array<number>>} points2d - 2d points of outline to triangulate.
+ * @param {Array<Array<number>>} points3d - 3d points of outline corresponding to the 2d points.
+ * @param {Array<Array<Array<number>>>} [holes2d] - 2d points of holes to triangulate.
+ * @param {Array<Array<Array<number>>>} [holes3d] - 3d points of holes corresponding to the 2d points.
+ * @returns {Array<number>} Flattened array of 3d points ordered based on the triangles.
+ * @ignore
+ */
+ _triangulate(
+ points2d: number[][],
+ points3d: number[][],
+ holes2d?: number[][][],
+ holes3d?: number[][][]
+ ): number[];
+ _triangulateSpherical(
+ points2d: number[][],
+ holes2d: number[][][],
+ transform: Transform
+ ): number[];
+ _unproject(
+ points2d: number[][],
+ transform: Transform,
+ distance?: number
+ ): number[][];
+}
+/**
+ * @class PolygonGeometry
+ * @classdesc Represents a polygon geometry in the 2D basic image coordinate system.
+ * All polygons and holes provided to the constructor needs to be closed.
+ * @example ```js
+ * var basicPolygon = [[0.5, 0.3], [0.7, 0.3], [0.6, 0.5], [0.5, 0.3]];
+ * var polygonGeometry = new PolygonGeometry(basicPolygon);
+ * ```
+ */
+declare class PolygonGeometry extends VertexGeometry {
+ /**
+ * Create a polygon geometry.
+ * @constructor
+ * @param {Array<Array<number>>} polygon - Array of polygon vertices. Must be closed.
+ * @param {Array<Array<Array<number>>>} [holes] - Array of arrays of hole vertices.
+ * Each array of holes vertices must be closed.
+ * @throws {GeometryTagError} Polygon coordinates must be valid basic coordinates.
+ */
+ constructor(polygon: number[][], holes?: number[][][]): this;
+
+ /**
+ * Get polygon property.
+ * @returns {Array<Array<number>>} Closed 2d polygon.
+ */
+ polygon: number[][];
+
+ /**
+ * Get holes property.
+ * @returns {Array<Array<Array<number>>>} Holes of 2d polygon.
+ */
+ holes: number[][][];
+
+ /**
+ * Add a vertex to the polygon by appending it after the last vertex.
+ * @param {Array<number>} vertex - Vertex to add.
+ * @ignore
+ */
+ addVertex2d(vertex: number[]): void;
+
+ /**
+ * Get the coordinates of a vertex from the polygon representation of the geometry.
+ * @param {number} index - Vertex index.
+ * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
+ * @ignore
+ */
+ getVertex2d(index: number): number[];
+
+ /**
+ * Remove a vertex from the polygon.
+ * @param {number} index - The index of the vertex to remove.
+ * @ignore
+ */
+ removeVertex2d(index: number): void;
+
+ /**
+ * @ignore
+ */
+ setVertex2d(index: number, value: number[], transform: Transform): void;
+
+ /**
+ * @ignore
+ */
+ setCentroid2d(value: number[], transform: Transform): void;
+
+ /**
+ * @ignore
+ */
+ getPoints3d(transform: Transform): number[][];
+
+ /**
+ * @ignore
+ */
+ getVertex3d(index: number, transform: Transform): number[];
+
+ /**
+ * @ignore
+ */
+ getVertices2d(): number[][];
+
+ /**
+ * @ignore
+ */
+ getVertices3d(transform: Transform): number[][];
+
+ /**
+ * Get a polygon representation of the 3D coordinates for the vertices of each hole
+ * of the geometry. Line segments between vertices will possibly be subsampled
+ * resulting in a larger number of points than the total number of vertices.
+ * @param {Transform} transform - The transform of the image related to the geometry.
+ * @returns {Array<Array<Array<number>>>} Array of hole polygons in 3D world coordinates
+ * representing the vertices of each hole of the geometry.
+ * @ignore
+ */
+ getHolePoints3d(transform: Transform): number[][][];
+
+ /**
+ * Get a polygon representation of the 3D coordinates for the vertices of each hole
+ * of the geometry.
+ * @param {Transform} transform - The transform of the image related to the geometry.
+ * @returns {Array<Array<Array<number>>>} Array of hole polygons in 3D world coordinates
+ * representing the vertices of each hole of the geometry.
+ * @ignore
+ */
+ getHoleVertices3d(transform: Transform): number[][][];
+
+ /**
+ * @ignore
+ */
+ getCentroid2d(): number[];
+
+ /**
+ * @ignore
+ */
+ getCentroid3d(transform: Transform): number[];
+
+ /**
+ * @ignore
+ */
+ get3dDomainTriangles3d(transform: Transform): number[];
+
+ /**
+ * @ignore
+ */
+ getTriangles3d(transform: Transform): number[];
+
+ /**
+ * @ignore
+ */
+ getPoleOfInaccessibility2d(): number[];
+
+ /**
+ * @ignore
+ */
+ getPoleOfInaccessibility3d(transform: Transform): number[];
+}
+/**
+ * @class RectGeometry
+ * @classdesc Represents a rectangle geometry in the 2D basic image coordinate system.
+ * @example ```js
+ * var basicRect = [0.5, 0.3, 0.7, 0.4];
+ * var rectGeometry = new RectGeometry(basicRect);
+ * ```
+ */
+declare class RectGeometry extends VertexGeometry {
+ /**
+ * Create a rectangle geometry.
+ * @constructor
+ * @param {Array<number>} rect - An array representing the top-left and bottom-right
+ * corners of the rectangle in basic coordinates. Ordered according to [x0, y0, x1, y1].
+ * @throws {GeometryTagError} Rectangle coordinates must be valid basic coordinates.
+ */
+ constructor(rect: number[]): this;
+
+ /**
+ * Get anchor index property.
+ * @returns {number} Index representing the current anchor property if
+ * achoring indexing has been initialized. If anchor indexing has not been
+ * initialized or has been terminated undefined will be returned.
+ * @ignore
+ */
+ anchorIndex: number;
+
+ /**
+ * Get inverted property.
+ * @returns {boolean} Boolean determining whether the rect geometry is
+ * inverted. For spherical the rect geometrye may be inverted.
+ * @ignore
+ */
+ inverted: boolean;
+
+ /**
+ * Get rect property.
+ * @returns {Array<number>} Array representing the top-left and bottom-right
+ * corners of the rectangle in basic coordinates.
+ */
+ rect: number[];
+
+ /**
+ * Initialize anchor indexing to enable setting opposite vertex.
+ * @param {number} [index] - The index of the vertex to use as anchor.
+ * @throws {GeometryTagError} If anchor indexing has already been initialized.
+ * @throws {GeometryTagError} If index is not valid (0 to 3).
+ * @ignore
+ */
+ initializeAnchorIndexing(index?: number): void;
+
+ /**
+ * Terminate anchor indexing to disable setting pposite vertex.
+ * @ignore
+ */
+ terminateAnchorIndexing(): void;
+
+ /**
+ * Set the value of the vertex opposite to the anchor in the polygon
+ * representation of the rectangle.
+ * @description Setting the opposite vertex may change the anchor index.
+ * @param {Array<number>} opposite - The new value of the vertex opposite to the anchor.
+ * @param {Transform} transform - The transform of the image related to the rectangle.
+ * @throws {GeometryTagError} When anchor indexing has not been initialized.
+ * @ignore
+ */
+ setOppositeVertex2d(opposite: number[], transform: Transform): void;
+
+ /**
+ * Set the value of a vertex in the polygon representation of the rectangle.
+ * @description The polygon is defined to have the first vertex at the
+ * bottom-left corner with the rest of the vertices following in clockwise order.
+ * @param {number} index - The index of the vertex to be set.
+ * @param {Array<number>} value - The new value of the vertex.
+ * @param {Transform} transform - The transform of the image related to the rectangle.
+ * @ignore
+ */
+ setVertex2d(index: number, value: number[], transform: Transform): void;
+
+ /**
+ * @ignore
+ */
+ setCentroid2d(value: number[], transform: Transform): void;
+
+ /**
+ * Get the 3D coordinates for the vertices of the rectangle with
+ * interpolated points along the lines.
+ * @param {Transform} transform - The transform of the image related to
+ * the rectangle.
+ * @returns {Array<Array<number>>} Polygon array of 3D world coordinates
+ * representing the rectangle.
+ * @ignore
+ */
+ getPoints3d(transform: Transform): number[][];
+
+ /**
+ * Get the coordinates of a vertex from the polygon representation of the geometry.
+ * @description The first vertex represents the bottom-left corner with the rest of
+ * the vertices following in clockwise order. The method shifts the right side
+ * coordinates of the rectangle by one unit to ensure that the vertices are ordered
+ * clockwise.
+ * @param {number} index - Vertex index.
+ * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
+ * @ignore
+ */
+ getVertex2d(index: number): number[];
+
+ /**
+ * Get the coordinates of a vertex from the polygon representation of the geometry.
+ * @description The first vertex represents the bottom-left corner with the rest of
+ * the vertices following in clockwise order. The coordinates will not be shifted
+ * so they may not appear in clockwise order when layed out on the plane.
+ * @param {number} index - Vertex index.
+ * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
+ * @ignore
+ */
+ getNonAdjustedVertex2d(index: number): number[];
+
+ /**
+ * Get a vertex from the polygon representation of the 3D coordinates for the
+ * vertices of the geometry.
+ * @description The first vertex represents the bottom-left corner with the rest of
+ * the vertices following in clockwise order.
+ * @param {number} index - Vertex index.
+ * @param {Transform} transform - The transform of the image related to the geometry.
+ * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
+ * the vertices of the geometry.
+ * @ignore
+ */
+ getVertex3d(index: number, transform: Transform): number[];
+
+ /**
+ * Get a polygon representation of the 2D basic coordinates for the vertices of the rectangle.
+ * @description The first vertex represents the bottom-left corner with the rest of
+ * the vertices following in clockwise order.
+ * @returns {Array<Array<number>>} Polygon array of 2D basic coordinates representing
+ * the rectangle vertices.
+ * @ignore
+ */
+ getVertices2d(): number[][];
+
+ /**
+ * Get a polygon representation of the 3D coordinates for the vertices of the rectangle.
+ * @description The first vertex represents the bottom-left corner with the rest of
+ * the vertices following in clockwise order.
+ * @param {Transform} transform - The transform of the image related to the rectangle.
+ * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
+ * the rectangle vertices.
+ * @ignore
+ */
+ getVertices3d(transform: Transform): number[][];
+
+ /**
+ * @ignore
+ */
+ getCentroid2d(): number[];
+
+ /**
+ * @ignore
+ */
+ getCentroid3d(transform: Transform): number[];
+
+ /**
+ * @ignore
+ */
+ getPoleOfInaccessibility2d(): number[];
+
+ /**
+ * @ignore
+ */
+ getPoleOfInaccessibility3d(transform: Transform): number[];
+
+ /**
+ * @ignore
+ */
+ getTriangles3d(transform: Transform): number[];
+
+ /**
+ * Check if a particular bottom-right value is valid according to the current
+ * rectangle coordinates.
+ * @param {Array<number>} bottomRight - The bottom-right coordinates to validate
+ * @returns {boolean} Value indicating whether the provided bottom-right coordinates
+ * are valid.
+ * @ignore
+ */
+ validate(bottomRight: number[]): boolean;
+}
+/**
+ * @event
+ */
+export type TagEventType = "click" | "geometry" | "tag";
+/**
+ * Interface for tag state events.
+ * @example ```js
+ * var tag = new OutlineTag({ // tag options });
+ * // Set an event listener
+ * tag.on('tag', function() {
+ * console.log("A tag event has occurred.");
+ * });
+ * ```
+ */
+export interface TagStateEvent {
+ /**
+ * The component object that fired the event.
+ */
+ target: Tag;
+
+ /**
+ * The event type.
+ */
+ type: TagEventType;
+}
+/**
+ * @class Tag
+ * @abstract
+ * @classdesc Abstract class representing the basic functionality of for a tag.
+ */
+declare class Tag extends EventEmitter {
+ _id: string;
+ _geometry: Geometry;
+
+ /**
+ * Create a tag.
+ * @constructor
+ * @param {string} id
+ * @param {Geometry} geometry
+ */
+ constructor(id: string, geometry: Geometry): this;
+
+ /**
+ * Get id property.
+ * @returns {string}
+ */
+ id: string;
+
+ /**
+ * Get geometry property.
+ * @returns {Geometry} The geometry of the tag.
+ */
+ geometry: Geometry;
+}
+/**
+ * Interface for the options that define the behavior and
+ * appearance of the outline tag.
+ * @interface
+ */
+export interface ExtremePointTagOptions {
+ /**
+ * Indicate whether the tag geometry should be editable.
+ * @description Polygon tags with two dimensional domain
+ * are never editable.
+ * @default false
+ */
+ editable?: boolean;
+
+ /**
+ * Color for the interior fill as a hexadecimal number.
+ * @default 0xFFFFFF
+ */
+ fillColor?: number;
+
+ /**
+ * Opacity of the interior fill between 0 and 1.
+ * @default 0.3
+ */
+ fillOpacity?: number;
+
+ /**
+ * Determines whether vertices should be indicated by points
+ * when tag is editable.
+ * @default true
+ */
+ indicateVertices?: boolean;
+
+ /**
+ * Color for the edge lines as a hexadecimal number.
+ * @default 0xFFFFFF
+ */
+ lineColor?: number;
+
+ /**
+ * Opacity of the edge lines on [0, 1].
+ * @default 1
+ */
+ lineOpacity?: number;
+
+ /**
+ * Line width in pixels.
+ * @default 1
+ */
+ lineWidth?: number;
+}
+/**
+ * @class ExtremePointTag
+ * @classdesc Tag holding properties for visualizing a extreme points
+ * and their outline.
+ * @example ```js
+ * var geometry = new PointsGeometry([[0.3, 0.3], [0.5, 0.4]]);
+ * var tag = new ExtremePointTag(
+ * "id-1",
+ * geometry
+ * { editable: true, lineColor: 0xff0000 });
+ *
+ * tagComponent.add([tag]);
+ * ```
+ */
+declare class ExtremePointTag extends Tag {
+ /**
+ * Create an extreme point tag.
+ * @override
+ * @constructor
+ * @param {string} id - Unique identifier of the tag.
+ * @param {PointsGeometry} geometry - Geometry defining points of tag.
+ * @param {ExtremePointTagOptions} options - Options defining the visual appearance and
+ * behavior of the extreme point tag.
+ */
+ constructor(
+ id: string,
+ geometry: PointsGeometry,
+ options?: ExtremePointTagOptions
+ ): this;
+
+ /**
+ * Get editable property.
+ * @returns {boolean} Value indicating if tag is editable.
+ */
+ editable: boolean;
+
+ /**
+ * Set editable property.
+ * @param {boolean}
+ * @fires changed
+ */
+ -editable: boolean;
+
+ /**
+ * Get fill color property.
+ * @returns {number}
+ */
+ fillColor: number;
+
+ /**
+ * Set fill color property.
+ * @param {number}
+ * @fires changed
+ */
+ -fillColor: number;
+
+ /**
+ * Get fill opacity property.
+ * @returns {number}
+ */
+ fillOpacity: number;
+
+ /**
+ * Set fill opacity property.
+ * @param {number}
+ * @fires changed
+ */
+ -fillOpacity: number;
+
+ /**
+ * @inheritdoc
+ */
+ geometry: Geometry;
+
+ /**
+ * Get indicate vertices property.
+ * @returns {boolean} Value indicating if vertices should be indicated
+ * when tag is editable.
+ */
+ indicateVertices: boolean;
+
+ /**
+ * Get line color property.
+ * @returns {number}
+ */
+ lineColor: number;
+
+ /**
+ * Get line opacity property.
+ * @returns {number}
+ */
+ lineOpacity: number;
+
+ /**
+ * Get line width property.
+ * @returns {number}
+ */
+ lineWidth: number;
+
+ /**
+ * Set options for tag.
+ * @description Sets all the option properties provided and keeps
+ * the rest of the values as is.
+ * @param {ExtremePointTagOptions} options - Extreme point tag options
+ * @fires changed
+ */
+ setOptions(options: ExtremePointTagOptions): void;
+}
+/**
+ * Enumeration for tag domains.
+ * @enum {number} *
+ * @readonly
+ * @description Defines where lines between two vertices are treated
+ * as straight.
+ *
+ * Only applicable for polygons. For rectangles lines between
+ * vertices are always treated as straight in the distorted 2D
+ * projection and bended in the undistorted 3D space.
+ */
+
+declare var TagDomain: {|
+ +TwoDimensional: 0, // 0
+ +ThreeDimensional: 1, // 1
+|};
+
+/**
+ * Interface for the options that define the behavior and
+ * appearance of the outline tag.
+ * @interface
+ */
+export interface OutlineTagOptions {
+ /**
+ * The domain where lines between vertices are treated as straight.
+ * @description Only applicable for tags that renders polygons.
+ *
+ * If the domain is specified as two dimensional, editing of the
+ * polygon will be disabled.
+ * @default {TagDomain.TwoDimensional}
+ */
+ domain?: $Values<typeof TagDomain>;
+
+ /**
+ * Indicate whether the tag geometry should be editable.
+ * @description Polygon tags with two dimensional domain
+ * are never editable.
+ * @default false
+ */
+ editable?: boolean;
+
+ /**
+ * Color for the interior fill as a hexadecimal number.
+ * @default 0xFFFFFF
+ */
+ fillColor?: number;
+
+ /**
+ * Opacity of the interior fill between 0 and 1.
+ * @default 0.3
+ */
+ fillOpacity?: number;
+
+ /**
+ * A string referencing the sprite data property to pull from.
+ * @description Icon is not shown for tags with polygon
+ * geometries in spherical.
+ */
+ icon?: string;
+
+ /**
+ * Value determining how the icon will float with respect to its anchor
+ * position when rendering.
+ * @default {Alignment.Center}
+ */
+ iconFloat?: $Values<typeof Alignment>;
+
+ /**
+ * Number representing the index for where to show the icon or
+ * text for a rectangle geometry.
+ * @description The default index corresponds to the bottom right corner.
+ * @default 3
+ */
+ iconIndex?: number;
+
+ /**
+ * Determines whether vertices should be indicated by points
+ * when tag is editable.
+ * @default true
+ */
+ indicateVertices?: boolean;
+
+ /**
+ * Color for the edge lines as a hexadecimal number.
+ * @default 0xFFFFFF
+ */
+ lineColor?: number;
+
+ /**
+ * Opacity of the edge lines on [0, 1].
+ * @default 1
+ */
+ lineOpacity?: number;
+
+ /**
+ * Line width in pixels.
+ * @default 1
+ */
+ lineWidth?: number;
+
+ /**
+ * Text shown as label if no icon is provided.
+ * @description Text is not shown for tags with
+ * polygon geometries in spherical.
+ */
+ text?: string;
+
+ /**
+ * Text color as hexadecimal number.
+ * @default 0xFFFFFF
+ */
+ textColor?: number;
+}
+/**
+ * Interface for the options that define the behavior and
+ * appearance of the spot tag.
+ * @interface
+ */
+export interface SpotTagOptions {
+ /**
+ * Color for the spot specified as a hexadecimal number.
+ * @default 0xFFFFFF
+ */
+ color?: number;
+
+ /**
+ * Indicate whether the tag geometry should be editable.
+ * @default false
+ */
+ editable?: boolean;
+
+ /**
+ * A string referencing the sprite data property to pull from.
+ */
+ icon?: string;
+
+ /**
+ * Text shown as label if no icon is provided.
+ */
+ text?: string;
+
+ /**
+ * Text color as hexadecimal number.
+ * @default 0xFFFFFF
+ */
+ textColor?: number;
+}
+/**
+ * @class OutlineTag
+ * @classdesc Tag holding properties for visualizing a geometry outline.
+ * @example ```js
+ * var geometry = new RectGeometry([0.3, 0.3, 0.5, 0.4]);
+ * var tag = new OutlineTag(
+ * "id-1",
+ * geometry
+ * { editable: true, lineColor: 0xff0000 });
+ *
+ * tagComponent.add([tag]);
+ * ```
+ */
+declare class OutlineTag extends Tag {
+ /**
+ * Create an outline tag.
+ * @override
+ * @constructor
+ * @param {string} id - Unique identifier of the tag.
+ * @param {VertexGeometry} geometry - Geometry defining vertices of tag.
+ * @param {OutlineTagOptions} options - Options defining the visual appearance and
+ * behavior of the outline tag.
+ */
+ constructor(
+ id: string,
+ geometry: VertexGeometry,
+ options?: OutlineTagOptions
+ ): this;
+
+ /**
+ * Get domain property.
+ * @description Readonly property that can only be set in constructor.
+ * @returns Value indicating the domain of the tag.
+ */
+ domain: $Values<typeof TagDomain>;
+
+ /**
+ * Get editable property.
+ * @returns {boolean} Value indicating if tag is editable.
+ */
+ editable: boolean;
+
+ /**
+ * Set editable property.
+ * @param {boolean}
+ * @fires changed
+ */
+ -editable: boolean;
+
+ /**
+ * Get fill color property.
+ * @returns {number}
+ */
+ fillColor: number;
+
+ /**
+ * Set fill color property.
+ * @param {number}
+ * @fires changed
+ */
+ -fillColor: number;
+
+ /**
+ * Get fill opacity property.
+ * @returns {number}
+ */
+ fillOpacity: number;
+
+ /**
+ * Set fill opacity property.
+ * @param {number}
+ * @fires changed
+ */
+ -fillOpacity: number;
+
+ /**
+ * @inheritdoc
+ */
+ geometry: Geometry;
+
+ /**
+ * Get icon property.
+ * @returns {string}
+ */
+ icon: string;
+
+ /**
+ * Set icon property.
+ * @param {string}
+ * @fires changed
+ */
+ -icon: string;
+
+ /**
+ * Get icon float property.
+ * @returns {$Values<
+ typeof
+ Alignment>}
+ */
+ iconFloat: $Values<typeof Alignment>;
+
+ /**
+ * Set icon float property.
+ * @param {$Values<
+ typeof
+ Alignment>}
+ * @fires changed
+ */
+ -iconFloat: $Values<typeof Alignment>;
+
+ /**
+ * Get icon index property.
+ * @returns {number}
+ */
+ iconIndex: number;
+
+ /**
+ * Set icon index property.
+ * @param {number}
+ * @fires changed
+ */
+ -iconIndex: number;
+
+ /**
+ * Get indicate vertices property.
+ * @returns {boolean} Value indicating if vertices should be indicated
+ * when tag is editable.
+ */
+ indicateVertices: boolean;
+
+ /**
+ * Set indicate vertices property.
+ * @param {boolean}
+ * @fires changed
+ */
+ -indicateVertices: boolean;
+
+ /**
+ * Get line color property.
+ * @returns {number}
+ */
+ lineColor: number;
+
+ /**
+ * Set line color property.
+ * @param {number}
+ * @fires changed
+ */
+ -lineColor: number;
+
+ /**
+ * Get line opacity property.
+ * @returns {number}
+ */
+ lineOpacity: number;
+
+ /**
+ * Set line opacity property.
+ * @param {number}
+ * @fires changed
+ */
+ -lineOpacity: number;
+
+ /**
+ * Get line width property.
+ * @returns {number}
+ */
+ lineWidth: number;
+
+ /**
+ * Set line width property.
+ * @param {number}
+ * @fires changed
+ */
+ -lineWidth: number;
+
+ /**
+ * Get text property.
+ * @returns {string}
+ */
+ text: string;
+
+ /**
+ * Set text property.
+ * @param {string}
+ * @fires changed
+ */
+ -text: string;
+
+ /**
+ * Get text color property.
+ * @returns {number}
+ */
+ textColor: number;
+
+ /**
+ * Set text color property.
+ * @param {number}
+ * @fires changed
+ */
+ -textColor: number;
+
+ /**
+ * Set options for tag.
+ * @description Sets all the option properties provided and keeps
+ * the rest of the values as is.
+ * @param {OutlineTagOptions} options - Outline tag options
+ * @fires changed
+ */
+ setOptions(options: OutlineTagOptions): void;
+}
+/**
+ * @class SpotTag
+ * @classdesc Tag holding properties for visualizing the centroid of a geometry.
+ * @example ```js
+ * var geometry = new PointGeometry([0.3, 0.3]);
+ * var tag = new SpotTag(
+ * "id-1",
+ * geometry
+ * { editable: true, color: 0xff0000 });
+ *
+ * tagComponent.add([tag]);
+ * ```
+ */
+declare class SpotTag extends Tag {
+ _geometry: Geometry;
+
+ /**
+ * Create a spot tag.
+ * @override
+ * @constructor
+ * @param {string} id
+ * @param {Geometry} geometry
+ * @param {IOutlineTagOptions} options - Options defining the visual appearance and
+ * behavior of the spot tag.
+ */
+ constructor(id: string, geometry: Geometry, options?: SpotTagOptions): this;
+
+ /**
+ * Get color property.
+ * @returns {number} The color of the spot as a hexagonal number;
+ */
+ color: number;
+
+ /**
+ * Set color property.
+ * @param {number}
+ * @fires changed
+ */
+ -color: number;
+
+ /**
+ * Get editable property.
+ * @returns {boolean} Value indicating if tag is editable.
+ */
+ editable: boolean;
+
+ /**
+ * Set editable property.
+ * @param {boolean}
+ * @fires changed
+ */
+ -editable: number;
+
+ /**
+ * Get icon property.
+ * @returns {string}
+ */
+ icon: string;
+
+ /**
+ * Set icon property.
+ * @param {string}
+ * @fires changed
+ */
+ -icon: string;
+
+ /**
+ * Get text property.
+ * @returns {string}
+ */
+ text: string;
+
+ /**
+ * Set text property.
+ * @param {string}
+ * @fires changed
+ */
+ -text: string;
+
+ /**
+ * Get text color property.
+ * @returns {number}
+ */
+ textColor: number;
+
+ /**
+ * Set text color property.
+ * @param {number}
+ * @fires changed
+ */
+ -textColor: number;
+
+ /**
+ * Set options for tag.
+ * @description Sets all the option properties provided and keps
+ * the rest of the values as is.
+ * @param {SpotTagOptions} options - Spot tag options
+ * @fires changed
+ */
+ setOptions(options: SpotTagOptions): void;
+}
+/**
+ * @class TagComponent
+ * @classdesc [object Object],[object Object],[object Object]
+ * @example ```js
+ * var viewer = new Viewer({ component: { tag: true } }, ...);
+ *
+ * var tagComponent = viewer.getComponent("tag");
+ * ```
+ */
+declare class TagComponent extends Component<TagConfiguration> {
+ /**
+ * @inheritdoc
+ */
+ static componentName: string;
+
+ /**
+ * @ignore
+ */
+ constructor(name: string, container: Container, navigator: Navigator): this;
+
+ /**
+ * Add tags to the tag set or replace tags in the tag set.
+ * @description If a tag already in the set has the same
+ * id as one of the tags added, the old tag will be removed
+ * the added tag will take its place.
+ * @param {Array<Tag>} tags - Tags to add.
+ * @example ```js
+ * tagComponent.add([tag1, tag2]);
+ * ```
+ */
+ add(tags: Tag[]): void;
+
+ /**
+ * Calculate the smallest rectangle containing all the points
+ * in the points geometry.
+ * @description The result may be different depending on if the
+ * current image is an spherical or not. If the
+ * current image is an spherical the rectangle may
+ * wrap the horizontal border of the image.
+ * @returns {Promise<Array<number>>} [object Object],[object Object],[object Object]
+ */
+ calculateRect(geometry: PointsGeometry): Promise<number[]>;
+
+ /**
+ * Force the creation of a geometry programatically using its
+ * current vertices.
+ * @description [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
+ * @fires geometrycreate
+ * @example ```js
+ * tagComponent.on("geometrycreate", function(geometry) {
+ * console.log(geometry);
+ * });
+ *
+ * tagComponent.create();
+ * ```
+ */
+ create(): void;
+
+ /**
+ * Change the current tag mode.
+ * @description Change the tag mode to one of the create modes for creating new geometries.
+ * @param {$Values<
+ typeof
+ TagMode>} mode - New tag mode.
+ * @fires tagmode
+ * @example ```js
+ * tagComponent.changeMode(TagMode.CreateRect);
+ * ```
+ */
+ changeMode(mode: $Values<typeof TagMode>): void;
+
+ /**
+ * Returns the tag in the tag set with the specified id, or
+ * undefined if the id matches no tag.
+ * @param {string} tagId - Id of the tag.
+ * @example ```js
+ * var tag = tagComponent.get("tagId");
+ * ```
+ */
+ get(tagId: string): Tag;
+
+ /**
+ * Returns an array of all tags.
+ * @example ```js
+ * var tags = tagComponent.getAll();
+ * ```
+ */
+ getAll(): Tag[];
+
+ /**
+ * Returns an array of tag ids for tags that contain the specified point.
+ * @description The pixel point must lie inside the polygon or rectangle
+ * of an added tag for the tag id to be returned. Tag ids for
+ * tags that do not have a fill will also be returned if the point is inside
+ * the geometry of the tag. Tags with point geometries can not be retrieved.
+ *
+ * No tag ids will be returned for polygons rendered in cropped spherical or
+ * rectangles rendered in spherical.
+ *
+ * Notice that the pixelPoint argument requires x, y coordinates from pixel space.
+ *
+ * With this function, you can use the coordinates provided by mouse
+ * events to get information out of the tag component.
+ *
+ * If no tag at exist the pixel point, an empty array will be returned.
+ * @param {Array<number>} pixelPoint - Pixel coordinates on the viewer element.
+ * @returns {Promise<Array<string>>} Promise to the ids of the tags that
+ * contain the specified pixel point.
+ * @example ```js
+ * tagComponent.getTagIdsAt([100, 100])
+ * .then((tagIds) => { console.log(tagIds); });
+ * ```
+ */
+ getTagIdsAt(pixelPoint: number[]): Promise<string[]>;
+
+ /**
+ * Check if a tag exist in the tag set.
+ * @param {string} tagId - Id of the tag.
+ * @example ```js
+ * var tagExists = tagComponent.has("tagId");
+ * ```
+ */
+ has(tagId: string): boolean;
+
+ /**
+ * Remove tags with the specified ids from the tag set.
+ * @param {Array<string>} tagIds - Ids for tags to remove.
+ * @example ```js
+ * tagComponent.remove(["id-1", "id-2"]);
+ * ```
+ */
+ remove(tagIds: string[]): void;
+
+ /**
+ * Remove all tags from the tag set.
+ * @example ```js
+ * tagComponent.removeAll();
+ * ```
+ */
+ removeAll(): void;
+ _activate(): void;
+ _deactivate(): void;
+ _getDefaultConfiguration(): TagConfiguration;
+}
+/**
+ * @class ZoomComponent
+ * @classdesc Component rendering UI elements used for zooming.
+ * @example ```js
+ * var viewer = new Viewer({ ... });
+ *
+ * var zoomComponent = viewer.getComponent("zoom");
+ * zoomComponent.configure({ size: ComponentSize.Small });
+ * ```
+ */
+declare class ZoomComponent extends Component<ZoomConfiguration> {
+ static componentName: string;
+ constructor(name: string, container: Container, navigator: Navigator): this;
+ _activate(): void;
+ _deactivate(): void;
+ _getDefaultConfiguration(): ZoomConfiguration;
+}
+declare export {
+ Alignment,
+ ArgumentMapillaryError,
+ BearingComponent,
+ CacheComponent,
+ CameraControls,
+ CameraVisualizationMode,
+ CancelMapillaryError,
+ CircleMarker,
+ Component,
+ ComponentSize,
+ DataProviderBase,
+ DirectionComponent,
+ DragPanHandler,
+ EventEmitter,
+ ExtremePointTag,
+ Geometry,
+ GeometryProviderBase,
+ GeometryTagError,
+ GraphDataProvider,
+ GraphMapillaryError,
+ Image,
+ KeyPlayHandler,
+ KeySequenceNavigationHandler,
+ KeySpatialNavigationHandler,
+ KeyZoomHandler,
+ KeyboardComponent,
+ MapillaryError,
+ Marker,
+ MarkerComponent,
+ NavigationDirection,
+ OriginalPositionMode,
+ OutlineTag,
+ PointGeometry,
+ PointerComponent,
+ PointsGeometry,
+ PointVisualizationMode,
+ PolygonGeometry,
+ Popup,
+ PopupComponent,
+ RectGeometry,
+ RenderMode,
+ RenderPass,
+ S2GeometryProvider,
+ ScrollZoomHandler,
+ SequenceComponent,
+ SimpleMarker,
+ SliderComponent,
+ SliderConfigurationMode,
+ SpatialComponent,
+ SpotTag,
+ Tag,
+ TagComponent,
+ TagDomain,
+ TagMode,
+ TouchZoomHandler,
+ TransitionMode,
+ VertexGeometry,
+ Viewer,
+ ZoomComponent,
+ decompress,
+ ecefToEnu,
+ ecefToGeodetic,
+ enuToEcef,
+ enuToGeodetic,
+ fetchArrayBuffer,
+ geodeticToEcef,
+ geodeticToEnu,
+ isFallbackSupported,
+ isSupported,
+ readMeshPbf,
+};
projects / rails.git / blobdiff