--- /dev/null
+import { Observable, Subject, Subscription, BehaviorSubject, Scheduler } from 'rxjs';
+import { Matrix4, Vector3, PerspectiveCamera, WebGLRenderer, Object3D, Camera as Camera$1 } from 'three';
+import { VNode } from 'virtual-dom';
+
+/**
+ * Convert coordinates from geodetic (WGS84) reference to local topocentric
+ * (ENU) reference.
+ *
+ * @param {number} lng Longitude in degrees.
+ * @param {number} lat Latitude in degrees.
+ * @param {number} alt Altitude in meters.
+ * @param {number} refLng Reference longitude in degrees.
+ * @param {number} refLat Reference latitude in degrees.
+ * @param {number} refAlt Reference altitude in meters.
+ * @returns {Array<number>} The x, y, z local topocentric ENU coordinates.
+ */
+declare function geodeticToEnu(lng: number, lat: number, alt: number, refLng: number, refLat: number, refAlt: number): number[];
+/**
+ * Convert coordinates from local topocentric (ENU) reference to
+ * geodetic (WGS84) reference.
+ *
+ * @param {number} x Topocentric ENU coordinate in East direction.
+ * @param {number} y Topocentric ENU coordinate in North direction.
+ * @param {number} z Topocentric ENU coordinate in Up direction.
+ * @param {number} refLng Reference longitude in degrees.
+ * @param {number} refLat Reference latitude in degrees.
+ * @param {number} refAlt Reference altitude in meters.
+ * @returns {Array<number>} The longitude, latitude in degrees
+ * and altitude in meters.
+ */
+declare function enuToGeodetic(x: number, y: number, z: number, refLng: number, refLat: number, refAlt: number): number[];
+
+/**
+ * Contract describing triangulated meshes.
+ */
+interface MeshContract {
+ /**
+ * Flattened array of faces for the mesh. Each face consist
+ * three vertex indices.
+ */
+ faces: number[];
+ /**
+ * Flattened array of vertices for the mesh. Each vertex
+ * consists of X, Y and Z coordinates in the camera
+ * reference frame.
+ */
+ vertices: number[];
+}
+
+/**
+ * Decompress and parse an array buffer containing zipped
+ * json data and return as a json object.
+ *
+ * @description Handles array buffers continaing zipped json
+ * data.
+ *
+ * @param {ArrayBuffer} buffer - Array buffer to decompress.
+ * @returns {Object} Parsed object.
+ */
+declare function decompress<T>(buffer: ArrayBuffer): T;
+/**
+ * Retrieves a resource as an array buffer and returns a promise
+ * to the buffer.
+ *
+ * @description Rejects the promise on request failure.
+ *
+ * @param {string} url - URL for resource to retrieve.
+ * @param {Promise} [abort] - Optional promise for aborting
+ * the request through rejection.
+ * @returns {Promise<ArrayBuffer>} Promise to the array buffer
+ * resource.
+ */
+declare function fetchArrayBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer>;
+/**
+ * Read the fields of a protobuf array buffer into a mesh
+ * object.
+ *
+ * @param {ArrayBuffer} buffer - Protobuf array buffer
+ * to read from.
+ * @returns {MeshContract} Mesh object.
+ */
+declare function readMeshPbf(buffer: ArrayBuffer): MeshContract;
+
+declare class EventEmitter {
+ private _events;
+ constructor();
+ /**
+ * Subscribe to an event by its name.
+ * @param {string} type - The name of the event
+ * to subscribe to.
+ * @param {(event: T) => void} handler - The
+ * handler called when the event occurs.
+ */
+ on<T>(type: string, handler: (event: T) => void): void;
+ /**
+ * Unsubscribe from an event by its name.
+ * @param {string} type - The name of the event
+ * to unsubscribe from.
+ * @param {(event: T) => void} handler - The
+ * handler to remove.
+ */
+ off<T>(type: string, handler: (event: T) => void): void;
+ /**
+ * @ignore
+ */
+ fire<T>(type: string, event: T): void;
+ private _listens;
+}
+
+/**
+ * Interface that represents a longitude, latitude coordinate,
+ * measured in degrees. Coordinates are defined in the WGS84 datum.
+ */
+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
+ */
+interface LngLatAlt extends LngLat {
+ /**
+ * Altitude, measured in meters.
+ */
+ alt: number;
+}
+
+/**
+ * Contract describing a reconstruction point.
+ */
+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.
+ */
+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;
+}
+
+/**
+ * @class GeometryProviderBase
+ *
+ * @classdesc Base class to extend if implementing a geometry
+ * provider class.
+ *
+ * @example
+ * ```js
+ * class MyGeometryProvider extends GeometryProviderBase {
+ * ...
+ * }
+ * ```
+ */
+declare abstract class GeometryProviderBase {
+ /**
+ * Create a new geometry provider base instance.
+ */
+ constructor();
+ /**
+ * Convert a geodetic bounding box to the the minimum set
+ * of cell ids containing the bounding box.
+ *
+ * @description The bounding box needs
+ * to be sufficiently small to be contained in an area with the size
+ * of maximally four tiles. Up to nine adjacent tiles may be returned.
+ *
+ * @param {LngLat} sw - South west corner of bounding box.
+ * @param {LngLat} ne - North east corner of bounding box.
+ *
+ * @returns {Array<string>} Array of cell ids.
+ */
+ bboxToCellIds(sw: LngLat, ne: LngLat): string[];
+ /**
+ * Get the cell ids of all adjacent cells.
+ *
+ * @description In the case of approximately rectangular cells
+ * this is typically the eight orthogonally and diagonally adjacent
+ * cells.
+ *
+ * @param {string} cellId - Id of cell.
+ * @returns {Array<string>} Array of cell ids. No specific
+ * order is guaranteed.
+ */
+ getAdjacent(cellId: string): string[];
+ /**
+ * Get the vertices of a cell.
+ *
+ * @description The vertices form an unclosed
+ * clockwise polygon in the 2D longitude, latitude
+ * space. No assumption on the position of the first
+ * vertex relative to the others can be made.
+ *
+ * @param {string} cellId - Id of cell.
+ * @returns {Array<LngLat>} Unclosed clockwise polygon.
+ */
+ getVertices(cellId: string): LngLat[];
+ /**
+ * Convert geodetic coordinates to a cell id.
+ *
+ * @param {LngLat} lngLat - Longitude, latitude to convert.
+ * @returns {string} Cell id for the longitude, latitude.
+ */
+ lngLatToCellId(lngLat: LngLat): string;
+ /** @ignore */
+ protected _approxBboxToCellIds(sw: LngLat, ne: LngLat): string[];
+ /** @ignore */
+ private _enuToGeodetic;
+ /** @ignore */
+ private _getLngLatBoundingBoxCorners;
+ /**
+ * Convert a geodetic square to cell ids.
+ *
+ * The square is specified as a longitude, latitude
+ * and a threshold from the position using Manhattan distance.
+ *
+ * @param {LngLat} lngLat - Longitude, latitude.
+ * @param {number} threshold - Threshold of the conversion in meters.
+ *
+ * @returns {Array<string>} Array of cell ids reachable within
+ * the threshold.
+ *
+ * @ignore
+ */
+ private _lngLatToCellIds;
+}
+
+/**
+ * Ent representing an entity with a unique ID.
+ *
+ * @interface IDEnt
+ */
+interface IDEnt {
+ /**
+ * Unique ID.
+ */
+ id: string;
+}
+
+/**
+ * Ent representing core image properties.
+ */
+interface CoreImageEnt extends IDEnt {
+ /**
+ * 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;
+}
+
+/**
+ * Contract describing core image results.
+ */
+interface CoreImagesContract {
+ /**
+ * Geometry cell ID.
+ */
+ cell_id: string;
+ /**
+ * Array of core image ents.
+ */
+ images: CoreImageEnt[];
+}
+
+/**
+ * Ent representing camera properties.
+ */
+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.
+ */
+interface URLEnt extends IDEnt {
+ /**
+ * URL for fetching ent data.
+ */
+ url: string;
+}
+
+/**
+ * Ent representing image creator properties.
+ */
+interface CreatorEnt extends IDEnt {
+ /**
+ * The username of the creator.
+ */
+ username: string;
+}
+
+/**
+ * Ent representing spatial image properties.
+ */
+interface SpatialImageEnt extends CameraEnt, IDEnt {
+ /**
+ * 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;
+}
+
+/**
+ * Contract describing ent results.
+ */
+interface EntContract<T> {
+ /**
+ * Ent node.
+ */
+ node: T;
+ /**
+ * Ent node id.
+ */
+ node_id: string;
+}
+
+/**
+ * Contract describing spatial image results.
+ */
+declare type SpatialImagesContract = EntContract<SpatialImageEnt>[];
+
+/**
+ * Ent representing image properties.
+ */
+interface ImageEnt extends CoreImageEnt, SpatialImageEnt {
+}
+
+/**
+ * Contract describing image results.
+ */
+declare type ImagesContract = EntContract<ImageEnt>[];
+
+/**
+ * Ent representing sequence properties.
+ *
+ * @interface SequenceEnt
+ */
+interface SequenceEnt extends IDEnt {
+ /**
+ * The image IDs of the sequence sorted in
+ * acsending order based on capture time.
+ */
+ image_ids: string[];
+}
+
+/**
+ * Contract describing sequence results.
+ */
+declare type SequenceContract = SequenceEnt;
+
+/**
+ * Ent representing image tile properties.
+ */
+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.
+ */
+declare type ImageTilesContract = EntContract<ImageTileEnt[]>;
+
+/**
+ * Contract describing image tile requests.
+ */
+interface ImageTilesRequestContract {
+ /**
+ * ID of the tile's image.
+ */
+ imageId: string;
+ /**
+ * Tile level.
+ */
+ z: number;
+}
+
+/**
+ * @event
+ */
+declare type ProviderEventType = "datacreate";
+
+/**
+ * Interface for general provider events.
+ */
+interface ProviderEvent {
+ /**
+ * Data provider target that emitted the event.
+ */
+ target: DataProviderBase;
+ /**
+ * Provider event type.
+ */
+ type: ProviderEventType;
+}
+
+/**
+ *
+ * Interface for data provider cell events.
+ */
+interface ProviderCellEvent extends ProviderEvent {
+ /**
+ * Cell ids for cells where data have been created.
+ */
+ cellIds: string[];
+ /**
+ * Provider event type.
+ */
+ type: "datacreate";
+}
+
+/**
+ * @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 abstract class DataProviderBase extends EventEmitter {
+ protected _geometry: GeometryProviderBase;
+ /**
+ * Create a new data provider base instance.
+ *
+ * @param {GeometryProviderBase} geometry - Geometry
+ * provider instance.
+ */
+ constructor(_geometry: GeometryProviderBase);
+ /**
+ * Get geometry property.
+ *
+ * @returns {GeometryProviderBase} Geometry provider instance.
+ */
+ get geometry(): GeometryProviderBase;
+ /**
+ * Fire when data has been created in the data provider
+ * after initial load.
+ *
+ * @param type datacreate
+ * @param event Provider cell event
+ *
+ * @example
+ * ```js
+ * // Initialize the data provider
+ * class MyDataProvider extends DataProviderBase {
+ * // Class implementation
+ * }
+ * var provider = new MyDataProvider();
+ * // Create the event
+ * var cellIds = [ // Determine updated cells ];
+ * var target = provider;
+ * var type = "datacreate";
+ * var event = {
+ * cellIds,
+ * target,
+ * type,
+ * };
+ * // Fire the event
+ * provider.fire(type, event);
+ * ```
+ */
+ fire(type: "datacreate", event: ProviderCellEvent): void;
+ /** @ignore */
+ fire(type: ProviderEventType, event: ProviderEvent): void;
+ /**
+ * Get core images in a geometry cell.
+ *
+ * @param {string} cellId - The id of the geometry cell.
+ * @returns {Promise<CoreImagesContract>} Promise to
+ * the core images of the requested geometry cell id.
+ * @throws Rejects the promise on errors.
+ */
+ getCoreImages(cellId: string): Promise<CoreImagesContract>;
+ /**
+ * Get a cluster reconstruction.
+ *
+ * @param {string} url - URL for the cluster reconstruction
+ * to retrieve.
+ * @param {Promise} [abort] - Optional promise for aborting
+ * the request through rejection.
+ * @returns {Promise<ClusterContract>} Promise to the
+ * cluster reconstruction.
+ * @throws Rejects the promise on errors.
+ */
+ getCluster(url: string, abort?: Promise<void>): Promise<ClusterContract>;
+ /**
+ * Get spatial images.
+ *
+ * @param {Array<string>} imageIds - The ids for the
+ * images to retrieve.
+ * @returns {Promise<SpatialImagesContract>} Promise to
+ * the spatial images of the requested image ids.
+ * @throws Rejects the promise on errors.
+ */
+ getSpatialImages(imageIds: string[]): Promise<SpatialImagesContract>;
+ /**
+ * Get complete images.
+ *
+ * @param {Array<string>} imageIds - The ids for the
+ * images to retrieve.
+ * @returns {Promise<ImagesContract>} Promise to the images of the
+ * requested image ids.
+ * @throws Rejects the promise on errors.
+ */
+ getImages(imageIds: string[]): Promise<ImagesContract>;
+ /**
+ * Get an image as an array buffer.
+ *
+ * @param {string} url - URL for image to retrieve.
+ * @param {Promise<void>} [abort] - Optional promise for aborting
+ * the request through rejection.
+ * @returns {Promise<ArrayBuffer>} Promise to the array
+ * buffer containing the image.
+ * @throws Rejects the promise on errors.
+ */
+ getImageBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer>;
+ /**
+ * Get image tiles urls for a tile level.
+ *
+ * @param {ImageTilesRequestContract} tiles - Tiles to request
+ * @returns {Promise<ImageTilesContract>} Promise to the
+ * image tiles response contract
+ *
+ * @throws Rejects the promise on errors.
+ *
+ * @example
+ * ```js
+ * var tileRequest = { imageId: 'image-id', z: 12 };
+ * provider.getImageTiles(tileRequest)
+ * .then((response) => console.log(response));
+ * ```
+ */
+ getImageTiles(tiles: ImageTilesRequestContract): Promise<ImageTilesContract>;
+ /**
+ * Get a mesh.
+ *
+ * @param {string} url - URL for mesh to retrieve.
+ * @param {Promise<void>} [abort] - Optional promise for aborting
+ * the request through rejection.
+ * @returns {Promise<MeshContract>} Promise to the mesh.
+ * @throws Rejects the promise on errors.
+ */
+ getMesh(url: string, abort?: Promise<void>): Promise<MeshContract>;
+ /**
+ * Get sequence.
+ *
+ * @param {Array<string>} sequenceId - The id for the
+ * sequence to retrieve.
+ * @returns {Promise} Promise to the sequences of the
+ * requested image ids.
+ * @throws Rejects the promise on errors.
+ */
+ getSequence(sequenceId: string): Promise<SequenceContract>;
+ off(type: ProviderCellEvent["type"], handler: (event: ProviderCellEvent) => void): void;
+ /** @ignore */
+ off(type: ProviderEventType, handler: (event: ProviderEvent) => void): void;
+ /**
+ * Fired when data has been created in the data provider
+ * after initial load.
+ *
+ * @event datacreate
+ * @example
+ * ```js
+ * // Initialize the data provider
+ * class MyDataProvider extends DataProviderBase {
+ * // implementation
+ * }
+ * var provider = new MyDataProvider();
+ * // Set an event listener
+ * provider.on("datacreate", function() {
+ * console.log("A datacreate event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "datacreate", handler: (event: ProviderCellEvent) => void): void;
+ /** @ignore */
+ on(type: ProviderEventType, handler: (event: ProviderEvent) => 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;
+}
+
+interface GraphCameraContract {
+ focal: number;
+ k1: number;
+ k2: number;
+ projection_type: string;
+}
+interface GraphCameraShotContract {
+ camera: string;
+ rotation: number[];
+ translation: number[];
+}
+interface GraphReferenceContract {
+ altitude: number;
+ latitude: number;
+ longitude: number;
+}
+interface GraphPointContract {
+ color: number[];
+ coordinates: number[];
+}
+interface GraphClusterContract {
+ cameras: {
+ [cameraId: string]: GraphCameraContract;
+ };
+ points: {
+ [pointId: string]: GraphPointContract;
+ };
+ reference_lla: GraphReferenceContract;
+ shots: {
+ [imageKey: string]: GraphCameraShotContract;
+ };
+}
+
+interface GraphGeometry {
+ coordinates: [number, number];
+}
+interface GraphCoreImageEnt extends IDEnt {
+ computed_geometry: GraphGeometry;
+ geometry: GraphGeometry;
+ sequence: string;
+}
+interface GraphSpatialImageEnt extends SpatialImageEnt {
+ merge_cc: number;
+ sfm_cluster: URLEnt;
+ thumb_1024_url: string;
+ thumb_2048_url: string;
+}
+
+declare class GraphConverter {
+ clusterReconstruction(source: GraphClusterContract): ClusterContract;
+ coreImage(source: GraphCoreImageEnt): CoreImageEnt;
+ spatialImage(source: GraphSpatialImageEnt): SpatialImageEnt;
+ private _geometry;
+}
+
+interface GraphDataProviderOptions {
+ endpoint?: string;
+ accessToken?: string;
+}
+
+declare class GraphQueryCreator {
+ readonly imagesPath: string;
+ readonly sequencePath: string;
+ readonly coreFields: string[];
+ readonly idFields: string[];
+ readonly spatialFields: string[];
+ readonly imageTileFields: string[];
+ private readonly _imageTilesPath;
+ constructor();
+ 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 {
+ private readonly _method;
+ private readonly _endpoint;
+ private readonly _convert;
+ private readonly _query;
+ private _accessToken;
+ constructor(options?: GraphDataProviderOptions, geometry?: GeometryProviderBase, converter?: GraphConverter, queryCreator?: GraphQueryCreator);
+ getCluster(url: string, abort?: Promise<void>): Promise<ClusterContract>;
+ getCoreImages(cellId: string): Promise<CoreImagesContract>;
+ getImageBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer>;
+ getImages(imageIds: string[]): Promise<ImagesContract>;
+ getImageTiles(request: ImageTilesRequestContract): Promise<ImageTilesContract>;
+ getMesh(url: string, abort?: Promise<void>): Promise<MeshContract>;
+ getSequence(sequenceId: string): Promise<SequenceContract>;
+ getSpatialImages(imageIds: string[]): Promise<SpatialImagesContract>;
+ setAccessToken(accessToken: string): void;
+ private _createHeaders;
+ private _fetchGraphContract;
+ private _makeErrorMessage;
+}
+
+/**
+ * @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 {
+ private readonly _level;
+ /**
+ * Create a new S2 geometry provider instance.
+ */
+ constructor(_level?: number);
+ /** @inheritdoc */
+ bboxToCellIds(sw: LngLat, ne: LngLat): string[];
+ /** @inheritdoc */
+ getAdjacent(cellId: string): string[];
+ /** @inheritdoc */
+ getVertices(cellId: string): LngLat[];
+ /** @inheritdoc */
+ lngLatToCellId(lngLat: LngLat): string;
+ private _getNeighbors;
+ private _lngLatToId;
+}
+
+interface ComponentConfiguration {
+ [key: string]: any;
+}
+
+/**
+ * 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 enum RenderMode {
+ /**
+ * Displays all content within the viewer.
+ *
+ * @description Black bars shown on both
+ * sides of the content. Bars are shown
+ * either below and above or to the left
+ * and right of the content depending on
+ * the aspect ratio relation between the
+ * image and the viewer.
+ */
+ Letterbox = 0,
+ /**
+ * Fills the viewer by cropping content.
+ *
+ * @description Cropping is done either
+ * in horizontal or vertical direction
+ * depending on the aspect ratio relation
+ * between the image and the viewer.
+ */
+ Fill = 1
+}
+
+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 {
+ private _width;
+ private _height;
+ private _focal;
+ private _orientation;
+ private _scale;
+ private _basicWidth;
+ private _basicHeight;
+ private _basicAspect;
+ private _worldToCamera;
+ private _worldToCameraInverse;
+ private _scaledWorldToCamera;
+ private _scaledWorldToCameraInverse;
+ private _basicWorldToCamera;
+ private _textureScale;
+ private _ck1;
+ private _ck2;
+ private _cameraType;
+ private _radialPeak;
+ /**
+ * Create a new transform instance.
+ * @param {number} orientation - Image orientation.
+ * @param {number} width - Image height.
+ * @param {number} height - Image width.
+ * @param {number} focal - Focal length.
+ * @param {number} scale - Atomic scale.
+ * @param {Array<number>} rotation - Rotation vector in three dimensions.
+ * @param {Array<number>} translation - Translation vector in three dimensions.
+ * @param {HTMLImageElement} image - Image for fallback size calculations.
+ */
+ constructor(orientation: number, width: number, height: number, scale: number, rotation: number[], translation: number[], image: HTMLImageElement, textureScale?: number[], cameraParameters?: number[], cameraType?: CameraType);
+ get ck1(): number;
+ get ck2(): number;
+ get cameraType(): CameraType;
+ /**
+ * Get basic aspect.
+ * @returns {number} The orientation adjusted aspect ratio.
+ */
+ get 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).
+ */
+ get basicHeight(): number;
+ get basicRt(): Matrix4;
+ /**
+ * 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).
+ */
+ get basicWidth(): number;
+ /**
+ * Get focal.
+ * @returns {number} The image focal length.
+ */
+ get 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.
+ */
+ get height(): number;
+ /**
+ * Get orientation.
+ * @returns {number} The image orientation.
+ */
+ get orientation(): number;
+ /**
+ * Get rt.
+ * @returns {THREE.Matrix4} The extrinsic camera matrix.
+ */
+ get rt(): Matrix4;
+ /**
+ * Get srt.
+ * @returns {THREE.Matrix4} The scaled extrinsic camera matrix.
+ */
+ get srt(): Matrix4;
+ /**
+ * Get srtInverse.
+ * @returns {THREE.Matrix4} The scaled extrinsic camera matrix.
+ */
+ get srtInverse(): Matrix4;
+ /**
+ * Get scale.
+ * @returns {number} The image atomic reconstruction scale.
+ */
+ get scale(): number;
+ /**
+ * Get has valid scale.
+ * @returns {boolean} Value indicating if the scale of the transform is valid.
+ */
+ get hasValidScale(): boolean;
+ /**
+ * Get radial peak.
+ * @returns {number} Value indicating the radius where the radial
+ * undistortion function peaks.
+ */
+ get 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.
+ */
+ get width(): number;
+ /**
+ * Calculate the up vector for the image transform.
+ *
+ * @returns {THREE.Vector3} Normalized and orientation adjusted up vector.
+ */
+ upVector(): Vector3;
+ /**
+ * Calculate projector matrix for projecting 3D points to texture map
+ * coordinates (u and v).
+ *
+ * @returns {THREE.Matrix4} Projection matrix for 3D point to texture
+ * map coordinate calculations.
+ */
+ projectorMatrix(): Matrix4;
+ /**
+ * Project 3D world coordinates to basic coordinates.
+ *
+ * @param {Array<number>} point3d - 3D world coordinates.
+ * @return {Array<number>} 2D basic coordinates.
+ */
+ projectBasic(point3d: number[]): number[];
+ /**
+ * Unproject basic coordinates to 3D world coordinates.
+ *
+ * @param {Array<number>} basic - 2D basic coordinates.
+ * @param {Array<number>} distance - Distance to unproject from camera center.
+ * @param {boolean} [depth] - Treat the distance value as depth from camera center.
+ * Only applicable for perspective images. Will be
+ * ignored for spherical.
+ * @returns {Array<number>} Unprojected 3D world coordinates.
+ */
+ unprojectBasic(basic: number[], distance: number, depth?: boolean): number[];
+ /**
+ * Project 3D world coordinates to SfM coordinates.
+ *
+ * @param {Array<number>} point3d - 3D world coordinates.
+ * @return {Array<number>} 2D SfM coordinates.
+ */
+ projectSfM(point3d: number[]): number[];
+ /**
+ * Unproject SfM coordinates to a 3D world coordinates.
+ *
+ * @param {Array<number>} sfm - 2D SfM coordinates.
+ * @param {Array<number>} distance - Distance to unproject
+ * from camera center.
+ * @param {boolean} [depth] - Treat the distance value as
+ * depth from camera center. Only applicable for perspective
+ * images. Will be ignored for spherical.
+ * @returns {Array<number>} Unprojected 3D world coordinates.
+ */
+ unprojectSfM(sfm: number[], distance: number, depth?: boolean): number[];
+ /**
+ * Transform SfM coordinates to bearing vector (3D cartesian
+ * coordinates on the unit sphere).
+ *
+ * @param {Array<number>} sfm - 2D SfM coordinates.
+ * @returns {Array<number>} Bearing vector (3D cartesian coordinates
+ * on the unit sphere).
+ */
+ private _sfmToBearing;
+ /** Compute distortion given the distorted radius.
+ *
+ * Solves for d in the equation
+ * y = d(x, k1, k2) * x
+ * given the distorted radius, y.
+ */
+ private _distortionFromDistortedRadius;
+ /**
+ * Transform bearing vector (3D cartesian coordiantes on the unit sphere) to
+ * SfM coordinates.
+ *
+ * @param {Array<number>} bearing - Bearing vector (3D cartesian coordinates on the
+ * unit sphere).
+ * @returns {Array<number>} 2D SfM coordinates.
+ */
+ private _bearingToSfm;
+ /**
+ * Convert basic coordinates to SfM coordinates.
+ *
+ * @param {Array<number>} basic - 2D basic coordinates.
+ * @returns {Array<number>} 2D SfM coordinates.
+ */
+ private _basicToSfm;
+ /**
+ * Convert SfM coordinates to basic coordinates.
+ *
+ * @param {Array<number>} sfm - 2D SfM coordinates.
+ * @returns {Array<number>} 2D basic coordinates.
+ */
+ private _sfmToBasic;
+ /**
+ * Checks a value and returns it if it exists and is larger than 0.
+ * Fallbacks if it is null.
+ *
+ * @param {number} value - Value to check.
+ * @param {number} fallback - Value to fall back to.
+ * @returns {number} The value or its fallback value if it is not defined or negative.
+ */
+ private _getValue;
+ private _getCameraParameters;
+ /**
+ * Creates the extrinsic camera matrix [ R | t ].
+ *
+ * @param {Array<number>} rotation - Rotation vector in angle axis representation.
+ * @param {Array<number>} translation - Translation vector.
+ * @returns {THREE.Matrix4} Extrisic camera matrix.
+ */
+ private createWorldToCamera;
+ /**
+ * Calculates the scaled extrinsic camera matrix scale * [ R | t ].
+ *
+ * @param {THREE.Matrix4} worldToCamera - Extrisic camera matrix.
+ * @param {number} scale - Scale factor.
+ * @returns {THREE.Matrix4} Scaled extrisic camera matrix.
+ */
+ private _createScaledWorldToCamera;
+ private _createBasicWorldToCamera;
+ private _getRadialPeak;
+ /**
+ * Calculate a transformation matrix from normalized coordinates for
+ * texture map coordinates.
+ *
+ * @returns {THREE.Matrix4} Normalized coordinates to texture map
+ * coordinates transformation matrix.
+ */
+ private _normalizedToTextureMatrix;
+}
+
+/**
+ * @class Camera
+ *
+ * @classdesc Holds information about a camera.
+ */
+declare class Camera {
+ private _position;
+ private _lookat;
+ private _up;
+ private _focal;
+ /**
+ * Create a new camera instance.
+ * @param {Transform} [transform] - Optional transform instance.
+ */
+ constructor(transform?: Transform);
+ /**
+ * Get position.
+ * @returns {THREE.Vector3} The position vector.
+ */
+ get position(): Vector3;
+ /**
+ * Get lookat.
+ * @returns {THREE.Vector3} The lookat vector.
+ */
+ get lookat(): Vector3;
+ /**
+ * Get up.
+ * @returns {THREE.Vector3} The up vector.
+ */
+ get up(): Vector3;
+ /**
+ * Get focal.
+ * @returns {number} The focal length.
+ */
+ get focal(): number;
+ /**
+ * Set focal.
+ */
+ set focal(value: 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;
+ /**
+ * Get the focal length based on the transform.
+ *
+ * @description Returns the focal length corresponding
+ * to a 90 degree field of view for spherical
+ * transforms.
+ *
+ * Returns the transform focal length for other
+ * projection types.
+ *
+ * @returns {number} Focal length.
+ */
+ private _getFocal;
+}
+
+declare enum State {
+ Custom = 0,
+ Earth = 1,
+ Traversing = 2,
+ Waiting = 3,
+ WaitingInteractively = 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 enum NavigationDirection {
+ /**
+ * Next image in the sequence.
+ */
+ Next = 0,
+ /**
+ * Previous image in the sequence.
+ */
+ Prev = 1,
+ /**
+ * Step to the left keeping viewing direction.
+ */
+ StepLeft = 2,
+ /**
+ * Step to the right keeping viewing direction.
+ */
+ StepRight = 3,
+ /**
+ * Step forward keeping viewing direction.
+ */
+ StepForward = 4,
+ /**
+ * Step backward keeping viewing direction.
+ */
+ StepBackward = 5,
+ /**
+ * Turn 90 degrees counter clockwise.
+ */
+ TurnLeft = 6,
+ /**
+ * Turn 90 degrees clockwise.
+ */
+ TurnRight = 7,
+ /**
+ * Turn 180 degrees.
+ */
+ TurnU = 8,
+ /**
+ * Spherical in general direction.
+ */
+ Spherical = 9,
+ /**
+ * Looking in roughly the same direction at rougly the same position.
+ */
+ Similar = 10
+}
+
+/**
+ * Interface that describes additional properties of an edge.
+ *
+ * @interface NavigationEdgeData
+ */
+interface NavigationEdgeData {
+ /**
+ * The edge direction.
+ */
+ direction: NavigationDirection;
+ /**
+ * The counter clockwise horizontal rotation angle from
+ * the X-axis in a spherical coordiante system of the
+ * motion from the source image to the destination node.
+ */
+ worldMotionAzimuth: number;
+}
+
+/**
+ * Interface that describes the properties for a
+ * navigation edge from a source image to a
+ * target image.
+ *
+ * @interface NavigationEdge
+ */
+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
+ */
+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 {
+ private _disposed;
+ private _provider;
+ private _image;
+ private _mesh;
+ private _sequenceEdges;
+ private _spatialEdges;
+ private _imageAborter;
+ private _meshAborter;
+ private _imageChanged$;
+ private _image$;
+ private _sequenceEdgesChanged$;
+ private _sequenceEdges$;
+ private _spatialEdgesChanged$;
+ private _spatialEdges$;
+ private _cachingAssets$;
+ private _iamgeSubscription;
+ private _sequenceEdgesSubscription;
+ private _spatialEdgesSubscription;
+ /**
+ * Create a new image cache instance.
+ */
+ constructor(provider: DataProviderBase);
+ /**
+ * 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.
+ */
+ get image(): HTMLImageElement;
+ /**
+ * Get image$.
+ *
+ * @returns {Observable<HTMLImageElement>} Observable emitting
+ * the cached image when it is updated.
+ */
+ get image$(): Observable<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.
+ */
+ get mesh(): MeshContract;
+ /**
+ * Get sequenceEdges.
+ *
+ * @returns {NavigationEdgeStatus} Value describing the status of the
+ * sequence edges.
+ */
+ get sequenceEdges(): NavigationEdgeStatus;
+ /**
+ * Get sequenceEdges$.
+ *
+ * @returns {Observable<NavigationEdgeStatus>} Observable emitting
+ * values describing the status of the sequence edges.
+ */
+ get sequenceEdges$(): Observable<NavigationEdgeStatus>;
+ /**
+ * Get spatialEdges.
+ *
+ * @returns {NavigationEdgeStatus} Value describing the status of the
+ * spatial edges.
+ */
+ get spatialEdges(): NavigationEdgeStatus;
+ /**
+ * Get spatialEdges$.
+ *
+ * @returns {Observable<NavigationEdgeStatus>} Observable emitting
+ * values describing the status of the spatial edges.
+ */
+ get spatialEdges$(): Observable<NavigationEdgeStatus>;
+ /**
+ * Cache the image and mesh assets.
+ *
+ * @param {SpatialImageEnt} spatial - Spatial props of the image to cache.
+ * @param {boolean} spherical - Value indicating whether image is a spherical.
+ * @param {boolean} merged - Value indicating whether image is merged.
+ * @returns {Observable<ImageCache>} Observable emitting this image
+ * cache whenever the load status has changed and when the mesh or image
+ * has been fully loaded.
+ */
+ cacheAssets$(spatial: SpatialImageEnt, merged: boolean): Observable<ImageCache>;
+ /**
+ * Cache an image with a higher resolution than the current one.
+ *
+ * @param {SpatialImageEnt} spatial - Spatial props.
+ * @returns {Observable<ImageCache>} Observable emitting a single item,
+ * the image cache, when the image has been cached. If supplied image
+ * size is not larger than the current image size the image cache is
+ * returned immediately.
+ */
+ cacheImage$(spatial: SpatialImageEnt): Observable<ImageCache>;
+ /**
+ * Cache the sequence edges.
+ *
+ * @param {Array<NavigationEdge>} edges - Sequence edges to cache.
+ */
+ cacheSequenceEdges(edges: NavigationEdge[]): void;
+ /**
+ * Cache the spatial edges.
+ *
+ * @param {Array<NavigationEdge>} edges - Spatial edges to cache.
+ */
+ cacheSpatialEdges(edges: NavigationEdge[]): void;
+ /**
+ * Dispose the image cache.
+ *
+ * @description Disposes all cached assets and unsubscribes to
+ * all streams.
+ */
+ dispose(): void;
+ /**
+ * Reset the sequence edges.
+ */
+ resetSequenceEdges(): void;
+ /**
+ * Reset the spatial edges.
+ */
+ resetSpatialEdges(): void;
+ /**
+ * Cache the image.
+ *
+ * @param {SpatialImageEnt} spatial - Spatial image.
+ * @param {boolean} spherical - Value indicating whether image is a spherical.
+ * @returns {Observable<ILoadStatusObject<HTMLImageElement>>} Observable
+ * emitting a load status object every time the load status changes
+ * and completes when the image is fully loaded.
+ */
+ private _cacheImage$;
+ /**
+ * Cache the mesh.
+ *
+ * @param {SpatialImageEnt} spatial - Spatial props.
+ * @param {boolean} merged - Value indicating whether image is merged.
+ * @returns {Observable<ILoadStatusObject<MeshContract>>} Observable emitting
+ * a load status object every time the load status changes and completes
+ * when the mesh is fully loaded.
+ */
+ private _cacheMesh$;
+ /**
+ * Create a load status object with an empty mesh.
+ *
+ * @returns {ILoadStatusObject<MeshContract>} Load status object
+ * with empty mesh.
+ */
+ private _createEmptyMesh;
+ private _disposeImage;
+}
+
+/**
+ * @class Image
+ *
+ * @classdesc Represents a image in the navigation graph.
+ *
+ * Explanation of position and bearing properties:
+ *
+ * When images are uploaded they will have GPS information in the EXIF, this is what
+ * is called `originalLngLat` {@link Image.originalLngLat}.
+ *
+ * When Structure from Motions has been run for a image a `computedLngLat` that
+ * differs from the `originalLngLat` will be created. It is different because
+ * GPS positions are not very exact and SfM aligns the camera positions according
+ * to the 3D reconstruction {@link Image.computedLngLat}.
+ *
+ * At last there exist a `lngLat` property which evaluates to
+ * the `computedLngLat` from SfM if it exists but falls back
+ * to the `originalLngLat` from the EXIF GPS otherwise {@link Image.lngLat}.
+ *
+ * Everything that is done in in the Viewer is based on the SfM positions,
+ * i.e. `computedLngLat`. That is why the smooth transitions go in the right
+ * direction (nd not in strange directions because of bad GPS).
+ *
+ * E.g. when placing a marker in the Viewer it is relative to the SfM
+ * position i.e. the `computedLngLat`.
+ *
+ * The same concept as above also applies to the compass angle (or bearing) properties
+ * `originalCa`, `computedCa` and `ca`.
+ */
+declare class Image {
+ private _cache;
+ private _core;
+ private _spatial;
+ /**
+ * 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);
+ /**
+ * 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
+ */
+ get assetsCached(): boolean;
+ /**
+ * Get cameraParameters.
+ *
+ * @description Will be undefined if SfM has
+ * not been run.
+ *
+ * Camera type dependent parameters.
+ *
+ * For perspective and fisheye camera types,
+ * the camera parameters array should be
+ * constructed according to
+ *
+ * `[focal, k1, k2]`
+ *
+ * where focal is the camera focal length,
+ * and k1, k2 are radial distortion parameters.
+ *
+ * For spherical camera type the camera
+ * parameters are unset or emtpy array.
+ *
+ * @returns {Array<number>} The parameters
+ * related to the camera type.
+ */
+ get cameraParameters(): number[];
+ /**
+ * Get cameraType.
+ *
+ * @description Will be undefined if SfM has not been run.
+ *
+ * @returns {string} The camera type that captured the image.
+ */
+ get 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.
+ */
+ get capturedAt(): number;
+ /**
+ * Get clusterId.
+ *
+ * @returns {string} Globally unique id of the SfM cluster to which
+ * the image belongs.
+ */
+ get clusterId(): string;
+ /**
+ * Get clusterUrl.
+ *
+ * @returns {string} Url to the cluster reconstruction file.
+ *
+ * @ignore
+ */
+ get 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.
+ */
+ get 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
+ */
+ get 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.
+ */
+ get 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.
+ */
+ get 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.
+ */
+ get 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.
+ */
+ get 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.
+ */
+ get creatorUsername(): string;
+ /**
+ * Get exifOrientation.
+ *
+ * @returns {number} EXIF orientation of original image.
+ */
+ get exifOrientation(): number;
+ /**
+ * Get height.
+ *
+ * @returns {number} Height of original image, not adjusted
+ * for orientation.
+ */
+ get height(): number;
+ /**
+ * Get image.
+ *
+ * @description The image will always be set on the current image.
+ *
+ * @returns {HTMLImageElement} Cached image element of the image.
+ */
+ get image(): HTMLImageElement;
+ /**
+ * Get image$.
+ *
+ * @returns {Observable<HTMLImageElement>} Observable emitting
+ * the cached image when it is updated.
+ *
+ * @ignore
+ */
+ get image$(): Observable<HTMLImageElement>;
+ /**
+ * Get id.
+ *
+ * @returns {string} Globally unique id of the image.
+ */
+ get 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.
+ */
+ get 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.
+ */
+ get 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.
+ */
+ get 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.
+ */
+ get mesh(): MeshContract;
+ /**
+ * Get originalAltitude.
+ *
+ * @returns {number} EXIF altitude, in meters, if available.
+ */
+ get originalAltitude(): number;
+ /**
+ * Get originalCompassAngle.
+ *
+ * @returns {number} Original EXIF compass angle, measured in
+ * degrees.
+ */
+ get originalCompassAngle(): number;
+ /**
+ * Get originalLngLat.
+ *
+ * @returns {LngLat} Original EXIF longitude, latitude in
+ * WGS84 datum, measured in degrees.
+ */
+ get 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.
+ */
+ get ownerId(): string;
+ /**
+ * Get private.
+ *
+ * @returns {boolean} Value specifying if image is accessible to
+ * organization members only or to everyone.
+ */
+ get 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].
+ */
+ get qualityScore(): number;
+ /**
+ * Get rotation.
+ *
+ * @description Will not be set if SfM has not been run.
+ *
+ * @returns {Array<number>} Rotation vector in angle axis representation.
+ */
+ get rotation(): number[];
+ /**
+ * Get scale.
+ *
+ * @description Will not be set if SfM has not been run.
+ *
+ * @returns {number} Scale of reconstruction the image
+ * belongs to.
+ */
+ get scale(): number;
+ /**
+ * Get sequenceId.
+ *
+ * @returns {string} Globally unique id of the sequence
+ * to which the image belongs.
+ */
+ get sequenceId(): string;
+ /**
+ * Get sequenceEdges.
+ *
+ * @returns {NavigationEdgeStatus} Value describing the status of the
+ * sequence edges.
+ *
+ * @ignore
+ */
+ get sequenceEdges(): NavigationEdgeStatus;
+ /**
+ * Get sequenceEdges$.
+ *
+ * @description Internal observable, should not be used as an API.
+ *
+ * @returns {Observable<NavigationEdgeStatus>} Observable emitting
+ * values describing the status of the sequence edges.
+ *
+ * @ignore
+ */
+ get sequenceEdges$(): Observable<NavigationEdgeStatus>;
+ /**
+ * Get spatialEdges.
+ *
+ * @returns {NavigationEdgeStatus} Value describing the status of the
+ * spatial edges.
+ *
+ * @ignore
+ */
+ get spatialEdges(): NavigationEdgeStatus;
+ /**
+ * Get spatialEdges$.
+ *
+ * @description Internal observable, should not be used as an API.
+ *
+ * @returns {Observable<NavigationEdgeStatus>} Observable emitting
+ * values describing the status of the spatial edges.
+ *
+ * @ignore
+ */
+ get spatialEdges$(): Observable<NavigationEdgeStatus>;
+ /**
+ * Get width.
+ *
+ * @returns {number} Width of original image, not
+ * adjusted for orientation.
+ */
+ get width(): number;
+ /**
+ * Cache the image and mesh assets.
+ *
+ * @description The assets are always cached internally by the
+ * library prior to setting a image as the current image.
+ *
+ * @returns {Observable<Image>} Observable emitting this image whenever the
+ * load status has changed and when the mesh or image has been fully loaded.
+ *
+ * @ignore
+ */
+ cacheAssets$(): Observable<Image>;
+ /**
+ * Cache the image asset.
+ *
+ * @description Use for caching a differently sized image than
+ * the one currently held by the image.
+ *
+ * @returns {Observable<Image>} Observable emitting this image whenever the
+ * load status has changed and when the mesh or image has been fully loaded.
+ *
+ * @ignore
+ */
+ cacheImage$(): Observable<Image>;
+ /**
+ * Cache the sequence edges.
+ *
+ * @description The sequence edges are cached asynchronously
+ * internally by the library.
+ *
+ * @param {Array<NavigationEdge>} edges - Sequence edges to cache.
+ * @ignore
+ */
+ cacheSequenceEdges(edges: NavigationEdge[]): void;
+ /**
+ * Cache the spatial edges.
+ *
+ * @description The spatial edges are cached asynchronously
+ * internally by the library.
+ *
+ * @param {Array<NavigationEdge>} edges - Spatial edges to cache.
+ * @ignore
+ */
+ cacheSpatialEdges(edges: NavigationEdge[]): void;
+ /**
+ * Dispose the image.
+ *
+ * @description Disposes all cached assets.
+ * @ignore
+ */
+ dispose(): void;
+ /**
+ * Initialize the image cache.
+ *
+ * @description The image cache is initialized internally by
+ * the library.
+ *
+ * @param {ImageCache} cache - The image cache to set as cache.
+ * @ignore
+ */
+ initializeCache(cache: ImageCache): void;
+ /**
+ * Complete an image with spatial properties.
+ *
+ * @description The image is completed internally by
+ * the library.
+ *
+ * @param {SpatialImageEnt} fill - The spatial image struct.
+ * @ignore
+ */
+ makeComplete(fill: SpatialImageEnt): void;
+ /**
+ * Reset the sequence edges.
+ *
+ * @ignore
+ */
+ resetSequenceEdges(): void;
+ /**
+ * Reset the spatial edges.
+ *
+ * @ignore
+ */
+ resetSpatialEdges(): void;
+ /**
+ * Clears the image and mesh assets, aborts
+ * any outstanding requests and resets edges.
+ *
+ * @ignore
+ */
+ uncache(): void;
+}
+
+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: State;
+}
+
+interface AnimationFrame {
+ id: number;
+ fps: number;
+ state: IAnimationState;
+}
+
+interface EulerRotation {
+ phi: number;
+ theta: number;
+}
+
+declare class RenderCamera {
+ private _spatial;
+ private _viewportCoords;
+ private _alpha;
+ private _renderMode;
+ private _zoom;
+ private _frameId;
+ private _size;
+ private _camera;
+ private _perspective;
+ private _rotation;
+ private _changed;
+ private _changedForFrame;
+ private _currentImageId;
+ private _previousImageId;
+ private _currentSpherical;
+ private _previousSpherical;
+ private _state;
+ private _currentProjectedPoints;
+ private _previousProjectedPoints;
+ private _currentFov;
+ private _previousFov;
+ private _initialFov;
+ constructor(elementWidth: number, elementHeight: number, renderMode: RenderMode);
+ get alpha(): number;
+ get camera(): Camera;
+ get changed(): boolean;
+ get frameId(): number;
+ get perspective(): PerspectiveCamera;
+ get renderMode(): RenderMode;
+ get rotation(): EulerRotation;
+ get zoom(): number;
+ get size(): ViewportSize;
+ getTilt(): number;
+ fovToZoom(fov: number): number;
+ setFrame(frame: AnimationFrame): void;
+ setProjectionMatrix(matrix: number[]): void;
+ setRenderMode(renderMode: RenderMode): void;
+ setSize(size: ViewportSize): void;
+ private _computeAspect;
+ private _computeCurrentFov;
+ private _computeFov;
+ private _computePreviousFov;
+ private _computeProjectedPoints;
+ private _computeRequiredVerticalFov;
+ private _computeRotation;
+ private _computeVerticalFov;
+ private _yToFov;
+ private _interpolateFov;
+ private _setFrameId;
+}
+
+declare class RenderService {
+ private _bearing$;
+ private _element;
+ private _currentFrame$;
+ private _projectionMatrix$;
+ private _renderCameraOperation$;
+ private _renderCameraHolder$;
+ private _renderCameraFrame$;
+ private _renderCamera$;
+ private _resize$;
+ private _size$;
+ private _spatial;
+ private _renderMode$;
+ private _subscriptions;
+ constructor(element: HTMLElement, currentFrame$: Observable<AnimationFrame>, renderMode: RenderMode, renderCamera?: RenderCamera);
+ get bearing$(): Observable<number>;
+ get element(): HTMLElement;
+ get projectionMatrix$(): Subject<number[]>;
+ get renderCamera$(): Observable<RenderCamera>;
+ get renderCameraFrame$(): Observable<RenderCamera>;
+ get renderMode$(): Subject<RenderMode>;
+ get resize$(): Subject<void>;
+ get size$(): Observable<ViewportSize>;
+ dispose(): void;
+}
+
+interface VirtualNodeHash {
+ name: string;
+ vNode: VNode;
+}
+
+declare class DOMRenderer {
+ private _renderService;
+ private _currentFrame$;
+ private _adaptiveOperation$;
+ private _offset$;
+ private _element$;
+ private _vPatch$;
+ private _vNode$;
+ private _render$;
+ private _renderAdaptive$;
+ private _subscriptions;
+ constructor(element: HTMLElement, renderService: RenderService, currentFrame$: Observable<AnimationFrame>);
+ get element$(): Observable<Element>;
+ get render$(): Subject<VirtualNodeHash>;
+ get renderAdaptive$(): Subject<VirtualNodeHash>;
+ clear(name: string): void;
+ remove(): void;
+}
+
+interface GLRenderFunction extends Function {
+ (perspectiveCamera: PerspectiveCamera, renderer: WebGLRenderer): void;
+}
+
+declare enum RenderPass$1 {
+ Background = 0,
+ Opaque = 1
+}
+
+interface GLFrameRenderer {
+ frameId: number;
+ needsRender: boolean;
+ render: GLRenderFunction;
+ pass: RenderPass$1;
+}
+
+interface GLRenderHash {
+ name: string;
+ renderer: GLFrameRenderer;
+}
+
+declare class GLRenderer {
+ private _renderService;
+ private _renderFrame$;
+ private _renderCameraOperation$;
+ private _renderCamera$;
+ private _render$;
+ private _clear$;
+ private _renderOperation$;
+ private _renderCollection$;
+ private _rendererOperation$;
+ private _renderer$;
+ private _eraserOperation$;
+ private _eraser$;
+ private _triggerOperation$;
+ private _webGLRenderer$;
+ private _renderFrameSubscription;
+ private _subscriptions;
+ private _opaqueRender$;
+ constructor(canvas: HTMLCanvasElement, canvasContainer: HTMLElement, renderService: RenderService);
+ get render$(): Subject<GLRenderHash>;
+ get opaqueRender$(): Observable<void>;
+ get webGLRenderer$(): Observable<WebGLRenderer>;
+ clear(name: string): void;
+ remove(): void;
+ triggerRerender(): void;
+ private _renderFrameSubscribe;
+}
+
+/**
+ * Enumeration for transition mode
+ * @enum {number}
+ * @readonly
+ * @description Modes for specifying how transitions
+ * between images are performed.
+ */
+declare enum TransitionMode {
+ /**
+ * Default transitions.
+ *
+ * @description The viewer dynamically determines
+ * whether transitions should be performed with or
+ * without motion and blending for each transition
+ * based on the underlying data.
+ */
+ Default = 0,
+ /**
+ * Instantaneous transitions.
+ *
+ * @description All transitions are performed
+ * without motion or blending.
+ */
+ Instantaneous = 1
+}
+
+declare class StateService {
+ private _start$;
+ private _frame$;
+ private _contextOperation$;
+ private _context$;
+ private _fps$;
+ private _state$;
+ private _currentState$;
+ private _lastState$;
+ private _currentImage$;
+ private _currentImageExternal$;
+ private _currentCamera$;
+ private _currentId$;
+ private _currentTransform$;
+ private _reference$;
+ private _inMotionOperation$;
+ private _inMotion$;
+ private _inTranslationOperation$;
+ private _inTranslation$;
+ private _appendImage$;
+ private _frameGenerator;
+ private _frameId;
+ private _fpsSampleRate;
+ private _subscriptions;
+ constructor(initialState: State, transitionMode?: TransitionMode);
+ get currentState$(): Observable<AnimationFrame>;
+ get currentImage$(): Observable<Image>;
+ get currentId$(): Observable<string>;
+ get currentImageExternal$(): Observable<Image>;
+ get currentCamera$(): Observable<Camera>;
+ get currentTransform$(): Observable<Transform>;
+ get state$(): Observable<State>;
+ get reference$(): Observable<LngLatAlt>;
+ get inMotion$(): Observable<boolean>;
+ get inTranslation$(): Observable<boolean>;
+ get appendImage$(): Subject<Image>;
+ dispose(): void;
+ custom(): void;
+ earth(): void;
+ traverse(): void;
+ wait(): void;
+ waitInteractively(): void;
+ appendImagess(images: Image[]): void;
+ prependImages(images: Image[]): void;
+ removeImages(n: number): void;
+ clearImages(): void;
+ clearPriorImages(): void;
+ cutImages(): void;
+ setImages(images: Image[]): void;
+ setViewMatrix(matrix: number[]): void;
+ rotate(delta: EulerRotation): void;
+ rotateUnbounded(delta: EulerRotation): void;
+ rotateWithoutInertia(delta: EulerRotation): void;
+ rotateBasic(basicRotation: number[]): void;
+ rotateBasicUnbounded(basicRotation: number[]): void;
+ rotateBasicWithoutInertia(basicRotation: number[]): void;
+ rotateToBasic(basic: number[]): void;
+ move(delta: number): void;
+ moveTo(position: number): void;
+ dolly(delta: number): void;
+ orbit(rotation: EulerRotation): void;
+ truck(direction: number[]): void;
+ /**
+ * Change zoom level while keeping the reference point position approximately static.
+ *
+ * @parameter {number} delta - Change in zoom level.
+ * @parameter {Array<number>} reference - Reference point in basic coordinates.
+ */
+ zoomIn(delta: number, reference: number[]): void;
+ getCenter(): Observable<number[]>;
+ getZoom(): Observable<number>;
+ setCenter(center: number[]): void;
+ setSpeed(speed: number): void;
+ setTransitionMode(mode: TransitionMode): void;
+ setZoom(zoom: number): void;
+ start(): void;
+ stop(): void;
+ private _invokeContextOperation;
+ private _frame;
+}
+
+declare class DOM {
+ private _document;
+ constructor(doc?: Node);
+ get document(): HTMLDocument;
+ createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, className?: string, container?: HTMLElement): HTMLElementTagNameMap[K];
+}
+
+/**
+ * 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 enum ComponentSize {
+ /**
+ * Automatic size. The size of the elements will automatically
+ * change at a predefined threshold.
+ */
+ Automatic = 0,
+ /**
+ * Large size. The size of the elements will be fixed until another
+ * component size is configured.
+ */
+ Large = 1,
+ /**
+ * Small size. The size of the elements will be fixed until another
+ * component size is configured.
+ */
+ Small = 2
+}
+
+interface BearingConfiguration extends ComponentConfiguration {
+ /**
+ * The size of the ui elements.
+ *
+ * @default ComponentSize.Automatic
+ */
+ size?: ComponentSize;
+}
+
+/**
+ * Interface for configuration of cache depth.
+ *
+ * @interface
+ * @example
+ * ```js
+ * var viewer = new Viewer({
+ * ...
+ * component: {
+ * cache: {
+ * depth: {
+ * spherical: 2,
+ * sequence: 3,
+ * }
+ * },
+ * },
+ * ...
+ * });
+ * ```
+ */
+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
+ */
+interface CacheConfiguration extends ComponentConfiguration {
+ /**
+ * Cache depth struct.
+ */
+ depth?: CacheDepthConfiguration;
+}
+
+/**
+ * Interface for configuration of direction component.
+ *
+ * @interface
+ * @example
+ * ```js
+ * var viewer = new Viewer({
+ * ...
+ * component: {
+ * direction: {
+ * minWidth: 140,
+ * maxWidth: 340,
+ * },
+ * },
+ * ...
+ * });
+ * ```
+ */
+interface DirectionConfiguration extends ComponentConfiguration {
+ /**
+ * 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;
+}
+
+/**
+ * Interface for configuration of keyboard component.
+ *
+ * @interface
+ * @example
+ * ```js
+ * var viewer = new Viewer({
+ * ...
+ * component: {
+ * keyboard: {
+ * keyZoom: false,
+ * keySequenceNavigation: false,
+ * keySpatialNavigation: false,
+ * },
+ * },
+ * ...
+ * });
+ * ```
+ */
+interface KeyboardConfiguration extends ComponentConfiguration {
+ /**
+ * 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;
+}
+
+/**
+ * Interface for configuration of marker component.
+ *
+ * @interface
+ * @example
+ * ```js
+ * var viewer = new Viewer({
+ * ...
+ * component: {
+ * marker: {
+ * visibleBBoxSize: 80,
+ * },
+ * },
+ * ...
+ * });
+ * ```
+ */
+interface MarkerConfiguration extends ComponentConfiguration {
+ /**
+ * 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;
+}
+
+/**
+ * Interface for configuration of mouse component.
+ *
+ * @interface
+ * @example
+ * ```js
+ * var viewer = new Viewer({
+ * ...
+ * component: {
+ * pointer: {
+ * dragPan: false,
+ * scrollZoom: false,
+ * touchZoom: false,
+ * },
+ * },
+ * ...
+ * });
+ * ```
+ */
+interface PointerConfiguration extends ComponentConfiguration {
+ /**
+ * 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;
+}
+
+/**
+ * Interface for configuration of sequence component.
+ *
+ * @interface
+ * @example
+ * ```js
+ * const viewer = new Viewer({
+ * ...
+ * component: {
+ * sequence: {
+ * minWidth: 40,
+ * maxWidth: 80,
+ * visible: false,
+ * },
+ * },
+ * ...
+ * });
+ * ```
+ */
+interface SequenceConfiguration extends ComponentConfiguration {
+ /**
+ * Set the direction to follow when playing.
+ *
+ * @default EdgeDirection.Next
+ */
+ direction?: NavigationDirection;
+ /**
+ * The node id representing the direction arrow to be highlighted.
+ *
+ * @description When set to null no direction will be highlighted.
+ * The arrow pointing towards the node corresponding to the
+ * highlight id will be highlighted.
+ *
+ * @default undefined
+ *
+ * @ignore
+ */
+ highlightId?: string;
+ /**
+ * The max width of the sequence container.
+ *
+ * @description Set max width of the container element holding
+ * the sequence navigation elements. If the min width is larger than the
+ * max width the min width value will be used.
+ *
+ * The container element is automatically resized when the resize
+ * method on the Viewer class is called.
+ *
+ * @default 117
+ */
+ maxWidth?: number;
+ /**
+ * The min width of the sequence container.
+ *
+ * @description Set min width of the container element holding
+ * the sequence navigation elements. If the min width is larger than the
+ * max width the min width value will be used.
+ *
+ * The container element is automatically resized when the resize
+ * method on the Viewer class is called.
+ *
+ * @default 70
+ */
+ minWidth?: number;
+ /**
+ * Indicating wheter the component is playing.
+ *
+ * @default false
+ */
+ playing?: boolean;
+ /**
+ * Determine whether the sequence UI elements
+ * should be visible.
+ *
+ * @default true
+ */
+ visible?: boolean;
+}
+
+/**
+ * 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 enum SliderConfigurationMode {
+ /**
+ * Transitions with motion.
+ *
+ * @description The slider component moves the
+ * camera between the image origins.
+ *
+ * In this mode it is not possible to zoom or pan.
+ *
+ * The slider component falls back to stationary
+ * mode when it determines that the pair of images
+ * does not have a strong enough relation.
+ */
+ Motion = 0,
+ /**
+ * Stationary transitions.
+ *
+ * @description The camera is stationary.
+ *
+ * In this mode it is possible to zoom and pan.
+ */
+ Stationary = 1
+}
+/**
+ * Interface for configuration of slider ids.
+ *
+ * @interface
+ */
+interface SliderConfigurationIds {
+ /**
+ * Id for the image plane in the background.
+ */
+ background: string;
+ /**
+ * Id for the image plane in the foreground.
+ */
+ foreground: string;
+}
+/**
+ * Interface for configuration of slider component.
+ *
+ * @interface
+ * ```js
+ * var viewer = new Viewer({
+ * ...
+ * component: {
+ * slider: {
+ * initialPosition: 0.5,
+ * ids: {
+ * background: '<background-id>',
+ * foreground: '<foreground-id>',
+ * },
+ * sliderVisible: true,
+ * },
+ * },
+ * ...
+ * });
+ * ```
+ */
+interface SliderConfiguration extends ComponentConfiguration {
+ /**
+ * Initial position of the slider on the interval [0, 1].
+ *
+ * @description Configures the intial 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?: SliderConfigurationMode;
+}
+
+declare enum CameraVisualizationMode {
+ /**
+ * Cameras are hidden.
+ */
+ Hidden = 0,
+ /**
+ * Cameras are shown, all with the same color.
+ */
+ Homogeneous = 1,
+ /**
+ * Cameras are shown with colors based on the
+ * their clusters.
+ */
+ Cluster = 2,
+ /**
+ * Cameras are shown with colors based on the
+ * their connected components.
+ */
+ ConnectedComponent = 3,
+ /**
+ * Cameras are shown, with colors based on the
+ * their sequence.
+ */
+ Sequence = 4
+}
+
+declare enum OriginalPositionMode {
+ /**
+ * Original positions are hidden.
+ */
+ Hidden = 0,
+ /**
+ * Visualize original positions with altitude change.
+ */
+ Altitude = 1,
+ /**
+ * Visualize original positions without altitude change,
+ * i.e. as flat lines from the camera origin.
+ */
+ Flat = 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,
+ * pointsVisible: false,
+ * },
+ * },
+ * ...
+ * });
+ * ```
+ */
+interface SpatialConfiguration extends ComponentConfiguration {
+ /**
+ * The camera size on the interval [0.01, 1].
+ *
+ * @default 0.1
+ */
+ cameraSize?: number;
+ /**
+ * Specify the camera visualization mode.
+ *
+ * @default CameraVisualizationMode.Homogeneous
+ */
+ cameraVisualizationMode?: CameraVisualizationMode;
+ /**
+ * Specify if the currently rendered cells should be visualize on
+ * an approximated ground plane.
+ *
+ * @default false
+ */
+ cellsVisible?: boolean;
+ /**
+ * Cell grid depth from the cell of the currently
+ * selected camera.
+ *
+ * @description Max value is 3. Value will be clamped
+ * to the interval [1, 3].
+ * @default 1
+ */
+ cellGridDepth?: number;
+ /**
+ * Specify the original position visualization mode.
+ *
+ * @description The original positions are hidden
+ * by default.
+ *
+ * @default OriginalPositionMode.Hidden
+ */
+ originalPositionMode?: OriginalPositionMode;
+ /**
+ * The point size on the interval [0.01, 1].
+ *
+ * @default 0.1
+ */
+ pointSize?: number;
+ /**
+ * Specify if the points should be visible or not.
+ *
+ * @default true
+ */
+ pointsVisible?: boolean;
+}
+
+/**
+ * Enumeration for tag modes
+ * @enum {number}
+ * @readonly
+ * @description Modes for the interaction in the tag component.
+ */
+declare enum TagMode {
+ /**
+ * Disables creating tags.
+ */
+ Default = 0,
+ /**
+ * Create a point geometry through a click.
+ */
+ CreatePoint = 1,
+ /**
+ * Create a points geometry through clicks.
+ */
+ CreatePoints = 2,
+ /**
+ * Create a polygon geometry through clicks.
+ */
+ CreatePolygon = 3,
+ /**
+ * Create a rect geometry through clicks.
+ */
+ CreateRect = 4,
+ /**
+ * Create a rect geometry through drag.
+ *
+ * @description Claims the mouse which results in mouse handlers like
+ * drag pan and scroll zoom becoming inactive.
+ */
+ CreateRectDrag = 5
+}
+
+/**
+ * Interface for configuration of tag component.
+ *
+ * @interface
+ * @example
+ * ```js
+ * var viewer = new Viewer({
+ * ...
+ * component: {
+ * tag: {
+ * createColor: 0xFF0000,
+ * mode: TagMode.CreateRect,
+ * },
+ * },
+ * ...
+ * });
+ * ```
+ */
+interface TagConfiguration extends ComponentConfiguration {
+ /**
+ * 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?: TagMode;
+}
+
+interface ZoomConfiguration extends ComponentConfiguration {
+ /**
+ * The size of the ui elements.
+ *
+ * @default ComponentSize.Automatic
+ */
+ size?: ComponentSize;
+}
+
+/**
+ * Interface for configuration of navigation component.
+ *
+ * @interface
+ * @example
+ * ```js
+ * var viewer = new Viewer({
+ * ...
+ * component: {
+ * fallback: {
+ * navigation: {
+ * spatial: false,
+ * },
+ * },
+ * },
+ * ...
+ * });
+ * ```
+ */
+interface NavigationFallbackConfiguration extends ComponentConfiguration {
+ /**
+ * Enable or disable the sequence arrows.
+ *
+ * @default true
+ */
+ sequence?: boolean;
+ /**
+ * Enable or disable the spatial arrows.
+ *
+ * @default true
+ */
+ spatial?: boolean;
+}
+
+/**
+ * Interface for the fallback component options that can be
+ * provided to the viewer when the browser does not have
+ * WebGL support.
+ *
+ * @interface
+ */
+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
+ */
+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
+ */
+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 enum CameraControls {
+ /**
+ * Control the camera with custom logic by
+ * attaching a custom camera controls
+ * instance to the {@link Viewer}.
+ */
+ Custom = 0,
+ /**
+ * Control the camera from a birds perspective
+ * to get an overview.
+ */
+ Earth = 1,
+ /**
+ * Control the camera in a first person view
+ * from the street level perspective.
+ */
+ Street = 2
+}
+
+/**
+ * Interface for the options that can be provided to the {@link Viewer}.
+ */
+interface ViewerOptions {
+ /**
+ * Optional access token for API requests of
+ * resources.
+ *
+ * @description Can be a user access token or
+ * a client access token.
+ *
+ * A Mapillary client access token can be obtained
+ * by [registering an application](https://www.mapillary.com/dashboard/developers).
+ *
+ * The access token can also be set through the
+ * {@link Viewer.setAccessToken} method.
+ */
+ accessToken?: string;
+ /**
+ * Value specifying the initial camera controls of
+ * the viewer.
+ *
+ * @default {@link CameraControls.Street}
+ */
+ cameraControls?: CameraControls;
+ /**
+ * Value specifying if combined panning should be activated.
+ *
+ * @default true
+ */
+ combinedPanning?: boolean;
+ /**
+ * Component options.
+ */
+ component?: ComponentOptions;
+ /**
+ * The HTML element in which MapillaryJS will render the
+ * viewer, or the element's string `id`. The
+ * specified element must have no children.
+ */
+ container: string | HTMLElement;
+ /**
+ * Optional data provider class instance for API and static
+ * resource requests.
+ *
+ * @description The data provider will override the
+ * default MapillaryJS data provider and take responsibility
+ * for all IO handling.
+ *
+ * The data provider takes precedance over the {@link }
+ *
+ * A data provider instance must extend
+ * the data provider base class.
+ */
+ dataProvider?: DataProviderBase;
+ /**
+ * Optional `image-id` to start from. The id
+ * can be any Mapillary image. If a id is provided the viewer is
+ * bound to that id until it has been fully loaded. If null is provided
+ * no image is loaded at viewer initialization and the viewer is not
+ * bound to any particular id. Any image can then be navigated to
+ * with e.g. `viewer.moveTo("<my-image-id>")`.
+ */
+ imageId?: string;
+ /**
+ * Value indicating if the viewer should fetch high resolution
+ * image tiles.
+ *
+ * @description Can be used when extending MapillaryJS with
+ * a custom data provider. If no image tiling server exists
+ * the image tiling can be inactivated to avoid error
+ * messages about non-existing tiles in the console.
+ *
+ * @default true
+ */
+ imageTiling?: boolean;
+ /**
+ * The render mode in the viewer.
+ *
+ * @default {@link RenderMode.Fill}
+ */
+ renderMode?: RenderMode;
+ /**
+ * A base URL for retrieving a PNG sprite image and json metadata file.
+ * File name extensions will be automatically appended.
+ */
+ sprite?: string;
+ /**
+ * If `true`, the viewer will automatically resize when the
+ * browser window resizes.
+ *
+ * @default true
+ */
+ trackResize?: boolean;
+ /**
+ * The transtion mode in the viewer.
+ *
+ * @default {@link TransitionMode.Default}
+ */
+ transitionMode?: TransitionMode;
+ /**
+ * The URL options.
+ */
+ url?: UrlOptions;
+}
+
+declare class KeyboardService {
+ private _keyDown$;
+ private _keyUp$;
+ constructor(canvasContainer: HTMLElement);
+ get keyDown$(): Observable<KeyboardEvent>;
+ get keyUp$(): Observable<KeyboardEvent>;
+}
+
+declare class MouseService {
+ private _activeSubject$;
+ private _active$;
+ private _domMouseDown$;
+ private _domMouseMove$;
+ private _domMouseDragStart$;
+ private _domMouseDrag$;
+ private _domMouseDragEnd$;
+ private _documentMouseMove$;
+ private _documentMouseUp$;
+ private _mouseDown$;
+ private _mouseEnter$;
+ private _mouseMove$;
+ private _mouseLeave$;
+ private _mouseUp$;
+ private _mouseOut$;
+ private _mouseOver$;
+ private _contextMenu$;
+ private _consistentContextMenu$;
+ private _click$;
+ private _dblClick$;
+ private _deferPixelClaims$;
+ private _deferPixels$;
+ private _proximateClick$;
+ private _staticClick$;
+ private _mouseWheel$;
+ private _mouseDragStart$;
+ private _mouseDrag$;
+ private _mouseDragEnd$;
+ private _mouseRightDragStart$;
+ private _mouseRightDrag$;
+ private _mouseRightDragEnd$;
+ private _claimMouse$;
+ private _claimWheel$;
+ private _mouseOwner$;
+ private _wheelOwner$;
+ private _windowBlur$;
+ private _subscriptions;
+ constructor(container: EventTarget, canvasContainer: EventTarget, domContainer: EventTarget, doc: EventTarget);
+ get active$(): Observable<boolean>;
+ get activate$(): Subject<boolean>;
+ get documentMouseMove$(): Observable<MouseEvent>;
+ get documentMouseUp$(): Observable<MouseEvent>;
+ get domMouseDragStart$(): Observable<MouseEvent>;
+ get domMouseDrag$(): Observable<MouseEvent>;
+ get domMouseDragEnd$(): Observable<MouseEvent | FocusEvent>;
+ get domMouseDown$(): Observable<MouseEvent>;
+ get domMouseMove$(): Observable<MouseEvent>;
+ get mouseOwner$(): Observable<string>;
+ get mouseDown$(): Observable<MouseEvent>;
+ get mouseEnter$(): Observable<MouseEvent>;
+ get mouseMove$(): Observable<MouseEvent>;
+ get mouseLeave$(): Observable<MouseEvent>;
+ get mouseOut$(): Observable<MouseEvent>;
+ get mouseOver$(): Observable<MouseEvent>;
+ get mouseUp$(): Observable<MouseEvent>;
+ get click$(): Observable<MouseEvent>;
+ get dblClick$(): Observable<MouseEvent>;
+ get contextMenu$(): Observable<MouseEvent>;
+ get mouseWheel$(): Observable<WheelEvent>;
+ get mouseDragStart$(): Observable<MouseEvent>;
+ get mouseDrag$(): Observable<MouseEvent>;
+ get mouseDragEnd$(): Observable<MouseEvent | FocusEvent>;
+ get mouseRightDragStart$(): Observable<MouseEvent>;
+ get mouseRightDrag$(): Observable<MouseEvent>;
+ get mouseRightDragEnd$(): Observable<MouseEvent | FocusEvent>;
+ get proximateClick$(): Observable<MouseEvent>;
+ get staticClick$(): Observable<MouseEvent>;
+ get windowBlur$(): Observable<FocusEvent>;
+ 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;
+ filtered$<T>(name: string, observable$: Observable<T>): Observable<T>;
+ filteredWheel$<T>(name: string, observable$: Observable<T>): Observable<T>;
+ private _createDeferredMouseMove$;
+ private _createMouseDrag$;
+ private _createMouseDragEnd$;
+ private _createMouseDragStart$;
+ private _createMouseDragInitiate$;
+ private _createOwner$;
+ private _filtered;
+ private _mouseButton;
+ private _buttonReleased;
+ private _isMousePen;
+}
+
+/**
+ * Enumeration for alignments
+ * @enum {number}
+ * @readonly
+ */
+declare enum Alignment {
+ /**
+ * Align to bottom
+ */
+ Bottom = 0,
+ /**
+ * Align to bottom left
+ */
+ BottomLeft = 1,
+ /**
+ * Align to bottom right
+ */
+ BottomRight = 2,
+ /**
+ * Align to center
+ */
+ Center = 3,
+ /**
+ * Align to left
+ */
+ Left = 4,
+ /**
+ * Align to right
+ */
+ Right = 5,
+ /**
+ * Align to top
+ */
+ Top = 6,
+ /**
+ * Align to top left
+ */
+ TopLeft = 7,
+ /**
+ * Align to top right
+ */
+ TopRight = 8
+}
+
+interface ISpriteAtlas {
+ loaded: boolean;
+ getGLSprite(name: string): Object3D;
+ getDOMSprite(name: string, float?: Alignment): VNode;
+}
+
+declare class SpriteAtlas implements ISpriteAtlas {
+ private _image;
+ private _texture;
+ private _json;
+ set json(value: Sprites);
+ set image(value: HTMLImageElement);
+ get loaded(): boolean;
+ getGLSprite(name: string): Object3D;
+ getDOMSprite(name: string, float?: Alignment): VNode;
+}
+interface Sprite {
+ width: number;
+ height: number;
+ x: number;
+ y: number;
+ pixelRatio: number;
+}
+interface Sprites {
+ [key: string]: Sprite;
+}
+declare class SpriteService {
+ private _retina;
+ private _spriteAtlasOperation$;
+ private _spriteAtlas$;
+ private _atlasSubscription;
+ constructor(sprite?: string);
+ get spriteAtlas$(): Observable<SpriteAtlas>;
+ dispose(): void;
+}
+
+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 {
+ private _activeSubject$;
+ private _active$;
+ private _touchStart$;
+ private _touchMove$;
+ private _touchEnd$;
+ private _touchCancel$;
+ private _singleTouchDrag$;
+ private _singleTouchDragStart$;
+ private _singleTouchDragEnd$;
+ private _singleTouchMove$;
+ private _pinchOperation$;
+ private _pinch$;
+ private _pinchStart$;
+ private _pinchEnd$;
+ private _pinchChange$;
+ private _doubleTap$;
+ private _subscriptions;
+ constructor(canvasContainer: HTMLElement, domContainer: HTMLElement);
+ get active$(): Observable<boolean>;
+ get activate$(): Subject<boolean>;
+ get doubleTap$(): Observable<TouchEvent>;
+ get touchStart$(): Observable<TouchEvent>;
+ get touchMove$(): Observable<TouchEvent>;
+ get touchEnd$(): Observable<TouchEvent>;
+ get touchCancel$(): Observable<TouchEvent>;
+ get singleTouchDragStart$(): Observable<TouchEvent>;
+ get singleTouchDrag$(): Observable<TouchEvent>;
+ get singleTouchDragEnd$(): Observable<TouchEvent>;
+ get pinch$(): Observable<TouchPinch>;
+ get pinchStart$(): Observable<TouchEvent>;
+ get pinchEnd$(): Observable<TouchEvent>;
+ 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;
+
+declare type ComparisonFilterOperator = "==" | "!=" | ">" | ">=" | "<" | "<=";
+declare type SetMembershipFilterOperator = "in" | "!in";
+declare type CombiningFilterOperator = "all";
+declare type FilterOperator = CombiningFilterOperator | ComparisonFilterOperator | SetMembershipFilterOperator;
+declare type FilterImage = Pick<Image, "cameraType" | "capturedAt" | "clusterId" | "creatorId" | "creatorUsername" | "exifOrientation" | "height" | "id" | "mergeId" | "merged" | "ownerId" | "private" | "qualityScore" | "sequenceId" | "width">;
+declare type FilterKey = keyof FilterImage;
+declare type FilterValue = boolean | number | string;
+declare type ComparisonFilterExpression = [
+ ComparisonFilterOperator,
+ FilterKey,
+ FilterValue
+];
+declare type SetMembershipFilterExpression = [
+ SetMembershipFilterOperator,
+ FilterKey,
+ ...FilterValue[]
+];
+declare type CombiningFilterExpression = [
+ CombiningFilterOperator,
+ ...(ComparisonFilterExpression | SetMembershipFilterExpression)[]
+];
+declare type FilterExpression = ComparisonFilterExpression | SetMembershipFilterExpression | CombiningFilterExpression;
+
+/**
+ * @event
+ */
+declare type ViewerEventType = "bearing" | "click" | "contextmenu" | "dblclick" | "fov" | "dataloading" | "load" | "mousedown" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "moveend" | "movestart" | "navigable" | "image" | "position" | "pov" | "remove" | "sequenceedges" | "spatialedges";
+
+declare enum RenderPass {
+ /**
+ * Occurs after the background render pass.
+ */
+ Opaque = 0
+}
+
+/**
+ * @interface
+ *
+ * @description Interface for custom renderers. This is a
+ * specification for implementers to model: it is not
+ * an exported method or class.
+ *
+ * A custom renderer allows the API user to render directly
+ * into the viewer's GL context using the viewer's camera.
+ *
+ * Custom renderers must have a unique id. They must implement
+ * render, onReferenceChanged, onAdd, and onRemove. They can
+ * trigger rendering using {@link Viewer.triggerRerender}.
+ *
+ * The viewer uses a metric topocentric
+ * [local east, north, up coordinate system](https://en.wikipedia.org/wiki/Local_tangent_plane_coordinates).
+ *
+ * Custom renderers can calculate the topocentric positions
+ * of their objects using the reference parameter of the
+ * renderer interface methods and the {@link geodeticToEnu}
+ * method.
+ *
+ * During a render pass, custom renderers
+ * are called in the order they were added.
+ */
+interface ICustomRenderer {
+ /**
+ * A unique renderer id.
+ */
+ id: string;
+ /**
+ * The custom renderer's render pass.
+ *
+ * @description The {@link ICustomRenderer.render} method
+ * will be called during this render pass.
+ */
+ renderPass: RenderPass;
+ /**
+ * Method called when the renderer has been added to the
+ * viewer. This gives the
+ * renderer a chance to initialize gl resources and
+ * register event listeners.
+ *
+ * @description Custom renderers are added with the
+ * with {@link Viewer.addCustomRenderer} method.
+ *
+ * Calculate the topocentric positions
+ * for scene objects using the provided reference and
+ * the {@link geodeticToEnu} function.
+ *
+ * @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 | WebGL2RenderingContext): void;
+ /**
+ * Method called when the viewer's reference position has changed.
+ * This gives the renderer a chance to reposition its scene objects.
+ *
+ * @description Calculate the updated topocentric positions
+ * for scene objects using the provided reference and
+ * the {@link geodeticToEnu} function.
+ *
+ * @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 Custom renderers are remove with the
+ * {@link Viewer.removeCustomRenderer} method.
+ *
+ * @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 | WebGL2RenderingContext): void;
+ /**
+ * Called during an animation frame allowing the renderer to draw
+ * into the GL context. The layer cannot make assumptions
+ * about the current GL state.
+ *
+ * @description Take a look at the
+ * [WebGL model view projection article](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection)
+ * on MDN for an introduction to the view and projection matrices.
+ *
+ * @param {WebGLRenderingContext | WebGL2RenderingContext} context The
+ * viewer's WebGL context.
+ * @param {Array<number>} viewMatrix The viewer's view matrix.
+ * @param {Array<number>} projectionMatrix The viewers's projection
+ * matrix.
+ */
+ render(context: WebGLRenderingContext | WebGL2RenderingContext, viewMatrix: number[], projectionMatrix: number[]): void;
+}
+
+/**
+ * @interface PointOfView
+ *
+ * Interface that represents the point of view of the viewer.
+ */
+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;
+}
+
+interface IViewer {
+ readonly isNavigable: boolean;
+ activateCombinedPanning(): void;
+ activateComponent(name: string): void;
+ activateCover(): void;
+ addCustomRenderer(renderer: ICustomRenderer): void;
+ deactivateCombinedPanning(): void;
+ deactivateComponent(name: string): void;
+ deactivateCover(): void;
+ fire<T>(type: ViewerEventType, event: T): void;
+ getBearing(): Promise<number>;
+ getCanvas(): HTMLCanvasElement;
+ getCanvasContainer(): HTMLDivElement;
+ getCenter(): Promise<number[]>;
+ getComponent<TComponent extends Component<ComponentConfiguration>>(name: string): TComponent;
+ getContainer(): HTMLElement;
+ getFieldOfView(): Promise<number>;
+ getPointOfView(): Promise<PointOfView>;
+ getPosition(): Promise<LngLat>;
+ getZoom(): Promise<number>;
+ hasCustomRenderer(rendererId: string): boolean;
+ moveDir(direction: NavigationDirection): Promise<Image>;
+ moveTo(imageId: string): Promise<Image>;
+ off<T>(type: ViewerEventType, handler: (event: T) => void): void;
+ on<T>(type: ViewerEventType, handler: (event: T) => void): void;
+ project(lngLat: LngLat): Promise<number[]>;
+ projectFromBasic(basicPoint: number[]): Promise<number[]>;
+ remove(): void;
+ removeCustomRenderer(rendererId: string): void;
+ resize(): void;
+ setCenter(center: number[]): void;
+ setFieldOfView(fov: number): void;
+ setFilter(filter: FilterExpression): Promise<void>;
+ setRenderMode(renderMode: RenderMode): void;
+ setTransitionMode(transitionMode: TransitionMode): void;
+ setAccessToken(accessToken?: string): Promise<void>;
+ setZoom(zoom: number): void;
+ triggerRerender(): void;
+ unproject(pixelPoint: number[]): Promise<LngLat>;
+ unprojectToBasic(pixelPoint: number[]): Promise<number[]>;
+}
+
+/**
+ * @interface
+ *
+ * @description Interface for custom camera controls.
+ * This is a specification for implementers to model:
+ * it is not an exported method or class.
+ *
+ * Custom camera controls allow the API user to freely
+ * move the viewer's camera and define the camera
+ * projection used. These camera properties are used
+ * to render the viewer 3D scene directly into the
+ * viewer's GL context.
+ *
+ * Custom camera controls must implement the
+ * onActivate, onAnimationFrame, onAttach, onDeactivate,
+ * onDetach, onReference, and onResize methods.
+ *
+ * Custom camera controls trigger rerendering
+ * automatically when the camera pose or projection
+ * is changed through the projectionMatrix and
+ * viewMatrix callbacks.
+ *
+ * See the
+ * [model view projection article]{@link https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection}
+ * on MDN for an introduction to view and projection matrices.
+ *
+ * Custom camera controls can choose to make updates on
+ * each animation frame or only based on user input.
+ * Invoking updates on each camera frame is more resource
+ * intensive.
+ *
+ * Only a single custom camera control instance can be
+ * attached to the viewer at any given time.
+ */
+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 Use the {@link Viewer.getContainer} method
+ * to get the container for determining the viewer size
+ * and aspect as well as for attaching event handlers.
+ *
+ * Use the view matrix to determine initial properties such
+ * as camera position, forward vector, and up vector.
+ *
+ * Use the projection matrix to determine the initial
+ * projection properties.
+ *
+ * Store the reference coordiante translations
+ * during future reference reference changes.
+ *
+ * @param {IViewer} viewer - The viewer this custom
+ * camera controls instance was just added to.
+ * @param {Array<number>} viewMatrix - The viewer's view matrix.
+ * @param {Array<number>} projectionMatrix - The viewers's
+ * projection matrix.
+ * @param {LngLatAlt} reference - The viewer's reference.
+ */
+ onActivate(viewer: IViewer, viewMatrix: number[], projectionMatrix: number[], reference: LngLatAlt): void;
+ /**
+ * Method called for each animation frame.
+ *
+ * @desdcription Custom camera controls can choose to
+ * make updates on each animation frame or only based on
+ * user input. Invoking updates on each animation frame is
+ * more resource intensive.
+ *
+ * @param {IViewer} viewer - The viewer this custom
+ * camera controls instance is attached to.
+ *
+ * @param {number} frameId - The request animation frame's id.
+ */
+ onAnimationFrame(viewer: IViewer, frameId: number): void;
+ /**
+ * Method called when the camera controls have been
+ * attached to the viewer.
+ * This gives the camera controls a chance to initialize
+ * resources.
+ *
+ * @description Camera controls are attached to the
+ * viewer with the with {@link Viewer.attachCustomCameraControls}
+ * method.
+ *
+ * Use the matrix callback functions
+ * to modify the camera pose and projection of the
+ * viewer's camera.
+ *
+ * Invoking the matrix callbacks has no effect if the
+ * custom camera controls have not been activated.
+ *
+ * @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 Camera controls are attached to the
+ * viewer with the with {@link Viewer.detachCustomCameraControls}
+ * method.
+ *
+ * @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 Calculate the updated topocentric positions
+ * for scene objects using the previous reference, the
+ * new provided reference as well as the
+ * {@link geodeticToEnu} and
+ * {@link enuToGeodetic} functions.
+ *
+ * @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.
+ */
+interface ViewerEvent {
+ /**
+ * The viewer object that fired the event.
+ */
+ target: IViewer;
+ /**
+ * The event type.
+ */
+ type: ViewerEventType;
+}
+
+/**
+ * Interface for bearing viewer events.
+ */
+interface ViewerBearingEvent extends ViewerEvent {
+ /**
+ * Bearing is measured in degrees
+ * clockwise with respect to north.
+ *
+ * @description Bearing is related to the computed
+ * compass angle ({@link Image.computedCompassAngle})
+ * from SfM, not the original EXIF compass angle.
+ */
+ bearing: number;
+ type: "bearing";
+}
+
+/**
+ * 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.
+ */
+interface ViewerDataLoadingEvent extends ViewerEvent {
+ /**
+ * Indicates if the viewer navigation is awaiting data load.
+ */
+ loading: boolean;
+ type: "dataloading";
+}
+
+/**
+ * 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);
+ * });
+ * ```
+ */
+interface ViewerMouseEvent extends ViewerEvent {
+ /**
+ * The basic coordinates in the current image of the mouse
+ * event target.
+ *
+ * @description In some situations mouse events can occur outside of
+ * the border of a image. In that case the basic coordinates will be
+ * `null`.
+ *
+ * The basic point is only provided when the
+ * {@link CameraControls.Street} mode is active. For all other camera
+ * control modes, the basic point will be `null`.
+ *
+ * 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.
+ */
+ 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";
+}
+
+/**
+ * Interface for navigable viewer events.
+ */
+interface ViewerNavigableEvent extends ViewerEvent {
+ /**
+ * 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";
+}
+
+/**
+ * Interface for navigation edge viewer events.
+ */
+interface ViewerNavigationEdgeEvent extends ViewerEvent {
+ /**
+ * The viewer's current navigation edge status.
+ */
+ status: NavigationEdgeStatus;
+ type: "sequenceedges" | "spatialedges";
+}
+
+/**
+ * Interface for viewer image events.
+ */
+interface ViewerImageEvent extends ViewerEvent {
+ /**
+ * The viewer's current image.
+ */
+ image: Image;
+ type: "image";
+}
+
+/**
+ * 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');
+ * });
+ * ```
+ */
+interface ViewerStateEvent extends ViewerEvent {
+ /**
+ * The event type.
+ */
+ type: "fov" | "moveend" | "movestart" | "position" | "pov" | "remove";
+}
+
+declare type ComponentName = "attribution" | "bearing" | "cache" | "cover" | "direction" | "image" | "keyboard" | "marker" | "pointer" | "popup" | "sequence" | "slider" | "spatial" | "tag" | "zoom";
+
+declare 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');
+ * });
+ * ```
+ */
+interface ViewerLoadEvent extends ViewerEvent {
+ type: "load";
+}
+
+/**
+ * @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 extends EventEmitter implements IViewer {
+ /**
+ * Private component controller object which manages component states.
+ */
+ private _componentController;
+ /**
+ * Private container object which maintains the DOM Element,
+ * renderers and relevant services.
+ */
+ private _container;
+ /**
+ * Private observer object which observes the viewer state and
+ * fires events on behalf of the viewer.
+ */
+ private _observer;
+ /**
+ * Private navigator object which controls navigation.
+ */
+ private _navigator;
+ /**
+ * Private custom camera controls object which handles
+ * custom control subscriptions.
+ */
+ private _customCameraControls;
+ /**
+ * Private custom renderer object which controls WebGL custom
+ * rendering subscriptions.
+ */
+ private _customRenderer;
+ /**
+ * Create a new viewer instance.
+ *
+ * @description 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 a id the viewer is bound to that id
+ * until the image for that id has been successfully loaded.
+ * Also, a cover with the image of the id will be shown.
+ * If the data for that id can not be loaded because the id is
+ * faulty or other errors occur it is not possible to navigate
+ * to another id because the viewer is not navigable. The viewer
+ * becomes navigable when the data for the id has been loaded and
+ * the image is shown in the viewer. This way of initializing
+ * the viewer is mostly for embedding in blog posts and similar
+ * where one wants to show a specific image initially.
+ *
+ * If the viewer is initialized without a id (with null or
+ * undefined) it is not bound to any particular id and it is
+ * possible to move to any id with `viewer.moveTo("<my-image-id>")`.
+ * If the first move to a id fails it is possible to move to another
+ * id. The viewer will show a black background until a move
+ * succeeds. This way of intitializing is suited for a map-viewer
+ * application when the initial id is not known at implementation
+ * time.
+ *
+ * @param {ViewerOptions} options - Optional configuration object
+ * specifing Viewer's and the components' initial setup.
+ *
+ * @example
+ * ```js
+ * var viewer = new Viewer({
+ * accessToken: "<my-access-token>",
+ * container: "<my-container-id>",
+ * });
+ * ```
+ */
+ constructor(options: ViewerOptions);
+ /**
+ * Return a boolean indicating if the viewer is in a navigable state.
+ *
+ * @description The navigable state indicates if the viewer supports
+ * moving, i.e. calling the {@link moveTo} and {@link moveDir}
+ * methods or changing the authentication state,
+ * i.e. calling {@link setAccessToken}. 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 the viewer is activated without being
+ * supplied a id it will be navigable.
+ *
+ * @returns {boolean} Boolean indicating whether the viewer is navigable.
+ */
+ get isNavigable(): boolean;
+ /**
+ * Activate the combined panning functionality.
+ *
+ * @description The combined panning functionality is active by default.
+ */
+ activateCombinedPanning(): void;
+ /**
+ * Activate a component.
+ *
+ * @param {ComponentName | FallbackComponentName} name - Name of
+ * the component which will become active.
+ *
+ * @example
+ * ```js
+ * viewer.activateComponent("marker");
+ * ```
+ */
+ activateComponent(name: ComponentName | FallbackComponentName): 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 Custom camera controls allow the API user
+ * to move the viewer's camera freely and define the camera
+ * projection. These camera properties are used
+ * to render the viewer 3D scene directly into the
+ * viewer's GL context.
+ *
+ * Only a single custom camera control instance can be
+ * attached to the viewer. A new custom camera control
+ * instance can be attached after detaching a previous
+ * one.
+ *
+ * Set the viewer's camera controls to
+ * {@link CameraControls.Custom} to activate attached
+ * camera controls. If {@link CameraControls.Custom}
+ * has already been set when a custom camera control
+ * instance is attached, it will be activated immediately.
+ *
+ * Set the viewer's camera controls to any other
+ * {@link CameraControls} mode to deactivate the
+ * custom camera controls.
+ *
+ * @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 {ComponentName | FallbackComponentName} name - Name
+ * of component which become inactive.
+ *
+ * @example
+ * ```js
+ * viewer.deactivateComponent("pointer");
+ * ```
+ */
+ deactivateComponent(name: ComponentName | FallbackComponentName): 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(): void;
+ fire(type: ViewerBearingEvent["type"], event: ViewerBearingEvent): void;
+ fire(type: ViewerDataLoadingEvent["type"], event: ViewerDataLoadingEvent): void;
+ fire(type: ViewerNavigableEvent["type"], event: ViewerNavigableEvent): void;
+ fire(type: ViewerImageEvent["type"], event: ViewerImageEvent): void;
+ fire(type: ViewerNavigationEdgeEvent["type"], event: ViewerNavigationEdgeEvent): void;
+ fire(type: ViewerStateEvent["type"], event: ViewerStateEvent): void;
+ fire(type: ViewerMouseEvent["type"], event: ViewerMouseEvent): void;
+ /**
+ * Get the bearing of the current viewer camera.
+ *
+ * @description The bearing depends on how the camera
+ * is currently rotated and does not correspond
+ * to the compass angle of the current image if the view
+ * has been panned.
+ *
+ * Bearing is measured in degrees clockwise with respect to
+ * north.
+ *
+ * @returns {Promise<number>} Promise to the bearing
+ * of the current viewer camera.
+ *
+ * @example
+ * ```js
+ * viewer.getBearing().then(b => { console.log(b); });
+ * ```
+ */
+ getBearing(): Promise<number>;
+ /**
+ * Get the viewer's camera control mode.
+ *
+ * @description The camera control mode determines
+ * how the camera is controlled when the viewer
+ * recieves pointer and keyboard input.
+ *
+ * @returns {CameraControls} controls - Camera control mode.
+ *
+ * @example
+ * ```js
+ * viewer.getCameraControls().then(c => { console.log(c); });
+ * ```
+ */
+ getCameraControls(): Promise<CameraControls>;
+ /**
+ * Returns the viewer's canvas element.
+ *
+ * @description This is the element onto which the viewer renders
+ * the WebGL content.
+ *
+ * @returns {HTMLCanvasElement} The viewer's canvas element, or
+ * null or not initialized.
+ */
+ getCanvas(): HTMLCanvasElement;
+ /**
+ * Returns the HTML element containing the viewer's canvas element.
+ *
+ * @description This is the element to which event bindings for viewer
+ * interactivity (such as panning and zooming) are attached.
+ *
+ * @returns {HTMLDivElement} The container for the viewer's
+ * canvas element.
+ */
+ getCanvasContainer(): HTMLDivElement;
+ /**
+ * Get the basic coordinates of the current image that is
+ * at the center of the viewport.
+ *
+ * @description Basic coordinates are 2D coordinates on the [0, 1] interval
+ * and have the origin point, (0, 0), at the top left corner and the
+ * maximum value, (1, 1), at the bottom right corner of the original
+ * image.
+ *
+ * @returns {Promise<number[]>} Promise to the basic coordinates
+ * of the current image at the center for the viewport.
+ *
+ * @example
+ * ```js
+ * viewer.getCenter().then(c => { console.log(c); });
+ * ```
+ */
+ getCenter(): Promise<number[]>;
+ /**
+ * Get a component.
+ *
+ * @param {string} name - Name of component.
+ * @returns {Component} The requested component.
+ *
+ * @example
+ * ```js
+ * var pointerComponent = viewer.getComponent("pointer");
+ * ```
+ */
+ getComponent<TComponent extends Component<ComponentConfiguration>>(name: ComponentName | FallbackComponentName): TComponent;
+ /**
+ * Returns the viewer's containing HTML element.
+ *
+ * @returns {HTMLElement} The viewer's container.
+ */
+ getContainer(): HTMLElement;
+ /**
+ * Get the viewer's current vertical field of view.
+ *
+ * @description The vertical field of view rendered on the viewer canvas
+ * measured in degrees.
+ *
+ * @returns {Promise<number>} Promise to the current field of view
+ * of the viewer camera.
+ *
+ * @example
+ * ```js
+ * viewer.getFieldOfView().then(fov => { console.log(fov); });
+ * ```
+ */
+ getFieldOfView(): Promise<number>;
+ /**
+ * Get the viewer's current image.
+ *
+ * @returns {Promise<Image>} Promise to the current image.
+ *
+ * @example
+ * ```js
+ * viewer.getImage().then(image => { console.log(image.id); });
+ * ```
+ */
+ getImage(): Promise<Image>;
+ /**
+ * Get the viewer's current point of view.
+ *
+ * @returns {Promise<PointOfView>} Promise to the current point of view
+ * of the viewer camera.
+ *
+ * @example
+ * ```js
+ * viewer.getPointOfView().then(pov => { console.log(pov); });
+ * ```
+ */
+ getPointOfView(): Promise<PointOfView>;
+ /**
+ * Get the viewer's current position
+ *
+ * @returns {Promise<LngLat>} Promise to the viewers's current
+ * position.
+ *
+ * @example
+ * ```js
+ * viewer.getPosition().then(pos => { console.log(pos); });
+ * ```
+ */
+ getPosition(): Promise<LngLat>;
+ /**
+ * Get the image's current zoom level.
+ *
+ * @returns {Promise<number>} Promise to the viewers's current
+ * zoom level.
+ *
+ * @example
+ * ```js
+ * viewer.getZoom().then(z => { console.log(z); });
+ * ```
+ */
+ getZoom(): Promise<number>;
+ /**
+ * Check if a 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 {NavigationDirection} direction - Direction in which which to move.
+ * @returns {Promise<Image>} Promise to the image that was navigated to.
+ * @throws If the current image does not have the edge direction
+ * or the edges has not yet been cached.
+ * @throws Propagates any IO errors to the caller.
+ * @throws When viewer is not navigable.
+ * @throws {@link CancelMapillaryError} When a subsequent move request
+ * is made before the move dir call has completed.
+ *
+ * @example
+ * ```js
+ * viewer.moveDir(NavigationDirection.Next).then(
+ * image => { console.log(image); },
+ * error => { console.error(error); });
+ * ```
+ */
+ moveDir(direction: NavigationDirection): Promise<Image>;
+ /**
+ * Navigate to a given image id.
+ *
+ * @param {string} imageId - Id of the image to move to.
+ * @returns {Promise<Image>} Promise to the image that was navigated to.
+ * @throws Propagates any IO errors to the caller.
+ * @throws When viewer is not navigable.
+ * @throws {@link CancelMapillaryError} When a subsequent
+ * move request is made before the move to id call has completed.
+ *
+ * @example
+ * ```js
+ * viewer.moveTo("<my-image-id>").then(
+ * image => { console.log(image); },
+ * error => { console.error(error); });
+ * ```
+ */
+ moveTo(imageId: string): Promise<Image>;
+ off(type: ViewerBearingEvent["type"], handler: (event: ViewerBearingEvent) => void): void;
+ off(type: ViewerDataLoadingEvent["type"], handler: (event: ViewerDataLoadingEvent) => void): void;
+ off(type: ViewerNavigableEvent["type"], handler: (event: ViewerNavigableEvent) => void): void;
+ off(type: ViewerImageEvent["type"], handler: (event: ViewerImageEvent) => void): void;
+ off(type: ViewerNavigationEdgeEvent["type"], handler: (event: ViewerNavigationEdgeEvent) => void): void;
+ off(type: ViewerStateEvent["type"], handler: (event: ViewerStateEvent) => void): void;
+ off(type: ViewerMouseEvent["type"], handler: (event: ViewerMouseEvent) => void): void;
+ /**
+ * Fired when the viewing direction of the camera changes.
+ *
+ * @event bearing
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * // Set an event listener
+ * viewer.on("bearing", function() {
+ * console.log("A bearing event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "bearing", handler: (event: ViewerBearingEvent) => void): void;
+ /**
+ * Fired when a pointing device (usually a mouse) is
+ * pressed and released at the same point in the viewer.
+ *
+ * @event click
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * // Set an event listener
+ * viewer.on("click", function() {
+ * console.log("A click event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "click", handler: (event: ViewerMouseEvent) => void): void;
+ /**
+ * Fired when the right button of the mouse is clicked
+ * within the viewer.
+ *
+ * @event contextmenu
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * // Set an event listener
+ * viewer.on("contextmenu", function() {
+ * console.log("A contextmenu event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "contextmenu", handler: (event: ViewerMouseEvent) => void): void;
+ /**
+ * Fired when the viewer is loading data.
+ *
+ * @event loading
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * // Set an event listener
+ * viewer.on("dataloading", function() {
+ * console.log("A loading event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "dataloading", handler: (event: ViewerDataLoadingEvent) => void): void;
+ /**
+ * Fired when a pointing device (usually a mouse) is clicked twice at
+ * the same point in the viewer.
+ *
+ * @event dblclick
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * // Set an event listener
+ * viewer.on("dblclick", function() {
+ * console.log("A dblclick event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "dblclick", handler: (event: ViewerMouseEvent) => void): void;
+ /**
+ * Fired when the viewer's vertical field of view changes.
+ *
+ * @event fov
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * // Set an event listener
+ * viewer.on("fov", function() {
+ * console.log("A fov event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "fov", handler: (event: ViewerStateEvent) => void): void;
+ /**
+ * Fired immediately after all necessary resources
+ * have been downloaded and the first visually complete
+ * rendering of the viewer has occurred.
+ *
+ * This event is only fired for viewer configurations where
+ * the WebGL context is created, i.e. not when using the
+ * fallback functionality only.
+ *
+ * @event load
+ * @example
+ * @example
+ * ```js
+ * // Set an event listener
+ * viewer.on('load', function(event) {
+ * console.log('A load event has occured');
+ * });
+ * ```
+ */
+ on(type: "load", handler: (event: ViewerLoadEvent) => void): void;
+ /**
+ * Fired when a pointing device (usually a mouse) is pressed
+ * within the viewer.
+ *
+ * @event mousedown
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * // Set an event listener
+ * viewer.on("mousedown", function() {
+ * console.log("A mousedown event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "mousedown", handler: (event: ViewerMouseEvent) => void): void;
+ /**
+ * Fired when a pointing device (usually a mouse)
+ * is moved within the viewer.
+ *
+ * @event mousemove
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * // Set an event listener
+ * viewer.on("mousemove", function() {
+ * console.log("A mousemove event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "mousemove", handler: (event: ViewerMouseEvent) => void): void;
+ /**
+ * Fired when a pointing device (usually a mouse)
+ * leaves the viewer's canvas.
+ *
+ * @event mouseout
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * // Set an event listener
+ * viewer.on("mouseout", function() {
+ * console.log("A mouseout event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "mouseout", handler: (event: ViewerMouseEvent) => void): void;
+ /**
+ * Fired when a pointing device (usually a mouse)
+ * is moved onto the viewer's canvas.
+ *
+ * @event mouseover
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * // Set an event listener
+ * viewer.on("mouseover", function() {
+ * console.log("A mouseover event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "mouseover", handler: (event: ViewerMouseEvent) => void): void;
+ /**
+ * Fired when a pointing device (usually a mouse)
+ * is released within the viewer.
+ *
+ * @event mouseup
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * // Set an event listener
+ * viewer.on("mouseup", function() {
+ * console.log("A mouseup event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "mouseup", handler: (event: ViewerMouseEvent) => void): void;
+ /**
+ * Fired when the viewer motion stops and it is in a fixed
+ * position with a fixed point of view.
+ *
+ * @event moveend
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * // Set an event listener
+ * viewer.on("moveend", function() {
+ * console.log("A moveend event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "moveend", handler: (event: ViewerStateEvent) => void): void;
+ /**
+ * Fired when the motion from one view to another start,
+ * either by changing the position (e.g. when changing image)
+ * or when changing point of view
+ * (e.g. by interaction such as pan and zoom).
+ *
+ * @event movestart
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * // Set an event listener
+ * viewer.on("movestart", function() {
+ * console.log("A movestart event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "movestart", handler: (event: ViewerStateEvent) => void): void;
+ /**
+ * Fired when the navigable state of the viewer changes.
+ *
+ * @event navigable
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * // Set an event listener
+ * viewer.on("navigable", function() {
+ * console.log("A navigable event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "navigable", handler: (event: ViewerNavigableEvent) => void): void;
+ /**
+ * Fired every time the viewer navigates to a new image.
+ *
+ * @event image
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * // Set an event listener
+ * viewer.on("image", function() {
+ * console.log("A image event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "image", handler: (event: ViewerImageEvent) => void): void;
+ /**
+ * Fired when the viewer's position changes.
+ *
+ * @description The viewer's position changes when transitioning
+ * between images.
+ *
+ * @event position
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * // Set an event listener
+ * viewer.on("position", function() {
+ * console.log("A position event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "position", handler: (event: ViewerStateEvent) => void): void;
+ /**
+ * Fired when the viewer's point of view changes. The
+ * point of view changes when the bearing, or tilt changes.
+ *
+ * @event pov
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * // Set an event listener
+ * viewer.on("pov", function() {
+ * console.log("A pov event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "pov", handler: (event: ViewerStateEvent) => void): void;
+ /**
+ * Fired when the viewer is removed. After this event is emitted
+ * you must not call any methods on the viewer.
+ *
+ * @event remove
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * // Set an event listener
+ * viewer.on("remove", function() {
+ * console.log("A remove event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "remove", handler: (event: ViewerStateEvent) => void): void;
+ /**
+ * Fired every time the sequence edges of the current image changes.
+ *
+ * @event sequenceedges
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * // Set an event listener
+ * viewer.on("sequenceedges", function() {
+ * console.log("A sequenceedges event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "sequenceedges", handler: (event: ViewerNavigationEdgeEvent) => void): void;
+ /**
+ * Fired every time the spatial edges of the current image changes.
+ *
+ * @event spatialedges
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * // Set an event listener
+ * viewer.on("spatialedges", function() {
+ * console.log("A spatialedges event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "spatialedges", handler: (event: ViewerNavigationEdgeEvent) => void): void;
+ /**
+ * Project geodetic coordinates to canvas pixel coordinates.
+ *
+ * @description The geodetic coordinates may not always correspond to pixel
+ * coordinates, e.g. if the geodetic coordinates have a position behind the
+ * viewer camera. In the case of no correspondence the returned value will
+ * be `null`.
+ *
+ * If the distance from the viewer camera position to the provided
+ * longitude-latitude is more than 1000 meters `null` will be returned.
+ *
+ * The projection is performed from the ground plane, i.e.
+ * the altitude with respect to the ground plane for the geodetic
+ * point is zero.
+ *
+ * Note that whenever the camera moves, the result of the method will be
+ * different.
+ *
+ * @param {LngLat} lngLat - Geographical coordinates to project.
+ * @returns {Promise<Array<number>>} Promise to the pixel coordinates corresponding
+ * to the lngLat.
+ *
+ * @example
+ * ```js
+ * viewer.project({ lat: 0, lng: 0 })
+ * .then(pixelPoint => {
+ * if (!pixelPoint) {
+ * console.log("no correspondence");
+ * }
+ *
+ * console.log(pixelPoint);
+ * });
+ * ```
+ */
+ project(lngLat: LngLat): Promise<number[]>;
+ /**
+ * Project basic image coordinates for the current image to canvas pixel
+ * coordinates.
+ *
+ * @description The basic image coordinates may not always correspond to a
+ * pixel point that lies in the visible area of the viewer container. In the
+ * case of no correspondence the returned value can be `null`.
+ *
+ *
+ * @param {Array<number>} basicPoint - Basic images coordinates to project.
+ * @returns {Promise<Array<number>>} Promise to the pixel coordinates corresponding
+ * to the basic image point.
+ *
+ * @example
+ * ```js
+ * viewer.projectFromBasic([0.3, 0.7])
+ * .then(pixelPoint => { console.log(pixelPoint); });
+ * ```
+ */
+ projectFromBasic(basicPoint: number[]): Promise<number[]>;
+ /**
+ * Clean up and release all internal resources associated with
+ * this viewer.
+ *
+ * @description This includes DOM elements, event bindings, and
+ * WebGL resources.
+ *
+ * Use this method when you are done using the viewer and wish to
+ * ensure that it no longer consumes browser resources. Afterwards,
+ * you must not call any other methods on the viewer.
+ *
+ * @fires remove
+ *
+ * @example
+ * ```js
+ * viewer.remove();
+ * ```
+ */
+ remove(): void;
+ /**
+ * Remove a custom renderer from the viewer's rendering pipeline.
+ *
+ * @param id - Unique id of the custom renderer.
+ */
+ removeCustomRenderer(rendererId: string): void;
+ /**
+ * Detect the viewer's new width and height and resize it
+ * manually.
+ *
+ * @description The components will also detect the viewer's
+ * new size and resize their rendered elements if needed.
+ *
+ * When the {@link ViewerOptions.trackResize} option is
+ * set to true, the viewer will automatically resize
+ * when the browser window is resized. If any other
+ * custom behavior is preferred, the option should be set
+ * to false and the {@link Viewer.resize} method should
+ * be called on demand.
+ *
+ * @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
+ * recieves 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 {CameraControls} controls - Camera control mode.
+ *
+ * @example
+ * ```js
+ * viewer.setCameraControls(CameraControls.Street);
+ * ```
+ */
+ setCameraControls(controls: CameraControls): void;
+ /**
+ * Set the basic coordinates of the current image to be in the
+ * center of the viewport.
+ *
+ * @description Basic coordinates are 2D coordinates on the [0, 1] interval
+ * and has the origin point, (0, 0), at the top left corner and the
+ * maximum value, (1, 1), at the bottom right corner of the original
+ * image.
+ *
+ * @param {number[]} The basic coordinates of the current
+ * image to be at the center for the viewport.
+ *
+ * @example
+ * ```js
+ * viewer.setCenter([0.5, 0.5]);
+ * ```
+ */
+ setCenter(center: number[]): void;
+ /**
+ * Set the viewer's current vertical field of view.
+ *
+ * @description Sets the vertical field of view rendered
+ * on the viewer canvas measured in degrees. The value
+ * will be clamped to be able to set a valid zoom level
+ * based on the projection model of the current image and
+ * the viewer's current render mode.
+ *
+ * @param {number} fov - Vertical field of view in degrees.
+ *
+ * @example
+ * ```js
+ * viewer.setFieldOfView(45);
+ * ```
+ */
+ setFieldOfView(fov: number): void;
+ /**
+ * Set the filter selecting images to use when calculating
+ * the spatial edges.
+ *
+ * @description The following filter types are supported:
+ *
+ * Comparison
+ *
+ * `["==", key, value]` equality: `image[key] = value`
+ *
+ * `["!=", key, value]` inequality: `image[key] ≠value`
+ *
+ * `["<", key, value]` less than: `image[key] < value`
+ *
+ * `["<=", key, value]` less than or equal: `image[key] ≤ value`
+ *
+ * `[">", key, value]` greater than: `image[key] > value`
+ *
+ * `[">=", key, value]` greater than or equal: `image[key] ≥ value`
+ *
+ * Set membership
+ *
+ * `["in", key, v0, ..., vn]` set inclusion: `image[key] ∈ {v0, ..., vn}`
+ *
+ * `["!in", key, v0, ..., vn]` set exclusion: `image[key] ∉ {v0, ..., vn}`
+ *
+ * Combining
+ *
+ * `["all", f0, ..., fn]` logical `AND`: `f0 ∧ ... ∧ fn`
+ *
+ * A key must be a string that identifies a property name of a
+ * simple {@link Image} property, i.e. a key of the {@link FilterKey}
+ * type. A value must be a string, number, or
+ * boolean. Strictly-typed comparisons are used. The values
+ * `f0, ..., fn` of the combining filter must be filter expressions.
+ *
+ * Clear the filter by setting it to null or empty array.
+ *
+ * Commonly used filter properties (see the {@link Image} class
+ * documentation for a full list of properties that can be used
+ * in a filter) are shown the the example code.
+ *
+ * @param {FilterExpression} filter - The filter expression.
+ * @returns {Promise<void>} Promise that resolves after filter is applied.
+ *
+ * @example
+ * ```js
+ * // Examples
+ * viewer.setFilter(["==", "cameraType", "spherical"]);
+ * viewer.setFilter([">=", "capturedAt", <my-time-stamp>]);
+ * viewer.setFilter(["in", "sequenceId", "<sequence-id-1>", "<sequence-id-2>"]);
+ * ```
+ */
+ setFilter(filter: FilterExpression): Promise<void>;
+ /**
+ * Set the viewer's render mode.
+ *
+ * @param {RenderMode} renderMode - Render mode.
+ *
+ * @example
+ * ```js
+ * viewer.setRenderMode(RenderMode.Letterbox);
+ * ```
+ */
+ setRenderMode(renderMode: RenderMode): void;
+ /**
+ * Set the viewer's transition mode.
+ *
+ * @param {TransitionMode} transitionMode - Transition mode.
+ *
+ * @example
+ * ```js
+ * viewer.setTransitionMode(TransitionMode.Instantaneous);
+ * ```
+ */
+ setTransitionMode(transitionMode: TransitionMode): void;
+ /**
+ * Set an access token for authenticated API requests of protected
+ * resources.
+ *
+ * The token may be a user access token or a client access token.
+ *
+ * @description When the supplied user token is null or undefined,
+ * any previously set user bearer token will be cleared and the
+ * viewer will make unauthenticated requests.
+ *
+ * Calling setAccessToken aborts all outstanding move requests.
+ * The promises of those move requests will be rejected with a
+ * {@link CancelMapillaryError} the rejections need to be caught.
+ *
+ * Calling setAccessToken also resets the complete viewer cache
+ * so it should not be called repeatedly.
+ *
+ * @param {string} [accessToken] accessToken - Optional user
+ * access token or client access token.
+ * @returns {Promise<void>} Promise that resolves after token
+ * is set.
+ *
+ * @throws When viewer is not navigable.
+ *
+ * @example
+ * ```js
+ * viewer.setAccessToken("<my access token>")
+ * .then(() => { console.log("user token set"); });
+ * ```
+ */
+ setAccessToken(accessToken?: string): Promise<void>;
+ /**
+ * Set the image's current zoom level.
+ *
+ * @description Possible zoom level values are on the [0, 3] interval.
+ * Zero means zooming out to fit the image to the view whereas three
+ * shows the highest level of detail.
+ *
+ * @param {number} The image's current zoom level.
+ *
+ * @example
+ * ```js
+ * viewer.setZoom(2);
+ * ```
+ */
+ setZoom(zoom: number): void;
+ /**
+ * Trigger the rendering of a single frame.
+ *
+ * @description Use this method with custom renderers to
+ * force the viewer to rerender when the custom content
+ * changes. Calling this multiple times before the next
+ * frame is rendered will still result in only a single
+ * frame being rendered.
+ */
+ triggerRerender(): void;
+ /**
+ * Unproject canvas pixel coordinates to geodetic
+ * coordinates.
+ *
+ * @description The pixel point may not always correspond to geodetic
+ * coordinates. In the case of no correspondence the returned value will
+ * be `null`.
+ *
+ * The unprojection to a lngLat will be performed towards the ground plane, i.e.
+ * the altitude with respect to the ground plane for the returned lngLat is zero.
+ *
+ * @param {Array<number>} pixelPoint - Pixel coordinates to unproject.
+ * @returns {Promise<LngLat>} Promise to the lngLat corresponding to the pixel point.
+ *
+ * @example
+ * ```js
+ * viewer.unproject([100, 100])
+ * .then(lngLat => { console.log(lngLat); });
+ * ```
+ */
+ unproject(pixelPoint: number[]): Promise<LngLat>;
+ /**
+ * Unproject canvas pixel coordinates to basic image coordinates for the
+ * current image.
+ *
+ * @description The pixel point may not always correspond to basic image
+ * coordinates. In the case of no correspondence the returned value will
+ * be `null`.
+ *
+ * @param {Array<number>} pixelPoint - Pixel coordinates to unproject.
+ * @returns {Promise<LngLat>} Promise to the basic coordinates corresponding
+ * to the pixel point.
+ *
+ * @example
+ * ```js
+ * viewer.unprojectToBasic([100, 100])
+ * .then(basicPoint => { console.log(basicPoint); });
+ * ```
+ */
+ unprojectToBasic(pixelPoint: number[]): Promise<number[]>;
+}
+
+/**
+ * @class MapillaryError
+ *
+ * @classdesc Generic Mapillary error.
+ */
+declare class MapillaryError extends Error {
+ constructor(message?: string);
+}
+
+/**
+ * @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);
+}
+
+declare class ArgumentMapillaryError extends MapillaryError {
+ constructor(message?: string);
+}
+
+declare class GraphMapillaryError extends MapillaryError {
+ constructor(message: string);
+}
+
+declare class ConfigurationService {
+ private _imageTiling$;
+ private _exploreUrl$;
+ constructor(options: ViewerOptions);
+ get exploreUrl$(): Observable<string>;
+ get imageTiling$(): Observable<boolean>;
+}
+
+declare class Container {
+ id: string;
+ renderService: RenderService;
+ glRenderer: GLRenderer;
+ domRenderer: DOMRenderer;
+ keyboardService: KeyboardService;
+ mouseService: MouseService;
+ touchService: TouchService;
+ spriteService: SpriteService;
+ readonly configurationService: ConfigurationService;
+ private _canvasContainer;
+ private _canvas;
+ private _container;
+ private _domContainer;
+ private _dom;
+ private readonly _trackResize;
+ constructor(options: ViewerOptions, stateService: StateService, dom?: DOM);
+ get canvas(): HTMLCanvasElement;
+ get canvasContainer(): HTMLDivElement;
+ get container(): HTMLElement;
+ get domContainer(): HTMLDivElement;
+ remove(): void;
+ private _onWindowResize;
+ private _removeNode;
+}
+
+declare type Func<T, TResult> = (item: T) => TResult;
+
+declare type FilterFunction = Func<Image, boolean>;
+/**
+ * @class Filter
+ *
+ * @classdesc Represents a class for creating image filters. Implementation and
+ * definitions based on https://github.com/mapbox/feature-filter.
+ */
+declare class FilterCreator {
+ /**
+ * Create a filter from a filter expression.
+ *
+ * @description The following filters are supported:
+ *
+ * Comparison
+ * `==`
+ * `!=`
+ * `<`
+ * `<=`
+ * `>`
+ * `>=`
+ *
+ * Set membership
+ * `in`
+ * `!in`
+ *
+ * Combining
+ * `all`
+ *
+ * @param {FilterExpression} filter - Comparison, set membership or combinding filter
+ * expression.
+ * @returns {FilterFunction} Function taking a image and returning a boolean that
+ * indicates whether the image passed the test or not.
+ */
+ createFilter(filter: FilterExpression): FilterFunction;
+ private _compile;
+ private _compare;
+ private _compileComparisonOp;
+ private _compileInOp;
+ private _compileLogicalOp;
+ private _compileNegation;
+ private _compilePropertyReference;
+}
+
+/**
+ * @class GraphCalculator
+ *
+ * @classdesc Represents a calculator for graph entities.
+ */
+declare class GraphCalculator {
+ /**
+ * Get the bounding box corners for a circle with radius of a threshold
+ * with center in a geodetic position.
+ *
+ * @param {LngLat} lngLat - Longitude, latitude to encode.
+ * @param {number} threshold - Threshold distance from the position in meters.
+ *
+ * @returns {Array<LngLat>} The south west and north east corners of the
+ * bounding box.
+ */
+ boundingBoxCorners(lngLat: LngLat, threshold: number): [LngLat, LngLat];
+ /**
+ * Convert a compass angle to an angle axis rotation vector.
+ *
+ * @param {number} compassAngle - The compass angle in degrees.
+ * @param {number} orientation - The orientation of the original image.
+ *
+ * @returns {Array<number>} Angle axis rotation vector.
+ */
+ rotationFromCompass(compassAngle: number, orientation: number): number[];
+}
+
+/**
+ * @class Sequence
+ *
+ * @classdesc Represents a sequence of ordered images.
+ */
+declare class Sequence {
+ private _id;
+ private _imageIds;
+ /**
+ * Create a new sequene instance.
+ *
+ * @param {SequenceEnt} sequence - Raw sequence data.
+ */
+ constructor(sequence: SequenceEnt);
+ /**
+ * Get id.
+ *
+ * @returns {string} Unique sequence id.
+ */
+ get id(): string;
+ /**
+ * Get ids.
+ *
+ * @returns {Array<string>} Array of ordered image ids in the sequence.
+ */
+ get 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
+ */
+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();
+}
+
+interface SphericalDirection {
+ direction: NavigationDirection;
+ prev: NavigationDirection;
+ next: NavigationDirection;
+ directionChange: number;
+}
+
+interface StepDirection {
+ direction: NavigationDirection;
+ motionChange: number;
+ useFallback: boolean;
+}
+
+interface TurnDirection {
+ direction: NavigationDirection;
+ directionChange: number;
+ motionChange?: number;
+}
+
+declare class EdgeCalculatorDirections {
+ steps: {
+ [direction: string]: StepDirection;
+ };
+ turns: {
+ [direction: string]: TurnDirection;
+ };
+ spherical: {
+ [direction: string]: SphericalDirection;
+ };
+ constructor();
+}
+
+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();
+ get maxDistance(): number;
+}
+
+/**
+ * Interface that describes the properties for a image that is the destination of a
+ * potential edge from an origin image.
+ *
+ * @interface PotentialEdge
+ */
+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.
+ * @propery {number} worldMotionAzimuth
+ */
+ worldMotionAzimuth: number;
+}
+
+/**
+ * @class EdgeCalculator
+ *
+ * @classdesc Represents a class for calculating node edges.
+ */
+declare class EdgeCalculator {
+ private _spatial;
+ private _settings;
+ private _directions;
+ private _coefficients;
+ /**
+ * 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);
+ /**
+ * Returns the potential edges to destination nodes for a set
+ * of nodes with respect to a source node.
+ *
+ * @param {Image} node - Source node.
+ * @param {Array<Image>} nodes - Potential destination nodes.
+ * @param {Array<string>} fallbackIds - Ids for destination nodes
+ * that should be returned even if they do not meet the
+ * criteria for a potential edge.
+ * @throws {ArgumentMapillaryError} If node is not full.
+ */
+ getPotentialEdges(node: Image, potentialImages: Image[], fallbackIds: string[]): PotentialEdge[];
+ /**
+ * Computes the sequence edges for a node.
+ *
+ * @param {Image} node - Source node.
+ * @throws {ArgumentMapillaryError} If node is not full.
+ */
+ computeSequenceEdges(node: Image, sequence: Sequence): NavigationEdge[];
+ /**
+ * Computes the similar edges for a node.
+ *
+ * @description Similar edges for perspective images
+ * look roughly in the same direction and are positioned closed to the node.
+ * Similar edges for spherical only target other spherical.
+ *
+ * @param {Image} node - Source node.
+ * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
+ * @throws {ArgumentMapillaryError} If node is not full.
+ */
+ computeSimilarEdges(node: Image, potentialEdges: PotentialEdge[]): NavigationEdge[];
+ /**
+ * Computes the step edges for a perspective node.
+ *
+ * @description Step edge targets can only be other perspective nodes.
+ * Returns an empty array for spherical.
+ *
+ * @param {Image} node - Source node.
+ * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
+ * @param {string} prevId - Id of previous node in sequence.
+ * @param {string} nextId - Id of next node in sequence.
+ * @throws {ArgumentMapillaryError} If node is not full.
+ */
+ computeStepEdges(node: Image, potentialEdges: PotentialEdge[], prevId: string, nextId: string): NavigationEdge[];
+ /**
+ * Computes the turn edges for a perspective node.
+ *
+ * @description Turn edge targets can only be other perspective images.
+ * Returns an empty array for spherical.
+ *
+ * @param {Image} node - Source node.
+ * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
+ * @throws {ArgumentMapillaryError} If node is not full.
+ */
+ computeTurnEdges(node: Image, potentialEdges: PotentialEdge[]): NavigationEdge[];
+ /**
+ * Computes the spherical edges for a perspective node.
+ *
+ * @description Perspective to spherical edge targets can only be
+ * spherical nodes. Returns an empty array for spherical.
+ *
+ * @param {Image} node - Source node.
+ * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
+ * @throws {ArgumentMapillaryError} If node is not full.
+ */
+ computePerspectiveToSphericalEdges(node: Image, potentialEdges: PotentialEdge[]): NavigationEdge[];
+ /**
+ * Computes the spherical and step edges for a spherical node.
+ *
+ * @description Spherical to spherical edge targets can only be
+ * spherical nodes. spherical to step edge targets can only be perspective
+ * nodes.
+ *
+ * @param {Image} node - Source node.
+ * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
+ * @throws {ArgumentMapillaryError} If node is not full.
+ */
+ computeSphericalEdges(node: Image, potentialEdges: PotentialEdge[]): NavigationEdge[];
+}
+
+/**
+ * @class API
+ *
+ * @classdesc Provides methods for access to the API.
+ */
+declare class APIWrapper {
+ private readonly _data;
+ constructor(_data: DataProviderBase);
+ get data(): DataProviderBase;
+ getCoreImages$(cellId: string): Observable<CoreImagesContract>;
+ getImages$(imageIds: string[]): Observable<ImagesContract>;
+ getImageTiles$(tiles: ImageTilesRequestContract): Observable<ImageTilesContract>;
+ getSequence$(sequenceId: string): Observable<SequenceContract>;
+ getSpatialImages$(imageIds: string[]): Observable<SpatialImagesContract>;
+ setAccessToken(accessToken?: string): void;
+ private _wrap$;
+}
+
+/**
+ * @class Graph
+ *
+ * @classdesc Represents a graph of nodes with edges.
+ */
+declare class Graph {
+ private static _spatialIndex;
+ private _api;
+ /**
+ * Nodes that have initialized cache with a timestamp of last access.
+ */
+ private _cachedNodes;
+ /**
+ * Nodes for which the required tiles are cached.
+ */
+ private _cachedNodeTiles;
+ /**
+ * Sequences for which the nodes are cached.
+ */
+ private _cachedSequenceNodes;
+ /**
+ * Nodes for which the spatial edges are cached.
+ */
+ private _cachedSpatialEdges;
+ /**
+ * Cached tiles with a timestamp of last access.
+ */
+ private _cachedTiles;
+ /**
+ * Nodes for which fill properties are being retreived.
+ */
+ private _cachingFill$;
+ /**
+ * Nodes for which full properties are being retrieved.
+ */
+ private _cachingFull$;
+ /**
+ * Sequences for which the nodes are being retrieved.
+ */
+ private _cachingSequenceNodes$;
+ /**
+ * Sequences that are being retrieved.
+ */
+ private _cachingSequences$;
+ /**
+ * Nodes for which the spatial area fill properties are being retrieved.
+ */
+ private _cachingSpatialArea$;
+ /**
+ * Tiles that are being retrieved.
+ */
+ private _cachingTiles$;
+ private _changed$;
+ private _defaultAlt;
+ private _edgeCalculator;
+ private _graphCalculator;
+ private _configuration;
+ private _filter;
+ private _filterCreator;
+ private _filterSubject$;
+ private _filter$;
+ private _filterSubscription;
+ /**
+ * All nodes in the graph.
+ */
+ private _nodes;
+ /**
+ * Contains all nodes in the graph. Used for fast spatial lookups.
+ */
+ private _nodeIndex;
+ /**
+ * All node index items sorted in tiles for easy uncache.
+ */
+ private _nodeIndexTiles;
+ /**
+ * Node to tile dictionary for easy tile access updates.
+ */
+ private _nodeToTile;
+ /**
+ * Nodes retrieved before tiles, stored on tile level.
+ */
+ private _preStored;
+ /**
+ * Tiles required for a node to retrive spatial area.
+ */
+ private _requiredNodeTiles;
+ /**
+ * Other nodes required for node to calculate spatial edges.
+ */
+ private _requiredSpatialArea;
+ /**
+ * All sequences in graph with a timestamp of last access.
+ */
+ private _sequences;
+ private _tileThreshold;
+ /**
+ * Create a new graph instance.
+ *
+ * @param {APIWrapper} [api] - API instance for retrieving data.
+ * @param {rbush.RBush<NodeIndexItem>} [nodeIndex] - Node index for fast spatial retreival.
+ * @param {GraphCalculator} [graphCalculator] - Instance for graph calculations.
+ * @param {EdgeCalculator} [edgeCalculator] - Instance for edge calculations.
+ * @param {FilterCreator} [filterCreator] - Instance for filter creation.
+ * @param {GraphConfiguration} [configuration] - Configuration struct.
+ */
+ constructor(api: APIWrapper, nodeIndex?: any, graphCalculator?: GraphCalculator, edgeCalculator?: EdgeCalculator, filterCreator?: FilterCreator, configuration?: GraphConfiguration);
+ static register(spatialIndex: new (...args: any[]) => any): void;
+ /**
+ * Get api.
+ *
+ * @returns {APIWrapper} The API instance used by
+ * the graph.
+ */
+ get api(): APIWrapper;
+ /**
+ * Get changed$.
+ *
+ * @returns {Observable<Graph>} Observable emitting
+ * the graph every time it has changed.
+ */
+ get changed$(): Observable<Graph>;
+ /**
+ * Get filter$.
+ *
+ * @returns {Observable<FilterFunction>} Observable emitting
+ * the filter every time it has changed.
+ */
+ get filter$(): Observable<FilterFunction>;
+ /**
+ * Caches the full node data for all images within a bounding
+ * box.
+ *
+ * @description The node assets are not cached.
+ *
+ * @param {LngLat} sw - South west corner of bounding box.
+ * @param {LngLat} ne - North east corner of bounding box.
+ * @returns {Observable<Array<Image>>} Observable emitting
+ * the full nodes in the bounding box.
+ */
+ cacheBoundingBox$(sw: LngLat, ne: LngLat): Observable<Image[]>;
+ /**
+ * Caches the full node data for all images of a cell.
+ *
+ * @description The node assets are not cached.
+ *
+ * @param {string} cellId - Cell id.
+ * @returns {Observable<Array<Image>>} Observable
+ * emitting the full nodes of the cell.
+ */
+ cacheCell$(cellId: string): Observable<Image[]>;
+ /**
+ * Retrieve and cache node fill properties.
+ *
+ * @param {string} key - Key of node to fill.
+ * @returns {Observable<Graph>} Observable emitting the graph
+ * when the node has been updated.
+ * @throws {GraphMapillaryError} When the operation is not valid on the
+ * current graph.
+ */
+ cacheFill$(key: string): Observable<Graph>;
+ /**
+ * Retrieve and cache full node properties.
+ *
+ * @param {string} key - Key of node to fill.
+ * @returns {Observable<Graph>} Observable emitting the graph
+ * when the node has been updated.
+ * @throws {GraphMapillaryError} When the operation is not valid on the
+ * current graph.
+ */
+ cacheFull$(key: string): Observable<Graph>;
+ /**
+ * Retrieve and cache a node sequence.
+ *
+ * @param {string} key - Key of node for which to retrieve sequence.
+ * @returns {Observable<Graph>} Observable emitting the graph
+ * when the sequence has been retrieved.
+ * @throws {GraphMapillaryError} When the operation is not valid on the
+ * current graph.
+ */
+ cacheNodeSequence$(key: string): Observable<Graph>;
+ /**
+ * Retrieve and cache a sequence.
+ *
+ * @param {string} sequenceKey - Key of sequence to cache.
+ * @returns {Observable<Graph>} Observable emitting the graph
+ * when the sequence has been retrieved.
+ * @throws {GraphMapillaryError} When the operation is not valid on the
+ * current graph.
+ */
+ cacheSequence$(sequenceKey: string): Observable<Graph>;
+ /**
+ * 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;
+ /**
+ * Retrieve and cache full nodes for all keys in a sequence.
+ *
+ * @param {string} sequenceKey - Key of sequence.
+ * @param {string} referenceNodeKey - Key of node to use as reference
+ * for optimized caching.
+ * @returns {Observable<Graph>} Observable emitting the graph
+ * when the nodes of the sequence has been cached.
+ */
+ cacheSequenceNodes$(sequenceKey: string, referenceNodeKey?: string): Observable<Graph>;
+ /**
+ * Retrieve and cache full nodes for a node spatial area.
+ *
+ * @param {string} key - Key of node for which to retrieve sequence.
+ * @returns {Observable<Graph>} Observable emitting the graph
+ * when the nodes in the spatial area has been made full.
+ * @throws {GraphMapillaryError} When the operation is not valid on the
+ * current graph.
+ */
+ cacheSpatialArea$(key: string): Observable<Graph>[];
+ /**
+ * 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;
+ /**
+ * Retrieve and cache tiles for a node.
+ *
+ * @param {string} key - Key of node for which to retrieve tiles.
+ * @returns {Array<Observable<Graph>>} Array of observables emitting
+ * the graph for each tile required for the node has been cached.
+ * @throws {GraphMapillaryError} When the operation is not valid on the
+ * current graph.
+ */
+ cacheTiles$(key: string): Observable<Graph>[];
+ /**
+ * Initialize the cache for a node.
+ *
+ * @param {string} key - Key of node.
+ * @throws {GraphMapillaryError} When the operation is not valid on the
+ * current graph.
+ */
+ initializeCache(key: string): void;
+ /**
+ * Get a value indicating if the graph is fill caching a node.
+ *
+ * @param {string} key - Key of node.
+ * @returns {boolean} Value indicating if the node is being fill cached.
+ */
+ isCachingFill(key: string): boolean;
+ /**
+ * Get a value indicating if the graph is fully caching a node.
+ *
+ * @param {string} key - Key of node.
+ * @returns {boolean} Value indicating if the node is being fully cached.
+ */
+ isCachingFull(key: string): boolean;
+ /**
+ * Get a value indicating if the graph is caching a sequence of a node.
+ *
+ * @param {string} key - Key of node.
+ * @returns {boolean} Value indicating if the sequence of a node is
+ * being cached.
+ */
+ isCachingNodeSequence(key: string): boolean;
+ /**
+ * Get a value indicating if the graph is caching a sequence.
+ *
+ * @param {string} sequenceKey - Key of sequence.
+ * @returns {boolean} Value indicating if the sequence is
+ * being cached.
+ */
+ isCachingSequence(sequenceKey: string): boolean;
+ /**
+ * Get a value indicating if the graph is caching sequence nodes.
+ *
+ * @param {string} sequenceKey - Key of sequence.
+ * @returns {boolean} Value indicating if the sequence nodes are
+ * being cached.
+ */
+ isCachingSequenceNodes(sequenceKey: string): boolean;
+ /**
+ * Get a value indicating if the graph is caching the tiles
+ * required for calculating spatial edges of a node.
+ *
+ * @param {string} key - Key of node.
+ * @returns {boolean} Value indicating if the tiles of
+ * a node are being cached.
+ */
+ isCachingTiles(key: string): boolean;
+ /**
+ * Get a value indicating if the cache has been initialized
+ * for a node.
+ *
+ * @param {string} key - Key of node.
+ * @returns {boolean} Value indicating if the cache has been
+ * initialized for a node.
+ */
+ hasInitializedCache(key: string): boolean;
+ /**
+ * Get a value indicating if a node exist in the graph.
+ *
+ * @param {string} key - Key of node.
+ * @returns {boolean} Value indicating if a node exist in the graph.
+ */
+ hasNode(key: string): boolean;
+ /**
+ * Get a value indicating if a node sequence exist in the graph.
+ *
+ * @param {string} key - Key of node.
+ * @returns {boolean} Value indicating if a node sequence exist
+ * in the graph.
+ */
+ hasNodeSequence(key: string): boolean;
+ /**
+ * Get a value indicating if a sequence exist in the graph.
+ *
+ * @param {string} sequenceKey - Key of sequence.
+ * @returns {boolean} Value indicating if a sequence exist
+ * in the graph.
+ */
+ hasSequence(sequenceKey: string): boolean;
+ /**
+ * Get a value indicating if sequence nodes has been cached in the graph.
+ *
+ * @param {string} sequenceKey - Key of sequence.
+ * @returns {boolean} Value indicating if a sequence nodes has been
+ * cached in the graph.
+ */
+ hasSequenceNodes(sequenceKey: string): boolean;
+ /**
+ * Get a value indicating if the graph has fully cached
+ * all nodes in the spatial area of a node.
+ *
+ * @param {string} key - Key of node.
+ * @returns {boolean} Value indicating if the spatial area
+ * of a node has been cached.
+ */
+ hasSpatialArea(key: string): boolean;
+ /**
+ * Get a value indicating if the graph has a tiles required
+ * for a node.
+ *
+ * @param {string} key - Key of node.
+ * @returns {boolean} Value indicating if the the tiles required
+ * by a node has been cached.
+ */
+ hasTiles(key: string): boolean;
+ /**
+ * Get a node.
+ *
+ * @param {string} key - Key of node.
+ * @returns {Image} Retrieved node.
+ */
+ getNode(key: string): Image;
+ /**
+ * Get a sequence.
+ *
+ * @param {string} sequenceKey - Key of sequence.
+ * @returns {Image} Retrieved sequence.
+ */
+ getSequence(sequenceKey: string): Sequence;
+ /**
+ * Reset all spatial edges of the graph nodes.
+ */
+ resetSpatialEdges(): void;
+ /**
+ * Reset the complete graph but keep the nodes corresponding
+ * to the supplied keys. All other nodes will be disposed.
+ *
+ * @param {Array<string>} keepKeys - Keys for nodes to keep
+ * in graph after reset.
+ */
+ reset(keepKeys: string[]): void;
+ /**
+ * Set the spatial node filter.
+ *
+ * @emits FilterFunction The filter function to the {@link Graph.filter$}
+ * observable.
+ *
+ * @param {FilterExpression} filter - Filter expression to be applied
+ * when calculating spatial edges.
+ */
+ setFilter(filter: FilterExpression): void;
+ /**
+ * Uncache the graph according to the graph configuration.
+ *
+ * @description Uncaches unused tiles, unused nodes and
+ * sequences according to the numbers specified in the
+ * graph configuration. Sequences does not have a direct
+ * reference to either tiles or nodes and may be uncached
+ * even if they are related to the nodes that should be kept.
+ *
+ * @param {Array<string>} keepIds - Ids of nodes to keep in
+ * graph unrelated to last access. Tiles related to those keys
+ * will also be kept in graph.
+ * @param {Array<string>} keepCellIds - Ids of cells to keep in
+ * graph unrelated to last access. The nodes of the cells may
+ * still be uncached if not specified in the keep ids param
+ * but are guaranteed to not be disposed.
+ * @param {string} keepSequenceId - Optional id of sequence
+ * for which the belonging nodes should not be disposed or
+ * removed from the graph. These nodes may still be uncached if
+ * not specified in keep ids param but are guaranteed to not
+ * be disposed.
+ */
+ uncache(keepIds: string[], keepCellIds: string[], keepSequenceId?: string): void;
+ /**
+ * Updates existing cells with new core nodes.
+ *
+ * @description Non-existing cells are discarded
+ * and not requested at all.
+ *
+ * Existing nodes are not changed.
+ *
+ * New nodes are not made full or getting assets
+ * cached.
+ *
+ * @param {Array<string>} cellIds - Cell ids.
+ * @returns {Observable<Array<Image>>} Observable
+ * emitting the updated cells.
+ */
+ updateCells$(cellIds: string[]): Observable<string>;
+ /**
+ * Unsubscribes all subscriptions.
+ *
+ * @description Afterwards, you must not call any other methods
+ * on the graph instance.
+ */
+ unsubscribe(): void;
+ private _addNewKeys;
+ private _cacheSequence$;
+ private _cacheTile$;
+ private _makeFull;
+ private _preStore;
+ private _removeFromPreStore;
+ private _setNode;
+ private _uncacheTile;
+ private _uncachePreStored;
+ private _updateCachedTileAccess;
+ private _updateCachedNodeAccess;
+ private _updateCell$;
+}
+
+/**
+ * Enumeration for graph modes.
+ * @enum {number}
+ * @readonly
+ * @description Modes for the retrieval and caching performed
+ * by the graph service on the graph.
+ */
+declare enum GraphMode {
+ /**
+ * Caching is performed on sequences only and sequence edges are
+ * calculated. Spatial tiles
+ * are not retrieved and spatial edges are not calculated when
+ * caching nodes. Complete sequences are being cached for requested
+ * nodes within the graph.
+ */
+ Sequence = 0,
+ /**
+ * Caching is performed with emphasis on spatial data. Sequence edges
+ * as well as spatial edges are cached. Sequence data
+ * is still requested but complete sequences are not being cached
+ * for requested nodes.
+ *
+ * This is the initial mode of the graph service.
+ */
+ Spatial = 1
+}
+
+/**
+ * @class GraphService
+ *
+ * @classdesc Represents a service for graph operations.
+ */
+declare class GraphService {
+ private _graph$;
+ private _graphMode;
+ private _graphMode$;
+ private _graphModeSubject$;
+ private _firstGraphSubjects$;
+ private _dataAdded$;
+ private _initializeCacheSubscriptions;
+ private _sequenceSubscriptions;
+ private _spatialSubscriptions;
+ private _subscriptions;
+ /**
+ * Create a new graph service instance.
+ *
+ * @param {Graph} graph - Graph instance to be operated on.
+ */
+ constructor(graph: Graph);
+ /**
+ * Get dataAdded$.
+ *
+ * @returns {Observable<string>} Observable emitting
+ * a cell id every time data has been added to a cell.
+ */
+ get dataAdded$(): Observable<string>;
+ /**
+ * Get filter observable.
+ *
+ * @desciption Emits the filter every time it has changed.
+ *
+ * @returns {Observable<FilterFunction>} Observable
+ * emitting the filter function every time it is set.
+ */
+ get filter$(): Observable<FilterFunction>;
+ /**
+ * Get graph mode observable.
+ *
+ * @description Emits the current graph mode.
+ *
+ * @returns {Observable<GraphMode>} Observable
+ * emitting the current graph mode when it changes.
+ */
+ get graphMode$(): Observable<GraphMode>;
+ /**
+ * Cache full images in a bounding box.
+ *
+ * @description When called, the full properties of
+ * the image are retrieved. The image cache is not initialized
+ * for any new images retrieved and the image assets are not
+ * retrieved, {@link cacheImage$} needs to be called for caching
+ * assets.
+ *
+ * @param {LngLat} sw - South west corner of bounding box.
+ * @param {LngLat} ne - North east corner of bounding box.
+ * @return {Observable<Array<Image>>} Observable emitting a single item,
+ * the images of the bounding box, when they have all been retrieved.
+ * @throws {Error} Propagates any IO image caching errors to the caller.
+ */
+ cacheBoundingBox$(sw: LngLat, ne: LngLat): Observable<Image[]>;
+ /**
+ * Cache full images in a cell.
+ *
+ * @description When called, the full properties of
+ * the image are retrieved. The image cache is not initialized
+ * for any new images retrieved and the image assets are not
+ * retrieved, {@link cacheImage$} needs to be called for caching
+ * assets.
+ *
+ * @param {string} cellId - Id of the cell.
+ * @return {Observable<Array<Image>>} Observable emitting a single item,
+ * the images of the cell, when they have all been retrieved.
+ * @throws {Error} Propagates any IO image caching errors to the caller.
+ */
+ cacheCell$(cellId: string): Observable<Image[]>;
+ /**
+ * Cache a image in the graph and retrieve it.
+ *
+ * @description When called, the full properties of
+ * the image are retrieved and the image cache is initialized.
+ * After that the image assets are cached and the image
+ * is emitted to the observable when.
+ * In parallel to caching the image assets, the sequence and
+ * spatial edges of the image are cached. For this, the sequence
+ * of the image and the required tiles and spatial images are
+ * retrieved. The sequence and spatial edges may be set before
+ * or after the image is returned.
+ *
+ * @param {string} id - Id of the image to cache.
+ * @return {Observable<Image>} Observable emitting a single item,
+ * the image, when it has been retrieved and its assets are cached.
+ * @throws {Error} Propagates any IO image caching errors to the caller.
+ */
+ cacheImage$(id: string): Observable<Image>;
+ /**
+ * Cache a sequence in the graph and retrieve it.
+ *
+ * @param {string} sequenceId - Sequence id.
+ * @returns {Observable<Sequence>} Observable emitting a single item,
+ * the sequence, when it has been retrieved and its assets are cached.
+ * @throws {Error} Propagates any IO image caching errors to the caller.
+ */
+ cacheSequence$(sequenceId: string): Observable<Sequence>;
+ /**
+ * Cache a sequence and its images in the graph and retrieve the sequence.
+ *
+ * @description Caches a sequence and its assets are cached and
+ * retrieves all images belonging to the sequence. The image assets
+ * or edges will not be cached.
+ *
+ * @param {string} sequenceId - Sequence id.
+ * @param {string} referenceImageId - Id of image to use as reference
+ * for optimized caching.
+ * @returns {Observable<Sequence>} Observable emitting a single item,
+ * the sequence, when it has been retrieved, its assets are cached and
+ * all images belonging to the sequence has been retrieved.
+ * @throws {Error} Propagates any IO image caching errors to the caller.
+ */
+ cacheSequenceImages$(sequenceId: string, referenceImageId?: string): Observable<Sequence>;
+ /**
+ * Dispose the graph service and its children.
+ */
+ dispose(): void;
+ /**
+ * Set a spatial edge filter on the graph.
+ *
+ * @description Resets the spatial edges of all cached images.
+ *
+ * @param {FilterExpression} filter - Filter expression to be applied.
+ * @return {Observable<Graph>} Observable emitting a single item,
+ * the graph, when the spatial edges have been reset.
+ */
+ setFilter$(filter: FilterExpression): Observable<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 {GraphMode} mode - Graph mode to set.
+ */
+ setGraphMode(mode: GraphMode): void;
+ /**
+ * Reset the graph.
+ *
+ * @description Resets the graph but keeps the images of the
+ * supplied ids.
+ *
+ * @param {Array<string>} keepIds - Ids of images to keep in graph.
+ * @return {Observable<Image>} Observable emitting a single item,
+ * the graph, when it has been reset.
+ */
+ reset$(keepIds: string[]): Observable<void>;
+ /**
+ * Uncache the graph.
+ *
+ * @description Uncaches the graph by removing tiles, images and
+ * sequences. Keeps the images of the supplied ids and the tiles
+ * related to those images.
+ *
+ * @param {Array<string>} keepIds - Ids of images to keep in graph.
+ * @param {Array<string>} keepCellIds - Ids of cells to keep in graph.
+ * @param {string} keepSequenceId - Optional id of sequence
+ * for which the belonging images should not be disposed or
+ * removed from the graph. These images may still be uncached if
+ * not specified in keep ids param.
+ * @return {Observable<Graph>} Observable emitting a single item,
+ * the graph, when the graph has been uncached.
+ */
+ uncache$(keepIds: string[], keepCellIds: string[], keepSequenceId?: string): Observable<void>;
+ private _abortSubjects;
+ private _onDataAdded;
+ private _removeFromArray;
+ private _resetSubscriptions;
+}
+
+interface CacheServiceConfiguration {
+ cellDepth: number;
+}
+declare class CacheService {
+ private readonly _graphService;
+ private readonly _stateService;
+ private readonly _api;
+ private _subscriptions;
+ private _started;
+ private _cellDepth;
+ constructor(_graphService: GraphService, _stateService: StateService, _api: APIWrapper);
+ get started(): boolean;
+ configure(configuration?: CacheServiceConfiguration): void;
+ start(): void;
+ stop(): void;
+ private _keyToEdges;
+}
+
+declare class LoadingService {
+ private _loaders$;
+ private _loadersSubject$;
+ constructor();
+ get loading$(): Observable<boolean>;
+ taskLoading$(task: string): Observable<boolean>;
+ startLoading(task: string): void;
+ stopLoading(task: string): void;
+}
+
+/**
+ * @class Spatial
+ *
+ * @classdesc Provides methods for scalar, vector and matrix calculations.
+ */
+declare class Spatial {
+ private _epsilon;
+ /**
+ * 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;
+ /**
+ * Creates a rotation matrix from an angle-axis vector.
+ *
+ * @param {Array<number>} angleAxis - Angle-axis representation of a rotation.
+ * @returns {THREE.Matrix4} Rotation matrix.
+ */
+ rotationMatrix(angleAxis: number[]): Matrix4;
+ /**
+ * Rotates a vector according to a angle-axis rotation vector.
+ *
+ * @param {Array<number>} vector - Vector to rotate.
+ * @param {Array<number>} angleAxis - Angle-axis representation of a rotation.
+ * @returns {THREE.Vector3} Rotated vector.
+ */
+ rotate(vector: number[], angleAxis: number[]): Vector3;
+ /**
+ * Calculates the optical center from a rotation vector
+ * on the angle-axis representation and a translation vector
+ * according to C = -R^T t.
+ *
+ * @param {Array<number>} rotation - Angle-axis representation of a rotation.
+ * @param {Array<number>} translation - Translation vector.
+ * @returns {THREE.Vector3} Optical center.
+ */
+ opticalCenter(rotation: number[], translation: number[]): Vector3;
+ /**
+ * Calculates the viewing direction from a rotation vector
+ * on the angle-axis representation.
+ *
+ * @param {number[]} rotation - Angle-axis representation of a rotation.
+ * @returns {THREE.Vector3} Viewing direction.
+ */
+ viewingDirection(rotation: number[]): Vector3;
+ /**
+ * Wrap a number on the interval [min, max].
+ *
+ * @param {number} value - Value to wrap.
+ * @param {number} min - Lower endpoint of interval.
+ * @param {number} max - Upper endpoint of interval.
+ * @returns {number} The wrapped number.
+ */
+ wrap(value: number, min: number, max: number): number;
+ /**
+ * Wrap an angle on the interval [-Pi, Pi].
+ *
+ * @param {number} angle - Value to wrap.
+ * @returns {number} Wrapped angle.
+ */
+ wrapAngle(angle: number): number;
+ /**
+ * Limit the value to the interval [min, max] by changing the value to
+ * the nearest available one when it is outside the interval.
+ *
+ * @param {number} value - Value to clamp.
+ * @param {number} min - Minimum of the interval.
+ * @param {number} max - Maximum of the interval.
+ * @returns {number} Clamped value.
+ */
+ clamp(value: number, min: number, max: number): number;
+ /**
+ * Calculates the counter-clockwise angle from the first
+ * vector (x1, y1)^T to the second (x2, y2)^T.
+ *
+ * @param {number} x1 - X coordinate of first vector.
+ * @param {number} y1 - Y coordinate of first vector.
+ * @param {number} x2 - X coordinate of second vector.
+ * @param {number} y2 - Y coordinate of second vector.
+ * @returns {number} Counter clockwise angle between the vectors.
+ */
+ angleBetweenVector2(x1: number, y1: number, x2: number, y2: number): number;
+ /**
+ * Calculates the minimum (absolute) angle change for rotation
+ * from one angle to another on the [-Pi, Pi] interval.
+ *
+ * @param {number} angle1 - Start angle.
+ * @param {number} angle2 - Destination angle.
+ * @returns {number} Absolute angle change between angles.
+ */
+ angleDifference(angle1: number, angle2: number): number;
+ /**
+ * Calculates the relative rotation angle between two
+ * angle-axis vectors.
+ *
+ * @param {number} rotation1 - First angle-axis vector.
+ * @param {number} rotation2 - Second angle-axis vector.
+ * @returns {number} Relative rotation angle.
+ */
+ relativeRotationAngle(rotation1: number[], rotation2: number[]): number;
+ /**
+ * Calculates the angle from a vector to a plane.
+ *
+ * @param {Array<number>} vector - The vector.
+ * @param {Array<number>} planeNormal - Normal of the plane.
+ * @returns {number} Angle from between plane and vector.
+ */
+ angleToPlane(vector: number[], planeNormal: number[]): number;
+ azimuthal(direction: number[], up: number[]): number;
+ /**
+ * Calculates the distance between two coordinates
+ * (longitude, latitude pairs) in meters according to
+ * the haversine formula.
+ *
+ * @param {number} lat1 - Latitude of the first coordinate in degrees.
+ * @param {number} lng1 - Longitude of the first coordinate in degrees.
+ * @param {number} lat2 - Latitude of the second coordinate in degrees.
+ * @param {number} lng2 - Longitude of the second coordinate in degrees.
+ * @returns {number} Distance between lat lon positions in meters.
+ */
+ distanceFromLngLat(lng1: number, lat1: number, lng2: number, lat2: number): number;
+}
+
+/**
+ * @class ViewportCoords
+ *
+ * @classdesc Provides methods for calculating 2D coordinate conversions
+ * as well as 3D projection and unprojection.
+ *
+ * Basic coordinates are 2D coordinates on the [0, 1] interval and
+ * have the origin point, (0, 0), at the top left corner and the
+ * maximum value, (1, 1), at the bottom right corner of the original
+ * image.
+ *
+ * Viewport coordinates are 2D coordinates on the [-1, 1] interval and
+ * have the origin point in the center. The bottom left corner point is
+ * (-1, -1) and the top right corner point is (1, 1).
+ *
+ * Canvas coordiantes are 2D pixel coordinates on the [0, canvasWidth] and
+ * [0, canvasHeight] intervals. The origin point (0, 0) is in the top left
+ * corner and the maximum value is (canvasWidth, canvasHeight) is in the
+ * bottom right corner.
+ *
+ * 3D coordinates are in the topocentric world reference frame.
+ */
+declare class ViewportCoords {
+ private _unprojectDepth;
+ /**
+ * Convert basic coordinates to canvas coordinates.
+ *
+ * @description Transform origin and camera position needs to be the
+ * equal for reliable return value.
+ *
+ * @param {number} basicX - Basic X coordinate.
+ * @param {number} basicY - Basic Y coordinate.
+ * @param {HTMLElement} container - The viewer container.
+ * @param {Transform} transform - Transform of the image to unproject from.
+ * @param {THREE.Camera} camera - Camera used in rendering.
+ * @returns {Array<number>} 2D canvas coordinates.
+ */
+ basicToCanvas(basicX: number, basicY: number, container: {
+ offsetHeight: number;
+ offsetWidth: number;
+ }, transform: Transform, camera: Camera$1): number[];
+ /**
+ * Convert basic coordinates to canvas coordinates safely. If 3D point is
+ * behind camera null will be returned.
+ *
+ * @description Transform origin and camera position needs to be the
+ * equal for reliable return value.
+ *
+ * @param {number} basicX - Basic X coordinate.
+ * @param {number} basicY - Basic Y coordinate.
+ * @param {HTMLElement} container - The viewer container.
+ * @param {Transform} transform - Transform of the image to unproject from.
+ * @param {THREE.Camera} camera - Camera used in rendering.
+ * @returns {Array<number>} 2D canvas coordinates if the basic point represents a 3D point
+ * in front of the camera, otherwise null.
+ */
+ basicToCanvasSafe(basicX: number, basicY: number, container: {
+ offsetHeight: number;
+ offsetWidth: number;
+ }, transform: Transform, camera: Camera$1): number[];
+ /**
+ * Convert basic coordinates to viewport coordinates.
+ *
+ * @description Transform origin and camera position needs to be the
+ * equal for reliable return value.
+ *
+ * @param {number} basicX - Basic X coordinate.
+ * @param {number} basicY - Basic Y coordinate.
+ * @param {Transform} transform - Transform of the image to unproject from.
+ * @param {THREE.Camera} camera - Camera used in rendering.
+ * @returns {Array<number>} 2D viewport coordinates.
+ */
+ basicToViewport(basicX: number, basicY: number, transform: Transform, camera: Camera$1): number[];
+ /**
+ * Convert basic coordinates to viewport coordinates safely. If 3D point is
+ * behind camera null will be returned.
+ *
+ * @description Transform origin and camera position needs to be the
+ * equal for reliable return value.
+ *
+ * @param {number} basicX - Basic X coordinate.
+ * @param {number} basicY - Basic Y coordinate.
+ * @param {Transform} transform - Transform of the image to unproject from.
+ * @param {THREE.Camera} camera - Camera used in rendering.
+ * @returns {Array<number>} 2D viewport coordinates.
+ */
+ basicToViewportSafe(basicX: number, basicY: number, transform: Transform, camera: Camera$1): number[];
+ /**
+ * Convert camera 3D coordinates to viewport coordinates.
+ *
+ * @param {number} pointCamera - 3D point in camera coordinate system.
+ * @param {THREE.Camera} camera - Camera used in rendering.
+ * @returns {Array<number>} 2D viewport coordinates.
+ */
+ cameraToViewport(pointCamera: number[], camera: Camera$1): number[];
+ /**
+ * Get canvas pixel position from event.
+ *
+ * @param {Event} event - Event containing clientX and clientY properties.
+ * @param {HTMLElement} element - HTML element.
+ * @returns {Array<number>} 2D canvas coordinates.
+ */
+ canvasPosition(event: {
+ clientX: number;
+ clientY: number;
+ }, element: HTMLElement): number[];
+ /**
+ * Convert canvas coordinates to basic coordinates.
+ *
+ * @description Transform origin and camera position needs to be the
+ * equal for reliable return value.
+ *
+ * @param {number} canvasX - Canvas X coordinate.
+ * @param {number} canvasY - Canvas Y coordinate.
+ * @param {HTMLElement} container - The viewer container.
+ * @param {Transform} transform - Transform of the image to unproject from.
+ * @param {THREE.Camera} camera - Camera used in rendering.
+ * @returns {Array<number>} 2D basic coordinates.
+ */
+ canvasToBasic(canvasX: number, canvasY: number, container: {
+ offsetHeight: number;
+ offsetWidth: number;
+ }, transform: Transform, camera: Camera$1): number[];
+ /**
+ * Convert canvas coordinates to viewport coordinates.
+ *
+ * @param {number} canvasX - Canvas X coordinate.
+ * @param {number} canvasY - Canvas Y coordinate.
+ * @param {HTMLElement} container - The viewer container.
+ * @returns {Array<number>} 2D viewport coordinates.
+ */
+ canvasToViewport(canvasX: number, canvasY: number, container: {
+ offsetHeight: number;
+ offsetWidth: number;
+ }): number[];
+ /**
+ * Determines the width and height of the container in canvas coordinates.
+ *
+ * @param {HTMLElement} container - The viewer container.
+ * @returns {Array<number>} 2D canvas coordinates.
+ */
+ containerToCanvas(container: {
+ offsetHeight: number;
+ offsetWidth: number;
+ }): number[];
+ /**
+ * Determine basic distances from image to canvas corners.
+ *
+ * @description Transform origin and camera position needs to be the
+ * equal for reliable return value.
+ *
+ * Determines the smallest basic distance for every side of the canvas.
+ *
+ * @param {Transform} transform - Transform of the image to unproject from.
+ * @param {THREE.Camera} camera - Camera used in rendering.
+ * @returns {Array<number>} Array of basic distances as [top, right, bottom, left].
+ */
+ getBasicDistances(transform: Transform, camera: Camera$1): number[];
+ /**
+ * Determine pixel distances from image to canvas corners.
+ *
+ * @description Transform origin and camera position needs to be the
+ * equal for reliable return value.
+ *
+ * Determines the smallest pixel distance for every side of the canvas.
+ *
+ * @param {HTMLElement} container - The viewer container.
+ * @param {Transform} transform - Transform of the image to unproject from.
+ * @param {THREE.Camera} camera - Camera used in rendering.
+ * @returns {Array<number>} Array of pixel distances as [top, right, bottom, left].
+ */
+ getPixelDistances(container: {
+ offsetHeight: number;
+ offsetWidth: number;
+ }, transform: Transform, camera: Camera$1): 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;
+ /**
+ * Project 3D world coordinates to canvas coordinates.
+ *
+ * @param {Array<number>} point3D - 3D world coordinates.
+ * @param {HTMLElement} container - The viewer container.
+ * @param {THREE.Camera} camera - Camera used in rendering.
+ * @returns {Array<number>} 2D canvas coordinates.
+ */
+ projectToCanvas(point3d: number[], container: {
+ offsetHeight: number;
+ offsetWidth: number;
+ }, camera: Camera$1): number[];
+ /**
+ * Project 3D world coordinates to canvas coordinates safely. If 3D
+ * point is behind camera null will be returned.
+ *
+ * @param {Array<number>} point3D - 3D world coordinates.
+ * @param {HTMLElement} container - The viewer container.
+ * @param {THREE.Camera} camera - Camera used in rendering.
+ * @returns {Array<number>} 2D canvas coordinates.
+ */
+ projectToCanvasSafe(point3d: number[], container: {
+ offsetHeight: number;
+ offsetWidth: number;
+ }, camera: Camera$1): number[];
+ /**
+ * Project 3D world coordinates to viewport coordinates.
+ *
+ * @param {Array<number>} point3D - 3D world coordinates.
+ * @param {THREE.Camera} camera - Camera used in rendering.
+ * @returns {Array<number>} 2D viewport coordinates.
+ */
+ projectToViewport(point3d: number[], camera: Camera$1): number[];
+ /**
+ * Uproject canvas coordinates to 3D world coordinates.
+ *
+ * @param {number} canvasX - Canvas X coordinate.
+ * @param {number} canvasY - Canvas Y coordinate.
+ * @param {HTMLElement} container - The viewer container.
+ * @param {THREE.Camera} camera - Camera used in rendering.
+ * @returns {Array<number>} 3D world coordinates.
+ */
+ unprojectFromCanvas(canvasX: number, canvasY: number, container: {
+ offsetHeight: number;
+ offsetWidth: number;
+ }, camera: Camera$1): Vector3;
+ /**
+ * Unproject viewport coordinates to 3D world coordinates.
+ *
+ * @param {number} viewportX - Viewport X coordinate.
+ * @param {number} viewportY - Viewport Y coordinate.
+ * @param {THREE.Camera} camera - Camera used in rendering.
+ * @returns {Array<number>} 3D world coordinates.
+ */
+ unprojectFromViewport(viewportX: number, viewportY: number, camera: Camera$1): Vector3;
+ /**
+ * Convert viewport coordinates to basic coordinates.
+ *
+ * @description Transform origin and camera position needs to be the
+ * equal for reliable return value.
+ *
+ * @param {number} viewportX - Viewport X coordinate.
+ * @param {number} viewportY - Viewport Y coordinate.
+ * @param {Transform} transform - Transform of the image to unproject from.
+ * @param {THREE.Camera} camera - Camera used in rendering.
+ * @returns {Array<number>} 2D basic coordinates.
+ */
+ viewportToBasic(viewportX: number, viewportY: number, transform: Transform, camera: Camera$1): number[];
+ /**
+ * Convert viewport coordinates to canvas coordinates.
+ *
+ * @param {number} viewportX - Viewport X coordinate.
+ * @param {number} viewportY - Viewport Y coordinate.
+ * @param {HTMLElement} container - The viewer container.
+ * @returns {Array<number>} 2D canvas coordinates.
+ */
+ viewportToCanvas(viewportX: number, viewportY: number, container: {
+ offsetHeight: number;
+ offsetWidth: number;
+ }): number[];
+ /**
+ * Convert 3D world coordinates to 3D camera coordinates.
+ *
+ * @param {number} point3D - 3D point in world coordinate system.
+ * @param {THREE.Camera} camera - Camera used in rendering.
+ * @returns {Array<number>} 3D camera coordinates.
+ */
+ worldToCamera(point3d: number[], camera: Camera$1): number[];
+}
+
+declare class PanService {
+ private _graphService;
+ private _stateService;
+ private _graphCalculator;
+ private _spatial;
+ private _viewportCoords;
+ private _panImagesSubject$;
+ private _panImages$;
+ private _panImagesSubscription;
+ private _subscriptions;
+ private _mode;
+ constructor(graphService: GraphService, stateService: StateService, enabled?: boolean, graphCalculator?: GraphCalculator, spatial?: Spatial, viewportCoords?: ViewportCoords);
+ get panImages$(): Observable<[Image, Transform, number][]>;
+ dispose(): void;
+ enable(): void;
+ disable(): void;
+ start(): void;
+ stop(): void;
+ private _distance;
+ private _timeDifference;
+ private _createTransform;
+ private _computeProjectedPoints;
+ private _computeHorizontalFov;
+ private _coordToFov;
+}
+
+declare class PlayService {
+ static readonly sequenceSpeed: number;
+ private _graphService;
+ private _stateService;
+ private _imagesAhead;
+ private _playing;
+ private _speed;
+ private _direction$;
+ private _directionSubject$;
+ private _playing$;
+ private _playingSubject$;
+ private _speed$;
+ private _speedSubject$;
+ private _playingSubscription;
+ private _cacheSubscription;
+ private _clearSubscription;
+ private _earthSubscription;
+ private _graphModeSubscription;
+ private _stopSubscription;
+ private _subscriptions;
+ private _bridging$;
+ constructor(graphService: GraphService, stateService: StateService);
+ get playing(): boolean;
+ get direction$(): Observable<NavigationDirection>;
+ get playing$(): Observable<boolean>;
+ get speed$(): Observable<number>;
+ play(): void;
+ dispose(): void;
+ setDirection(direction: NavigationDirection): void;
+ setSpeed(speed: number): void;
+ stop(): void;
+ private _mapSpeed;
+ private _mapImagesAhead;
+ private _setPlaying;
+ private _setSpeed;
+}
+
+declare class Navigator {
+ private _api;
+ private _cacheService;
+ private _graphService;
+ private _loadingService;
+ private _loadingName;
+ private _panService;
+ private _playService;
+ private _stateService;
+ private _idRequested$;
+ private _movedToId$;
+ private _request$;
+ private _requestSubscription;
+ private _imageRequestSubscription;
+ constructor(options: ViewerOptions, api?: APIWrapper, graphService?: GraphService, loadingService?: LoadingService, stateService?: StateService, cacheService?: CacheService, playService?: PlayService, panService?: PanService);
+ get api(): APIWrapper;
+ get cacheService(): CacheService;
+ get graphService(): GraphService;
+ get loadingService(): LoadingService;
+ get movedToId$(): Observable<string>;
+ get panService(): PanService;
+ get playService(): PlayService;
+ get stateService(): StateService;
+ dispose(): void;
+ moveTo$(id: string): Observable<Image>;
+ moveDir$(direction: NavigationDirection): Observable<Image>;
+ setFilter$(filter: FilterExpression): Observable<void>;
+ setAccessToken$(accessToken?: string): Observable<void>;
+ private _cacheIds$;
+ private _abortRequest;
+ private _makeRequest$;
+ private _moveTo$;
+ private _trajectoryIds$;
+}
+
+declare class SubscriptionHolder {
+ private _subscriptions;
+ push(subscription: Subscription): void;
+ unsubscribe(): void;
+}
+
+interface IComponent {
+ /**
+ * Value indicating if the component is currently active.
+ */
+ readonly activated: boolean;
+ /**
+ * Default configuration for the component.
+ */
+ readonly defaultConfiguration: ComponentConfiguration;
+ /**
+ * The name of the component. Used when interacting with the
+ * component through the Viewer's API.
+ */
+ readonly name: string;
+ /**
+ * Configure the component.
+ */
+ configure(configuration: ComponentConfiguration): void;
+}
+
+/**
+ * @event
+ */
+declare type ComponentEventType = "geometrycreate" | "hover" | "markerdragend" | "markerdragstart" | "markerposition" | "playing" | "tagcreateend" | "tagcreatestart" | "tagmode" | "tags";
+
+declare abstract class Component<TConfiguration extends ComponentConfiguration> extends EventEmitter implements IComponent {
+ static componentName: ComponentName | FallbackComponentName;
+ protected _activated: boolean;
+ protected _container: Container;
+ protected _name: string;
+ protected _navigator: Navigator;
+ protected readonly _subscriptions: SubscriptionHolder;
+ protected _activated$: BehaviorSubject<boolean>;
+ protected _configuration$: Observable<TConfiguration>;
+ protected _configurationSubject$: Subject<TConfiguration>;
+ constructor(name: string, container: Container, navigator: Navigator);
+ /**
+ * Get activated.
+ *
+ * @returns {boolean} Value indicating if the component is
+ * currently active.
+ */
+ get activated(): boolean;
+ /** @ignore */
+ get activated$(): Observable<boolean>;
+ /**
+ * Get default configuration.
+ *
+ * @returns {TConfiguration} Default configuration for component.
+ */
+ get defaultConfiguration(): TConfiguration;
+ /** @ignore */
+ get configuration$(): Observable<TConfiguration>;
+ /**
+ * Get name.
+ *
+ * @description The name of the component. Used when interacting with the
+ * component through the Viewer's API.
+ */
+ get name(): string;
+ /** @ignore */
+ activate(conf?: TConfiguration): void;
+ /**
+ * Configure the component.
+ *
+ * @param configuration Component configuration.
+ */
+ configure(configuration: TConfiguration): void;
+ /** @ignore */
+ deactivate(): void;
+ /** @inheritdoc */
+ fire<T>(type: ComponentEventType, event: T): void;
+ /** @inheritdoc */
+ off<T>(type: ComponentEventType, handler: (event: T) => void): void;
+ /** @inheritdoc */
+ on<T>(type: ComponentEventType, 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;
+ protected abstract _activate(): void;
+ protected abstract _deactivate(): void;
+ protected abstract _getDefaultConfiguration(): TConfiguration;
+}
+
+/**
+ * @class BearingComponent
+ *
+ * @classdesc Component for indicating bearing and field of view.
+ *
+ * @example
+ * ```js
+ * var viewer = new Viewer({ ... });
+ * var bearingComponent = viewer.getComponent("bearing");
+ * bearingComponent.configure({ size: ComponentSize.Small });
+ * ```
+ */
+declare class BearingComponent extends Component<BearingConfiguration> {
+ static componentName: ComponentName;
+ private _spatial;
+ private _viewportCoords;
+ private _svgNamespace;
+ private _distinctThreshold;
+ private _animationSpeed;
+ private _unitBezier;
+ /** @ignore */
+ constructor(name: string, container: Container, navigator: Navigator);
+ protected _activate(): void;
+ protected _deactivate(): void;
+ protected _getDefaultConfiguration(): BearingConfiguration;
+ private _createFovIndicator;
+ private _createFovArc;
+ private _createCircleSectorCompass;
+ private _createCircleSector;
+ private _createNorth;
+ private _createBackground;
+ private _computeProjectedPoints;
+ private _computeHorizontalFov;
+ private _coordToFov;
+ private _interpolate;
+}
+
+declare class CacheComponent extends Component<CacheConfiguration> {
+ static componentName: ComponentName;
+ /** @ignore */
+ constructor(name: string, container: Container, navigator: Navigator);
+ protected _activate(): void;
+ protected _deactivate(): void;
+ protected _getDefaultConfiguration(): CacheConfiguration;
+ private _cache$;
+ private _imageToEdges$;
+}
+
+/**
+ * Interface for general component events.
+ */
+interface ComponentEvent {
+ /**
+ * The component object that fired the event.
+ */
+ target: IComponent;
+ /**
+ * The event type.
+ */
+ type: ComponentEventType;
+}
+
+/**
+ * Interface for component hover events.
+ */
+interface ComponentHoverEvent extends ComponentEvent {
+ /**
+ * 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";
+}
+
+/**
+ * @class Geometry
+ * @abstract
+ * @classdesc Represents a geometry.
+ */
+declare abstract class Geometry {
+ protected _notifyChanged$: Subject<Geometry>;
+ /**
+ * Create a geometry.
+ *
+ * @constructor
+ * @ignore
+ */
+ constructor();
+ /**
+ * Get changed observable.
+ *
+ * @description Emits the geometry itself every time the geometry
+ * has changed.
+ *
+ * @returns {Observable<Geometry>} Observable emitting the geometry instance.
+ * @ignore
+ */
+ get changed$(): Observable<Geometry>;
+ /**
+ * Get the 2D basic coordinates for the centroid of the geometry.
+ *
+ * @returns {Array<number>} 2D basic coordinates representing the centroid.
+ * @ignore
+ */
+ abstract getCentroid2d(): number[];
+ /**
+ * Get the 3D world coordinates for the centroid of the geometry.
+ *
+ * @param {Transform} transform - The transform of the image related to the geometry.
+ * @returns {Array<number>} 3D world coordinates representing the centroid.
+ * @ignore
+ */
+ abstract getCentroid3d(transform: Transform): number[];
+ /**
+ * Set the 2D centroid of the geometry.
+ *
+ * @param {Array<number>} value - The new value of the centroid in basic coordinates.
+ * @param {Transform} transform - The transform of the image related to the geometry.
+ * @ignore
+ */
+ abstract setCentroid2d(value: number[], transform: Transform): void;
+}
+
+/**
+ * Interface for component geometry events.
+ */
+interface ComponentGeometryEvent extends ComponentEvent {
+ /**
+ * Geometry related to the event.
+ */
+ geometry: Geometry;
+ type: "geometrycreate";
+}
+
+/**
+ * @class Marker
+ *
+ * @classdesc Represents an abstract marker class that should be extended
+ * by marker implementations used in the marker component.
+ */
+declare abstract class Marker {
+ protected _id: string;
+ protected _geometry: Object3D;
+ protected _lngLat: LngLat;
+ constructor(id: string, lngLat: LngLat);
+ /**
+ * Get id.
+ * @returns {string} The id of the marker.
+ */
+ get id(): string;
+ /**
+ * Get geometry.
+ *
+ * @ignore
+ */
+ get geometry(): Object3D;
+ /**
+ * Get lngLat.
+ * @returns {LngLat} The geographic coordinates of the marker.
+ */
+ get lngLat(): LngLat;
+ /** @ignore */
+ createGeometry(position: number[]): void;
+ /** @ignore */
+ disposeGeometry(): void;
+ /** @ignore */
+ getInteractiveObjects(): Object3D[];
+ /** @ignore */
+ lerpAltitude(alt: number, alpha: number): void;
+ /** @ignore */
+ updatePosition(position: number[], lngLat?: LngLat): void;
+ protected abstract _createGeometry(position: number[]): void;
+ protected abstract _disposeGeometry(): void;
+ protected abstract _getInteractiveObjects(): Object3D[];
+}
+
+/**
+ * Interface for component marker events.
+ */
+interface ComponentMarkerEvent extends ComponentEvent {
+ /**
+ * The marker that was affected by the event.
+ */
+ marker: Marker;
+ type: "markerdragend" | "markerdragstart" | "markerposition";
+}
+
+/**
+ * Interface for component play events.
+ */
+interface ComponentPlayEvent extends ComponentEvent {
+ /**
+ * Value indiciating if the component is playing or not.
+ */
+ playing: boolean;
+ type: "playing";
+}
+
+/**
+ * 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');
+ * });
+ * ```
+ */
+interface ComponentStateEvent extends ComponentEvent {
+ type: "tagcreateend" | "tagcreatestart" | "tags";
+}
+
+/**
+ * Interface for component tag mode events.
+ */
+interface ComponentTagModeEvent extends ComponentEvent {
+ /**
+ * Value indicating the current tag mode of the component.
+ */
+ mode: TagMode;
+ type: "tagmode";
+}
+
+/**
+ * @class DirectionDOMRenderer
+ * @classdesc DOM renderer for direction arrows.
+ */
+declare class DirectionDOMRenderer {
+ private _spatial;
+ private _calculator;
+ private _image;
+ private _rotation;
+ private _epsilon;
+ private _highlightKey;
+ private _distinguishSequence;
+ private _needsRender;
+ private _stepEdges;
+ private _turnEdges;
+ private _sphericalEdges;
+ private _sequenceEdgeKeys;
+ private _stepDirections;
+ private _turnDirections;
+ private _turnNames;
+ private _isEdge;
+ constructor(configuration: DirectionConfiguration, size: ViewportSize);
+ /**
+ * Get needs render.
+ *
+ * @returns {boolean} Value indicating whether render should be called.
+ */
+ get needsRender(): boolean;
+ /**
+ * Renders virtual DOM elements.
+ *
+ * @description Calling render resets the needs render property.
+ */
+ render(navigator: Navigator): VNode;
+ 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;
+ private _setNeedsRender;
+ private _clearEdges;
+ private _setEdges;
+ private _createSphericalArrows;
+ private _createSphericalToPerspectiveArrow;
+ private _createPerspectiveToSphericalArrows;
+ private _createStepArrows;
+ private _createTurnArrows;
+ private _createVNodeByKey;
+ private _createVNodeByDirection;
+ private _createVNodeByTurn;
+ private _createVNodeInactive;
+ private _createVNode;
+ private _getContainer;
+}
+
+/**
+ * @class DirectionComponent
+ * @classdesc Component showing navigation arrows for steps and turns.
+ */
+declare class DirectionComponent extends Component<DirectionConfiguration> {
+ /** @inheritdoc */
+ static componentName: ComponentName;
+ private _renderer;
+ private _hoveredIdSubject$;
+ private _hoveredId$;
+ /** @ignore */
+ constructor(name: string, container: Container, navigator: Navigator, directionDOMRenderer?: DirectionDOMRenderer);
+ fire(type: "hover", event: ComponentHoverEvent): void;
+ /** @ignore */
+ fire(type: ComponentEventType, event: ComponentStateEvent): void;
+ off(type: "hover", handler: (event: ComponentHoverEvent) => void): void;
+ /** @ignore */
+ off(type: ComponentEventType, handler: (event: ComponentStateEvent) => void): void;
+ /**
+ * Fired when the hovered element of a component changes.
+ *
+ * @event hover
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * var component = viewer.getComponent('<component-name>');
+ * // Set an event listener
+ * component.on('hover', function() {
+ * console.log("A hover event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "hover", handler: (event: ComponentHoverEvent) => void): void;
+ /** @ignore */
+ on(type: ComponentEventType, handler: (event: ComponentStateEvent) => void): void;
+ protected _activate(): void;
+ protected _deactivate(): void;
+ protected _getDefaultConfiguration(): DirectionConfiguration;
+}
+
+declare abstract class HandlerBase<TConfiguration extends ComponentConfiguration> {
+ protected _component: Component<TConfiguration>;
+ protected _container: Container;
+ protected _navigator: Navigator;
+ protected _enabled: boolean;
+ /** @ignore */
+ constructor(component: Component<TConfiguration>, container: Container, navigator: Navigator);
+ /**
+ * Returns a Boolean indicating whether the interaction is enabled.
+ *
+ * @returns {boolean} `true` if the interaction is enabled.
+ */
+ get isEnabled(): boolean;
+ /**
+ * Enables the interaction.
+ *
+ * @example
+ * ```js
+ * <component-name>.<handler-name>.enable();
+ * ```
+ */
+ enable(): void;
+ /**
+ * Disables the interaction.
+ *
+ * @example
+ * ```js
+ * <component-name>.<handler-name>.disable();
+ * ```
+ */
+ disable(): void;
+ protected abstract _enable(): void;
+ protected abstract _disable(): void;
+ protected abstract _getConfiguration(enable: boolean): TConfiguration;
+}
+
+/**
+ * The `KeySequenceNavigationHandler` allows the user to navigate through a sequence using the
+ * following key commands:
+ *
+ * `ALT` + `Up Arrow`: Navigate to next image in the sequence.
+ * `ALT` + `Down Arrow`: Navigate to previous image in sequence.
+ *
+ * @example
+ * ```js
+ * var keyboardComponent = viewer.getComponent("keyboard");
+ *
+ * keyboardComponent.keySequenceNavigation.disable();
+ * keyboardComponent.keySequenceNavigation.enable();
+ *
+ * var isEnabled = keyboardComponent.keySequenceNavigation.isEnabled;
+ * ```
+ */
+declare class KeySequenceNavigationHandler extends HandlerBase<KeyboardConfiguration> {
+ private _keyDownSubscription;
+ protected _enable(): void;
+ protected _disable(): void;
+ protected _getConfiguration(enable: boolean): KeyboardConfiguration;
+}
+
+/**
+ * The `KeySpatialNavigationHandler` allows the user to navigate through a sequence using the
+ * following key commands:
+ *
+ * `Up Arrow`: Step forward.
+ * `Down Arrow`: Step backward.
+ * `Left Arrow`: Step to the left.
+ * `Rigth Arrow`: Step to the right.
+ * `SHIFT` + `Down Arrow`: Turn around.
+ * `SHIFT` + `Left Arrow`: Turn to the left.
+ * `SHIFT` + `Rigth Arrow`: Turn to the right.
+ *
+ * @example
+ * ```js
+ * var keyboardComponent = viewer.getComponent("keyboard");
+ *
+ * keyboardComponent.keySpatialNavigation.disable();
+ * keyboardComponent.keySpatialNavigation.enable();
+ *
+ * var isEnabled = keyboardComponent.keySpatialNavigation.isEnabled;
+ * ```
+ */
+declare class KeySpatialNavigationHandler extends HandlerBase<KeyboardConfiguration> {
+ private _spatial;
+ private _keyDownSubscription;
+ /** @ignore */
+ constructor(component: Component<KeyboardConfiguration>, container: Container, navigator: Navigator, spatial: Spatial);
+ protected _enable(): void;
+ protected _disable(): void;
+ protected _getConfiguration(enable: boolean): KeyboardConfiguration;
+ private _moveDir;
+ private _moveTo;
+ private _rotationFromCamera;
+}
+
+/**
+ * The `KeyZoomHandler` allows the user to zoom in and out using the
+ * following key commands:
+ *
+ * `+`: Zoom in.
+ * `-`: Zoom out.
+ *
+ * @example
+ * ```js
+ * var keyboardComponent = viewer.getComponent("keyboard");
+ *
+ * keyboardComponent.keyZoom.disable();
+ * keyboardComponent.keyZoom.enable();
+ *
+ * var isEnabled = keyboardComponent.keyZoom.isEnabled;
+ * ```
+ */
+declare class KeyZoomHandler extends HandlerBase<KeyboardConfiguration> {
+ private _keyDownSubscription;
+ private _viewportCoords;
+ /** @ignore */
+ constructor(component: Component<KeyboardConfiguration>, container: Container, navigator: Navigator, viewportCoords: ViewportCoords);
+ protected _enable(): void;
+ protected _disable(): void;
+ protected _getConfiguration(enable: boolean): KeyboardConfiguration;
+}
+
+/**
+ * The `KeyPlayHandler` allows the user to control the play behavior
+ * using the following key commands:
+ *
+ * `Spacebar`: Start or stop playing.
+ * `SHIFT` + `D`: Switch direction.
+ * `<`: Decrease speed.
+ * `>`: Increase speed.
+ *
+ * @example
+ * ```js
+ * var keyboardComponent = viewer.getComponent("keyboard");
+ *
+ * keyboardComponent.keyPlay.disable();
+ * keyboardComponent.keyPlay.enable();
+ *
+ * var isEnabled = keyboardComponent.keyPlay.isEnabled;
+ * ```
+ */
+declare class KeyPlayHandler extends HandlerBase<KeyboardConfiguration> {
+ private _keyDownSubscription;
+ protected _enable(): void;
+ protected _disable(): void;
+ protected _getConfiguration(enable: boolean): KeyboardConfiguration;
+}
+
+/**
+ * @class KeyboardComponent
+ *
+ * @classdesc Component for keyboard event handling.
+ *
+ * To retrive and use the keyboard component
+ *
+ * @example
+ * ```js
+ * var viewer = new Viewer({ ... });
+ *
+ * var keyboardComponent = viewer.getComponent("keyboard");
+ * ```
+ */
+declare class KeyboardComponent extends Component<KeyboardConfiguration> {
+ static componentName: ComponentName;
+ private _keyPlayHandler;
+ private _keySequenceNavigationHandler;
+ private _keySpatialNavigationHandler;
+ private _keyZoomHandler;
+ /** @ignore */
+ constructor(name: string, container: Container, navigator: Navigator);
+ /**
+ * Get key play.
+ *
+ * @returns {KeyPlayHandler} The key play handler.
+ */
+ get keyPlay(): KeyPlayHandler;
+ /**
+ * Get key sequence navigation.
+ *
+ * @returns {KeySequenceNavigationHandler} The key sequence navigation handler.
+ */
+ get keySequenceNavigation(): KeySequenceNavigationHandler;
+ /**
+ * Get spatial.
+ *
+ * @returns {KeySpatialNavigationHandler} The spatial handler.
+ */
+ get keySpatialNavigation(): KeySpatialNavigationHandler;
+ /**
+ * Get key zoom.
+ *
+ * @returns {KeyZoomHandler} The key zoom handler.
+ */
+ get keyZoom(): KeyZoomHandler;
+ protected _activate(): void;
+ protected _deactivate(): void;
+ protected _getDefaultConfiguration(): KeyboardConfiguration;
+}
+
+/**
+ * @interface CircleMarkerOptions
+ *
+ * Interface that represents the options for configuring a `CircleMarker`.
+ */
+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 {
+ private _color;
+ private _opacity;
+ private _radius;
+ constructor(id: string, lngLat: LngLat, options?: CircleMarkerOptions);
+ protected _createGeometry(position: number[]): void;
+ protected _disposeGeometry(): void;
+ protected _getInteractiveObjects(): Object3D[];
+}
+
+/**
+ * @class MarkerComponent
+ *
+ * @classdesc Component for showing and editing 3D marker objects.
+ *
+ * The `add` method is used for adding new markers or replacing
+ * markers already in the set.
+ *
+ * If a marker already in the set has the same
+ * id as one of the markers added, the old marker will be removed and
+ * the added marker will take its place.
+ *
+ * It is not possible to update markers in the set by updating any properties
+ * directly on the marker object. Markers need to be replaced by
+ * re-adding them for updates to geographic position or configuration
+ * to be reflected.
+ *
+ * Markers added to the marker component can be either interactive
+ * or non-interactive. Different marker types define their behavior.
+ * Markers with interaction support can be configured with options
+ * to respond to dragging inside the viewer and be detected when
+ * retrieving markers from pixel points with the `getMarkerIdAt` method.
+ *
+ * To retrive and use the marker component
+ *
+ * @example
+ * ```js
+ * var viewer = new Viewer({ component: { marker: true }, ... });
+ *
+ * var markerComponent = viewer.getComponent("marker");
+ * ```
+ */
+declare class MarkerComponent extends Component<MarkerConfiguration> {
+ static componentName: ComponentName;
+ private _graphCalculator;
+ private _markerScene;
+ private _markerSet;
+ private _viewportCoords;
+ private _relativeGroundAltitude;
+ /** @ignore */
+ constructor(name: string, container: Container, navigator: Navigator);
+ /**
+ * Add markers to the marker set or replace markers in the marker set.
+ *
+ * @description If a marker already in the set has the same
+ * id as one of the markers added, the old marker will be removed
+ * the added marker will take its place.
+ *
+ * Any marker inside the visible bounding bbox
+ * will be initialized and placed in the viewer.
+ *
+ * @param {Array<Marker>} markers - Markers to add.
+ *
+ * @example
+ * ```js
+ * markerComponent.add([marker1, marker2]);
+ * ```
+ */
+ add(markers: Marker[]): void;
+ fire(type: "markerdragend" | "markerdragstart" | "markerposition", event: ComponentMarkerEvent): void;
+ /** @ignore */
+ fire(type: ComponentEventType, event: ComponentEvent): void;
+ /**
+ * Returns the marker in the marker set with the specified id, or
+ * undefined if the id matches no marker.
+ *
+ * @param {string} markerId - Id of the marker.
+ *
+ * @example
+ * ```js
+ * var marker = markerComponent.get("markerId");
+ * ```
+ *
+ */
+ get(markerId: string): Marker;
+ /**
+ * Returns an array of all markers.
+ *
+ * @example
+ * ```js
+ * var markers = markerComponent.getAll();
+ * ```
+ */
+ getAll(): Marker[];
+ /**
+ * Returns the id of the interactive marker closest to the current camera
+ * position at the specified point.
+ *
+ * @description Notice that the pixelPoint argument requires x, y
+ * coordinates from pixel space.
+ *
+ * With this function, you can use the coordinates provided by mouse
+ * events to get information out of the marker component.
+ *
+ * If no interactive geometry of an interactive marker exist at the pixel
+ * point, `null` will be returned.
+ *
+ * @param {Array<number>} pixelPoint - Pixel coordinates on the viewer element.
+ * @returns {string} Id of the interactive marker closest to the camera. If no
+ * interactive marker exist at the pixel point, `null` will be returned.
+ *
+ * @example
+ * ```js
+ * markerComponent.getMarkerIdAt([100, 100])
+ * .then((markerId) => { console.log(markerId); });
+ * ```
+ */
+ getMarkerIdAt(pixelPoint: number[]): Promise<string>;
+ /**
+ * Check if a marker exist in the marker set.
+ *
+ * @param {string} markerId - Id of the marker.
+ *
+ * @example
+ * ```js
+ * var markerExists = markerComponent.has("markerId");
+ * ```
+ */
+ has(markerId: string): boolean;
+ off(type: "markerdragend" | "markerdragstart" | "markerposition", handler: (event: ComponentMarkerEvent) => void): void;
+ /** @ignore */
+ off(type: ComponentEventType, handler: (event: ComponentEvent) => void): void;
+ /**
+ * Fired when a marker drag interaction ends.
+ *
+ * @event markerdragend
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * var component = viewer.getComponent('<component-name>');
+ * // Set an event listener
+ * component.on('markerdragend', function() {
+ * console.log("A markerdragend event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "markerdragend", handler: (event: ComponentMarkerEvent) => void): void;
+ /**
+ * Fired when a marker drag interaction starts.
+ *
+ * @event markerdragstart
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * var component = viewer.getComponent('<component-name>');
+ * // Set an event listener
+ * component.on('markerdragstart', function() {
+ * console.log("A markerdragstart event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "markerdragstart", handler: (event: ComponentMarkerEvent) => void): void;
+ /**
+ * Fired when the position of a marker is changed.
+ *
+ * @event markerposition
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * var component = viewer.getComponent('<component-name>');
+ * // Set an event listener
+ * component.on('markerposition', function() {
+ * console.log("A markerposition event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "markerposition", handler: (event: ComponentMarkerEvent) => void): void;
+ /**
+ * Remove markers with the specified ids from the marker set.
+ *
+ * @param {Array<string>} markerIds - Ids for markers to remove.
+ *
+ * @example
+ * ```js
+ * markerComponent.remove(["id-1", "id-2"]);
+ * ```
+ */
+ remove(markerIds: string[]): void;
+ /**
+ * Remove all markers from the marker set.
+ *
+ * @example
+ * ```js
+ * markerComponent.removeAll();
+ * ```
+ */
+ removeAll(): void;
+ protected _activate(): void;
+ protected _deactivate(): void;
+ protected _getDefaultConfiguration(): MarkerConfiguration;
+}
+
+/**
+ * @interface SimpleMarkerOptions
+ *
+ * Interface that represents the options for configuring a `SimpleMarker`.
+ */
+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 {
+ private _ballColor;
+ private _ballOpacity;
+ private _circleToRayAngle;
+ private _color;
+ private _interactive;
+ private _opacity;
+ private _radius;
+ constructor(id: string, lngLat: LngLat, options?: SimpleMarkerOptions);
+ protected _createGeometry(position: number[]): void;
+ protected _disposeGeometry(): void;
+ protected _getInteractiveObjects(): Object3D[];
+ private _markerHeight;
+ private _createMarkerGeometry;
+}
+
+/**
+ * The `DragPanHandler` allows the user to pan the viewer image by clicking and dragging the cursor.
+ *
+ * @example
+ * ```js
+ * var pointerComponent = viewer.getComponent("pointer");
+ *
+ * pointerComponent.dragPan.disable();
+ * pointerComponent.dragPan.enable();
+ *
+ * var isEnabled = pointerComponent.dragPan.isEnabled;
+ * ```
+ */
+declare class DragPanHandler extends HandlerBase<PointerConfiguration> {
+ private _spatial;
+ private _viewportCoords;
+ private _activeMouseSubscription;
+ private _activeTouchSubscription;
+ private _preventDefaultSubscription;
+ private _rotateSubscription;
+ private _rotateWithoutInertiaSubscription;
+ /** @ignore */
+ constructor(component: Component<PointerConfiguration>, container: Container, navigator: Navigator, viewportCoords: ViewportCoords, spatial: Spatial);
+ protected _enable(): void;
+ protected _disable(): void;
+ protected _getConfiguration(enable: boolean): PointerConfiguration;
+ private _drainBuffer;
+}
+
+declare class EarthControlHandler extends HandlerBase<PointerConfiguration> {
+ private _viewportCoords;
+ private _spatial;
+ private _subscriptions;
+ /** @ignore */
+ constructor(component: Component<PointerConfiguration>, container: Container, navigator: Navigator, viewportCoords: ViewportCoords, spatial: Spatial);
+ protected _enable(): void;
+ protected _disable(): void;
+ protected _getConfiguration(): PointerConfiguration;
+ private _eventToViewport;
+ private _mousePairToRotation;
+ private _planeIntersection;
+}
+
+/**
+ * The `ScrollZoomHandler` allows the user to zoom the viewer image by scrolling.
+ *
+ * @example
+ * ```js
+ * var pointerComponent = viewer.getComponent("pointer");
+ *
+ * pointerComponent.scrollZoom.disable();
+ * pointerComponent.scrollZoom.enable();
+ *
+ * var isEnabled = pointerComponent.scrollZoom.isEnabled;
+ * ```
+ */
+declare class ScrollZoomHandler extends HandlerBase<PointerConfiguration> {
+ private _viewportCoords;
+ private _preventDefaultSubscription;
+ private _zoomSubscription;
+ /** @ignore */
+ constructor(component: Component<PointerConfiguration>, container: Container, navigator: Navigator, viewportCoords: ViewportCoords);
+ protected _enable(): void;
+ protected _disable(): void;
+ protected _getConfiguration(enable: boolean): PointerConfiguration;
+}
+
+/**
+ * The `TouchZoomHandler` allows the user to zoom the viewer image by pinching on a touchscreen.
+ *
+ * @example
+ * ```js
+ * var pointerComponent = viewer.getComponent("pointer");
+ *
+ * pointerComponent.touchZoom.disable();
+ * pointerComponent.touchZoom.enable();
+ *
+ * var isEnabled = pointerComponent.touchZoom.isEnabled;
+ * ```
+ */
+declare class TouchZoomHandler extends HandlerBase<PointerConfiguration> {
+ private _viewportCoords;
+ private _activeSubscription;
+ private _preventDefaultSubscription;
+ private _zoomSubscription;
+ /** @ignore */
+ constructor(component: Component<PointerConfiguration>, container: Container, navigator: Navigator, viewportCoords: ViewportCoords);
+ protected _enable(): void;
+ protected _disable(): void;
+ protected _getConfiguration(enable: boolean): PointerConfiguration;
+}
+
+/**
+ * @class PointerComponent
+ *
+ * @classdesc Component handling mouse, pen, and touch events for camera movement.
+ *
+ * To retrive and use the mouse component
+ *
+ * @example
+ * ```js
+ * var viewer = new Viewer({ ... });
+ *
+ * var pointerComponent = viewer.getComponent("pointer");
+ * ```
+ */
+declare class PointerComponent extends Component<PointerConfiguration> {
+ /** @inheritdoc */
+ static componentName: ComponentName;
+ private _bounceHandler;
+ private _dragPanHandler;
+ private _earthControlHandler;
+ private _scrollZoomHandler;
+ private _touchZoomHandler;
+ /** @ignore */
+ constructor(name: string, container: Container, navigator: Navigator);
+ /**
+ * Get drag pan.
+ *
+ * @returns {DragPanHandler} The drag pan handler.
+ */
+ get dragPan(): DragPanHandler;
+ /**
+ * Get earth control.
+ *
+ * @returns {EarthControlHandler} The earth control handler.
+ */
+ get earthControl(): EarthControlHandler;
+ /**
+ * Get scroll zoom.
+ *
+ * @returns {ScrollZoomHandler} The scroll zoom handler.
+ */
+ get scrollZoom(): ScrollZoomHandler;
+ /**
+ * Get touch zoom.
+ *
+ * @returns {TouchZoomHandler} The touch zoom handler.
+ */
+ get touchZoom(): TouchZoomHandler;
+ protected _activate(): void;
+ protected _deactivate(): void;
+ protected _getDefaultConfiguration(): PointerConfiguration;
+}
+
+/**
+ * Interface for the popup offset with respect to its anchor point.
+ *
+ * @description An object of number arrays specifing 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 });
+ * ```
+ */
+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
+ */
+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?: Alignment;
+ /**
+ * A pixel offset applied to the popup's location specfied as:
+ *
+ * - A single number in pixels in the float direction that the popup
+ * will be translated with respect to the current anchor point.
+ *
+ * - An object of number arrays specifing 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?: Alignment;
+}
+
+/**
+ * @class Popup
+ *
+ * @classdesc Popup instance for rendering custom HTML content
+ * on top of images. Popups are based on 2D basic image coordinates
+ * (see the {@link Viewer} class documentation for more information about coordinate
+ * systems) and a certain popup is therefore only relevant to a single image.
+ * Popups related to a certain image should be removed when moving
+ * to another image.
+ *
+ * A popup must have both its content and its point or rect set to be
+ * rendered. Popup options can not be updated after creation but the
+ * basic point or rect as well as its content can be changed by calling
+ * the appropriate methods.
+ *
+ * To create and add one `Popup` with default configuration
+ * (tooltip visuals and automatic float) and one with specific options
+ * use
+ *
+ * @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 {
+ protected _notifyChanged$: Subject<Popup>;
+ private _container;
+ private _content;
+ private _parentContainer;
+ private _options;
+ private _tip;
+ private _point;
+ private _rect;
+ private _dom;
+ private _viewportCoords;
+ constructor(options?: PopupOptions, viewportCoords?: ViewportCoords, dom?: DOM);
+ /**
+ * @description Internal observable used by the component to
+ * render the popup when its position or content has changed.
+ * @ignore
+ */
+ get changed$(): Observable<Popup>;
+ /**
+ * @description Internal method used by the component to
+ * remove all references to the popup.
+ * @ignore
+ */
+ remove(): void;
+ /**
+ * Sets a 2D basic image coordinates point to the popup's anchor, and
+ * moves the popup to it.
+ *
+ * @description Overwrites any previously set point or rect.
+ *
+ * @param {Array<number>} basicPoint - Point in 2D basic image coordinates.
+ *
+ * @example
+ * ```js
+ * var popup = new Popup();
+ * popup.setText('hello image');
+ * popup.setBasicPoint([0.3, 0.3]);
+ *
+ * popupComponent.add([popup]);
+ * ```
+ */
+ setBasicPoint(basicPoint: number[]): void;
+ /**
+ * Sets a 2D basic image coordinates rect to the popup's anchor, and
+ * moves the popup to it.
+ *
+ * @description Overwrites any previously set point or rect.
+ *
+ * @param {Array<number>} basicRect - Rect in 2D basic image
+ * coordinates ([topLeftX, topLeftY, bottomRightX, bottomRightY]) .
+ *
+ * @example
+ * ```js
+ * var popup = new Popup();
+ * popup.setText('hello image');
+ * popup.setBasicRect([0.3, 0.3, 0.5, 0.6]);
+ *
+ * popupComponent.add([popup]);
+ * ```
+ */
+ setBasicRect(basicRect: number[]): void;
+ /**
+ * Sets the popup's content to the element provided as a DOM node.
+ *
+ * @param {Node} htmlNode - A DOM node to be used as content for the popup.
+ *
+ * @example
+ * ```js
+ * var div = document.createElement('div');
+ * div.innerHTML = 'hello image';
+ *
+ * var popup = new Popup();
+ * popup.setDOMContent(div);
+ * popup.setBasicPoint([0.3, 0.3]);
+ *
+ * popupComponent.add([popup]);
+ * ```
+ */
+ setDOMContent(htmlNode: Node): void;
+ /**
+ * Sets the popup's content to the HTML provided as a string.
+ *
+ * @description This method does not perform HTML filtering or sanitization,
+ * and must be used only with trusted content. Consider
+ * {@link Popup.setText} if the
+ * content is an untrusted text string.
+ *
+ * @param {string} html - A string representing HTML content for the popup.
+ *
+ * @example
+ * ```js
+ * var popup = new Popup();
+ * popup.setHTML('<div>hello image</div>');
+ * popup.setBasicPoint([0.3, 0.3]);
+ *
+ * popupComponent.add([popup]);
+ * ```
+ */
+ setHTML(html: string): void;
+ /**
+ * Sets the popup's content to a string of text.
+ *
+ * @description This function creates a Text node in the DOM, so it cannot insert raw HTML.
+ * Use this method for security against XSS if the popup content is user-provided.
+ *
+ * @param {string} text - Textual content for the popup.
+ *
+ * @example
+ * ```js
+ * var popup = new Popup();
+ * popup.setText('hello image');
+ * popup.setBasicPoint([0.3, 0.3]);
+ *
+ * popupComponent.add([popup]);
+ * ```
+ */
+ setText(text: string): void;
+ /**
+ * @description Internal method for attaching the popup to
+ * its parent container so that it is rendered in the DOM tree.
+ * @ignore
+ */
+ setParentContainer(parentContainer: HTMLElement): void;
+ /**
+ * @description Internal method for updating the rendered
+ * position of the popup called by the popup component.
+ * @ignore
+ */
+ update(renderCamera: RenderCamera, size: ViewportSize, transform: Transform): void;
+ private _rectToPixel;
+ private _alignmentToPopupAligment;
+ private _normalizeOffset;
+ private _pixelToFloats;
+ private _pointFromRectPosition;
+}
+
+/**
+ * @class PopupComponent
+ *
+ * @classdesc Component for showing HTML popup objects.
+ *
+ * The `add` method is used for adding new popups. Popups are removed by reference.
+ *
+ * It is not possible to update popups in the set by updating any properties
+ * directly on the popup object. Popups need to be replaced by
+ * removing them and creating new ones with relevant changed properties and
+ * adding those instead.
+ *
+ * Popups are only relevant to a single image because they are based on
+ * 2D basic image coordinates. Popups related to a certain image should
+ * be removed when the viewer is moved to another image.
+ *
+ * To retrive and use the popup component
+ *
+ * @example
+ * ```js
+ * var viewer = new Viewer({ component: { popup: true }, ... });
+ *
+ * var popupComponent = viewer.getComponent("popup");
+ * ```
+ */
+declare class PopupComponent extends Component<ComponentConfiguration> {
+ static componentName: ComponentName;
+ private _dom;
+ private _popupContainer;
+ private _popups;
+ private _added$;
+ private _popups$;
+ /** @ignore */
+ constructor(name: string, container: Container, navigator: Navigator, dom?: DOM);
+ /**
+ * Add popups to the popups set.
+ *
+ * @description Adding a new popup never replaces an old one
+ * because they are stored by reference. Adding an already
+ * existing popup has no effect.
+ *
+ * @param {Array<Popup>} popups - Popups to add.
+ *
+ * @example
+ * ```js
+ * popupComponent.add([popup1, popup2]);
+ * ```
+ */
+ add(popups: Popup[]): void;
+ /**
+ * Returns an array of all popups.
+ *
+ * @example
+ * ```js
+ * var popups = popupComponent.getAll();
+ * ```
+ */
+ getAll(): Popup[];
+ /**
+ * Remove popups based on reference from the popup set.
+ *
+ * @param {Array<Popup>} popups - Popups to remove.
+ *
+ * @example
+ * ```js
+ * popupComponent.remove([popup1, popup2]);
+ * ```
+ */
+ remove(popups: Popup[]): void;
+ /**
+ * Remove all popups from the popup set.
+ *
+ * @example
+ * ```js
+ * popupComponent.removeAll();
+ * ```
+ */
+ removeAll(): void;
+ protected _activate(): void;
+ protected _deactivate(): void;
+ protected _getDefaultConfiguration(): ComponentConfiguration;
+ private _remove;
+}
+
+declare class SequenceDOMRenderer {
+ private _container;
+ private _minThresholdWidth;
+ private _maxThresholdWidth;
+ private _minThresholdHeight;
+ private _maxThresholdHeight;
+ private _stepperDefaultWidth;
+ private _controlsDefaultWidth;
+ private _defaultHeight;
+ private _expandControls;
+ private _mode;
+ private _speed;
+ private _changingSpeed;
+ private _index;
+ private _changingPosition;
+ private _mouseEnterDirection$;
+ private _mouseLeaveDirection$;
+ private _notifyChanged$;
+ private _notifyChangingPositionChanged$;
+ private _notifySpeedChanged$;
+ private _notifyIndexChanged$;
+ private _changingSubscription;
+ constructor(container: Container);
+ get changed$(): Observable<SequenceDOMRenderer>;
+ get changingPositionChanged$(): Observable<boolean>;
+ get speed$(): Observable<number>;
+ get index$(): Observable<number>;
+ get mouseEnterDirection$(): Observable<NavigationDirection>;
+ get mouseLeaveDirection$(): Observable<NavigationDirection>;
+ activate(): void;
+ deactivate(): void;
+ render(edgeStatus: NavigationEdgeStatus, configuration: SequenceConfiguration, containerWidth: number, speed: number, index: number, max: number, playEnabled: boolean, component: SequenceComponent, navigator: Navigator): VNode;
+ getContainerWidth(size: ViewportSize, configuration: SequenceConfiguration): number;
+ private _createPositionInput;
+ private _createSpeedInput;
+ private _createPlaybackControls;
+ private _createPlayingButton;
+ private _createSequenceControls;
+ private _createSequenceArrows;
+ private _createStepper;
+ private _createTimelineControls;
+ private _getStepClassName;
+ private _setChangingPosition;
+}
+
+/**
+ * @class SequenceComponent
+ * @classdesc Component showing navigation arrows for sequence directions
+ * as well as playing button. Exposes an API to start and stop play.
+ */
+declare class SequenceComponent extends Component<SequenceConfiguration> {
+ /** @inheritdoc */
+ static componentName: ComponentName;
+ private _sequenceDOMRenderer;
+ private _scheduler;
+ private _hoveredIdSubject$;
+ private _hoveredId$;
+ private _containerWidth$;
+ constructor(name: string, container: Container, navigator: Navigator, renderer?: SequenceDOMRenderer, scheduler?: Scheduler);
+ fire(type: "hover", event: ComponentHoverEvent): void;
+ fire(type: "playing", event: ComponentPlayEvent): void;
+ off(type: "hover", handler: (event: ComponentHoverEvent) => void): void;
+ off(type: "playing", handler: (event: ComponentPlayEvent) => void): void;
+ /**
+ * Fired when the hovered element of a component changes.
+ *
+ * @event hover
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * var component = viewer.getComponent('<component-name>');
+ * // Set an event listener
+ * component.on('hover', function() {
+ * console.log("A hover event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "hover", handler: (event: ComponentHoverEvent) => void): void;
+ /**
+ * Event fired when playing starts or stops.
+ *
+ * @event playing
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * var component = viewer.getComponent('<component-name>');
+ * // Set an event listener
+ * component.on('playing', function() {
+ * console.log("A playing event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "playing", handler: (event: ComponentPlayEvent) => void): void;
+ /**
+ * Start playing.
+ *
+ * @fires playing
+ */
+ play(): void;
+ /**
+ * Stop playing.
+ *
+ * @fires playing
+ */
+ stop(): void;
+ protected _activate(): void;
+ protected _deactivate(): void;
+ protected _getDefaultConfiguration(): SequenceConfiguration;
+}
+
+/**
+ * @class SliderComponent
+ *
+ * @classdesc Component for comparing pairs of images. Renders
+ * a slider for adjusting the curtain of the first image.
+ *
+ * Deactivate the sequence, direction and image plane
+ * components when activating the slider component to avoid
+ * interfering UI elements.
+ *
+ * To retrive and use the slider component
+ *
+ * @example
+ * ```js
+ * var viewer = new Viewer({ ... });
+ *
+ * viewer.deactivateComponent("image");
+ * viewer.deactivateComponent("direction");
+ * viewer.deactivateComponent("sequence");
+ *
+ * viewer.activateComponent("slider");
+ *
+ * var sliderComponent = viewer.getComponent("slider");
+ * ```
+ */
+declare class SliderComponent extends Component<SliderConfiguration> {
+ static componentName: ComponentName;
+ private _viewportCoords;
+ private _domRenderer;
+ private _imageTileLoader;
+ private _roiCalculator;
+ private _spatial;
+ private _glRendererOperation$;
+ private _glRenderer$;
+ private _glRendererCreator$;
+ private _glRendererDisposer$;
+ private _waitSubscription;
+ /** @ignore */
+ constructor(name: string, container: Container, navigator: Navigator, viewportCoords?: ViewportCoords);
+ protected _activate(): void;
+ protected _deactivate(): void;
+ protected _getDefaultConfiguration(): SliderConfiguration;
+ private _catchCacheImage$;
+ private _getBasicCorners;
+ private _clipBoundingBox;
+}
+
+declare class SpatialComponent extends Component<SpatialConfiguration> {
+ static componentName: ComponentName;
+ private _cache;
+ private _scene;
+ private _viewportCoords;
+ private _spatial;
+ /** @ignore */
+ constructor(name: string, container: Container, navigator: Navigator);
+ /**
+ * Returns the image id of the camera frame closest to the current
+ * render camera position at the specified point.
+ *
+ * @description Notice that the pixelPoint argument requires x, y
+ * coordinates from pixel space.
+ *
+ * With this function, you can use the coordinates provided by mouse
+ * events to get information out of the spatial component.
+ *
+ * If no camera frame exist at the pixel
+ * point, `null` will be returned.
+ *
+ * @param {Array<number>} pixelPoint - Pixel coordinates on
+ * the viewer element.
+ * @returns {string} Image id of the camera frame closest to
+ * the camera. If no camera frame is intersected at the
+ * pixel point, `null` will be returned.
+ *
+ * @example
+ * ```js
+ * spatialComponent.getFrameIdAt([100, 125])
+ * .then((imageId) => { console.log(imageId); });
+ * ```
+ */
+ getFrameIdAt(pixelPoint: number[]): Promise<string>;
+ protected _activate(): void;
+ protected _deactivate(): void;
+ protected _getDefaultConfiguration(): SpatialConfiguration;
+ private _addSceneImages;
+ private _cellsInFov;
+ private _computeOriginalPosition;
+ private _cellToTopocentric;
+ private _computeTranslation;
+ private _createTransform;
+}
+
+declare class GeometryTagError extends MapillaryError {
+ constructor(message?: string);
+}
+
+/**
+ * @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 {
+ private _point;
+ /**
+ * Create a point geometry.
+ *
+ * @constructor
+ * @param {Array<number>} point - An array representing the basic coordinates of
+ * the point.
+ *
+ * @throws {GeometryTagError} Point coordinates must be valid basic coordinates.
+ */
+ constructor(point: number[]);
+ /**
+ * Get point property.
+ * @returns {Array<number>} Array representing the basic coordinates of the point.
+ */
+ get point(): number[];
+ /**
+ * Get the 2D basic coordinates for the centroid of the point, i.e. the 2D
+ * basic coordinates of the point itself.
+ *
+ * @returns {Array<number>} 2D basic coordinates representing the centroid.
+ * @ignore
+ */
+ getCentroid2d(): number[];
+ /**
+ * Get the 3D world coordinates for the centroid of the point, i.e. the 3D
+ * world coordinates of the point itself.
+ *
+ * @param {Transform} transform - The transform of the image related to the point.
+ * @returns {Array<number>} 3D world coordinates representing the centroid.
+ * @ignore
+ */
+ getCentroid3d(transform: Transform): number[];
+ /**
+ * Set the centroid of the point, i.e. the point coordinates.
+ *
+ * @param {Array<number>} value - The new value of the centroid.
+ * @param {Transform} transform - The transform of the image related to the point.
+ * @ignore
+ */
+ setCentroid2d(value: number[], transform: Transform): void;
+}
+
+/**
+ * @class PointsGeometry
+ *
+ * @classdesc Represents a point set in the 2D basic image coordinate system.
+ *
+ * @example
+ * ```js
+ * var points = [[0.5, 0.3], [0.7, 0.3], [0.6, 0.5]];
+ * var pointsGeometry = new PointsGeometry(points);
+ * ```
+ */
+declare class PointsGeometry extends Geometry {
+ private _points;
+ /**
+ * Create a points geometry.
+ *
+ * @constructor
+ * @param {Array<Array<number>>} points - Array of 2D points on the basic coordinate
+ * system. The number of points must be greater than or equal to two.
+ *
+ * @throws {GeometryTagError} Point coordinates must be valid basic coordinates.
+ */
+ constructor(points: number[][]);
+ /**
+ * Get points property.
+ * @returns {Array<Array<number>>} Array of 2d points.
+ */
+ get points(): number[][];
+ /**
+ * Add a point to the point set.
+ *
+ * @param {Array<number>} point - Point to add.
+ * @ignore
+ */
+ addPoint2d(point: number[]): void;
+ /**
+ * Get the coordinates of a point from the point set representation of the geometry.
+ *
+ * @param {number} index - Point index.
+ * @returns {Array<number>} Array representing the 2D basic coordinates of the point.
+ * @ignore
+ */
+ getPoint2d(index: number): number[];
+ /**
+ * Remove a point from the point set.
+ *
+ * @param {number} index - The index of the point to remove.
+ * @ignore
+ */
+ removePoint2d(index: number): void;
+ /** @ignore */
+ setVertex2d(index: number, value: number[], transform: Transform): void;
+ /** @ignore */
+ setPoint2d(index: number, value: number[], transform: Transform): void;
+ /** @ignore */
+ getPoints3d(transform: Transform): number[][];
+ /** @ignore */
+ getPoint3d(index: number, transform: Transform): number[];
+ /** @ignore */
+ getPoints2d(): number[][];
+ /** @ignore */
+ getCentroid2d(transform?: Transform): number[];
+ /** @ignore */
+ getCentroid3d(transform: Transform): number[];
+ /** @ignore */
+ getRect2d(transform: Transform): number[];
+ /** @ignore */
+ setCentroid2d(value: number[], transform: Transform): void;
+ private _getPoints3d;
+}
+
+/**
+ * @class VertexGeometry
+ * @abstract
+ * @classdesc Represents a vertex geometry.
+ */
+declare abstract class VertexGeometry extends Geometry {
+ private _subsampleThreshold;
+ /**
+ * Create a vertex geometry.
+ *
+ * @constructor
+ * @ignore
+ */
+ constructor();
+ /**
+ * Get the 3D coordinates for the vertices of the geometry with possibly
+ * subsampled points along the lines.
+ *
+ * @param {Transform} transform - The transform of the image related to
+ * the geometry.
+ * @returns {Array<Array<number>>} Polygon array of 3D world coordinates
+ * representing the geometry.
+ * @ignore
+ */
+ abstract getPoints3d(transform: Transform): number[][];
+ /**
+ * Get the polygon pole of inaccessibility, the most
+ * distant internal point from the polygon outline.
+ *
+ * @returns {Array<number>} 2D basic coordinates for the pole of inaccessibility.
+ * @ignore
+ */
+ abstract getPoleOfInaccessibility2d(): number[];
+ /**
+ * Get the polygon pole of inaccessibility, the most
+ * distant internal point from the polygon outline.
+ *
+ * @param transform - The transform of the image related to
+ * the geometry.
+ * @returns {Array<number>} 3D world coordinates for the pole of inaccessibility.
+ * @ignore
+ */
+ abstract getPoleOfInaccessibility3d(transform: Transform): number[];
+ /**
+ * Get the coordinates of a vertex from the polygon representation of the geometry.
+ *
+ * @param {number} index - Vertex index.
+ * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
+ * @ignore
+ */
+ abstract getVertex2d(index: number): number[];
+ /**
+ * Get a vertex from the polygon representation of the 3D coordinates for the
+ * vertices of the geometry.
+ *
+ * @param {number} index - Vertex index.
+ * @param {Transform} transform - The transform of the image related to the geometry.
+ * @returns {Array<number>} Array representing the 3D world coordinates of the vertex.
+ * @ignore
+ */
+ abstract getVertex3d(index: number, transform: Transform): number[];
+ /**
+ * Get a polygon representation of the 2D basic coordinates for the vertices of the geometry.
+ *
+ * @returns {Array<Array<number>>} Polygon array of 2D basic coordinates representing
+ * the vertices of the geometry.
+ * @ignore
+ */
+ abstract getVertices2d(): number[][];
+ /**
+ * Get a polygon representation of the 3D world coordinates for the vertices of the geometry.
+ *
+ * @param {Transform} transform - The transform of the image related to the geometry.
+ * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
+ * the vertices of the geometry.
+ * @ignore
+ */
+ abstract getVertices3d(transform: Transform): number[][];
+ /**
+ * Get a flattend array of the 3D world coordinates for the
+ * triangles filling the geometry.
+ *
+ * @param {Transform} transform - The transform of the image related to the geometry.
+ * @returns {Array<number>} Flattened array of 3D world coordinates of the triangles.
+ * @ignore
+ */
+ abstract getTriangles3d(transform: Transform): number[];
+ /**
+ * Set the value of a vertex in the polygon representation of the geometry.
+ *
+ * @description The polygon is defined to have the first vertex at the
+ * bottom-left corner with the rest of the vertices following in clockwise order.
+ *
+ * @param {number} index - The index of the vertex to be set.
+ * @param {Array<number>} value - The new value of the vertex.
+ * @param {Transform} transform - The transform of the image related to the geometry.
+ * @ignore
+ */
+ abstract setVertex2d(index: number, value: number[], transform: Transform): void;
+ /**
+ * Finds the polygon pole of inaccessibility, the most distant internal
+ * point from the polygon outline.
+ *
+ * @param {Array<Array<number>>} points2d - 2d points of outline to triangulate.
+ * @returns {Array<number>} Point of inaccessibility.
+ * @ignore
+ */
+ protected _getPoleOfInaccessibility2d(points2d: number[][]): number[];
+ protected _project(points2d: number[][], transform: Transform): number[][];
+ protected _subsample(points2d: number[][], threshold?: number): number[][];
+ /**
+ * Triangulates a 2d polygon and returns the triangle
+ * representation as a flattened array of 3d points.
+ *
+ * @param {Array<Array<number>>} points2d - 2d points of outline to triangulate.
+ * @param {Array<Array<number>>} points3d - 3d points of outline corresponding to the 2d points.
+ * @param {Array<Array<Array<number>>>} [holes2d] - 2d points of holes to triangulate.
+ * @param {Array<Array<Array<number>>>} [holes3d] - 3d points of holes corresponding to the 2d points.
+ * @returns {Array<number>} Flattened array of 3d points ordered based on the triangles.
+ * @ignore
+ */
+ protected _triangulate(points2d: number[][], points3d: number[][], holes2d?: number[][][], holes3d?: number[][][]): number[];
+ protected _triangulateSpherical(points2d: number[][], holes2d: number[][][], transform: Transform): number[];
+ protected _unproject(points2d: number[][], transform: Transform, distance?: number): number[][];
+ private _createCamera;
+ private _deunproject;
+ private _triangulateSubarea;
+}
+
+/**
+ * @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 {
+ private _polygon;
+ private _holes;
+ /**
+ * Create a polygon geometry.
+ *
+ * @constructor
+ * @param {Array<Array<number>>} polygon - Array of polygon vertices. Must be closed.
+ * @param {Array<Array<Array<number>>>} [holes] - Array of arrays of hole vertices.
+ * Each array of holes vertices must be closed.
+ *
+ * @throws {GeometryTagError} Polygon coordinates must be valid basic coordinates.
+ */
+ constructor(polygon: number[][], holes?: number[][][]);
+ /**
+ * Get polygon property.
+ * @returns {Array<Array<number>>} Closed 2d polygon.
+ */
+ get polygon(): number[][];
+ /**
+ * Get holes property.
+ * @returns {Array<Array<Array<number>>>} Holes of 2d polygon.
+ */
+ get holes(): number[][][];
+ /**
+ * Add a vertex to the polygon by appending it after the last vertex.
+ *
+ * @param {Array<number>} vertex - Vertex to add.
+ * @ignore
+ */
+ addVertex2d(vertex: number[]): void;
+ /**
+ * Get the coordinates of a vertex from the polygon representation of the geometry.
+ *
+ * @param {number} index - Vertex index.
+ * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
+ * @ignore
+ */
+ getVertex2d(index: number): number[];
+ /**
+ * Remove a vertex from the polygon.
+ *
+ * @param {number} index - The index of the vertex to remove.
+ * @ignore
+ */
+ removeVertex2d(index: number): void;
+ /** @ignore */
+ setVertex2d(index: number, value: number[], transform: Transform): void;
+ /** @ignore */
+ setCentroid2d(value: number[], transform: Transform): void;
+ /** @ignore */
+ getPoints3d(transform: Transform): number[][];
+ /** @ignore */
+ getVertex3d(index: number, transform: Transform): number[];
+ /** @ignore */
+ getVertices2d(): number[][];
+ /** @ignore */
+ getVertices3d(transform: Transform): number[][];
+ /**
+ * Get a polygon representation of the 3D coordinates for the vertices of each hole
+ * of the geometry. Line segments between vertices will possibly be subsampled
+ * resulting in a larger number of points than the total number of vertices.
+ *
+ * @param {Transform} transform - The transform of the image related to the geometry.
+ * @returns {Array<Array<Array<number>>>} Array of hole polygons in 3D world coordinates
+ * representing the vertices of each hole of the geometry.
+ * @ignore
+ */
+ getHolePoints3d(transform: Transform): number[][][];
+ /**
+ * Get a polygon representation of the 3D coordinates for the vertices of each hole
+ * of the geometry.
+ *
+ * @param {Transform} transform - The transform of the image related to the geometry.
+ * @returns {Array<Array<Array<number>>>} Array of hole polygons in 3D world coordinates
+ * representing the vertices of each hole of the geometry.
+ * @ignore
+ */
+ getHoleVertices3d(transform: Transform): number[][][];
+ /** @ignore */
+ getCentroid2d(): number[];
+ /** @ignore */
+ getCentroid3d(transform: Transform): number[];
+ /** @ignore */
+ get3dDomainTriangles3d(transform: Transform): number[];
+ /** @ignore */
+ getTriangles3d(transform: Transform): number[];
+ /** @ignore */
+ getPoleOfInaccessibility2d(): number[];
+ /** @ignore */
+ getPoleOfInaccessibility3d(transform: Transform): number[];
+ private _getPoints3d;
+}
+
+/**
+ * @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 {
+ private _anchorIndex;
+ private _inverted;
+ private _rect;
+ /**
+ * Create a rectangle geometry.
+ *
+ * @constructor
+ * @param {Array<number>} rect - An array representing the top-left and bottom-right
+ * corners of the rectangle in basic coordinates. Ordered according to [x0, y0, x1, y1].
+ *
+ * @throws {GeometryTagError} Rectangle coordinates must be valid basic coordinates.
+ */
+ constructor(rect: number[]);
+ /**
+ * 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
+ */
+ get anchorIndex(): number;
+ /**
+ * Get inverted property.
+ *
+ * @returns {boolean} Boolean determining whether the rect geometry is
+ * inverted. For spherical the rect geometrye may be inverted.
+ * @ignore
+ */
+ get inverted(): boolean;
+ /**
+ * Get rect property.
+ *
+ * @returns {Array<number>} Array representing the top-left and bottom-right
+ * corners of the rectangle in basic coordinates.
+ */
+ get rect(): number[];
+ /**
+ * Initialize anchor indexing to enable setting opposite vertex.
+ *
+ * @param {number} [index] - The index of the vertex to use as anchor.
+ *
+ * @throws {GeometryTagError} If anchor indexing has already been initialized.
+ * @throws {GeometryTagError} If index is not valid (0 to 3).
+ * @ignore
+ */
+ initializeAnchorIndexing(index?: number): void;
+ /**
+ * Terminate anchor indexing to disable setting pposite vertex.
+ * @ignore
+ */
+ terminateAnchorIndexing(): void;
+ /**
+ * Set the value of the vertex opposite to the anchor in the polygon
+ * representation of the rectangle.
+ *
+ * @description Setting the opposite vertex may change the anchor index.
+ *
+ * @param {Array<number>} opposite - The new value of the vertex opposite to the anchor.
+ * @param {Transform} transform - The transform of the image related to the rectangle.
+ *
+ * @throws {GeometryTagError} When anchor indexing has not been initialized.
+ * @ignore
+ */
+ setOppositeVertex2d(opposite: number[], transform: Transform): void;
+ /**
+ * Set the value of a vertex in the polygon representation of the rectangle.
+ *
+ * @description The polygon is defined to have the first vertex at the
+ * bottom-left corner with the rest of the vertices following in clockwise order.
+ *
+ * @param {number} index - The index of the vertex to be set.
+ * @param {Array<number>} value - The new value of the vertex.
+ * @param {Transform} transform - The transform of the image related to the rectangle.
+ * @ignore
+ */
+ setVertex2d(index: number, value: number[], transform: Transform): void;
+ /** @ignore */
+ setCentroid2d(value: number[], transform: Transform): void;
+ /**
+ * Get the 3D coordinates for the vertices of the rectangle with
+ * interpolated points along the lines.
+ *
+ * @param {Transform} transform - The transform of the image related to
+ * the rectangle.
+ * @returns {Array<Array<number>>} Polygon array of 3D world coordinates
+ * representing the rectangle.
+ * @ignore
+ */
+ getPoints3d(transform: Transform): number[][];
+ /**
+ * Get the coordinates of a vertex from the polygon representation of the geometry.
+ *
+ * @description The first vertex represents the bottom-left corner with the rest of
+ * the vertices following in clockwise order. The method shifts the right side
+ * coordinates of the rectangle by one unit to ensure that the vertices are ordered
+ * clockwise.
+ *
+ * @param {number} index - Vertex index.
+ * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
+ * @ignore
+ */
+ getVertex2d(index: number): number[];
+ /**
+ * Get the coordinates of a vertex from the polygon representation of the geometry.
+ *
+ * @description The first vertex represents the bottom-left corner with the rest of
+ * the vertices following in clockwise order. The coordinates will not be shifted
+ * so they may not appear in clockwise order when layed out on the plane.
+ *
+ * @param {number} index - Vertex index.
+ * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
+ * @ignore
+ */
+ getNonAdjustedVertex2d(index: number): number[];
+ /**
+ * Get a vertex from the polygon representation of the 3D coordinates for the
+ * vertices of the geometry.
+ *
+ * @description The first vertex represents the bottom-left corner with the rest of
+ * the vertices following in clockwise order.
+ *
+ * @param {number} index - Vertex index.
+ * @param {Transform} transform - The transform of the image related to the geometry.
+ * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
+ * the vertices of the geometry.
+ * @ignore
+ */
+ getVertex3d(index: number, transform: Transform): number[];
+ /**
+ * Get a polygon representation of the 2D basic coordinates for the vertices of the rectangle.
+ *
+ * @description The first vertex represents the bottom-left corner with the rest of
+ * the vertices following in clockwise order.
+ *
+ * @returns {Array<Array<number>>} Polygon array of 2D basic coordinates representing
+ * the rectangle vertices.
+ * @ignore
+ */
+ getVertices2d(): number[][];
+ /**
+ * Get a polygon representation of the 3D coordinates for the vertices of the rectangle.
+ *
+ * @description The first vertex represents the bottom-left corner with the rest of
+ * the vertices following in clockwise order.
+ *
+ * @param {Transform} transform - The transform of the image related to the rectangle.
+ * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
+ * the rectangle vertices.
+ * @ignore
+ */
+ getVertices3d(transform: Transform): number[][];
+ /** @ignore */
+ getCentroid2d(): number[];
+ /** @ignore */
+ getCentroid3d(transform: Transform): number[];
+ /**
+ * @ignore
+ */
+ getPoleOfInaccessibility2d(): number[];
+ /** @ignore */
+ getPoleOfInaccessibility3d(transform: Transform): number[];
+ /** @ignore */
+ getTriangles3d(transform: Transform): number[];
+ /**
+ * Check if a particular bottom-right value is valid according to the current
+ * rectangle coordinates.
+ *
+ * @param {Array<number>} bottomRight - The bottom-right coordinates to validate
+ * @returns {boolean} Value indicating whether the provided bottom-right coordinates
+ * are valid.
+ * @ignore
+ */
+ validate(bottomRight: number[]): boolean;
+ /**
+ * Get the 2D coordinates for the vertices of the rectangle with
+ * interpolated points along the lines.
+ *
+ * @returns {Array<Array<number>>} Polygon array of 2D basic coordinates
+ * representing the rectangle.
+ */
+ private _getPoints2d;
+ /**
+ * Convert the top-left, bottom-right representation of a rectangle to a polygon
+ * representation of the vertices starting at the bottom-left corner going
+ * clockwise.
+ *
+ * @description The method shifts the right side coordinates of the rectangle
+ * by one unit to ensure that the vertices are ordered clockwise.
+ *
+ * @param {Array<number>} rect - Top-left, bottom-right representation of a
+ * rectangle.
+ * @returns {Array<Array<number>>} Polygon representation of the vertices of the
+ * rectangle.
+ */
+ private _rectToVertices2d;
+ /**
+ * Convert the top-left, bottom-right representation of a rectangle to a polygon
+ * representation of the vertices starting at the bottom-left corner going
+ * clockwise.
+ *
+ * @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
+ * to ensure that the vertices are ordered clockwise when layed out on the plane.
+ *
+ * @param {Array<number>} rect - Top-left, bottom-right representation of a
+ * rectangle.
+ * @returns {Array<Array<number>>} Polygon representation of the vertices of the
+ * rectangle.
+ */
+ private _rectToNonAdjustedVertices2d;
+}
+
+/**
+ * @event
+ */
+declare 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.");
+ * });
+ * ```
+ */
+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 abstract class Tag extends EventEmitter {
+ protected _id: string;
+ protected _geometry: Geometry;
+ protected _notifyChanged$: Subject<Tag>;
+ /**
+ * Create a tag.
+ *
+ * @constructor
+ * @param {string} id
+ * @param {Geometry} geometry
+ */
+ constructor(id: string, geometry: Geometry);
+ /**
+ * Get id property.
+ * @returns {string}
+ */
+ get id(): string;
+ /**
+ * Get geometry property.
+ * @returns {Geometry} The geometry of the tag.
+ */
+ get geometry(): Geometry;
+ /**
+ * Get changed observable.
+ * @returns {Observable<Tag>}
+ * @ignore
+ */
+ get changed$(): Observable<Tag>;
+ /**
+ * Get geometry changed observable.
+ * @returns {Observable<Tag>}
+ * @ignore
+ */
+ get geometryChanged$(): Observable<Tag>;
+ fire(type: "tag" | "geometry", event: TagStateEvent): void;
+ /** @ignore */
+ fire(type: TagEventType, event: TagStateEvent): void;
+ off(type: "tag" | "geometry", handler: (event: TagStateEvent) => void): void;
+ /** @ignore */
+ off(type: TagEventType, handler: (event: TagStateEvent) => void): void;
+ /**
+ * Event fired when the geometry of the tag has changed.
+ *
+ * @event geometry
+ * @example
+ * ```js
+ * var tag = new OutlineTag({ // tag options });
+ * // Set an event listener
+ * tag.on('geometry', function() {
+ * console.log("A geometry event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "geometry", handler: (event: TagStateEvent) => void): void;
+ /**
+ * Event fired when a tag has been updated.
+ *
+ * @event tag
+ * @example
+ * ```js
+ * var tag = new OutlineTag({ // tag options });
+ * // Set an event listener
+ * tag.on('tag', function() {
+ * console.log("A tag event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "tag", handler: (event: TagStateEvent) => void): void;
+ /** @ignore */
+ on(type: TagEventType, handler: (event: TagStateEvent) => void): void;
+}
+
+/**
+ * Interface for the options that define the behavior and
+ * appearance of the outline tag.
+ *
+ * @interface
+ */
+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 {
+ protected _geometry: PointsGeometry;
+ private _editable;
+ private _indicateVertices;
+ private _lineColor;
+ private _lineOpacity;
+ private _lineWidth;
+ private _fillColor;
+ private _fillOpacity;
+ /**
+ * 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);
+ /**
+ * Get editable property.
+ * @returns {boolean} Value indicating if tag is editable.
+ */
+ get editable(): boolean;
+ /**
+ * Set editable property.
+ * @param {boolean}
+ *
+ * @fires changed
+ */
+ set editable(value: boolean);
+ /**
+ * Get fill color property.
+ * @returns {number}
+ */
+ get fillColor(): number;
+ /**
+ * Set fill color property.
+ * @param {number}
+ *
+ * @fires changed
+ */
+ set fillColor(value: number);
+ /**
+ * Get fill opacity property.
+ * @returns {number}
+ */
+ get fillOpacity(): number;
+ /**
+ * Set fill opacity property.
+ * @param {number}
+ *
+ * @fires changed
+ */
+ set fillOpacity(value: number);
+ /** @inheritdoc */
+ get geometry(): PointsGeometry;
+ /**
+ * Get indicate vertices property.
+ * @returns {boolean} Value indicating if vertices should be indicated
+ * when tag is editable.
+ */
+ get indicateVertices(): boolean;
+ /**
+ * Set indicate vertices property.
+ * @param {boolean}
+ *
+ * @fires changed
+ */
+ set indicateVertices(value: boolean);
+ /**
+ * Get line color property.
+ * @returns {number}
+ */
+ get lineColor(): number;
+ /**
+ * Set line color property.
+ * @param {number}
+ *
+ * @fires changed
+ */
+ set lineColor(value: number);
+ /**
+ * Get line opacity property.
+ * @returns {number}
+ */
+ get lineOpacity(): number;
+ /**
+ * Set line opacity property.
+ * @param {number}
+ *
+ * @fires changed
+ */
+ set lineOpacity(value: number);
+ /**
+ * Get line width property.
+ * @returns {number}
+ */
+ get lineWidth(): number;
+ /**
+ * Set line width property.
+ * @param {number}
+ *
+ * @fires changed
+ */
+ set lineWidth(value: 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 enum TagDomain {
+ /**
+ * Treats lines between two vertices as straight in the
+ * distorted 2D projection, i.e. on the image. If the image
+ * is distorted this will result in bended lines when rendered
+ * in the undistorted 3D space.
+ */
+ TwoDimensional = 0,
+ /**
+ * Treats lines as straight in the undistorted 3D space. If the
+ * image is distorted this will result in bended lines when rendered
+ * on the distorted 2D projection of the image.
+ */
+ ThreeDimensional = 1
+}
+
+/**
+ * Interface for the options that define the behavior and
+ * appearance of the outline tag.
+ *
+ * @interface
+ */
+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?: TagDomain;
+ /**
+ * Indicate whether the tag geometry should be editable.
+ *
+ * @description Polygon tags with two dimensional domain
+ * are never editable.
+ *
+ * @default false
+ */
+ editable?: boolean;
+ /**
+ * Color for the interior fill as a hexadecimal number.
+ * @default 0xFFFFFF
+ */
+ fillColor?: number;
+ /**
+ * Opacity of the interior fill between 0 and 1.
+ * @default 0.3
+ */
+ fillOpacity?: number;
+ /**
+ * A string referencing the sprite data property to pull from.
+ *
+ * @description Icon is not shown for tags with polygon
+ * geometries in spherical.
+ */
+ icon?: string;
+ /**
+ * Value determining how the icon will float with respect to its anchor
+ * position when rendering.
+ *
+ * @default {Alignment.Center}
+ */
+ iconFloat?: Alignment;
+ /**
+ * Number representing the index for where to show the icon or
+ * text for a rectangle geometry.
+ *
+ * @description The default index corresponds to the bottom right corner.
+ *
+ * @default 3
+ */
+ iconIndex?: number;
+ /**
+ * Determines whether vertices should be indicated by points
+ * when tag is editable.
+ *
+ * @default true
+ */
+ indicateVertices?: boolean;
+ /**
+ * Color for the edge lines as a hexadecimal number.
+ * @default 0xFFFFFF
+ */
+ lineColor?: number;
+ /**
+ * Opacity of the edge lines on [0, 1].
+ * @default 1
+ */
+ lineOpacity?: number;
+ /**
+ * Line width in pixels.
+ * @default 1
+ */
+ lineWidth?: number;
+ /**
+ * Text shown as label if no icon is provided.
+ *
+ * @description Text is not shown for tags with
+ * polygon geometries in spherical.
+ */
+ text?: string;
+ /**
+ * Text color as hexadecimal number.
+ * @default 0xFFFFFF
+ */
+ textColor?: number;
+}
+
+/**
+ * Interface for the options that define the behavior and
+ * appearance of the spot tag.
+ *
+ * @interface
+ */
+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 {
+ protected _geometry: VertexGeometry;
+ private _domain;
+ private _editable;
+ private _icon;
+ private _iconFloat;
+ private _iconIndex;
+ private _indicateVertices;
+ private _lineColor;
+ private _lineOpacity;
+ private _lineWidth;
+ private _fillColor;
+ private _fillOpacity;
+ private _text;
+ private _textColor;
+ private _click$;
+ /**
+ * 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);
+ /**
+ * Click observable.
+ *
+ * @description An observable emitting the tag when the icon of the
+ * tag has been clicked.
+ *
+ * @returns {Observable<Tag>}
+ */
+ get click$(): Subject<OutlineTag>;
+ /**
+ * Get domain property.
+ *
+ * @description Readonly property that can only be set in constructor.
+ *
+ * @returns Value indicating the domain of the tag.
+ */
+ get domain(): TagDomain;
+ /**
+ * Get editable property.
+ * @returns {boolean} Value indicating if tag is editable.
+ */
+ get editable(): boolean;
+ /**
+ * Set editable property.
+ * @param {boolean}
+ *
+ * @fires changed
+ */
+ set editable(value: boolean);
+ /**
+ * Get fill color property.
+ * @returns {number}
+ */
+ get fillColor(): number;
+ /**
+ * Set fill color property.
+ * @param {number}
+ *
+ * @fires changed
+ */
+ set fillColor(value: number);
+ /**
+ * Get fill opacity property.
+ * @returns {number}
+ */
+ get fillOpacity(): number;
+ /**
+ * Set fill opacity property.
+ * @param {number}
+ *
+ * @fires changed
+ */
+ set fillOpacity(value: number);
+ /** @inheritdoc */
+ get geometry(): VertexGeometry;
+ /**
+ * Get icon property.
+ * @returns {string}
+ */
+ get icon(): string;
+ /**
+ * Set icon property.
+ * @param {string}
+ *
+ * @fires changed
+ */
+ set icon(value: string);
+ /**
+ * Get icon float property.
+ * @returns {Alignment}
+ */
+ get iconFloat(): Alignment;
+ /**
+ * Set icon float property.
+ * @param {Alignment}
+ *
+ * @fires changed
+ */
+ set iconFloat(value: Alignment);
+ /**
+ * Get icon index property.
+ * @returns {number}
+ */
+ get iconIndex(): number;
+ /**
+ * Set icon index property.
+ * @param {number}
+ *
+ * @fires changed
+ */
+ set iconIndex(value: number);
+ /**
+ * Get indicate vertices property.
+ * @returns {boolean} Value indicating if vertices should be indicated
+ * when tag is editable.
+ */
+ get indicateVertices(): boolean;
+ /**
+ * Set indicate vertices property.
+ * @param {boolean}
+ *
+ * @fires changed
+ */
+ set indicateVertices(value: boolean);
+ /**
+ * Get line color property.
+ * @returns {number}
+ */
+ get lineColor(): number;
+ /**
+ * Set line color property.
+ * @param {number}
+ *
+ * @fires changed
+ */
+ set lineColor(value: number);
+ /**
+ * Get line opacity property.
+ * @returns {number}
+ */
+ get lineOpacity(): number;
+ /**
+ * Set line opacity property.
+ * @param {number}
+ *
+ * @fires changed
+ */
+ set lineOpacity(value: number);
+ /**
+ * Get line width property.
+ * @returns {number}
+ */
+ get lineWidth(): number;
+ /**
+ * Set line width property.
+ * @param {number}
+ *
+ * @fires changed
+ */
+ set lineWidth(value: number);
+ /**
+ * Get text property.
+ * @returns {string}
+ */
+ get text(): string;
+ /**
+ * Set text property.
+ * @param {string}
+ *
+ * @fires changed
+ */
+ set text(value: string);
+ /**
+ * Get text color property.
+ * @returns {number}
+ */
+ get textColor(): number;
+ /**
+ * Set text color property.
+ * @param {number}
+ *
+ * @fires changed
+ */
+ set textColor(value: number);
+ fire(type: TagStateEvent["type"], event: TagStateEvent): void;
+ /** @ignore */
+ fire(type: TagEventType, event: TagStateEvent): void;
+ off(type: TagStateEvent["type"], handler: (event: TagStateEvent) => void): void;
+ /** @ignore */
+ off(type: TagEventType, handler: (event: TagStateEvent) => void): void;
+ /**
+ * Event fired when the icon of the outline tag is clicked.
+ *
+ * @event click
+ * @example
+ * ```js
+ * var tag = new OutlineTag({ // tag options });
+ * // Set an event listener
+ * tag.on('click', function() {
+ * console.log("A click event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "click", handler: (event: TagStateEvent) => void): void;
+ /**
+ * Event fired when the geometry of the tag has changed.
+ *
+ * @event geometry
+ * @example
+ * ```js
+ * var tag = new OutlineTag({ // tag options });
+ * // Set an event listener
+ * tag.on('geometry', function() {
+ * console.log("A geometry event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "geometry", handler: (event: TagStateEvent) => void): void;
+ /**
+ * Event fired when a tag has been updated.
+ *
+ * @event tag
+ * @example
+ * ```js
+ * var tag = new OutlineTag({ // tag options });
+ * // Set an event listener
+ * tag.on('tag', function() {
+ * console.log("A tag event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "tag", handler: (event: TagStateEvent) => void): void;
+ /**
+ * 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;
+ private _twoDimensionalPolygon;
+}
+
+/**
+ * @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 {
+ protected _geometry: Geometry;
+ private _color;
+ private _editable;
+ private _icon;
+ private _text;
+ private _textColor;
+ /**
+ * 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);
+ /**
+ * Get color property.
+ * @returns {number} The color of the spot as a hexagonal number;
+ */
+ get color(): number;
+ /**
+ * Set color property.
+ * @param {number}
+ *
+ * @fires changed
+ */
+ set color(value: number);
+ /**
+ * Get editable property.
+ * @returns {boolean} Value indicating if tag is editable.
+ */
+ get editable(): boolean;
+ /**
+ * Set editable property.
+ * @param {boolean}
+ *
+ * @fires changed
+ */
+ set editable(value: boolean);
+ /**
+ * Get icon property.
+ * @returns {string}
+ */
+ get icon(): string;
+ /**
+ * Set icon property.
+ * @param {string}
+ *
+ * @fires changed
+ */
+ set icon(value: string);
+ /**
+ * Get text property.
+ * @returns {string}
+ */
+ get text(): string;
+ /**
+ * Set text property.
+ * @param {string}
+ *
+ * @fires changed
+ */
+ set text(value: string);
+ /**
+ * Get text color property.
+ * @returns {number}
+ */
+ get textColor(): number;
+ /**
+ * Set text color property.
+ * @param {number}
+ *
+ * @fires changed
+ */
+ set textColor(value: 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 Component for showing and editing tags with different
+ * geometries composed from 2D basic image coordinates (see the
+ * {@link Viewer} class documentation for more information about coordinate
+ * systems).
+ *
+ * The `add` method is used for adding new tags or replacing
+ * tags already in the set. Tags are removed by id.
+ *
+ * If a tag already in the set has the same
+ * id as one of the tags added, the old tag will be removed and
+ * the added tag will take its place.
+ *
+ * The tag component mode can be set to either be non interactive or
+ * to be in creating mode of a certain geometry type.
+ *
+ * The tag properties can be updated at any time and the change will
+ * be visibile immediately.
+ *
+ * Tags are only relevant to a single image because they are based on
+ * 2D basic image coordinates. Tags related to a certain image should
+ * be removed when the viewer is moved to another image.
+ *
+ * To retrive and use the tag component
+ *
+ * @example
+ * ```js
+ * var viewer = new Viewer({ component: { tag: true } }, ...);
+ *
+ * var tagComponent = viewer.getComponent("tag");
+ * ```
+ */
+declare class TagComponent extends Component<TagConfiguration> {
+ /** @inheritdoc */
+ static componentName: ComponentName;
+ private _tagDomRenderer;
+ private _tagScene;
+ private _tagSet;
+ private _tagCreator;
+ private _viewportCoords;
+ private _renderTags$;
+ private _tagChanged$;
+ private _renderTagGLChanged$;
+ private _createGeometryChanged$;
+ private _createGLObjectsChanged$;
+ private _creatingConfiguration$;
+ private _createHandlers;
+ private _editVertexHandler;
+ /** @ignore */
+ constructor(name: string, container: Container, navigator: Navigator);
+ /**
+ * Add tags to the tag set or replace tags in the tag set.
+ *
+ * @description If a tag already in the set has the same
+ * id as one of the tags added, the old tag will be removed
+ * the added tag will take its place.
+ *
+ * @param {Array<Tag>} tags - Tags to add.
+ *
+ * @example
+ * ```js
+ * tagComponent.add([tag1, tag2]);
+ * ```
+ */
+ add(tags: Tag[]): void;
+ /**
+ * Calculate the smallest rectangle containing all the points
+ * in the points geometry.
+ *
+ * @description The result may be different depending on if the
+ * current image is an spherical or not. If the
+ * current image is an spherical the rectangle may
+ * wrap the horizontal border of the image.
+ *
+ * @returns {Promise<Array<number>>} Promise to the rectangle
+ * on the format specified for the {@link RectGeometry} in basic
+ * coordinates.
+ */
+ calculateRect(geometry: PointsGeometry): Promise<number[]>;
+ /**
+ * Force the creation of a geometry programatically using its
+ * current vertices.
+ *
+ * @description The method only has an effect when the tag
+ * mode is either of the following modes:
+ *
+ * {@link TagMode.CreatePoints}
+ * {@link TagMode.CreatePolygon}
+ * {@link TagMode.CreateRect}
+ * {@link TagMode.CreateRectDrag}
+ *
+ * In the case of points or polygon creation, only the created
+ * vertices are used, i.e. the mouse position is disregarded.
+ *
+ * In the case of rectangle creation the position of the mouse
+ * at the time of the method call is used as one of the vertices
+ * defining the rectangle.
+ *
+ * @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 {TagMode} mode - New tag mode.
+ *
+ * @fires tagmode
+ *
+ * @example
+ * ```js
+ * tagComponent.changeMode(TagMode.CreateRect);
+ * ```
+ */
+ changeMode(mode: TagMode): void;
+ fire(type: "geometrycreate", event: ComponentGeometryEvent): void;
+ fire(type: "tagmode", event: ComponentTagModeEvent): void;
+ /** @ignore */
+ fire(type: "tagcreateend" | "tagcreatestart" | "tags", event: ComponentStateEvent): void;
+ /**
+ * Returns the tag in the tag set with the specified id, or
+ * undefined if the id matches no tag.
+ *
+ * @param {string} tagId - Id of the tag.
+ *
+ * @example
+ * ```js
+ * var tag = tagComponent.get("tagId");
+ * ```
+ */
+ get(tagId: string): Tag;
+ /**
+ * Returns an array of all tags.
+ *
+ * @example
+ * ```js
+ * var tags = tagComponent.getAll();
+ * ```
+ */
+ getAll(): Tag[];
+ /**
+ * Returns an array of tag ids for tags that contain the specified point.
+ *
+ * @description The pixel point must lie inside the polygon or rectangle
+ * of an added tag for the tag id to be returned. Tag ids for
+ * tags that do not have a fill will also be returned if the point is inside
+ * the geometry of the tag. Tags with point geometries can not be retrieved.
+ *
+ * No tag ids will be returned for polygons rendered in cropped spherical or
+ * rectangles rendered in spherical.
+ *
+ * Notice that the pixelPoint argument requires x, y coordinates from pixel space.
+ *
+ * With this function, you can use the coordinates provided by mouse
+ * events to get information out of the tag component.
+ *
+ * If no tag at exist the pixel point, an empty array will be returned.
+ *
+ * @param {Array<number>} pixelPoint - Pixel coordinates on the viewer element.
+ * @returns {Promise<Array<string>>} Promise to the ids of the tags that
+ * contain the specified pixel point.
+ *
+ * @example
+ * ```js
+ * tagComponent.getTagIdsAt([100, 100])
+ * .then((tagIds) => { console.log(tagIds); });
+ * ```
+ */
+ getTagIdsAt(pixelPoint: number[]): Promise<string[]>;
+ /**
+ * Check if a tag exist in the tag set.
+ *
+ * @param {string} tagId - Id of the tag.
+ *
+ * @example
+ * ```js
+ * var tagExists = tagComponent.has("tagId");
+ * ```
+ */
+ has(tagId: string): boolean;
+ off(type: "geometrycreate", handler: (event: ComponentGeometryEvent) => void): void;
+ off(type: "tagmode", handler: (event: ComponentTagModeEvent) => void): void;
+ off(type: "tagcreateend" | "tagcreatestart" | "tags", handler: (event: ComponentStateEvent) => void): void;
+ /**
+ * Event fired when a geometry has been created.
+ *
+ * @event geometrycreated
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * var component = viewer.getComponent('<component-name>');
+ * // Set an event listener
+ * component.on('geometrycreated', function() {
+ * console.log("A geometrycreated event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "geometrycreate", handler: (event: ComponentGeometryEvent) => void): void;
+ /**
+ * Event fired when an interaction to create a geometry ends.
+ *
+ * @description A create interaction can by a geometry being created
+ * or by the creation being aborted.
+ *
+ * @event tagcreateend
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * var component = viewer.getComponent('<component-name>');
+ * // Set an event listener
+ * component.on('tagcreateend', function() {
+ * console.log("A tagcreateend event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "tagcreateend", handler: (event: ComponentStateEvent) => void): void;
+ /**
+ * Event fired when an interaction to create a geometry starts.
+ *
+ * @description A create interaction starts when the first vertex
+ * is created in the geometry.
+ *
+ * @event tagcreatestart
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * var component = viewer.getComponent('<component-name>');
+ * // Set an event listener
+ * component.on('tagcreatestart', function() {
+ * console.log("A tagcreatestart event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "tagcreatestart", handler: (event: ComponentStateEvent) => void): void;
+ /**
+ * Event fired when the create mode is changed.
+ *
+ * @event tagmode
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * var component = viewer.getComponent('<component-name>');
+ * // Set an event listener
+ * component.on('tagmode', function() {
+ * console.log("A tagmode event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "tagmode", handler: (event: ComponentTagModeEvent) => void): void;
+ /**
+ * Event fired when the tags collection has changed.
+ *
+ * @event tags
+ * @example
+ * ```js
+ * // Initialize the viewer
+ * var viewer = new Viewer({ // viewer options });
+ * var component = viewer.getComponent('<component-name>');
+ * // Set an event listener
+ * component.on('tags', function() {
+ * console.log("A tags event has occurred.");
+ * });
+ * ```
+ */
+ on(type: "tags", handler: (event: ComponentStateEvent) => void): void;
+ /**
+ * Remove tags with the specified ids from the tag set.
+ *
+ * @param {Array<string>} tagIds - Ids for tags to remove.
+ *
+ * @example
+ * ```js
+ * tagComponent.remove(["id-1", "id-2"]);
+ * ```
+ */
+ remove(tagIds: string[]): void;
+ /**
+ * Remove all tags from the tag set.
+ *
+ * @example
+ * ```js
+ * tagComponent.removeAll();
+ * ```
+ */
+ removeAll(): void;
+ protected _activate(): void;
+ protected _deactivate(): void;
+ protected _getDefaultConfiguration(): TagConfiguration;
+ private _disableCreateHandlers;
+}
+
+/**
+ * @class ZoomComponent
+ *
+ * @classdesc Component rendering UI elements used for zooming.
+ *
+ * @example
+ * ```js
+ * var viewer = new Viewer({ ... });
+ *
+ * var zoomComponent = viewer.getComponent("zoom");
+ * zoomComponent.configure({ size: ComponentSize.Small });
+ * ```
+ */
+declare class ZoomComponent extends Component<ZoomConfiguration> {
+ static componentName: ComponentName;
+ private _viewportCoords;
+ private _zoomDelta$;
+ constructor(name: string, container: Container, navigator: Navigator);
+ protected _activate(): void;
+ protected _deactivate(): void;
+ protected _getDefaultConfiguration(): ZoomConfiguration;
+}
+
+export { Alignment, ArgumentMapillaryError, BearingComponent, BearingConfiguration, CacheComponent, CacheConfiguration, CacheDepthConfiguration, CameraControls, CameraEnt, CameraVisualizationMode, CancelMapillaryError, CircleMarker, CircleMarkerOptions, ClusterContract, CombiningFilterExpression, CombiningFilterOperator, ComparisonFilterExpression, ComparisonFilterOperator, Component, ComponentEvent, ComponentEventType, ComponentGeometryEvent, ComponentHoverEvent, ComponentMarkerEvent, ComponentName, ComponentOptions, ComponentPlayEvent, ComponentSize, ComponentStateEvent, ComponentTagModeEvent, CoreImageEnt, CoreImagesContract, CreatorEnt, DataProviderBase, DirectionComponent, DirectionConfiguration, DragPanHandler, EntContract, ExtremePointTag, ExtremePointTagOptions, FallbackComponentName, FallbackOptions, FilterExpression, FilterKey, FilterOperator, FilterValue, Geometry, GeometryProviderBase, GeometryTagError, GraphDataProvider, GraphDataProviderOptions, GraphMapillaryError, IComponent, ICustomCameraControls, ICustomRenderer, IDEnt, IViewer, Image, ImageEnt, ImageTileEnt, ImageTilesContract, ImageTilesRequestContract, ImagesContract, KeyPlayHandler, KeySequenceNavigationHandler, KeySpatialNavigationHandler, KeyZoomHandler, KeyboardComponent, KeyboardConfiguration, LngLat, LngLatAlt, MapillaryError, Marker, MarkerComponent, MarkerConfiguration, MeshContract, NavigationDirection, NavigationEdge, NavigationEdgeData, NavigationEdgeStatus, OriginalPositionMode, OutlineTag, OutlineTagOptions, PointContract, PointGeometry, PointOfView, PointerComponent, PointerConfiguration, PointsGeometry, PolygonGeometry, Popup, PopupComponent, PopupOffset, PopupOptions, ProviderCellEvent, ProviderEvent, ProviderEventType, RectGeometry, RenderMode, RenderPass, S2GeometryProvider, ScrollZoomHandler, SequenceComponent, SequenceConfiguration, SequenceContract, SequenceEnt, SetMembershipFilterExpression, SetMembershipFilterOperator, SimpleMarker, SimpleMarkerOptions, SliderComponent, SliderConfiguration, SliderConfigurationIds, SliderConfigurationMode, SpatialComponent, SpatialConfiguration, SpatialImageEnt, SpatialImagesContract, SpotTag, SpotTagOptions, Tag, TagComponent, TagConfiguration, TagDomain, TagEventType, TagMode, TagStateEvent, TouchZoomHandler, TransitionMode, URLEnt, UrlOptions, VertexGeometry, Viewer, ViewerBearingEvent, ViewerDataLoadingEvent, ViewerEvent, ViewerEventType, ViewerImageEvent, ViewerMouseEvent, ViewerNavigableEvent, ViewerNavigationEdgeEvent, ViewerOptions, ViewerStateEvent, ZoomComponent, ZoomConfiguration, decompress, enuToGeodetic, fetchArrayBuffer, geodeticToEnu, isFallbackSupported, isSupported, readMeshPbf };
projects / rails.git / blobdiff