/** * 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} 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} 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} 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} 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} 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} 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(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} Promise to the array buffer * resource. */ declare function fetchArrayBuffer( url: string, abort?: Promise ): Promise; /** * 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(type: string, event: T): void; off(type: string, handler: (event: T) => void): void; on(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(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(type: string, handler: (event: T) => void): void; /** * @ignore */ fire(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 { /** * Ent node. */ node: T; /** * Ent node id. */ node_id: string; } /** * Contract describing spatial image results. */ export type SpatialImagesContract = EntContract[]; /** * Ent representing image properties. */ export type ImageEnt = { ... } & CoreImageEnt & SpatialImageEnt; /** * Contract describing image results. */ export type ImagesContract = EntContract[]; /** * 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; /** * 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} 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} 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} 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} Promise to * the core images of the requested geometry cell id. * @throws Rejects the promise on errors. */ getCoreImages(cellId: string): Promise; /** * 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} Promise to the * cluster reconstruction. * @throws Rejects the promise on errors. */ getCluster(url: string, abort?: Promise): Promise; /** * Get spatial images. * @param {Array} imageIds - The ids for the * images to retrieve. * @returns {Promise} Promise to * the spatial images of the requested image ids. * @throws Rejects the promise on errors. */ getSpatialImages(imageIds: string[]): Promise; /** * Get complete images. * @param {Array} imageIds - The ids for the * images to retrieve. * @returns {Promise} Promise to the images of the * requested image ids. * @throws Rejects the promise on errors. */ getImages(imageIds: string[]): Promise; /** * Get an image as an array buffer. * @param {string} url - URL for image to retrieve. * @param {Promise} [abort] - Optional promise for aborting * the request through rejection. * @returns {Promise} Promise to the array * buffer containing the image. * @throws Rejects the promise on errors. */ getImageBuffer(url: string, abort?: Promise): Promise; /** * Get image tiles urls for a tile level. * @param {ImageTilesRequestContract} tiles - Tiles to request * @returns {Promise} 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; /** * Get a mesh. * @param {string} url - URL for mesh to retrieve. * @param {Promise} [abort] - Optional promise for aborting * the request through rejection. * @returns {Promise} Promise to the mesh. * @throws Rejects the promise on errors. */ getMesh(url: string, abort?: Promise): Promise; /** * Get sequence. * @param {Array} 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; /** * 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(type: string, event: T): void; /** * Get core images in a geometry cell. * @param {string} cellId - The id of the geometry cell. * @returns {Promise} Promise to * the core images of the requested geometry cell id. * @throws Rejects the promise on errors. */ getCoreImages(cellId: string): Promise; /** * 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} Promise to the * cluster reconstruction. * @throws Rejects the promise on errors. */ getCluster(url: string, abort?: Promise): Promise; /** * Get spatial images. * @param {Array} imageIds - The ids for the * images to retrieve. * @returns {Promise} Promise to * the spatial images of the requested image ids. * @throws Rejects the promise on errors. */ getSpatialImages(imageIds: string[]): Promise; /** * Get complete images. * @param {Array} imageIds - The ids for the * images to retrieve. * @returns {Promise} Promise to the images of the * requested image ids. * @throws Rejects the promise on errors. */ getImages(imageIds: string[]): Promise; /** * Get an image as an array buffer. * @param {string} url - URL for image to retrieve. * @param {Promise} [abort] - Optional promise for aborting * the request through rejection. * @returns {Promise} Promise to the array * buffer containing the image. * @throws Rejects the promise on errors. */ getImageBuffer(url: string, abort?: Promise): Promise; /** * Get image tiles urls for a tile level. * @param {ImageTilesRequestContract} tiles - Tiles to request * @returns {Promise} 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; /** * Get a mesh. * @param {string} url - URL for mesh to retrieve. * @param {Promise} [abort] - Optional promise for aborting * the request through rejection. * @returns {Promise} Promise to the mesh. * @throws Rejects the promise on errors. */ getMesh(url: string, abort?: Promise): Promise; /** * Get sequence. * @param {Array} 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; off(type: string, handler: (event: T) => void): void; on(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} 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} 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} 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): Promise; getCoreImages(cellId: string): Promise; getImageBuffer(url: string, abort?: Promise): Promise; getImages(imageIds: string[]): Promise; getImageTiles( request: ImageTilesRequestContract ): Promise; getMesh(url: string, abort?: Promise): Promise; getSequence(sequenceId: string): Promise; getSpatialImages(imageIds: string[]): Promise; 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} rotation - Rotation vector in three dimensions. * @param {Array} 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} point3d - 3D world coordinates. * @return {Array} 2D basic coordinates. */ projectBasic(point3d: number[]): number[]; /** * Unproject basic coordinates to 3D world coordinates. * @param {Array} basic - 2D basic coordinates. * @param {Array} 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} Unprojected 3D world coordinates. */ unprojectBasic(basic: number[], distance: number, depth?: boolean): number[]; /** * Project 3D world coordinates to SfM coordinates. * @param {Array} point3d - 3D world coordinates. * @return {Array} 2D SfM coordinates. */ projectSfM(point3d: number[]): number[]; /** * Unproject SfM coordinates to a 3D world coordinates. * @param {Array} sfm - 2D SfM coordinates. * @param {Array} 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} 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; /** * 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} edges - Sequence edges to cache. */ cacheSequenceEdges(edges: NavigationEdge[]): void; /** * Cache the spatial edges. * @param {Array} 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} 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} 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} 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} 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; } 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 ): this; alpha: number; camera: Camera; changed: boolean; frameId: number; renderMode: $Values; rotation: EulerRotation; zoom: number; size: ViewportSize; getTilt(): number; fovToZoom(fov: number): number; setFrame(frame: AnimationFrame): void; setProjectionMatrix(matrix: number[]): void; setRenderMode(renderMode: $Values): void; setSize(size: ViewportSize): void; } declare class RenderService { constructor( element: HTMLElement, currentFrame$: mixed, renderMode: $Values, 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; } 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, transitionMode?: $Values ): 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} reference - Reference point in basic coordinates. */ zoomIn(delta: number, reference: number[]): void; setCenter(center: number[]): void; setSpeed(speed: number): void; setTransitionMode(mode: $Values): 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, ... } & 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, /** * 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: '', * foreground: '', * }, * 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, ... } & 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, /** * 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, /** * 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, ... } & 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, ... } & ComponentConfiguration; export type ZoomConfiguration = { /** * The size of the ui elements. * @default ComponentSize.Automatic */ size?: $Values, ... } & 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; /** * 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("")`. */ 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; /** * 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; /** * 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; /** * 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} viewMatrix The viewer's view matrix. * @param {Array} 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; fire(type: ViewerEventType, event: T): void; getBearing(): Promise; getCameraControls(): Promise<$Values>; getCanvas(): HTMLCanvasElement; getCanvasContainer(): HTMLDivElement; getCenter(): Promise; getComponent>( name: string ): TComponent; getContainer(): HTMLElement; getFieldOfView(): Promise; getImage(): Promise; getPointOfView(): Promise; getPosition(): Promise; getReference(): Promise; getZoom(): Promise; hasCustomCameraControls(controls: ICustomCameraControls): boolean; hasCustomRenderer(rendererId: string): boolean; moveDir(direction: $Values): Promise; moveTo(imageId: string): Promise; off(type: ViewerEventType, handler: (event: T) => void): void; on(type: ViewerEventType, handler: (event: T) => void): void; project(lngLat: LngLat): Promise; projectFromBasic(basicPoint: number[]): Promise; remove(): void; removeCustomRenderer(rendererId: string): void; resize(): void; setCameraControls(controls: $Values): void; setCenter(center: number[]): void; setFieldOfView(fov: number): void; setFilter(filter?: FilterExpression): Promise; setRenderMode(renderMode: $Values): void; setTransitionMode(transitionMode: $Values): void; setAccessToken(accessToken?: string): Promise; setZoom(zoom: number): void; triggerRerender(): void; unproject(pixelPoint: number[]): Promise; unprojectToBasic(pixelPoint: number[]): Promise; } /** * @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} viewMatrix - The viewer's view matrix. * @param {Array} 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("")`. * 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: "", * container: "", * }); * ``` */ 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; /** * 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} Promise to the bearing * of the current viewer camera. * @example ```js * viewer.getBearing().then(b => { console.log(b); }); * ``` */ getBearing(): Promise; /** * 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>; /** * 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} 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; /** * Get a component. * @param {string} name - Name of component. * @returns {Component} The requested component. * @example ```js * var pointerComponent = viewer.getComponent("pointer"); * ``` */ getComponent>( 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} Promise to the current field of view * of the viewer camera. * @example ```js * viewer.getFieldOfView().then(fov => { console.log(fov); }); * ``` */ getFieldOfView(): Promise; /** * Get the viewer's current image. * @returns {Promise} Promise to the current image. * @example ```js * viewer.getImage().then(image => { console.log(image.id); }); * ``` */ getImage(): Promise; /** * Get the viewer's current point of view. * @returns {Promise} Promise to the current point of view * of the viewer camera. * @example ```js * viewer.getPointOfView().then(pov => { console.log(pov); }); * ``` */ getPointOfView(): Promise; /** * Get the viewer's current position * @returns {Promise} Promise to the viewers's current * position. * @example ```js * viewer.getPosition().then(pos => { console.log(pos); }); * ``` */ getPosition(): Promise; /** * Get the viewer's current reference position. * @description The reference position specifies the origin in * the viewer's topocentric coordinate system. * @returns {Promise} Promise to the reference position. * @example ```js * viewer.getReference().then(reference => { console.log(reference); }); * ``` */ getReference(): Promise; /** * Get the image's current zoom level. * @returns {Promise} Promise to the viewers's current * zoom level. * @example ```js * viewer.getZoom().then(z => { console.log(z); }); * ``` */ getZoom(): Promise; /** * 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} 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): Promise; /** * Navigate to a given image ID. * @param {string} imageId - Id of the image to move to. * @returns {Promise} 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("").then( * image => { console.log(image); }, * error => { console.error(error); }); * ``` */ moveTo(imageId: string): Promise; /** * 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>} 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; /** * 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} basicPoint - Basic images coordinates to project. * @returns {Promise>} 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; /** * 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): 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} Promise that resolves after filter is applied. * @example ```js * // Examples * viewer.setFilter(["==", "cameraType", "spherical"]); * viewer.setFilter([">=", "capturedAt", ]); * viewer.setFilter(["in", "sequenceId", "", ""]); * ``` */ setFilter(filter?: FilterExpression): Promise; /** * Set the viewer's render mode. * @param {$Values< typeof RenderMode>} renderMode - Render mode. * @example ```js * viewer.setRenderMode(RenderMode.Letterbox); * ``` */ setRenderMode(renderMode: $Values): void; /** * Set the viewer's transition mode. * @param {$Values< typeof TransitionMode>} transitionMode - Transition mode. * @example ```js * viewer.setTransitionMode(TransitionMode.Instantaneous); * ``` */ setTransitionMode(transitionMode: $Values): 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} Promise that resolves after token * is set. * @throws When viewer is not navigable. * @example ```js * viewer.setAccessToken("") * .then(() => { console.log("user token set"); }); * ``` */ setAccessToken(accessToken?: string): Promise; /** * 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} pixelPoint - Pixel coordinates to unproject. * @returns {Promise} Promise to the lngLat corresponding to the pixel point. * @example ```js * viewer.unproject([100, 100]) * .then(lngLat => { console.log(lngLat); }); * ``` */ unproject(pixelPoint: number[]): Promise; /** * 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} pixelPoint - Pixel coordinates to unproject. * @returns {Promise} 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; fire(type: string, event: T): void; off(type: string, handler: (event: T) => void): void; on(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 = (item: T) => TResult; declare type FilterFunction = Func; /** * @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} 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} 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} 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; prev: $Values; next: $Values; directionChange: number; } declare interface StepDirection { direction: $Values; motionChange: number; useFallback: boolean; } declare interface TurnDirection { direction: $Values; 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} nodes - Potential destination nodes. * @param {Array} 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} 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} 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} 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} 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} 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} [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} 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} 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} 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): 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} vector - The vector. * @param {Array} 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} 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} 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} 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} 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} 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} 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} 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} 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): 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 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(type: string, event: T): void; /** * @inheritdoc */ off(type: string, handler: (event: T) => void): void; /** * @inheritdoc */ on(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 { static componentName: string; /** * @ignore */ constructor(name: string, container: Container, navigator: Navigator): this; _activate(): void; _deactivate(): void; _getDefaultConfiguration(): BearingConfiguration; } declare class CacheComponent extends Component { 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} 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} 3D world coordinates representing the centroid. * @ignore */ getCentroid3d(transform: Transform): number[]; /** * Set the 2D centroid of the geometry. * @param {Array} 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, 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 { /** * @inheritdoc */ static componentName: string; /** * @ignore */ constructor( name: string, container: Container, navigator: Navigator, directionDOMRenderer?: DirectionDOMRenderer ): this; _activate(): void; _deactivate(): void; _getDefaultConfiguration(): DirectionConfiguration; } declare class HandlerBase { _component: Component; _container: Container; _navigator: Navigator; _enabled: boolean; /** * @ignore */ constructor( component: Component, 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 * ..enable(); * ``` */ enable(): void; /** * Disables the interaction. * @example ```js * ..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 { _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 { /** * @ignore */ constructor( component: Component, 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 { /** * @ignore */ constructor( component: Component, 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 { _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 { 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 { 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} 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} 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; /** * 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} 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 { /** * @ignore */ constructor( component: Component, container: Container, navigator: Navigator, viewportCoords: ViewportCoords, spatial: Spatial ): this; _enable(): void; _disable(): void; _getConfiguration(enable: boolean): PointerConfiguration; } declare class EarthControlHandler extends HandlerBase { /** * @ignore */ constructor( component: Component, 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 { /** * @ignore */ constructor( component: Component, 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 { /** * @ignore */ constructor( component: Component, 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 { /** * @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; /** * 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; } /** * @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} 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} 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('
hello image
'); * 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 { 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} 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} 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 { /** * @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 { 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 { 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} 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; _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} 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} 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} 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} 3D world coordinates representing the centroid. * @ignore */ getCentroid3d(transform: Transform): number[]; /** * Set the centroid of the point, i.e. the point coordinates. * @param {Array} 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>} 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 of 2d points. */ points: number[][]; /** * Add a point to the point set. * @param {Array} 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} 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>} 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} 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} 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} 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} 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>} 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>} 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} 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} 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>} points2d - 2d points of outline to triangulate. * @returns {Array} 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>} points2d - 2d points of outline to triangulate. * @param {Array>} points3d - 3d points of outline corresponding to the 2d points. * @param {Array>>} [holes2d] - 2d points of holes to triangulate. * @param {Array>>} [holes3d] - 3d points of holes corresponding to the 2d points. * @returns {Array} 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>} polygon - Array of polygon vertices. Must be closed. * @param {Array>>} [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>} Closed 2d polygon. */ polygon: number[][]; /** * Get holes property. * @returns {Array>>} Holes of 2d polygon. */ holes: number[][][]; /** * Add a vertex to the polygon by appending it after the last vertex. * @param {Array} 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} 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 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 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} 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} 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} 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} 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>} 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} 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} 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>} 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>} 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>} 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} 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; /** * 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; /** * 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; /** * 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; /** * Set icon float property. * @param {$Values< typeof Alignment>} * @fires changed */ -iconFloat: $Values; /** * 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 { /** * @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} 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>} [object Object],[object Object],[object Object] */ calculateRect(geometry: PointsGeometry): Promise; /** * 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): 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} pixelPoint - Pixel coordinates on the viewer element. * @returns {Promise>} 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; /** * 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} 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 { 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, };