mapillary-js/declarations/mapillary.js.flow

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

/**
 * Convert coordinates from geodetic (WGS84) reference to local topocentric
 * (ENU) reference.
 * @param {number} lng Longitude in degrees.
 * @param {number} lat Latitude in degrees.
 * @param {number} alt Altitude in meters.
 * @param {number} refLng Reference longitude in degrees.
 * @param {number} refLat Reference latitude in degrees.
 * @param {number} refAlt Reference altitude in meters.
 * @returns {Array<number>} The x, y, z local topocentric ENU coordinates.
 */
declare function geodeticToEnu(
  lng: number,
  lat: number,
  alt: number,
  refLng: number,
  refLat: number,
  refAlt: number
): number[];

/**
 * Convert coordinates from local topocentric (ENU) reference to
 * geodetic (WGS84) reference.
 * @param {number} x Topocentric ENU coordinate in East direction.
 * @param {number} y Topocentric ENU coordinate in North direction.
 * @param {number} z Topocentric ENU coordinate in Up direction.
 * @param {number} refLng Reference longitude in degrees.
 * @param {number} refLat Reference latitude in degrees.
 * @param {number} refAlt Reference altitude in meters.
 * @returns {Array<number>} The longitude, latitude in degrees
 * and altitude in meters.
 */
declare function enuToGeodetic(
  x: number,
  y: number,
  z: number,
  refLng: number,
  refLat: number,
  refAlt: number
): number[];

/**
 * Convert coordinates from Earth-Centered, Earth-Fixed (ECEF) reference
 * to local topocentric (ENU) reference.
 * @param {number} X ECEF X-value.
 * @param {number} Y ECEF Y-value.
 * @param {number} Z ECEF Z-value.
 * @param {number} refLng Reference longitude in degrees.
 * @param {number} refLat Reference latitude in degrees.
 * @param {number} refAlt Reference altitude in meters.
 * @returns {Array<number>} The x, y, z topocentric ENU coordinates in East, North
 * and Up directions respectively.
 */
declare function ecefToEnu(
  X: number,
  Y: number,
  Z: number,
  refLng: number,
  refLat: number,
  refAlt: number
): number[];

/**
 * Convert coordinates from local topocentric (ENU) reference
 * to Earth-Centered, Earth-Fixed (ECEF) reference.
 * @param {number} x Topocentric ENU coordinate in East direction.
 * @param {number} y Topocentric ENU coordinate in North direction.
 * @param {number} z Topocentric ENU coordinate in Up direction.
 * @param {number} refLng Reference longitude in degrees.
 * @param {number} refLat Reference latitude in degrees.
 * @param {number} refAlt Reference altitude in meters.
 * @returns {Array<number>} The X, Y, Z ECEF coordinates.
 */
declare function enuToEcef(
  x: number,
  y: number,
  z: number,
  refLng: number,
  refLat: number,
  refAlt: number
): number[];

/**
 * Convert coordinates from geodetic reference (WGS84) to Earth-Centered,
 * Earth-Fixed (ECEF) reference.
 * @param {number} lng Longitude in degrees.
 * @param {number} lat Latitude in degrees.
 * @param {number} alt Altitude in meters.
 * @returns {Array<number>} The X, Y, Z ECEF coordinates.
 */
declare function geodeticToEcef(
  lng: number,
  lat: number,
  alt: number
): number[];

/**
 * Convert coordinates from Earth-Centered, Earth-Fixed (ECEF) reference
 * to geodetic reference (WGS84).
 * @param {number} X ECEF X-value.
 * @param {number} Y ECEF Y-value.
 * @param {number} Z ECEF Z-value.
 * @returns {Array<number>} The longitude, latitude in degrees
 * and altitude in meters.
 */
declare function ecefToGeodetic(X: number, Y: number, Z: number): number[];

/**
 * Contract describing triangulated meshes.
 */
export interface MeshContract {
  /**
   * Flattened array of faces for the mesh. Each face consist
   * three vertex indices.
   */
  faces: number[];

  /**
   * Flattened array of vertices for the mesh. Each vertex
   * consists of X, Y and Z coordinates in the camera
   * reference frame.
   */
  vertices: number[];
}
/**
 * Decompress and parse an array buffer containing zipped
 * json data and return as a json object.
 * @description Handles array buffers continaing zipped json
 * data.
 * @param {ArrayBuffer} buffer - Array buffer to decompress.
 * @returns {Object} Parsed object.
 */
declare function decompress<T>(buffer: ArrayBuffer): T;

/**
 * Retrieves a resource as an array buffer and returns a promise
 * to the buffer.
 * @description Rejects the promise on request failure.
 * @param {string} url - URL for resource to retrieve.
 * @param {Promise} [abort] - Optional promise for aborting
 * the request through rejection.
 * @returns {Promise<ArrayBuffer>} Promise to the array buffer
 * resource.
 */
declare function fetchArrayBuffer(
  url: string,
  abort?: Promise<void>
): Promise<ArrayBuffer>;

/**
 * Read the fields of a protobuf array buffer into a mesh
 * object.
 * @param {ArrayBuffer} buffer - Protobuf array buffer
 * to read from.
 * @returns {MeshContract} Mesh object.
 */
declare function readMeshPbf(buffer: ArrayBuffer): MeshContract;

/**
 * Interface describing event emitter members.
 *
 * This is a specification for implementers to model: it is
 * not an exported method or class.
 */
export interface IEventEmitter {
  fire<T>(type: string, event: T): void;
  off<T>(type: string, handler: (event: T) => void): void;
  on<T>(type: string, handler: (event: T) => void): void;
}

declare class EventEmitter implements IEventEmitter {
  constructor(): this;

  /**
   * Subscribe to an event by its name.
   * @param {string} type - The name of the event
   * to subscribe to.
   * @param {(event: T) => void} handler - The
   * handler called when the event occurs.
   */
  on<T>(type: string, handler: (event: T) => void): void;

  /**
   * Unsubscribe from an event by its name.
   * @param {string} type - The name of the event
   * to unsubscribe from.
   * @param {(event: T) => void} handler - The
   * handler to remove.
   */
  off<T>(type: string, handler: (event: T) => void): void;

  /**
   * @ignore
   */
  fire<T>(type: string, event: T): void;
}
/**
 * Interface that represents a longitude, latitude coordinate,
 * measured in degrees. Coordinates are defined in the WGS84 datum.
 */
export interface LngLat {
  /**
   * Latitude, measured in degrees.
   */
  lat: number;

  /**
   * Longitude, measured in degrees.
   */
  lng: number;
}
/**
 * Interface that represents longitude-latitude-altitude
 * coordinates. Longitude and latitude are measured in degrees
 * and altitude in meters. Coordinates are defined in the WGS84 datum.
 * @interface
 */
export interface LngLatAlt extends LngLat {
  /**
   * Altitude, measured in meters.
   */
  alt: number;
}
/**
 * Contract describing cluster reconstruction data.
 */
export interface ClusterContract {
  /**
   * The unique id of the cluster.
   */
  id: string;

  /**
   * The IDs of the points.
   * @description The order of the IDs correspond with the order
   * of the color and coordinate arrays.
   */
  pointIds: string[] | number[];

  /**
   * The colors of the reconstruction.
   * @description The colors are represented as RGB values
   * normalized to floats on the interval [0, 1].
   *
   * Colors are ordered according to the point IDs in
   * a flattened array.
   */
  colors: number[];

  /**
   * The points of the reconstruction.
   * @description The points are represented in local topocentric
   * ENU coordinates in metric scale relative to the cluster
   * reference longitude, latitude, altitude.
   *
   * Coordinates are ordered according to the point IDs in
   * a flattened array.
   */
  coordinates: number[];

  /**
   * The reference longitude, latitude, altitude of
   * the reconstruction. Determines the
   * position of the reconstruction in world reference
   * frame.
   */
  reference: LngLatAlt;

  /**
   * Rotation vector of the cluster in angle axis representation.
   * @description The rotation vector is indepenent of the coordinates,
   * i.e. it is not applied when visualizing point clouds.
   */
  rotation: number[];
}
/**
 * Ent representing an entity with a unique ID.
 * @interface IDEnt
 */
export interface IDEnt {
  /**
   * Unique ID.
   */
  id: string;
}
/**
 * Ent representing core image properties.
 */
export type CoreImageEnt = {
  /**
   * SfM computed longitude, latitude in WGS84 datum, measured in degrees.
   * @description Optional - no 3D interaction available
   * if unset.
   */
  computed_geometry?: LngLat,

  /**
   * Original EXIF longitude, latitude in WGS84 datum, measured in degrees.
   */
  geometry: LngLat,

  /**
   * Sequence that the image is part of.
   */
  sequence: IDEnt,
  ...
} & IDEnt;

/**
 * Contract describing core image results.
 */
export interface CoreImagesContract {
  /**
   * Geometry cell ID.
   */
  cell_id: string;

  /**
   * Array of core image ents.
   */
  images: CoreImageEnt[];
}
/**
 * Ent representing camera properties.
 */
export interface CameraEnt {
  /**
   * Camera type dependent camera parameters.
   *
   * For perspective and fisheye camera types,
   * the camera parameters array should be
   * constructed according to
   *
   * `[focal, k1, k2]`
   *
   * where focal is the camera focal length,
   * and k1, k2 are radial distortion parameters.
   *
   * For spherical camera type the camera
   * parameters should be an emtpy array.
   */
  camera_parameters: number[];

  /**
   * Projection type of the camera.
   * @description Supported camera types are:
   *
   * ```js
   * 'spherical'
   * 'fisheye'
   * 'perspective'
   * ```
   *
   * Other camera types will be treated as
   * perspective images.
   */
  camera_type: string;
}
/**
 * Ent representing URL properties.
 */
export type URLEnt = {
  /**
   * URL for fetching ent data.
   */
  url: string,
  ...
} & IDEnt;

/**
 * Ent representing image creator properties.
 */
export type CreatorEnt = {
  /**
   * The username of the creator.
   */
  username: string,
  ...
} & IDEnt;

/**
 * Ent representing spatial image properties.
 */
export type SpatialImageEnt = {
  /**
   * Original EXIF altitude above sea level, in meters.
   */
  altitude: number,

  /**
   * Scale of atomic reconstruction.
   * @description Optional - no 3D interaction available
   * if unset.
   */
  atomic_scale?: number,

  /**
   * Timestamp representing the capture date and time.
   * @description Unix epoch timestamp in milliseconds.
   */
  captured_at: number,

  /**
   * Original EXIF compass angle, measured in degrees.
   */
  compass_angle: number,

  /**
   * Computed altitude, in meters.
   * @description Optional - no 3D interaction available
   * if unset.
   */
  computed_altitude?: number,

  /**
   * SfM computed compass angle, measured in degrees.
   * @description Optional - no 3D interaction available
   * if unset.
   */
  computed_compass_angle?: number,

  /**
   * Rotation vector in angle axis representation.
   * @description Optional - no 3D interaction available
   * if unset.
   */
  computed_rotation?: number[],

  /**
   * Cluster reconstruction to which the image belongs.
   */
  cluster: URLEnt,

  /**
   * Image creator.
   */
  creator: CreatorEnt,

  /**
   * EXIF orientation of original image.
   */
  exif_orientation: number,

  /**
   * Height of original image, not adjusted for orientation.
   */
  height: number,

  /**
   * SfM connected component id to which the image belongs.
   * @description Optional - no 3D interaction available
   * if unset.
   */
  merge_id?: string,

  /**
   * 3D mesh resource.
   */
  mesh: URLEnt,

  /**
   * Owner to which the image belongs.
   */
  owner: IDEnt,

  /**
   * Value specifying if image is accessible to organization members only
   * or to everyone.
   */
  private?: boolean,

  /**
   * Image quality score on the interval [0, 1].
   */
  quality_score?: number,

  /**
   * Image thumbnail resource.
   */
  thumb: URLEnt,

  /**
   * Width of original image, not adjusted for orientation.
   */
  width: number,
  ...
} & CameraEnt &
  IDEnt;

/**
 * Contract describing ent results.
 */
export interface EntContract<T> {
  /**
   * Ent node.
   */
  node: T;

  /**
   * Ent node id.
   */
  node_id: string;
}
/**
 * Contract describing spatial image results.
 */
export type SpatialImagesContract = EntContract<SpatialImageEnt>[];
/**
 * Ent representing image properties.
 */
export type ImageEnt = { ... } & CoreImageEnt & SpatialImageEnt;

/**
 * Contract describing image results.
 */
export type ImagesContract = EntContract<ImageEnt>[];
/**
 * Ent representing sequence properties.
 * @interface SequenceEnt
 */
export type SequenceEnt = {
  /**
   * The image IDs of the sequence sorted in
   * acsending order based on capture time.
   */
  image_ids: string[],
  ...
} & IDEnt;

/**
 * Contract describing sequence results.
 */
export type SequenceContract = SequenceEnt;
/**
 * Ent representing image tile properties.
 */
export interface ImageTileEnt {
  /**
   * URL for fetching image tile pixel data.
   */
  url: string;

  /**
   * X tile coordinate.
   */
  x: number;

  /**
   * Y tile coordinate.
   */
  y: number;

  /**
   * Tile level.
   */
  z: number;
}
/**
 * Contract describing image tile results.
 */
export type ImageTilesContract = EntContract<ImageTileEnt[]>;
/**
 * Contract describing image tile requests.
 */
export interface ImageTilesRequestContract {
  /**
   * ID of the tile's image.
   */
  imageId: string;

  /**
   * Tile level.
   */
  z: number;
}
/**
 * @event
 */
export type ProviderEventType = "datacreate" | "datadelete";
/**
 * @interface IGeometryProvider
 *
 * Interface describing geometry provider members.
 *
 * This is a specification for implementers to model: it
 * is not an exported method or class.
 */
export interface IGeometryProvider {
  /**
   * Convert a geodetic bounding box to the the minimum set
   * of cell ids containing the bounding box.
   * @description The bounding box needs
   * to be sufficiently small to be contained in an area with the size
   * of maximally four tiles. Up to nine adjacent tiles may be returned.
   * @param {LngLat} sw - South west corner of bounding box.
   * @param {LngLat} ne - North east corner of bounding box.
   * @returns {Array<string>} Array of cell ids.
   */
  bboxToCellIds(sw: LngLat, ne: LngLat): string[];

  /**
   * Get the cell ids of all adjacent cells.
   * @description In the case of approximately rectangular cells
   * this is typically the eight orthogonally and diagonally adjacent
   * cells.
   * @param {string} cellId - Id of cell.
   * @returns {Array<string>} Array of cell ids. No specific
   * order is guaranteed.
   */
  getAdjacent(cellId: string): string[];

  /**
   * Get the vertices of a cell.
   * @description The vertices form an unclosed
   * clockwise polygon in the 2D longitude, latitude
   * space. No assumption on the position of the first
   * vertex relative to the others can be made.
   * @param {string} cellId - Id of cell.
   * @returns {Array<LngLat>} Unclosed clockwise polygon.
   */
  getVertices(cellId: string): LngLat[];

  /**
   * Convert geodetic coordinates to a cell id.
   * @param {LngLat} lngLat - Longitude, latitude to convert.
   * @returns {string} Cell id for the longitude, latitude.
   */
  lngLatToCellId(lngLat: LngLat): string;
}
/**
 * Interface describing data provider members.
 *
 * This is a specification for implementers to model: it is
 * not an exported method or class.
 * @fires datacreate
 */
export interface IDataProvider extends IEventEmitter {
  /**
   * Get geometry property.
   * @returns {IGeometryProvider} Geometry provider instance.
   */
  geometry: IGeometryProvider;

  /**
   * Get core images in a geometry cell.
   * @param {string} cellId - The id of the geometry cell.
   * @returns {Promise<CoreImagesContract>} Promise to
   * the core images of the requested geometry cell id.
   * @throws Rejects the promise on errors.
   */
  getCoreImages(cellId: string): Promise<CoreImagesContract>;

  /**
   * Get a cluster reconstruction.
   * @param {string} url - URL for the cluster reconstruction
   * to retrieve.
   * @param {Promise} [abort] - Optional promise for aborting
   * the request through rejection.
   * @returns {Promise<ClusterContract>} Promise to the
   * cluster reconstruction.
   * @throws Rejects the promise on errors.
   */
  getCluster(url: string, abort?: Promise<void>): Promise<ClusterContract>;

  /**
   * Get spatial images.
   * @param {Array<string>} imageIds - The ids for the
   * images to retrieve.
   * @returns {Promise<SpatialImagesContract>} Promise to
   * the spatial images of the requested image ids.
   * @throws Rejects the promise on errors.
   */
  getSpatialImages(imageIds: string[]): Promise<SpatialImagesContract>;

  /**
   * Get complete images.
   * @param {Array<string>} imageIds - The ids for the
   * images to retrieve.
   * @returns {Promise<ImagesContract>} Promise to the images of the
   * requested image ids.
   * @throws Rejects the promise on errors.
   */
  getImages(imageIds: string[]): Promise<ImagesContract>;

  /**
   * Get an image as an array buffer.
   * @param {string} url - URL for image to retrieve.
   * @param {Promise<void>} [abort] - Optional promise for aborting
   * the request through rejection.
   * @returns {Promise<ArrayBuffer>} Promise to the array
   * buffer containing the image.
   * @throws Rejects the promise on errors.
   */
  getImageBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer>;

  /**
   * Get image tiles urls for a tile level.
   * @param {ImageTilesRequestContract} tiles - Tiles to request
   * @returns {Promise<ImageTilesContract>} Promise to the
   * image tiles response contract
   * @throws Rejects the promise on errors.
   * @example ```js
   * var tileRequest = { imageId: 'image-id', z: 12 };
   * provider.getImageTiles(tileRequest)
   *   .then((response) => console.log(response));
   * ```
   */
  getImageTiles(tiles: ImageTilesRequestContract): Promise<ImageTilesContract>;

  /**
   * Get a mesh.
   * @param {string} url - URL for mesh to retrieve.
   * @param {Promise<void>} [abort] - Optional promise for aborting
   * the request through rejection.
   * @returns {Promise<MeshContract>} Promise to the mesh.
   * @throws Rejects the promise on errors.
   */
  getMesh(url: string, abort?: Promise<void>): Promise<MeshContract>;

  /**
   * Get sequence.
   * @param {Array<string>} sequenceId - The id for the
   * sequence to retrieve.
   * @returns {Promise} Promise to the sequences of the
   * requested image ids.
   * @throws Rejects the promise on errors.
   */
  getSequence(sequenceId: string): Promise<SequenceContract>;

  /**
   * Set an access token for authenticated API requests of
   * protected resources.
   * @param {string} [accessToken] accessToken - User access
   * token or client access token.
   */
  setAccessToken(accessToken?: string): void;
}

/**
 * Interface for general provider events.
 */
export interface ProviderEvent {
  /**
   * Data provider target that emitted the event.
   */
  target: IDataProvider;

  /**
   * Provider event type.
   */
  type: ProviderEventType;
}
/**
 *
 * Interface for data provider cell events.
 */
export type ProviderCellEvent = {
  /**
   * Cell ids for cells where data have been created.
   */
  cellIds: string[],

  /**
   * Provider event type.
   */
  type: "datacreate",
  ...
} & ProviderEvent;
/**
 *
 * Interface for data provider cluster events.
 */
export type ProviderClusterEvent = {
  /**
   * Cluster ids for clusters that have been deleted.
   */
  clusterIds: string[],

  /**
   * Provider event type.
   */
  type: "datadelete",
  ...
} & ProviderEvent;

/**
 * @class DataProviderBase
 * @classdesc Base class to extend if implementing a data provider
 * class.
 * @fires datacreate
 * @example ```js
 * class MyDataProvider extends DataProviderBase {
 *   constructor() {
 *     super(new S2GeometryProvider());
 *   }
 *   ...
 * }
 * ```
 */
declare class DataProviderBase implements IDataProvider, IEventEmitter {
  _geometry: IGeometryProvider;

  /**
   * Create a new data provider base instance.
   * @param {IGeometryProvider} geometry - Geometry
   * provider instance.
   */
  constructor(_geometry: IGeometryProvider): this;

  /**
   * Get geometry property.
   * @returns {IGeometryProvider} Geometry provider instance.
   */
  geometry: IGeometryProvider;

  fire<T>(type: string, event: T): void;

  /**
   * Get core images in a geometry cell.
   * @param {string} cellId - The id of the geometry cell.
   * @returns {Promise<CoreImagesContract>} Promise to
   * the core images of the requested geometry cell id.
   * @throws Rejects the promise on errors.
   */
  getCoreImages(cellId: string): Promise<CoreImagesContract>;

  /**
   * Get a cluster reconstruction.
   * @param {string} url - URL for the cluster reconstruction
   * to retrieve.
   * @param {Promise} [abort] - Optional promise for aborting
   * the request through rejection.
   * @returns {Promise<ClusterContract>} Promise to the
   * cluster reconstruction.
   * @throws Rejects the promise on errors.
   */
  getCluster(url: string, abort?: Promise<void>): Promise<ClusterContract>;

  /**
   * Get spatial images.
   * @param {Array<string>} imageIds - The ids for the
   * images to retrieve.
   * @returns {Promise<SpatialImagesContract>} Promise to
   * the spatial images of the requested image ids.
   * @throws Rejects the promise on errors.
   */
  getSpatialImages(imageIds: string[]): Promise<SpatialImagesContract>;

  /**
   * Get complete images.
   * @param {Array<string>} imageIds - The ids for the
   * images to retrieve.
   * @returns {Promise<ImagesContract>} Promise to the images of the
   * requested image ids.
   * @throws Rejects the promise on errors.
   */
  getImages(imageIds: string[]): Promise<ImagesContract>;

  /**
   * Get an image as an array buffer.
   * @param {string} url - URL for image to retrieve.
   * @param {Promise<void>} [abort] - Optional promise for aborting
   * the request through rejection.
   * @returns {Promise<ArrayBuffer>} Promise to the array
   * buffer containing the image.
   * @throws Rejects the promise on errors.
   */
  getImageBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer>;

  /**
   * Get image tiles urls for a tile level.
   * @param {ImageTilesRequestContract} tiles - Tiles to request
   * @returns {Promise<ImageTilesContract>} Promise to the
   * image tiles response contract
   * @throws Rejects the promise on errors.
   * @example ```js
   * var tileRequest = { imageId: 'image-id', z: 12 };
   * provider.getImageTiles(tileRequest)
   *   .then((response) => console.log(response));
   * ```
   */
  getImageTiles(tiles: ImageTilesRequestContract): Promise<ImageTilesContract>;

  /**
   * Get a mesh.
   * @param {string} url - URL for mesh to retrieve.
   * @param {Promise<void>} [abort] - Optional promise for aborting
   * the request through rejection.
   * @returns {Promise<MeshContract>} Promise to the mesh.
   * @throws Rejects the promise on errors.
   */
  getMesh(url: string, abort?: Promise<void>): Promise<MeshContract>;

  /**
   * Get sequence.
   * @param {Array<string>} sequenceId - The id for the
   * sequence to retrieve.
   * @returns {Promise} Promise to the sequences of the
   * requested image ids.
   * @throws Rejects the promise on errors.
   */
  getSequence(sequenceId: string): Promise<SequenceContract>;

  off<T>(type: string, handler: (event: T) => void): void;

  on<T>(type: string, handler: (event: T) => void): void;

  /**
   * Set an access token for authenticated API requests of
   * protected resources.
   * @param {string} [accessToken] accessToken - User access
   * token or client access token.
   */
  setAccessToken(accessToken?: string): void;
}
/**
 * @class GeometryProviderBase
 * @classdesc Base class to extend if implementing a geometry
 * provider class.
 * @example ```js
 * class MyGeometryProvider extends GeometryProviderBase {
 *      ...
 * }
 * ```
 */
declare class GeometryProviderBase implements IGeometryProvider {
  /**
   * Create a new geometry provider base instance.
   */
  constructor(): this;

  /**
   * Convert a geodetic bounding box to the the minimum set
   * of cell ids containing the bounding box.
   * @description The bounding box needs
   * to be sufficiently small to be contained in an area with the size
   * of maximally four tiles. Up to nine adjacent tiles may be returned.
   * @param {LngLat} sw - South west corner of bounding box.
   * @param {LngLat} ne - North east corner of bounding box.
   * @returns {Array<string>} Array of cell ids.
   */
  bboxToCellIds(sw: LngLat, ne: LngLat): string[];

  /**
   * Get the cell ids of all adjacent cells.
   * @description In the case of approximately rectangular cells
   * this is typically the eight orthogonally and diagonally adjacent
   * cells.
   * @param {string} cellId - Id of cell.
   * @returns {Array<string>} Array of cell ids. No specific
   * order is guaranteed.
   */
  getAdjacent(cellId: string): string[];

  /**
   * Get the vertices of a cell.
   * @description The vertices form an unclosed
   * clockwise polygon in the 2D longitude, latitude
   * space. No assumption on the position of the first
   * vertex relative to the others can be made.
   * @param {string} cellId - Id of cell.
   * @returns {Array<LngLat>} Unclosed clockwise polygon.
   */
  getVertices(cellId: string): LngLat[];

  /**
   * Convert geodetic coordinates to a cell id.
   * @param {LngLat} lngLat - Longitude, latitude to convert.
   * @returns {string} Cell id for the longitude, latitude.
   */
  lngLatToCellId(lngLat: LngLat): string;

  /**
   * @ignore
   */
  _approxBboxToCellIds(sw: LngLat, ne: LngLat): string[];
}
declare interface GraphCameraContract {
  focal: number;
  k1: number;
  k2: number;
  projection_type: string;
}
declare interface GraphCameraShotContract {
  camera: string;
  rotation: number[];
  translation: number[];
}
declare interface GraphReferenceContract {
  altitude: number;
  latitude: number;
  longitude: number;
}
declare interface GraphPointContract {
  color: number[];
  coordinates: number[];
}
declare interface GraphClusterContract {
  cameras: {
    [cameraId: string]: GraphCameraContract,
    ...
  };
  points: {
    [pointId: string]: GraphPointContract,
    ...
  };
  reference_lla: GraphReferenceContract;
  shots: {
    [imageKey: string]: GraphCameraShotContract,
    ...
  };
}
declare interface GraphGeometry {
  coordinates: [number, number];
}
declare type GraphCoreImageEnt = {
  computed_geometry: GraphGeometry,
  geometry: GraphGeometry,
  sequence: string,
  ...
} & IDEnt;
declare type GraphSpatialImageEnt = {
  merge_cc: number,
  sfm_cluster: URLEnt,
  thumb_1024_url: string,
  thumb_2048_url: string,
  ...
} & SpatialImageEnt;
declare class GraphConverter {
  clusterReconstruction(source: GraphClusterContract): ClusterContract;
  coreImage(source: GraphCoreImageEnt): CoreImageEnt;
  spatialImage(source: GraphSpatialImageEnt): SpatialImageEnt;
}
declare interface GraphDataProviderOptions {
  endpoint?: string;
  accessToken?: string;
}
declare class GraphQueryCreator {
  +imagesPath: string;
  +sequencePath: string;
  +coreFields: string[];
  +idFields: string[];
  +spatialFields: string[];
  +imageTileFields: string[];
  constructor(): this;
  images(imageIds: string[], fields: string[]): string;
  imagesS2(cellId: string, fields: string[]): string;
  imageTiles(z: number, fields: string[]): string;
  imageTilesPath(imageId: string): string;
  sequence(sequenceId: string): string;
}
declare class GraphDataProvider extends DataProviderBase {
  constructor(
    options?: GraphDataProviderOptions,
    geometry?: IGeometryProvider,
    converter?: GraphConverter,
    queryCreator?: GraphQueryCreator
  ): this;
  getCluster(url: string, abort?: Promise<void>): Promise<ClusterContract>;
  getCoreImages(cellId: string): Promise<CoreImagesContract>;
  getImageBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer>;
  getImages(imageIds: string[]): Promise<ImagesContract>;
  getImageTiles(
    request: ImageTilesRequestContract
  ): Promise<ImageTilesContract>;
  getMesh(url: string, abort?: Promise<void>): Promise<MeshContract>;
  getSequence(sequenceId: string): Promise<SequenceContract>;
  getSpatialImages(imageIds: string[]): Promise<SpatialImagesContract>;
  setAccessToken(accessToken?: string): void;
}
/**
 * @class S2GeometryProvider
 * @classdesc Geometry provider based on S2 cells.
 * @example ```js
 * class MyDataProvider extends DataProviderBase {
 *      ...
 * }
 *
 * const geometryProvider = new S2GeometryProvider();
 * const dataProvider = new MyDataProvider(geometryProvider);
 * ```
 */
declare class S2GeometryProvider extends GeometryProviderBase {
  /**
   * Create a new S2 geometry provider instance.
   */
  constructor(_level?: number): this;

  /**
   * @inheritdoc
   */
  bboxToCellIds(sw: LngLat, ne: LngLat): string[];

  /**
   * @inheritdoc
   */
  getAdjacent(cellId: string): string[];

  /**
   * @inheritdoc
   */
  getVertices(cellId: string): LngLat[];

  /**
   * @inheritdoc
   */
  lngLatToCellId(lngLat: LngLat): string;
}
export interface ComponentConfiguration {
  [key: string]: mixed;
}
/**
 * Enumeration for render mode
 * @enum {number} *
 * @readonly
 * @description Modes for specifying how rendering is done
 * in the viewer. All modes preserves the original aspect
 * ratio of the images.
 */

declare var RenderMode: {|
  +Letterbox: 0, // 0
  +Fill: 1, // 1
|};
declare interface ViewportSize {
  height: number;
  width: number;
}
declare type CameraType = "spherical" | "fisheye" | "perspective";

declare var ShaderChunk: {
  common: string,
  coordinates: string,
  bearing_fragment: string,
  map_color_fragment: string,
  gl_frag_color_fragment: string,
  precision_fragment: string,
  uniforms_fragment: string,
  varyings_fragment: string,
  extrinsic_vertex: string,
  gl_position_vertex: string,
  uniforms_vertex: string,
  varyings_vertex: string,
  ...
};

export type GLShader = {
  fragment: string,
  vertex: string,
};
declare var Shader: {
  [name: string]: GLShader,
  ...
};

export type CameraParameters = {
  [key: string]: number,
  ...
};
export type CameraUniforms = {
  +[key: string]: boolean | number | number[],
  ...
};

/**
 * @interface
 * @description Interface for cameras. This is a
 * specification for implementers to model: it is not
 * an exported method or class.
 *
 * Implmenting a custom camera allows the implementer to
 * render textures and camera frustums with proper undistortion.
 *
 * Custom cameras must have a unique type.
 */
export interface ICamera {
  +type: string;
  +parameters: CameraParameters;
  +uniforms: CameraUniforms;
  +projectToSfmFunction: string;
  bearingFromSfm(point: number[]): number[];
  projectToSfm(bearing: number[]): number[];
}
declare class Camera implements ICamera {
  +type: string;
  +projectToSfmFunction: string;
  +parameters: CameraParameters;
  +uniforms: CameraUniforms;
  constructor(type: string, projectToSfmFunction: string): this;
  bearingFromSfm(_point: number[]): number[];
  projectToSfm(_point: number[]): number[];
}
declare var FISHEYE_CAMERA_TYPE: "fisheye";
declare class FisheyeCamera mixins Camera {
  constructor(parameters: number[]): this;
  bearingFromSfm(point: number[]): number[];
  projectToSfm(point: number[]): number[];
}
declare var PERSPECTIVE_CAMERA_TYPE: "perspective";
declare class PerspectiveCamera mixins Camera {
  constructor(parameters: number[]): this;
  bearingFromSfm(point: number[]): number[];
  projectToSfm(point: number[]): number[];
}
declare var SPHERICAL_CAMERA_TYPE: "spherical";
declare class SphericalCamera mixins Camera {
  constructor(): this;
  bearingFromSfm(point: number[]): number[];
  projectToSfm(point: number[]): number[];
}

declare function resolveShader(shader: string, camera: ICamera): string;

/**
 * @class Transform
 * @classdesc Class used for calculating coordinate transformations
 * and projections.
 */
declare class Transform {
  /**
   * Create a new transform instance.
   * @param {number} orientation - Image orientation.
   * @param {number} width - Image height.
   * @param {number} height - Image width.
   * @param {number} focal - Focal length.
   * @param {number} scale - Atomic scale.
   * @param {Array<number>} rotation - Rotation vector in three dimensions.
   * @param {Array<number>} translation - Translation vector in three dimensions.
   * @param {HTMLImageElement} image - Image for fallback size calculations.
   */
  constructor(
    orientation: number,
    width: number,
    height: number,
    scale: number,
    rotation: number[],
    translation: number[],
    image: HTMLImageElement,
    cameraParameters?: number[],
    cameraType?: CameraType
  ): this;
  ck1: number;
  ck2: number;
  cameraType: CameraType;

  /**
   * Get basic aspect.
   * @returns {number} The orientation adjusted aspect ratio.
   */
  basicAspect: number;

  /**
   * Get basic height.
   * @description Does not fall back to image image height but
   * uses original value from API so can be faulty.
   * @returns {number} The height of the basic version image
   * (adjusted for orientation).
   */
  basicHeight: number;

  /**
   * Get basic width.
   * @description Does not fall back to image image width but
   * uses original value from API so can be faulty.
   * @returns {number} The width of the basic version image
   * (adjusted for orientation).
   */
  basicWidth: number;

  /**
   * Get focal.
   * @returns {number} The image focal length.
   */
  focal: number;

  /**
   * Get height.
   * @description Falls back to the image image height if
   * the API data is faulty.
   * @returns {number} The orientation adjusted image height.
   */
  height: number;

  /**
   * Get orientation.
   * @returns {number} The image orientation.
   */
  orientation: number;

  /**
   * Get scale.
   * @returns {number} The image atomic reconstruction scale.
   */
  scale: number;

  /**
   * Get has valid scale.
   * @returns {boolean} Value indicating if the scale of the transform is valid.
   */
  hasValidScale: boolean;

  /**
   * Get radial peak.
   * @returns {number} Value indicating the radius where the radial
   * undistortion function peaks.
   */
  radialPeak: number;

  /**
   * Get width.
   * @description Falls back to the image image width if
   * the API data is faulty.
   * @returns {number} The orientation adjusted image width.
   */
  width: number;

  /**
   * Project 3D world coordinates to basic coordinates.
   * @param {Array<number>} point3d - 3D world coordinates.
   * @return {Array<number>} 2D basic coordinates.
   */
  projectBasic(point3d: number[]): number[];

  /**
   * Unproject basic coordinates to 3D world coordinates.
   * @param {Array<number>} basic - 2D basic coordinates.
   * @param {Array<number>} distance - Distance to unproject from camera center.
   * @param {boolean} [depth] - Treat the distance value as depth from camera center.
   *    Only applicable for perspective images. Will be
   *    ignored for spherical.
   * @returns {Array<number>} Unprojected 3D world coordinates.
   */
  unprojectBasic(basic: number[], distance: number, depth?: boolean): number[];

  /**
   * Project 3D world coordinates to SfM coordinates.
   * @param {Array<number>} point3d - 3D world coordinates.
   * @return {Array<number>} 2D SfM coordinates.
   */
  projectSfM(point3d: number[]): number[];

  /**
   * Unproject SfM coordinates to a 3D world coordinates.
   * @param {Array<number>} sfm - 2D SfM coordinates.
   * @param {Array<number>} distance - Distance to unproject
   * from camera center.
   * @param {boolean} [depth] - Treat the distance value as
   * depth from camera center. Only applicable for perspective
   * images. Will be ignored for spherical.
   * @returns {Array<number>} Unprojected 3D world coordinates.
   */
  unprojectSfM(sfm: number[], distance: number, depth?: boolean): number[];
}
/**
 * @class StateCamera
 * @classdesc Holds information about a camera.
 */
declare class StateCamera {
  /**
   * Create a new camera instance.
   * @param {Transform} [transform] - Optional transform instance.
   */
  constructor(transform?: Transform): this;

  /**
   * Get focal.
   * @returns {number} The focal length.
   */
  focal: number;

  /**
   * Set focal.
   */
  -focal: number;

  /**
   * Update this camera to the linearly interpolated value of two other cameras.
   * @param {StateCamera} a - First camera.
   * @param {StateCamera} b - Second camera.
   * @param {number} alpha - Interpolation value on the interval [0, 1].
   */
  lerpCameras(a: StateCamera, b: StateCamera, alpha: number): void;

  /**
   * Copy the properties of another camera to this camera.
   * @param {StateCamera} other - Another camera.
   */
  copy(other: StateCamera): void;

  /**
   * Clone this camera.
   * @returns {StateCamera} A camera with cloned properties equal to this camera.
   */
  clone(): StateCamera;

  /**
   * Determine the distance between this camera and another camera.
   * @param {StateCamera} other - Another camera.
   * @returns {number} The distance between the cameras.
   */
  diff(other: StateCamera): number;
}
declare var State: {|
  +Custom: 0, // 0
  +Earth: 1, // 1
  +Traversing: 2, // 2
  +Waiting: 3, // 3
  +WaitingInteractively: 4, // 4
|};

/**
 * Enumeration for edge directions
 * @enum {number} *
 * @readonly
 * @description Directions for edges in image graph describing
 * sequence, spatial and image type relations between nodes.
 */

declare var NavigationDirection: {|
  +Next: 0, // 0
  +Prev: 1, // 1
  +StepLeft: 2, // 2
  +StepRight: 3, // 3
  +StepForward: 4, // 4
  +StepBackward: 5, // 5
  +TurnLeft: 6, // 6
  +TurnRight: 7, // 7
  +TurnU: 8, // 8
  +Spherical: 9, // 9
  +Similar: 10, // 10
|};

/**
 * Interface that describes additional properties of an edge.
 * @interface NavigationEdgeData
 */
export interface NavigationEdgeData {
  /**
   * The edge direction.
   */
  direction: $Values<typeof NavigationDirection>;

  /**
   * The counter clockwise horizontal rotation angle from
   * the X-axis in a spherical coordiante system of the
   * motion from the source image to the destination node.
   */
  worldMotionAzimuth: number;
}
/**
 * Interface that describes the properties for a
 * navigation edge from a source image to a
 * target image.
 * @interface NavigationEdge
 */
export interface NavigationEdge {
  /**
   * The id of the source image.
   */
  source: string;

  /**
   * The id of the target image.
   */
  target: string;

  /**
   * Additional data describing properties of the edge.
   */
  data: NavigationEdgeData;
}
/**
 * Interface that indicates edge status.
 * @interface NavigationEdgeStatus
 */
export interface NavigationEdgeStatus {
  /**
   * Value indicating whether the edges have been cached.
   */
  cached: boolean;

  /**
   * The edges.
   * @description If the cached property is false the edges
   * property will always be an empty array. If the cached
   * property is true, there will exist edges in the the
   * array if the image has edges.
   */
  edges: NavigationEdge[];
}
/**
 * @class ImageCache
 * @classdesc Represents the cached properties of a image.
 */
declare class ImageCache {
  /**
   * Create a new image cache instance.
   */
  constructor(provider: IDataProvider): this;

  /**
   * Get image.
   * @description Will not be set when assets have not been cached
   * or when the object has been disposed.
   * @returns {HTMLImageElement} Cached image element of the image.
   */
  image: HTMLImageElement;

  /**
   * Get mesh.
   * @description Will not be set when assets have not been cached
   * or when the object has been disposed.
   * @returns {MeshContract} SfM triangulated mesh of reconstructed
   * atomic 3D points.
   */
  mesh: MeshContract;

  /**
   * Get sequenceEdges.
   * @returns {NavigationEdgeStatus} Value describing the status of the
   * sequence edges.
   */
  sequenceEdges: NavigationEdgeStatus;

  /**
   * Get spatialEdges.
   * @returns {NavigationEdgeStatus} Value describing the status of the
   * spatial edges.
   */
  spatialEdges: NavigationEdgeStatus;

  /**
   * Cache the sequence edges.
   * @param {Array<NavigationEdge>} edges - Sequence edges to cache.
   */
  cacheSequenceEdges(edges: NavigationEdge[]): void;

  /**
   * Cache the spatial edges.
   * @param {Array<NavigationEdge>} edges - Spatial edges to cache.
   */
  cacheSpatialEdges(edges: NavigationEdge[]): void;

  /**
   * Dispose the image cache.
   * @description Disposes all cached assets and unsubscribes to
   * all streams.
   */
  dispose(): void;

  /**
   * Reset the sequence edges.
   */
  resetSequenceEdges(): void;

  /**
   * Reset the spatial edges.
   */
  resetSpatialEdges(): void;
}
/**
 * @class Image
 * @classdesc [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
 */
declare class Image {
  /**
   * Create a new image instance.
   * @description Images are always created internally by the library.
   * Images can not be added to the library through any API method.
   * @param {CoreImageEnt} core- Raw core image data.
   * @ignore
   */
  constructor(core: CoreImageEnt): this;

  /**
   * Get assets cached.
   * @description The assets that need to be cached for this property
   * to report true are the following: fill properties, image and mesh.
   * The library ensures that the current image will always have the
   * assets cached.
   * @returns {boolean} Value indicating whether all assets have been
   * cached.
   * @ignore
   */
  assetsCached: boolean;

  /**
   * Get camera.
   * @returns {ICamera} Camera of the image
   * @ignore
   */
  camera: ICamera;

  /**
   * Get cameraParameters.
   * @description Will be undefined if SfM has
   * not been run.
   *
   * Camera type dependent parameters.
   *
   * For perspective and fisheye camera types,
   * the camera parameters array should be
   * constructed according to
   *
   * `[focal, k1, k2]`
   *
   * where focal is the camera focal length,
   * and k1, k2 are radial distortion parameters.
   *
   * For spherical camera type the camera
   * parameters are unset or emtpy array.
   * @returns {Array<number>} The parameters
   * related to the camera type.
   */
  cameraParameters: number[];

  /**
   * Get cameraType.
   * @description Will be undefined if SfM has not been run.
   * @returns {string} The camera type that captured the image.
   */
  cameraType: string;

  /**
   * Get capturedAt.
   * @description Timestamp of the image capture date
   * and time represented as a Unix epoch timestamp in milliseconds.
   * @returns {number} Timestamp when the image was captured.
   */
  capturedAt: number;

  /**
   * Get clusterId.
   * @returns {string} Globally unique id of the SfM cluster to which
   * the image belongs.
   */
  clusterId: string;

  /**
   * Get clusterUrl.
   * @returns {string} Url to the cluster reconstruction file.
   * @ignore
   */
  clusterUrl: string;

  /**
   * Get compassAngle.
   * @description If the SfM computed compass angle exists it will
   * be returned, otherwise the original EXIF compass angle.
   * @returns {number} Compass angle, measured in degrees
   * clockwise with respect to north.
   */
  compassAngle: number;

  /**
   * Get complete.
   * @description The library ensures that the current image will
   * always be full.
   * @returns {boolean} Value indicating whether the image has all
   * properties filled.
   * @ignore
   */
  complete: boolean;

  /**
   * Get computedAltitude.
   * @description If SfM has not been run the computed altitude is
   * set to a default value of two meters.
   * @returns {number} Altitude, in meters.
   */
  computedAltitude: number;

  /**
   * Get computedCompassAngle.
   * @description Will not be set if SfM has not been run.
   * @returns {number} SfM computed compass angle, measured
   * in degrees clockwise with respect to north.
   */
  computedCompassAngle: number;

  /**
   * Get computedLngLat.
   * @description Will not be set if SfM has not been run.
   * @returns {LngLat} SfM computed longitude, latitude in WGS84 datum,
   * measured in degrees.
   */
  computedLngLat: LngLat;

  /**
   * Get creatorId.
   * @description Note that the creator ID will not be set when using
   * the Mapillary API.
   * @returns {string} Globally unique id of the user who uploaded
   * the image.
   */
  creatorId: string;

  /**
   * Get creatorUsername.
   * @description Note that the creator username will not be set when
   * using the Mapillary API.
   * @returns {string} Username of the creator who uploaded
   * the image.
   */
  creatorUsername: string;

  /**
   * Get exifOrientation.
   * @returns {number} EXIF orientation of original image.
   */
  exifOrientation: number;

  /**
   * Get height.
   * @returns {number} Height of original image, not adjusted
   * for orientation.
   */
  height: number;

  /**
   * Get image.
   * @description The image will always be set on the current image.
   * @returns {HTMLImageElement} Cached image element of the image.
   */
  image: HTMLImageElement;

  /**
   * Get id.
   * @returns {string} Globally unique id of the image.
   */
  id: string;

  /**
   * Get is disposed.
   *
   * @description If the image has been disposed no properties
   * are acessible. Image are disposed when the {@link Viewer}
   * is reset or a new data provider is set.
   *
   * @returns {boolean} Value indicating that this image
   * has been disposed.
   */
  isDisposed: boolean;

  /**
   * Get lngLat.
   * @description If the SfM computed longitude, latitude exist
   * it will be returned, otherwise the original EXIF latitude
   * longitude.
   * @returns {LngLat} Longitude, latitude in WGS84 datum,
   * measured in degrees.
   */
  lngLat: LngLat;

  /**
   * Get merged.
   * @returns {boolean} Value indicating whether SfM has been
   * run on the image and the image has been merged into a
   * connected component.
   */
  merged: boolean;

  /**
   * Get mergeId.
   * @description Will not be set if SfM has not yet been run on
   * image.
   * @returns {stirng} Id of connected component to which image
   * belongs after the aligning merge.
   */
  mergeId: string;

  /**
   * Get mesh.
   * @description The mesh will always be set on the current image.
   * @returns {MeshContract} SfM triangulated mesh of reconstructed
   * atomic 3D points.
   */
  mesh: MeshContract;

  /**
   * Get originalAltitude.
   * @returns {number} EXIF altitude, in meters, if available.
   */
  originalAltitude: number;

  /**
   * Get originalCompassAngle.
   * @returns {number} Original EXIF compass angle, measured in
   * degrees.
   */
  originalCompassAngle: number;

  /**
   * Get originalLngLat.
   * @returns {LngLat} Original EXIF longitude, latitude in
   * WGS84 datum, measured in degrees.
   */
  originalLngLat: LngLat;

  /**
   * Get ownerId.
   * @returns {string} Globally unique id of the owner to which
   * the image belongs. If the image does not belong to an
   * owner the owner id will be undefined.
   */
  ownerId: string;

  /**
   * Get private.
   * @returns {boolean} Value specifying if image is accessible to
   * organization members only or to everyone.
   */
  private: boolean;

  /**
   * Get qualityScore.
   * @returns {number} A number between zero and one
   * determining the quality of the image. Blurriness
   * (motion blur / out-of-focus), occlusion (camera
   * mount, ego vehicle, water-drops), windshield
   * reflections, bad illumination (exposure, glare),
   * and bad weather condition (fog, rain, snow)
   * affect the quality score.
   * @description Value should be on the interval [0, 1].
   */
  qualityScore: number;

  /**
   * Get rotation.
   * @description Will not be set if SfM has not been run.
   * @returns {Array<number>} Rotation vector in angle axis representation.
   */
  rotation: number[];

  /**
   * Get scale.
   * @description Will not be set if SfM has not been run.
   * @returns {number} Scale of reconstruction the image
   * belongs to.
   */
  scale: number;

  /**
   * Get sequenceId.
   * @returns {string} Globally unique id of the sequence
   * to which the image belongs.
   */
  sequenceId: string;

  /**
   * Get sequenceEdges.
   * @returns {NavigationEdgeStatus} Value describing the status of the
   * sequence edges.
   * @ignore
   */
  sequenceEdges: NavigationEdgeStatus;

  /**
   * Get spatialEdges.
   * @returns {NavigationEdgeStatus} Value describing the status of the
   * spatial edges.
   * @ignore
   */
  spatialEdges: NavigationEdgeStatus;

  /**
   * Get width.
   * @returns {number} Width of original image, not
   * adjusted for orientation.
   */
  width: number;

  /**
   * Cache the sequence edges.
   * @description The sequence edges are cached asynchronously
   * internally by the library.
   * @param {Array<NavigationEdge>} edges - Sequence edges to cache.
   * @ignore
   */
  cacheSequenceEdges(edges: NavigationEdge[]): void;

  /**
   * Cache the spatial edges.
   * @description The spatial edges are cached asynchronously
   * internally by the library.
   * @param {Array<NavigationEdge>} edges - Spatial edges to cache.
   * @ignore
   */
  cacheSpatialEdges(edges: NavigationEdge[]): void;

  /**
   * Dispose the image.
   * @description Disposes all cached assets.
   * @ignore
   */
  dispose(): void;

  /**
   * Initialize the image cache.
   * @description The image cache is initialized internally by
   * the library.
   * @param {ImageCache} cache - The image cache to set as cache.
   * @ignore
   */
  initializeCache(cache: ImageCache): void;

  /**
   * Complete an image with spatial properties.
   * @description The image is completed internally by
   * the library.
   * @param {SpatialImageEnt} fill - The spatial image struct.
   * @ignore
   */
  makeComplete(fill: SpatialImageEnt): void;

  /**
   * Reset the sequence edges.
   * @ignore
   */
  resetSequenceEdges(): void;

  /**
   * Reset the spatial edges.
   * @ignore
   */
  resetSpatialEdges(): void;

  /**
   * Clears the image and mesh assets, aborts
   * any outstanding requests and resets edges.
   * @ignore
   */
  uncache(): void;
}
declare interface IAnimationState {
  reference: LngLatAlt;
  alpha: number;
  camera: StateCamera;
  zoom: number;
  currentImage: Image;
  currentCamera: StateCamera;
  previousImage: Image;
  trajectory: Image[];
  currentIndex: number;
  lastImage: Image;
  imagesAhead: number;
  currentTransform: Transform;
  previousTransform: Transform;
  motionless: boolean;
  state: $Values<typeof State>;
}
declare interface AnimationFrame {
  id: number;
  fps: number;
  state: IAnimationState;
}
declare interface EulerRotation {
  phi: number;
  theta: number;
}
declare class RenderCamera {
  constructor(
    elementWidth: number,
    elementHeight: number,
    renderMode: $Values<typeof RenderMode>
  ): this;
  alpha: number;
  camera: StateCamera;
  changed: boolean;
  frameId: number;
  renderMode: $Values<typeof RenderMode>;
  rotation: EulerRotation;
  zoom: number;
  size: ViewportSize;
  getTilt(): number;
  fovToZoom(fov: number): number;
  setFrame(frame: AnimationFrame): void;
  setProjectionMatrix(matrix: number[]): void;
  setRenderMode(renderMode: $Values<typeof RenderMode>): void;
  setSize(size: ViewportSize): void;
}
declare class RenderService {
  constructor(
    element: HTMLElement,
    currentFrame$: mixed,
    renderMode: $Values<typeof RenderMode>,
    renderCamera?: RenderCamera
  ): this;
  element: HTMLElement;
  dispose(): void;
}
declare interface VirtualNodeHash {
  name: string;
}
declare class DOMRenderer {
  constructor(element: HTMLElement, renderService: RenderService): this;
  clear(name: string): void;
  remove(): void;
}
declare type GLRenderFunction = {
  (): void,
};

declare var RenderPass$1: {|
  +Background: 0, // 0
  +Opaque: 1, // 1
|};
declare interface GLFrameRenderer {
  frameId: number;
  needsRender: boolean;
  render: GLRenderFunction;
  pass: $Values<typeof RenderPass$1>;
}
declare interface GLRenderHash {
  name: string;
  renderer: GLFrameRenderer;
}
declare class GLRenderer {
  constructor(
    canvas: HTMLCanvasElement,
    canvasContainer: HTMLElement,
    renderService: RenderService
  ): this;
  clear(name: string): void;
  remove(): void;
  triggerRerender(): void;
}
/**
 * Enumeration for transition mode
 * @enum {number} *
 * @readonly
 * @description Modes for specifying how transitions
 * between images are performed.
 */

declare var TransitionMode: {|
  +Default: 0, // 0
  +Instantaneous: 1, // 1
|};
declare class StateService {
  constructor(
    initialState: $Values<typeof State>,
    transitionMode?: $Values<typeof TransitionMode>
  ): this;
  dispose(): void;
  custom(): void;
  earth(): void;
  traverse(): void;
  wait(): void;
  waitInteractively(): void;
  appendImagess(images: Image[]): void;
  prependImages(images: Image[]): void;
  removeImages(n: number): void;
  clearImages(): void;
  clearPriorImages(): void;
  cutImages(): void;
  setImages(images: Image[]): void;
  setViewMatrix(matrix: number[]): void;
  rotate(delta: EulerRotation): void;
  rotateUnbounded(delta: EulerRotation): void;
  rotateWithoutInertia(delta: EulerRotation): void;
  rotateBasic(basicRotation: number[]): void;
  rotateBasicUnbounded(basicRotation: number[]): void;
  rotateBasicWithoutInertia(basicRotation: number[]): void;
  rotateToBasic(basic: number[]): void;
  move(delta: number): void;
  moveTo(position: number): void;
  dolly(delta: number): void;
  orbit(rotation: EulerRotation): void;
  truck(direction: number[]): void;

  /**
   * Change zoom level while keeping the reference point position approximately static.
   * @parameter {number} delta - Change in zoom level.
   * @parameter {Array<number>} reference - Reference point in basic coordinates.
   */
  zoomIn(delta: number, reference: number[]): void;
  setCenter(center: number[]): void;
  setSpeed(speed: number): void;
  setTransitionMode(mode: $Values<typeof TransitionMode>): void;
  setZoom(zoom: number): void;
  start(): void;
  stop(): void;
}
declare class DOM {
  constructor(doc?: Node): this;
}
/**
 * Enumeration for component size.
 * @enum {number} *
 * @readonly
 * @description May be used by a component to allow for resizing
 * of the UI elements rendered by the component.
 */

declare var ComponentSize: {|
  +Automatic: 0, // 0
  +Large: 1, // 1
  +Small: 2, // 2
|};
export type BearingConfiguration = {
  /**
   * The size of the ui elements.
   * @default ComponentSize.Automatic
   */
  size?: $Values<typeof ComponentSize>,
  ...
} & ComponentConfiguration;

/**
 * Interface for configuration of cache depth.
 * @interface
 * @example ```js
 * var viewer = new Viewer({
 *     ...
 *     component: {
 *         cache: {
 *             depth: {
 *                 spherical: 2,
 *                 sequence: 3,
 *             }
 *         },
 *     },
 *     ...
 * });
 * ```
 */
export interface CacheDepthConfiguration {
  /**
   * Cache depth in the sequence directions.
   * @description Max value is 4. Value will be clamped
   * to the interval [0, 4].
   * @default 2
   */
  sequence: number;

  /**
   * Cache depth in the spherical direction.
   * @description Max value is 2. Value will be clamped
   * to the interval [0, 2].
   * @default 1
   */
  spherical: number;

  /**
   * Cache depth in the step directions.
   * @description Max value is 3. Value will be clamped
   * to the interval [0, 3].
   * @default 1
   */
  step: number;

  /**
   * Cache depth in the turn directions.
   * @description Max value is 1. Value will be clamped
   * to the interval [0, 1].
   * @default 0
   */
  turn: number;
}
/**
 * Interface for configuration of cache component.
 * @interface
 */
export type CacheConfiguration = {
  /**
   * Cache depth struct.
   */
  depth?: CacheDepthConfiguration,
  ...
} & ComponentConfiguration;

/**
 * Interface for configuration of direction component.
 * @interface
 * @example ```js
 * var viewer = new Viewer({
 *     ...
 *     component: {
 *         direction: {
 *             minWidth: 140,
 *             maxWidth: 340,
 *         },
 *     },
 *     ...
 * });
 * ```
 */
export type DirectionConfiguration = {
  /**
   * Determines if the sequence arrow appearance should be different from
   * the non sequence arrows.
   * @description Needs to be set to true for the sequence suffixed classes
   * to be applied to the navigation elements. Additional calculations will be
   * performed resulting in a performance cost.
   * @default false
   */
  distinguishSequence?: boolean,

  /**
   * The image id representing the direction arrow to be highlighted.
   * @description The arrow pointing towards the image corresponding to the
   * highlight id will be highlighted.
   * @default undefined
   */
  highlightId?: string,

  /**
   * The min width of the non transformed container element holding
   * the navigation arrows.
   * @description Set min width of the non transformed
   * container element holding the navigation arrows.
   * If the min width is larger than the max width the
   * min width value will be used.
   *
   * The container element is automatically resized when the resize
   * method on the Viewer class is called.
   * @default 260
   */
  minWidth?: number,

  /**
   * The max width of the non transformed container element holding
   * the navigation arrows.
   * @description Set max width of the non transformed
   * container element holding the navigation arrows.
   * If the min width is larger than the max width the
   * min width value will be used.
   *
   * The container element is automatically resized when the resize
   * method on the Viewer class is called.
   * @default 460
   */
  maxWidth?: number,
  ...
} & ComponentConfiguration;

/**
 * Interface for configuration of keyboard component.
 * @interface
 * @example ```js
 * var viewer = new Viewer({
 *     ...
 *     component: {
 *         keyboard: {
 *             keyZoom: false,
 *             keySequenceNavigation: false,
 *             keySpatialNavigation: false,
 *         },
 *     },
 *     ...
 * });
 * ```
 */
export type KeyboardConfiguration = {
  /**
   * Enable or disable the `KeyPlayHandler`.
   * @default true
   */
  keyPlay?: boolean,

  /**
   * Enable or disable the `KeySequenceNavigationHandler`.
   * @default true
   */
  keySequenceNavigation?: boolean,

  /**
   * Enable or disable the `KeySpatialNavigationHandler`.
   * @default true
   */
  keySpatialNavigation?: boolean,

  /**
   * Enable or disable the `KeyZoomHandler`.
   * @default true
   */
  keyZoom?: boolean,
  ...
} & ComponentConfiguration;

/**
 * Interface for configuration of marker component.
 * @interface
 * @example ```js
 * var viewer = new Viewer({
 *     ...
 *     component: {
 *         marker: {
 *             visibleBBoxSize: 80,
 *         },
 *     },
 *     ...
 * });
 * ```
 */
export type MarkerConfiguration = {
  /**
   * The size of the bounding box for which markers will be visible.
   * @description Provided values will be clamped to the [1, 200]
   * interval.
   * @default 100
   */
  visibleBBoxSize?: number,
  ...
} & ComponentConfiguration;

/**
 * Interface for configuration of mouse component.
 * @interface
 * @example ```js
 * var viewer = new Viewer({
 *     ...
 *     component: {
 *         pointer: {
 *             dragPan: false,
 *             scrollZoom: false,
 *             touchZoom: false,
 *         },
 *     },
 *     ...
 * });
 * ```
 */
export type PointerConfiguration = {
  /**
   * Activate or deactivate the `DragPanHandler`.
   * @default true
   */
  dragPan?: boolean,

  /**
   * Activate or deactivate the `EarthControlHandler`.
   * @default true
   */
  earthControl?: boolean,

  /**
   * Activate or deactivate the `ScrollZoomHandler`.
   * @default true
   */
  scrollZoom?: boolean,

  /**
   * Activate or deactivate the `TouchZoomHandler`.
   * @default true
   */
  touchZoom?: boolean,
  ...
} & ComponentConfiguration;

/**
 * Interface for configuration of sequence component.
 * @interface
 * @example ```js
 * const viewer = new Viewer({
 *     ...
 *     component: {
 *         sequence: {
 *             minWidth: 40,
 *             maxWidth: 80,
 *             visible: false,
 *         },
 *     },
 *     ...
 * });
 * ```
 */
export type SequenceConfiguration = {
  /**
   * Set the direction to follow when playing.
   * @default EdgeDirection.Next
   */
  direction?: $Values<typeof NavigationDirection>,

  /**
   * The node id representing the direction arrow to be highlighted.
   * @description When set to null no direction will be highlighted.
   * The arrow pointing towards the node corresponding to the
   * highlight id will be highlighted.
   * @default undefined
   * @ignore
   */
  highlightId?: string,

  /**
   * The max width of the sequence container.
   * @description Set max width of the container element holding
   * the sequence navigation elements. If the min width is larger than the
   * max width the min width value will be used.
   *
   * The container element is automatically resized when the resize
   * method on the Viewer class is called.
   * @default 117
   */
  maxWidth?: number,

  /**
   * The min width of the sequence container.
   * @description Set min width of the container element holding
   * the sequence navigation elements. If the min width is larger than the
   * max width the min width value will be used.
   *
   * The container element is automatically resized when the resize
   * method on the Viewer class is called.
   * @default 70
   */
  minWidth?: number,

  /**
   * Indicating whether the component is playing.
   * @default false
   */
  playing?: boolean,

  /**
   * Determine whether the sequence UI elements
   * should be visible.
   * @default true
   */
  visible?: boolean,
  ...
} & ComponentConfiguration;

/**
 * Enumeration for slider mode.
 * @enum {number} *
 * @readonly
 * @description Modes for specifying how transitions
 * between images are performed in slider mode. Only
 * applicable when the slider component determines
 * that transitions with motion is possilble. When it
 * is not, the stationary mode will be applied.
 */
declare var SliderConfigurationMode: {|
  +Motion: 0, // 0
  +Stationary: 1, // 1
|};
/**
 * Interface for configuration of slider ids.
 * @interface
 */
export interface SliderConfigurationIds {
  /**
   * Id for the image plane in the background.
   */
  background: string;
  /**
   * Id for the image plane in the foreground.
   */
  foreground: string;
}
/**
 * Interface for configuration of slider component.
 * @interface ```js
 * var viewer = new Viewer({
 *     ...
 *     component: {
 *         slider: {
 *             initialPosition: 0.5,
 *             ids: {
 *                 background: '<background-id>',
 *                 foreground: '<foreground-id>',
 *             },
 *             sliderVisible: true,
 *         },
 *     },
 *     ...
 * });
 * ```
 */
export type SliderConfiguration = {
  /**
   * Initial position of the slider on the interval [0, 1].
   * @description Configures the initial position of the slider.
   * The inital position value will be used when the component
   * is activated.
   * @default 1
   */
  initialPosition?: number,
  /**
   * Slider image ids.
   * @description Configures the component to show the image
   * planes for the supplied image ids  in the foreground
   * and the background.
   */
  ids?: SliderConfigurationIds,
  /**
   * Value indicating whether the slider should be visible.
   * @description Set the value controlling if the
   * slider is visible.
   * @default true
   */
  sliderVisible?: boolean,
  /**
   * Mode used for image pair transitions.
   * @description Configures the mode for transitions between
   * image pairs.
   */
  mode?: $Values<typeof SliderConfigurationMode>,
  ...
} & ComponentConfiguration;

declare var CameraVisualizationMode: {|
  +Hidden: 0, // 0
  +Homogeneous: 1, // 1
  +Cluster: 2, // 2
  +ConnectedComponent: 3, // 3
  +Sequence: 4, // 4
|};

declare var OriginalPositionMode: {|
  +Hidden: 0, // 0
  +Altitude: 1, // 1
  +Flat: 2, // 2
|};

declare var PointVisualizationMode: {|
  +Hidden: 0, // 0
  +Original: 1, // 1
  +Cluster: 2, // 2
|};

/**
 * Interface for configuration of spatial component.
 * @interface
 * @example ```js
 * var viewer = new Viewer({
 *     ...
 *     component: {
 *         spatial: {
 *             cameraSize: 0.5,
 *             cameraVisualizationMode: CameraVisualizationMode.Cluster,
 *             cellsVisible: true,
 *             originalPositionMode: OriginalPositionMode.Altitude,
 *             pointSize: 0.5,
 *             pointVisualizationMode: PointVisualizationMode.Hidden,
 *         },
 *     },
 *     ...
 * });
 * ```
 */
export type SpatialConfiguration = {
  /**
   * The camera size on the interval [0.01, 1].
   * @default 0.1
   */
  cameraSize?: number,

  /**
   * Specify the camera visualization mode.
   * @default CameraVisualizationMode.Homogeneous
   */
  cameraVisualizationMode?: $Values<typeof CameraVisualizationMode>,

  /**
   * Specify if the currently rendered cells should be visualize on
   * an approximated ground plane.
   * @default false
   */
  cellsVisible?: boolean,

  /**
   * Cell grid depth from the cell of the currently
   * selected camera.
   * @description Max value is 3. Value will be clamped
   * to the interval [1, 3].
   * @default 1
   */
  cellGridDepth?: number,

  /**
   * Specify the original position visualization mode.
   * @description The original positions are hidden
   * by default.
   * @default OriginalPositionMode.Hidden
   */
  originalPositionMode?: $Values<typeof OriginalPositionMode>,

  /**
   * The point size on the interval [0.01, 1].
   * @default 0.1
   */
  pointSize?: number,

  /**
   * Specify how point clouds should be visualized.
   * @default PointVisualizationMode.Original
   */
  pointVisualizationMode?: $Values<typeof PointVisualizationMode>,
  ...
} & ComponentConfiguration;

/**
 * Enumeration for tag modes
 * @enum {number} *
 * @readonly
 * @description Modes for the interaction in the tag component.
 */

declare var TagMode: {|
  +Default: 0, // 0
  +CreatePoint: 1, // 1
  +CreatePoints: 2, // 2
  +CreatePolygon: 3, // 3
  +CreateRect: 4, // 4
  +CreateRectDrag: 5, // 5
|};

/**
 * Interface for configuration of tag component.
 * @interface
 * @example ```js
 * var viewer = new Viewer({
 *     ...
 *     component: {
 *         tag: {
 *             createColor: 0xFF0000,
 *             mode: TagMode.CreateRect,
 *         },
 *     },
 *     ...
 * });
 * ```
 */
export type TagConfiguration = {
  /**
   * The color of vertices and edges for tags that
   * are being created.
   * @default 0xFFFFFF
   */
  createColor?: number,

  /**
   * Show an indicator at the centroid of the points geometry
   * that creates the geometry when clicked.
   * @default true
   */
  indicatePointsCompleter?: boolean,

  /**
   * The interaction mode of the tag component.
   * @default TagMode.Default
   */
  mode?: $Values<typeof TagMode>,
  ...
} & ComponentConfiguration;
export type ZoomConfiguration = {
  /**
   * The size of the ui elements.
   * @default ComponentSize.Automatic
   */
  size?: $Values<typeof ComponentSize>,
  ...
} & ComponentConfiguration;

/**
 * Interface for configuration of navigation component.
 * @interface
 * @example ```js
 * var viewer = new Viewer({
 *     ...
 *     component: {
 *         fallback: {
 *             navigation: {
 *                 spatial: false,
 *             },
 *         },
 *     },
 *     ...
 * });
 * ```
 */
export type NavigationFallbackConfiguration = {
  /**
   * Enable or disable the sequence arrows.
   * @default true
   */
  sequence?: boolean,

  /**
   * Enable or disable the spatial arrows.
   * @default true
   */
  spatial?: boolean,
  ...
} & ComponentConfiguration;

/**
 * Interface for the fallback component options that can be
 * provided to the viewer when the browser does not have
 * WebGL support.
 * @interface
 */
export interface FallbackOptions {
  /**
   * Show static images without pan, zoom, or transitions.
   * @description Fallback for `image` when WebGL is not supported.
   * @default false
   */
  image?: boolean;

  /**
   * Show static navigation arrows in the corners.
   * @description Fallback for `direction` and `sequence` when WebGL is not supported.
   * @default false
   */
  navigation?: boolean | NavigationFallbackConfiguration;
}
/**
 * Interface for the component options that can be provided to the viewer.
 * @interface
 */
export type ComponentOptions = {
  /**
   * Show attribution.
   * @default true
   */
  attribution?: boolean;

  /**
   * Show indicator for bearing and field of view.
   * @default true
   */
  bearing?: boolean | BearingConfiguration;

  /**
   * Cache images around the current one.
   * @default true
   */
  cache?: boolean | CacheConfiguration;

  /**
   * Use a cover to avoid loading data until viewer interaction.
   * @default true
   */
  cover?: boolean;

  /**
   * Show spatial direction arrows for navigation.
   * @description Default spatial navigation when there is WebGL support.
   * Requires WebGL support.
   * @default true
   */
  direction?: boolean | DirectionConfiguration;

  /**
   * Enable fallback component options
   * when the browser does not have WebGL support.
   * @default undefined
   */
  fallback?: FallbackOptions;

  /**
   * Show image planes in 3D.
   * @description Requires WebGL support.
   * @default true
   */
  image?: boolean;

  /**
   * Enable use of keyboard commands.
   * @description Requires WebGL support.
   * @default true
   */
  keyboard?: boolean | KeyboardConfiguration;

  /**
   * Enable an interface for showing 3D markers in the viewer.
   * @description Requires WebGL support.
   * @default false
   */
  marker?: boolean | MarkerConfiguration;

  /**
   * Enable mouse, pen, and touch interaction for zoom and pan.
   * @description Requires WebGL support.
   * @default true
   */
  pointer?: boolean | PointerConfiguration;

  /**
   * Show HTML popups over images.
   * @description Requires WebGL support.
   * @default false
   */
  popup?: boolean;

  /**
   * Show sequence related navigation.
   * @description Default sequence navigation when there is WebGL support.
   * @default true
   */
  sequence?: boolean | SequenceConfiguration;

  /**
   * Show a slider for transitioning between image planes.
   * @description Requires WebGL support.
   * @default false
   */
  slider?: boolean | SliderConfiguration;

  /**
   * Enable an interface for showing spatial data in the viewer.
   * @description Requires WebGL support.
   * @default false
   */
  spatial?: boolean | SpatialConfiguration;

  /**
   * Enable an interface for drawing 2D geometries on top of images.
   * @description Requires WebGL support.
   * @default false
   */
  tag?: boolean | TagConfiguration;

  /**
   * Show buttons for zooming in and out.
   * @description Requires WebGL support.
   * @default true
   */
  zoom?: boolean | ZoomConfiguration;
}
/**
 * Interface for the URL options that can be provided to the viewer.
 * @interface
 */
export type UrlOptions = {
  /**
   * Explore host.
   * @description Host used for links to the full
   * mapillary website.
   * @default {"www.mapillary.com"}
   */
  exploreHost?: string;

  /**
   * Scheme.
   * @description Used for all hosts.
   * @default {"https"}
   */
  scheme?: string;
}
/**
 * Enumeration for camera controls.
 * @description Specifies different modes for how the
 * camera is controlled through pointer, keyboard or
 * other modes of input.
 * @enum {number} *
 * @readonly
 */

declare var CameraControls: {|
  +Custom: 0, // 0
  +Earth: 1, // 1
  +Street: 2, // 2
  +Gravity: 3, // 3
|};

/**
 * [object Object],[object Object],[object Object]
 */
export type ViewerOptions = {
  /**
   * Optional access token for API requests of
   * resources.
   * @description [object Object],[object Object],[object Object]
   */
  accessToken?: string;

  /**
   * Value specifying the initial camera controls of
   * the viewer.
   * @default [object Object],[object Object]
   */
  cameraControls?: $Values<typeof CameraControls>;

  /**
   * Value specifying if combined panning should be activated.
   * @default true
   */
  combinedPanning?: boolean;

  /**
   * Component options.
   */
  component?: ComponentOptions;

  /**
   * Base the graph on computed positions instead of original.
   * @description Experimental property.
   * @default false
   * @ignore
   */
  computedGraph?: boolean;

  /**
   * The HTML element in which MapillaryJS will render the
   * viewer, or the element's string `id`. The
   * specified element must have no children.
   */
  container: string | HTMLElement;

  /**
   * Optional data provider class instance for API and static
   * resource requests.
   * @description [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
   */
  dataProvider?: IDataProvider;

  /**
   * Optional `image-id` to start from. The id
   * can be any Mapillary image. If a id is provided the viewer is
   * bound to that id until it has been fully loaded. If null is provided
   * no image is loaded at viewer initialization and the viewer is not
   * bound to any particular id. Any image can then be navigated to
   * with e.g. `viewer.moveTo("<my-image-id>")`.
   */
  imageId?: string;

  /**
   * Value indicating if the viewer should fetch high resolution
   * image tiles.
   * @description Can be used when extending MapillaryJS with
   * a custom data provider. If no image tiling server exists
   * the image tiling can be inactivated to avoid error
   * messages about non-existing tiles in the console.
   * @default true
   */
  imageTiling?: boolean;

  /**
   * The render mode in the viewer.
   * @default [object Object],[object Object]
   */
  renderMode?: $Values<typeof RenderMode>;

  /**
   * A base URL for retrieving a PNG sprite image and json metadata file.
   * File name extensions will be automatically appended.
   */
  sprite?: string;

  /**
   * If `true`, the viewer will automatically resize when the
   * browser window resizes.
   * @default true
   */
  trackResize?: boolean;

  /**
   * The transtion mode in the viewer.
   * @default [object Object],[object Object]
   */
  transitionMode?: $Values<typeof TransitionMode>;

  /**
   * The URL options.
   */
  url?: UrlOptions;
}
declare class KeyboardService {
  constructor(canvasContainer: HTMLElement): this;
}
declare class MouseService {
  constructor(
    container: EventTarget,
    canvasContainer: EventTarget,
    domContainer: EventTarget,
    doc: EventTarget
  ): this;
  dispose(): void;
  claimMouse(name: string, zindex: number): void;
  unclaimMouse(name: string): void;
  deferPixels(name: string, deferPixels: number): void;
  undeferPixels(name: string): void;
  claimWheel(name: string, zindex: number): void;
  unclaimWheel(name: string): void;
}
/**
 * Enumeration for alignments
 * @enum {number} *
 * @readonly
 */

declare var Alignment: {|
  +Bottom: 0, // 0
  +BottomLeft: 1, // 1
  +BottomRight: 2, // 2
  +Center: 3, // 3
  +Left: 4, // 4
  +Right: 5, // 5
  +Top: 6, // 6
  +TopLeft: 7, // 7
  +TopRight: 8, // 8
|};
declare interface ISpriteAtlas {
  loaded: boolean;
}
declare class SpriteAtlas implements ISpriteAtlas {
  -json: mixed;
  -image: mixed;
  loaded: boolean;
}
declare interface Sprite {
  width: number;
  height: number;
  x: number;
  y: number;
  pixelRatio: number;
}
declare interface Sprites {
  [key: string]: Sprite;
}
declare class SpriteService {
  constructor(sprite?: string): this;
  dispose(): void;
}
declare interface TouchPinch {
  /**
   * X client coordinate for center of pinch.
   */
  clientX: number;

  /**
   * Y client coordinate for center of pinch.
   */
  clientY: number;

  /**
   * X page coordinate for center of pinch.
   */
  pageX: number;

  /**
   * Y page coordinate for center of pinch.
   */
  pageY: number;

  /**
   * X screen coordinate for center of pinch.
   */
  screenX: number;

  /**
   * Y screen coordinate for center of pinch.
   */
  screenY: number;

  /**
   * Distance change in X direction between touches
   * compared to previous event.
   */
  changeX: number;

  /**
   * Distance change in Y direction between touches
   * compared to previous event.
   */
  changeY: number;

  /**
   * Pixel distance between touches.
   */
  distance: number;

  /**
   * Change in pixel distance between touches compared
   * to previous event.
   */
  distanceChange: number;

  /**
   * Distance in X direction between touches.
   */
  distanceX: number;

  /**
   * Distance in Y direction between touches.
   */
  distanceY: number;

  /**
   * Original touch event.
   */
  originalEvent: TouchEvent;

  /**
   * First touch.
   */
  touch1: Touch;

  /**
   * Second touch.
   */
  touch2: Touch;
}
declare class TouchService {
  constructor(canvasContainer: HTMLElement, domContainer: HTMLElement): this;
  dispose(): void;
}
/**
 * Test whether the current browser supports the full
 * functionality of MapillaryJS.
 * @description The full functionality includes WebGL rendering.
 * @return {boolean}
 * @example `var supported = isSupported();`
 */
declare function isSupported(): boolean;

/**
 * Test whether the current browser supports the fallback
 * functionality of MapillaryJS.
 * @description The fallback functionality does not include WebGL
 * rendering, only 2D canvas rendering.
 * @return {boolean}
 * @example `var fallbackSupported = isFallbackSupported();`
 */
declare function isFallbackSupported(): boolean;
export type ComparisonFilterOperator = "==" | "!=" | ">" | ">=" | "<" | "<=";
export type SetMembershipFilterOperator = "in" | "!in";
export type CombiningFilterOperator = "all";
export type FilterOperator =
  | CombiningFilterOperator
  | ComparisonFilterOperator
  | SetMembershipFilterOperator;
declare type FilterKey =
  | "cameraType"
  | "capturedAt"
  | "clusterId"
  | "creatorId"
  | "creatorUsername"
  | "exifOrientation"
  | "height"
  | "id"
  | "mergeId"
  | "merged"
  | "ownerId"
  | "private"
  | "qualityScore"
  | "sequenceId"
  | "width";
export type FilterValue = boolean | number | string;
export type ComparisonFilterExpression = [
  ComparisonFilterOperator,
  FilterKey,
  FilterValue
];
export type SetMembershipFilterExpression = (
  | SetMembershipFilterOperator
  | FilterKey
  | FilterValue
)[];
export type CombiningFilterExpression = (
  | CombiningFilterOperator
  | ComparisonFilterExpression
  | SetMembershipFilterExpression
)[];
export type FilterExpression =
  | ComparisonFilterExpression
  | SetMembershipFilterExpression
  | CombiningFilterExpression;
/**
 * @event
 */
export type ViewerEventType =
  | "bearing"
  | "click"
  | "contextmenu"
  | "dblclick"
  | "fov"
  | "dataloading"
  | "load"
  | "mousedown"
  | "mousemove"
  | "mouseout"
  | "mouseover"
  | "mouseup"
  | "moveend"
  | "movestart"
  | "navigable"
  | "image"
  | "position"
  | "pov"
  | "reference"
  | "remove"
  | "sequenceedges"
  | "spatialedges";

declare var RenderPass: {|
  +Opaque: 0, // 0
  +Transparent: 1, // 1
|};

/**
 * @interface
 * @description [object Object],[object Object],[object Object],[object Object],[object Object]
 */
export interface ICustomRenderer {
  /**
   * A unique renderer id.
   */
  id: string;

  /**
   * The custom renderer's render pass.
   * @description [object Object],[object Object],[object Object]
   */
  renderPass: $Values<typeof RenderPass>;

  /**
   * Method called when the renderer has been added to the
   * viewer. This gives the
   * renderer a chance to initialize gl resources and
   * register event listeners.
   * @description [object Object],[object Object],[object Object],[object Object],[object Object]
   * @param {IViewer} viewer - The viewer this custom renderer
   * was just added to.
   * @param {LngLatAlt} reference - The viewer's current
   * reference position.
   * @param {WebGLRenderingContext | WebGL2RenderingContext} context -
   * The viewer's gl context.
   */
  onAdd(
    viewer: IViewer,
    reference: LngLatAlt,
    context: WebGLRenderingContext
  ): void;

  /**
   * Method called when the viewer's reference position has changed.
   * This gives the renderer a chance to reposition its scene objects.
   * @description [object Object],[object Object],[object Object]
   * @param {IViewer} viewer - The viewer this custom renderer
   * is added to.
   * @param {LngLatAlt} reference - The viewer's current
   * reference position.
   */
  onReference(viewer: IViewer, reference: LngLatAlt): void;

  /**
   * Method called when the renderer has been removed from the
   * viewer. This gives the
   * renderer a chance to clean up gl resources and event
   * listeners.
   * @description [object Object],[object Object],[object Object]
   * @param {IViewer} viewer - The viewer this custom renderer
   * was just removed from.
   * @param {WebGLRenderingContext | WebGL2RenderingContext} context -
   * The viewer's gl context.
   */
  onRemove(viewer: IViewer, context: WebGLRenderingContext): void;

  /**
   * Called during an animation frame allowing the renderer to draw
   * into the GL context. The layer cannot make assumptions
   * about the current GL state.
   * @description Take a look at the
   * [WebGL model view projection article](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection)
   * on MDN for an introduction to the view and projection matrices.
   * @param {WebGLRenderingContext | WebGL2RenderingContext} context The
   * viewer's WebGL context.
   * @param {Array<number>} viewMatrix The viewer's view matrix.
   * @param {Array<number>} projectionMatrix The viewers's projection
   * matrix.
   */
  render(
    context: WebGLRenderingContext,
    viewMatrix: number[],
    projectionMatrix: number[]
  ): void;
}
/**
 * @interface PointOfView
 *
 * Interface that represents the point of view of the viewer.
 */
export interface PointOfView {
  /**
   * Value indicating the current bearing of the viewer
   * measured in degrees clockwise with respect to north.
   * Ranges from 0° to 360°.
   */
  bearing: number;

  /**
   * The camera tilt in degrees, relative to a horizontal plane.
   * Ranges from 90° (directly upwards) to -90° (directly downwards).
   */
  tilt: number;
}
export interface IViewer {
  +dataProvider: IDataProvider;
  +isNavigable: boolean;
  activateCombinedPanning(): void;
  activateComponent(name: string): void;
  activateCover(): void;
  addCustomRenderer(renderer: ICustomRenderer): void;
  attachCustomCameraControls(controls: ICustomCameraControls): void;
  deactivateCombinedPanning(): void;
  deactivateComponent(name: string): void;
  deactivateCover(): void;
  detachCustomCameraControls(): Promise<ICustomCameraControls>;
  fire<T>(type: ViewerEventType, event: T): void;
  getBearing(): Promise<number>;
  getCameraControls(): Promise<$Values<typeof CameraControls>>;
  getCanvas(): HTMLCanvasElement;
  getCanvasContainer(): HTMLDivElement;
  getCenter(): Promise<number[]>;
  getComponent<TComponent: Component<ComponentConfiguration>>(
    name: string
  ): TComponent;
  getContainer(): HTMLElement;
  getFieldOfView(): Promise<number>;
  getImage(): Promise<Image>;
  getPointOfView(): Promise<PointOfView>;
  getPosition(): Promise<LngLat>;
  getReference(): Promise<LngLatAlt>;
  getZoom(): Promise<number>;
  hasCustomCameraControls(controls: ICustomCameraControls): boolean;
  hasCustomRenderer(rendererId: string): boolean;
  moveDir(direction: $Values<typeof NavigationDirection>): Promise<Image>;
  moveTo(imageId: string): Promise<Image>;
  off<T>(type: ViewerEventType, handler: (event: T) => void): void;
  on<T>(type: ViewerEventType, handler: (event: T) => void): void;
  project(lngLat: LngLat): Promise<number[]>;
  projectFromBasic(basicPoint: number[]): Promise<number[]>;
  remove(): void;
  removeCustomRenderer(rendererId: string): void;
  reset(): Promise<void>;
  registerCamera(type: string, ctor: Class<ICamera>): void;
  resize(): void;
  setCameraControls(controls: $Values<typeof CameraControls>): void;
  setCenter(center: number[]): void;
  setDataProvider(provider: IDataProvider): Promise<void>;
  setFieldOfView(fov: number): void;
  setFilter(filter?: FilterExpression): Promise<void>;
  setRenderMode(renderMode: $Values<typeof RenderMode>): void;
  setShader(shader: GLShader): void;
  setTransitionMode(transitionMode: $Values<typeof TransitionMode>): void;
  setAccessToken(accessToken?: string): Promise<void>;
  setZoom(zoom: number): void;
  triggerRerender(): void;
  unproject(pixelPoint: number[]): Promise<LngLat>;
  unprojectToBasic(pixelPoint: number[]): Promise<number[]>;
}
/**
 * @interface
 * @description [object Object],[object Object],[object Object]
 */
export interface ICustomCameraControls {
  /**
   * Method called when the camera controls have been
   * activated and is responsible for moving the
   * viewer's camera and defining its projection. This
   * method gives the camera controls a chance to initialize
   * resources, perform any transitions, and determine
   * initial state.
   * @description [object Object],[object Object],[object Object]
   * @param {IViewer} viewer - The viewer this custom
   * camera controls instance was just added to.
   * @param {Array<number>} viewMatrix - The viewer's view matrix.
   * @param {Array<number>} projectionMatrix - The viewers's
   * projection matrix.
   * @param {LngLatAlt} reference - The viewer's reference.
   */
  onActivate(
    viewer: IViewer,
    viewMatrix: number[],
    projectionMatrix: number[],
    reference: LngLatAlt
  ): void;

  /**
   * Method called for each animation frame.
   * @desdcription Custom camera controls can choose to
   * make updates on each animation frame or only based on
   * user input. Invoking updates on each animation frame is
   * more resource intensive.
   * @param {IViewer} viewer - The viewer this custom
   * camera controls instance is attached to.
   * @param {number} frameId - The request animation frame's id.
   */
  onAnimationFrame(viewer: IViewer, frameId: number): void;

  /**
   * Method called when the camera controls have been
   * attached to the viewer.
   * This gives the camera controls a chance to initialize
   * resources.
   * @description [object Object],[object Object],[object Object]
   * @param {IViewer} viewer - The viewer this custom
   * camera controls instance was just added to.
   */
  onAttach(
    viewer: IViewer,
    viewMatrixCallback: (viewMatrix: number[]) => void,
    projectionMatrixCallback: (projectionMatrix: number[]) => void
  ): void;

  /**
   * Method called when the camera controls have been deactivated.
   * This gives the camera controls a chance to clean up resources
   * and event listeners.
   * @param {IViewer} viewer - The viewer this custom camera controls
   * instance is attached to.
   */
  onDeactivate(viewer: IViewer): void;

  /**
   * Method called when the camera controls have been detached from
   * the viewer. This gives the camera controls a chance to clean
   * up resources and event listeners.
   * @description [object Object],[object Object],[object Object]
   * @param {IViewer} viewer - The viewer this custom camera
   * controls instance was just detached from.
   */
  onDetach(viewer: IViewer): void;

  /**
   * Method called when the viewer's reference position has changed.
   * This gives the custom camera controls a chance to reposition
   * the camera.
   * @description [object Object],[object Object],[object Object],[object Object],[object Object]
   * @param {IViewer} viewer - The viewer this custom renderer
   * is added to.
   * @param {LngLatAlt} reference - The viewer's current
   * reference position.
   */
  onReference(viewer: IViewer, reference: LngLatAlt): void;

  /**
   * Method called when the viewer has been resized.
   * @description Use this method to modify the projection.
   */
  onResize(viewer: IViewer): void;
}
/**
 * Interface for general viewer events.
 */
export interface ViewerEvent {
  /**
   * The viewer object that fired the event.
   */
  target: IViewer;

  /**
   * The event type.
   */
  type: ViewerEventType;
}
/**
 * Interface for bearing viewer events.
 */
export type ViewerBearingEvent = {
  /**
   * Bearing is measured in degrees
   * clockwise with respect to north.
   * @description [object Object],[object Object],[object Object]
   */
  bearing: number,
  type: "bearing",
  ...
} & ViewerEvent;

/**
 * Interface for viewer data loading events.
 * @description Fired when any viewer data (image, mesh, metadata, etc)
 * begins loading or changing asyncronously as a result of viewer
 * navigation.
 *
 * Also fired when the data has finished loading and the viewer
 * is able to perform the navigation.
 */
export type ViewerDataLoadingEvent = {
  /**
   * Indicates if the viewer navigation is awaiting data load.
   */
  loading: boolean,
  type: "dataloading",
  ...
} & ViewerEvent;

/**
 * Interface for mouse-related viewer events.
 * @example ```js
 * // The `click` event is an example of a `ViewerMouseEvent`.
 * // Set up an event listener on the viewer.
 * viewer.on('click', function(e) {
 *   // The event object contains information like the
 *   // coordinates of the point in the viewer that was clicked.
 *   console.log('A click event has occurred at ' + e.lngLat);
 * });
 * ```
 */
export type ViewerMouseEvent = {
  /**
   * The basic coordinates in the current image of the mouse
   * event target.
   * @description [object Object],[object Object],[object Object]
   */
  basicPoint: number[],

  /**
   * The geographic location in the viewer of the mouse event target.
   * @description In some situations the viewer can not determine a valid
   * geographic location for the mouse event target. In that case the
   * geographic coordinates will be `null`.
   */
  lngLat: LngLat,

  /**
   * The pixel coordinates of the mouse event target, relative to
   * the viewer and measured from the top left corner.
   */
  pixelPoint: number[],

  /**
   * The original event that triggered the viewer event.
   */
  originalEvent: MouseEvent,

  /**
   * The event type.
   */
  type:
    | "click"
    | "contextmenu"
    | "dblclick"
    | "mousedown"
    | "mousemove"
    | "mouseout"
    | "mouseover"
    | "mouseup",
  ...
} & ViewerEvent;

/**
 * Interface for navigable viewer events.
 */
export type ViewerNavigableEvent = {
  /**
   * The navigable state indicates if the viewer supports
   * moving, i.e. calling the `moveTo` and `moveDir`
   * methods. The viewer will not be in a navigable state if the cover
   * is activated and the viewer has been supplied a id. When the cover
   * is deactivated or activated without being supplied a id it will
   * be navigable.
   */
  navigable: boolean,
  type: "navigable",
  ...
} & ViewerEvent;

/**
 * Interface for navigation edge viewer events.
 */
export type ViewerNavigationEdgeEvent = {
  /**
   * The viewer's current navigation edge status.
   */
  status: NavigationEdgeStatus,
  type: "sequenceedges" | "spatialedges",
  ...
} & ViewerEvent;

/**
 * Interface for viewer image events.
 */
export type ViewerImageEvent = {
  /**
   * The viewer's current image.
   */
  image: Image | null,
  type: "image",
  ...
} & ViewerEvent;

/**
 * Interface for viewer state events.
 * @example ```js
 * // The `fov` event is an example of a `ViewerStateEvent`.
 * // Set up an event listener on the viewer.
 * viewer.on('fov', function(e) {
 *   console.log('A fov event has occured');
 * });
 * ```
 */
export type ViewerStateEvent = {
  /**
   * The event type.
   */
  type: "fov" | "moveend" | "movestart" | "position" | "pov" | "remove",
  ...
} & ViewerEvent;
export type ComponentName =
  | "attribution"
  | "bearing"
  | "cache"
  | "cover"
  | "direction"
  | "image"
  | "keyboard"
  | "marker"
  | "pointer"
  | "popup"
  | "sequence"
  | "slider"
  | "spatial"
  | "tag"
  | "zoom";
export type FallbackComponentName = "imagefallback" | "navigationfallback";
/**
 * Interface for viewer load events.
 * @description Fired immediately after all necessary resources
 * have been downloaded and the first visually complete
 * rendering of the viewer has occurred.
 *
 * The visually complete rendering does not include custom
 * renderers.
 *
 * This event is only fired for viewer configurations where
 * the WebGL context is created, i.e. not when using the
 * fallback functionality only.
 * @example ```js
 * // Set up an event listener on the viewer.
 * viewer.on('load', function(e) {
 *   console.log('A load event has occured');
 * });
 * ```
 */
export type ViewerLoadEvent = {
  type: "load",
  ...
} & ViewerEvent;

/**
 * Interface for viewer reference events.
 */
export type ViewerReferenceEvent = {
  /**
   * The viewer's current reference.
   */
  reference: LngLatAlt,
  type: "reference",
  ...
} & ViewerEvent;

/**
 * @class Viewer
 * @classdesc The Viewer object represents the navigable image viewer.
 * Create a Viewer by specifying a container, client ID, image ID and
 * other options. The viewer exposes methods and events for programmatic
 * interaction.
 *
 * In the case of asynchronous methods, MapillaryJS returns promises to
 * the results. Notifications are always emitted through JavaScript events.
 */
declare class Viewer implements IEventEmitter, IViewer {
  /**
   * Create a new viewer instance.
   * @description The `Viewer` object represents the street imagery
   * viewer on your web page. It exposes methods and properties that
   * you can use to programatically change the view, and fires
   * events as users interact with it.
   *
   * It is possible to initialize the viewer with or
   * without a ID.
   *
   * When you want to show a specific image in the viewer from
   * the start you should initialize it with a ID.
   *
   * When you do not know the first image ID at implementation
   * time, e.g. in a map-viewer application you should initialize
   * the viewer without a ID and call `moveTo` instead.
   *
   * When initializing with an ID the viewer is bound to that ID
   * until the image for that ID has been successfully loaded.
   * Also, a cover with the image of the ID will be shown.
   * If the data for that ID can not be loaded because the ID is
   * faulty or other errors occur it is not possible to navigate
   * to another ID because the viewer is not navigable. The viewer
   * becomes navigable when the data for the ID has been loaded and
   * the image is shown in the viewer. This way of initializing
   * the viewer is mostly for embedding in blog posts and similar
   * where one wants to show a specific image initially.
   *
   * If the viewer is initialized without a ID (with null or
   * undefined) it is not bound to any particular ID and it is
   * possible to move to any ID with `viewer.moveTo("<my-image-id>")`.
   * If the first move to a ID fails it is possible to move to another
   * ID. The viewer will show a black background until a move
   * succeeds. This way of intitializing is suited for a map-viewer
   * application when the initial ID is not known at implementation
   * time.
   * @param {ViewerOptions} options - Optional configuration object
   * specifying Viewer's and the components' initial setup.
   * @example ```js
   * var viewer = new Viewer({
   *     accessToken: "<my-access-token>",
   *     container: "<my-container-id>",
   * });
   * ```
   */
  constructor(options: ViewerOptions): this;

  /**
   * Returns the data provider used by the viewer to fetch
   * all contracts, ents, and buffers.
   * @description [object Object],[object Object],[object Object]
   * @returns {IDataProvider} The viewer's data provider.
   */
  dataProvider: IDataProvider;

  /**
   * Return a boolean indicating if the viewer is in a navigable state.
   * @description [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
   * @returns {boolean} Boolean indicating whether the viewer is navigable.
   */
  isNavigable: boolean;

  /**
   * Activate the combined panning functionality.
   * @description The combined panning functionality is active by default.
   */
  activateCombinedPanning(): void;

  /**
   * Activate a component.
   * @param {string} name - Name of
   * the component which will become active.
   * @example ```js
   * viewer.activateComponent("marker");
   * ```
   */
  activateComponent(name: string): void;

  /**
   * Activate the cover (deactivates all other components).
   */
  activateCover(): void;

  /**
   * Add a custom renderer to the viewer's rendering pipeline.
   * @description During a render pass, custom renderers
   * are called in the order they were added.
   * @param renderer - The custom renderer implementation.
   */
  addCustomRenderer(renderer: ICustomRenderer): void;

  /**
   * Attach custom camera controls to control the viewer's
   * camera pose and projection.
   * @description [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
   * @param controls - The custom camera controls implementation.
   * @throws {MapillaryError} When camera controls attached
   * are already attached to the viewer.
   */
  attachCustomCameraControls(controls: ICustomCameraControls): void;

  /**
   * Deactivate the combined panning functionality.
   * @description Deactivating the combined panning functionality
   * could be needed in scenarios involving sequence only navigation.
   */
  deactivateCombinedPanning(): void;

  /**
   * Deactivate a component.
   * @param {string} name - Name
   * of component which become inactive.
   * @example ```js
   * viewer.deactivateComponent("pointer");
   * ```
   */
  deactivateComponent(name: string): void;

  /**
   * Deactivate the cover (activates all components marked as active).
   */
  deactivateCover(): void;

  /**
   * Detach a previously attached custom camera control
   * instance from the viewer.
   * @description If no custom camera control instance
   * has previously been attached, calling this method
   * has no effect.
   *
   * Already attached custom camera controls need to
   * be detached before attaching another custom camera
   * control instance.
   */
  detachCustomCameraControls(): Promise<ICustomCameraControls>;

  /**
   * Get the bearing of the current viewer camera.
   * @description The bearing depends on how the camera
   * is currently rotated and does not correspond
   * to the compass angle of the current image if the view
   * has been panned.
   *
   * Bearing is measured in degrees clockwise with respect to
   * north.
   * @returns {Promise<number>} Promise to the bearing
   * of the current viewer camera.
   * @example ```js
   * viewer.getBearing().then(b => { console.log(b); });
   * ```
   */
  getBearing(): Promise<number>;

  /**
 * Get the viewer's camera control mode.
 * @description The camera control mode determines
 * how the camera is controlled when the viewer
 * receives pointer and keyboard input.
 * @returns {$Values<
                typeof
                CameraControls>} controls - Camera control mode.
 * @example ```js
 * viewer.getCameraControls().then(c => { console.log(c); });
 * ```
 */
  getCameraControls(): Promise<$Values<typeof CameraControls>>;

  /**
   * Returns the viewer's canvas element.
   * @description This is the element onto which the viewer renders
   * the WebGL content.
   * @returns {HTMLCanvasElement} The viewer's canvas element, or
   * null or not initialized.
   */
  getCanvas(): HTMLCanvasElement;

  /**
   * Returns the HTML element containing the viewer's canvas element.
   * @description This is the element to which event bindings for viewer
   * interactivity (such as panning and zooming) are attached.
   * @returns {HTMLDivElement} The container for the viewer's
   * canvas element.
   */
  getCanvasContainer(): HTMLDivElement;

  /**
   * Get the basic coordinates of the current image that is
   * at the center of the viewport.
   * @description Basic coordinates are 2D coordinates on the [0, 1] interval
   * and have the origin point, (0, 0), at the top left corner and the
   * maximum value, (1, 1), at the bottom right corner of the original
   * image.
   * @returns {Promise<number[]>} Promise to the basic coordinates
   * of the current image at the center for the viewport.
   * @example ```js
   * viewer.getCenter().then(c => { console.log(c); });
   * ```
   */
  getCenter(): Promise<number[]>;

  /**
   * Get a component.
   * @param {string} name - Name of component.
   * @returns {Component} The requested component.
   * @example ```js
   * var pointerComponent = viewer.getComponent("pointer");
   * ```
   */
  getComponent<TComponent: Component<ComponentConfiguration>>(
    name: string
  ): TComponent;

  /**
   * Returns the viewer's containing HTML element.
   * @returns {HTMLElement} The viewer's container.
   */
  getContainer(): HTMLElement;

  /**
   * Get the viewer's current vertical field of view.
   * @description The vertical field of view rendered on the viewer canvas
   * measured in degrees.
   * @returns {Promise<number>} Promise to the current field of view
   * of the viewer camera.
   * @example ```js
   * viewer.getFieldOfView().then(fov => { console.log(fov); });
   * ```
   */
  getFieldOfView(): Promise<number>;

  /**
   * Get the viewer's current image.
   * @returns {Promise<Image>} Promise to the current image.
   * @example ```js
   * viewer.getImage().then(image => { console.log(image.id); });
   * ```
   */
  getImage(): Promise<Image>;

  /**
   * Get the viewer's current point of view.
   * @returns {Promise<PointOfView>} Promise to the current point of view
   * of the viewer camera.
   * @example ```js
   * viewer.getPointOfView().then(pov => { console.log(pov); });
   * ```
   */
  getPointOfView(): Promise<PointOfView>;

  /**
   * Get the viewer's current position
   * @returns {Promise<LngLat>} Promise to the viewers's current
   * position.
   * @example ```js
   * viewer.getPosition().then(pos => { console.log(pos); });
   * ```
   */
  getPosition(): Promise<LngLat>;

  /**
   * Get the viewer's current reference position.
   * @description The reference position specifies the origin in
   * the viewer's topocentric coordinate system.
   * @returns {Promise<LngLatAlt>} Promise to the reference position.
   * @example ```js
   * viewer.getReference().then(reference => { console.log(reference); });
   * ```
   */
  getReference(): Promise<LngLatAlt>;

  /**
   * Get the image's current zoom level.
   * @returns {Promise<number>} Promise to the viewers's current
   * zoom level.
   * @example ```js
   * viewer.getZoom().then(z => { console.log(z); });
   * ```
   */
  getZoom(): Promise<number>;

  /**
   * Check if a controls instance is the camera controls that are
   * currently attached to the viewer.
   * @param {ICustomCameraControls} controls - Camera controls instance.
   * @returns {boolean} Value indicating whether the controls instance
   * is currently attached.
   */
  hasCustomCameraControls(controls: ICustomCameraControls): boolean;

  /**
   * Check if a custom renderer has been added to the viewer's
   * rendering pipeline.
   * @param {string} id - Unique ID of the custom renderer.
   * @returns {boolean} Value indicating whether the customer
   * renderer has been added.
   */
  hasCustomRenderer(rendererId: string): boolean;

  /**
 * Navigate in a given direction.
 * @param {$Values<
                typeof
                NavigationDirection>} direction - Direction in which which to move.
 * @returns {Promise<Image>} Promise to the image that was navigated to.
 * @throws If the current image does not have the edge direction
 * or the edges has not yet been cached.
 * @throws Propagates any IO errors to the caller.
 * @throws When viewer is not navigable.
 * @throws [object Object],[object Object],[object Object]
 * @example ```js
 * viewer.moveDir(NavigationDirection.Next).then(
 *     image => { console.log(image); },
 *     error => { console.error(error); });
 * ```
 */
  moveDir(direction: $Values<typeof NavigationDirection>): Promise<Image>;

  /**
   * Navigate to a given image ID.
   * @param {string} imageId - Id of the image to move to.
   * @returns {Promise<Image>} Promise to the image that was navigated to.
   * @throws Propagates any IO errors to the caller.
   * @throws When viewer is not navigable.
   * @throws [object Object],[object Object],[object Object]
   * @example ```js
   * viewer.moveTo("<my-image-id>").then(
   *     image => { console.log(image); },
   *     error => { console.error(error); });
   * ```
   */
  moveTo(imageId: string): Promise<Image>;

  /**
   * Project geodetic coordinates to canvas pixel coordinates.
   * @description The geodetic coordinates may not always correspond to pixel
   * coordinates, e.g. if the geodetic coordinates have a position behind the
   * viewer camera. In the case of no correspondence the returned value will
   * be `null`.
   *
   * If the distance from the viewer camera position to the provided
   * longitude-latitude is more than 1000 meters `null` will be returned.
   *
   * The projection is performed from the ground plane, i.e.
   * the altitude with respect to the ground plane for the geodetic
   * point is zero.
   *
   * Note that whenever the camera moves, the result of the method will be
   * different.
   * @param {LngLat} lngLat - Geographical coordinates to project.
   * @returns {Promise<Array<number>>} Promise to the pixel coordinates corresponding
   * to the lngLat.
   * @example ```js
   * viewer.project({ lat: 0, lng: 0 })
   *     .then(pixelPoint => {
   *          if (!pixelPoint) {
   *              console.log("no correspondence");
   *          }
   *
   *          console.log(pixelPoint);
   *     });
   * ```
   */
  project(lngLat: LngLat): Promise<number[]>;

  /**
   * Project basic image coordinates for the current image to canvas pixel
   * coordinates.
   * @description The basic image coordinates may not always correspond to a
   * pixel point that lies in the visible area of the viewer container. In the
   * case of no correspondence the returned value can be `null`.
   * @param {Array<number>} basicPoint - Basic images coordinates to project.
   * @returns {Promise<Array<number>>} Promise to the pixel coordinates corresponding
   * to the basic image point.
   * @example ```js
   * viewer.projectFromBasic([0.3, 0.7])
   *     .then(pixelPoint => { console.log(pixelPoint); });
   * ```
   */
  projectFromBasic(basicPoint: number[]): Promise<number[]>;

  /**
   * Register a class constructor for a camera type.
   *
   * @description The Viewer will invoke the camera
   * constructor each time that camera type should be
   * instantiated.
   *
   * @param {string} type - Camera type.
   * @param ctor - Contructor for Camera class implementing the
   * {@link ICamera} interface.
   *
   * @example
   * ```js
   * import {MyCamera} from "./MyCameraClasses";
   * viewer.registerCamera("my-camera-type", MyCamera);
   * ```
   */
  registerCamera(type: string, ctor: Class<ICamera>): void;

  /**
   * 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;

  /**
   * Reset the viewer's cache.
   * @description All images in the viewer's cache at the moment of the
   * reset will be disposed.
   * @returns {Promise<void>} Promise that resolves when viewer's cache
   * has been reset.
   * @throws When viewer is not navigable.
   * @example ```js
   * viewer.reset()
   *     .then(() => { console.log("viewer reset"); });
   * ```
   */
  reset(): Promise<void>;

  /**
   * Detect the viewer's new width and height and resize it
   * manually.
   * @description [object Object],[object Object],[object Object],[object Object],[object Object]
   * @example ```js
   * viewer.resize();
   * ```
   */
  resize(): void;

  /**
 * Set the viewer's camera control mode.
 * @description The camera control mode determines
 * how the camera is controlled when the viewer
 * receives pointer and keyboard input.
 *
 * Changing the camera control mode is not possible
 * when the slider component is active and attempts
 * to do so will be ignored.
 *
 * @param {$Values<
                typeof
                CameraControls>} controls - Camera control mode.
 * @example ```js
 * viewer.setCameraControls(CameraControls.Street);
 * ```
 */
  setCameraControls(controls: $Values<typeof CameraControls>): void;

  /**
   * Set the basic coordinates of the current image to be in the
   * center of the viewport.
   * @description Basic coordinates are 2D coordinates on the [0, 1] interval
   * and has the origin point, (0, 0), at the top left corner and the
   * maximum value, (1, 1), at the bottom right corner of the original
   * image.
   * @param {number[]} The basic coordinates of the current
   * image to be at the center for the viewport.
   * @example ```js
   * viewer.setCenter([0.5, 0.5]);
   * ```
   */
  setCenter(center: number[]): void;

  /**
   * Set a new data provider instance.
   * @description Resets the viewer's cache (see Viewer.reset).
   * @returns {Promise<void>} Promise that resolves when viewer's data
   * provider has been set.
   * @throws When viewer is not navigable.
   * @example ```js
   * const myDataProvider = new MyDataProvider();
   * viewer.setDataProvider(myDataProvider)
   *     .then(() => { console.log("data provider set"); });
   * ```
   */
  setDataProvider(provider: IDataProvider): Promise<void>;

  /**
   * Set the viewer's current vertical field of view.
   * @description Sets the vertical field of view rendered
   * on the viewer canvas measured in degrees. The value
   * will be clamped to be able to set a valid zoom level
   * based on the projection model of the current image and
   * the viewer's current render mode.
   * @param {number} fov - Vertical field of view in degrees.
   * @example ```js
   * viewer.setFieldOfView(45);
   * ```
   */
  setFieldOfView(fov: number): void;

  /**
   * Set the filter selecting images to use when calculating
   * the spatial edges.
   * @description [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
   * @param {FilterExpression} [filter] - The filter expression.
   * Applied filter is cleared if omitted.
   * @returns {Promise<void>} Promise that resolves after filter is applied.
   * @example ```js
   * // Examples
   * viewer.setFilter(["==", "cameraType", "spherical"]);
   * viewer.setFilter([">=", "capturedAt", <my-time-stamp>]);
   * viewer.setFilter(["in", "sequenceId", "<sequence-id-1>", "<sequence-id-2>"]);
   * ```
   */
  setFilter(filter?: FilterExpression): Promise<void>;

  /**
 * Set the viewer's render mode.
 * @param {$Values<
                typeof
                RenderMode>} renderMode - Render mode.
 * @example ```js
 * viewer.setRenderMode(RenderMode.Letterbox);
 * ```
 */
  setRenderMode(renderMode: $Values<typeof RenderMode>): void;

  /**
   * Set the viewer's texture shader.
   *
   * @description The shader will be used for all registered projection
   * models.
   *
   * @param {GLShader} shader - Texture shader.
   *
   * @example
   * ```js
   * let myShader = {
   *     fragment: '<My fragment GLSL>',
   *     vertex: '<My vertex GLSL>',
   * };
   * viewer.setShader(myShader);
   * ```
   */
  setShader(shader: GLShader): void;

  /**
 * Set the viewer's transition mode.
 * @param {$Values<
                typeof
                TransitionMode>} transitionMode - Transition mode.
 * @example ```js
 * viewer.setTransitionMode(TransitionMode.Instantaneous);
 * ```
 */
  setTransitionMode(transitionMode: $Values<typeof TransitionMode>): void;

  /**
   * Set an access token for authenticated API requests of protected
   * resources.
   *
   * The token may be a user access token or a client access token.
   * @description [object Object],[object Object],[object Object]
   * @param {string} [accessToken] accessToken - Optional user
   * access token or client access token.
   * @returns {Promise<void>} Promise that resolves after token
   * is set.
   * @throws When viewer is not navigable.
   * @example ```js
   * viewer.setAccessToken("<my access token>")
   *     .then(() => { console.log("user token set"); });
   * ```
   */
  setAccessToken(accessToken?: string): Promise<void>;

  /**
   * Set the image's current zoom level.
   * @description Possible zoom level values are on the [0, 3] interval.
   * Zero means zooming out to fit the image to the view whereas three
   * shows the highest level of detail.
   * @param {number} The image's current zoom level.
   * @example ```js
   * viewer.setZoom(2);
   * ```
   */
  setZoom(zoom: number): void;

  /**
   * Trigger the rendering of a single frame.
   * @description Use this method with custom renderers to
   * force the viewer to rerender when the custom content
   * changes. Calling this multiple times before the next
   * frame is rendered will still result in only a single
   * frame being rendered.
   */
  triggerRerender(): void;

  /**
   * Unproject canvas pixel coordinates to geodetic
   * coordinates.
   * @description The pixel point may not always correspond to geodetic
   * coordinates. In the case of no correspondence the returned value will
   * be `null`.
   *
   * The unprojection to a lngLat will be performed towards the ground plane, i.e.
   * the altitude with respect to the ground plane for the returned lngLat is zero.
   * @param {Array<number>} pixelPoint - Pixel coordinates to unproject.
   * @returns {Promise<LngLat>} Promise to the lngLat corresponding to the pixel point.
   * @example ```js
   * viewer.unproject([100, 100])
   *     .then(lngLat => { console.log(lngLat); });
   * ```
   */
  unproject(pixelPoint: number[]): Promise<LngLat>;

  /**
   * Unproject canvas pixel coordinates to basic image coordinates for the
   * current image.
   * @description The pixel point may not always correspond to basic image
   * coordinates. In the case of no correspondence the returned value will
   * be `null`.
   * @param {Array<number>} pixelPoint - Pixel coordinates to unproject.
   * @returns {Promise<LngLat>} Promise to the basic coordinates corresponding
   * to the pixel point.
   * @example ```js
   * viewer.unprojectToBasic([100, 100])
   *     .then(basicPoint => { console.log(basicPoint); });
   * ```
   */
  unprojectToBasic(pixelPoint: number[]): Promise<number[]>;

  fire<T>(type: string, event: T): void;
  off<T>(type: string, handler: (event: T) => void): void;
  on<T>(type: string, handler: (event: T) => void): void;
}
/**
 * @class MapillaryError
 * @classdesc Generic Mapillary error.
 */
declare class MapillaryError extends Error {
  constructor(message?: string): this;
}
/**
 * @class CancelMapillaryError
 * @classdesc Error thrown when a move to request has been
 * cancelled before completing because of a subsequent request.
 */
declare class CancelMapillaryError extends MapillaryError {
  constructor(message?: string): this;
}
declare class ArgumentMapillaryError extends MapillaryError {
  constructor(message?: string): this;
}
declare class GraphMapillaryError extends MapillaryError {
  constructor(message: string): this;
}
declare class ConfigurationService {
  constructor(options: ViewerOptions): this;
}
declare class Container {
  id: string;
  renderService: RenderService;
  glRenderer: GLRenderer;
  domRenderer: DOMRenderer;
  keyboardService: KeyboardService;
  mouseService: MouseService;
  touchService: TouchService;
  spriteService: SpriteService;
  +configurationService: ConfigurationService;
  constructor(
    options: ViewerOptions,
    stateService: StateService,
    dom?: DOM
  ): this;
  canvas: HTMLCanvasElement;
  canvasContainer: HTMLDivElement;
  container: HTMLElement;
  domContainer: HTMLDivElement;
  remove(): void;
}
declare type Func<T, TResult> = (item: T) => TResult;
declare type FilterFunction = Func<Image, boolean>;
/**
 * @class Filter
 * @classdesc Represents a class for creating image filters. Implementation and
 * definitions based on https://github.com/mapbox/feature-filter.
 */
declare class FilterCreator {
  /**
   * Create a filter from a filter expression.
   * @description The following filters are supported:
   *
   * Comparison
   * `==`
   * `!=`
   * `<`
   * `<=`
   * `>`
   * `>=`
   *
   * Set membership
   * `in`
   * `!in`
   *
   * Combining
   * `all`
   * @param {FilterExpression} filter - Comparison, set membership or combinding filter
   * expression.
   * @returns {FilterFunction} Function taking a image and returning a boolean that
   * indicates whether the image passed the test or not.
   */
  createFilter(filter: FilterExpression): FilterFunction;
}
/**
 * @class GraphCalculator
 * @classdesc Represents a calculator for graph entities.
 */
declare class GraphCalculator {
  /**
   * Get the bounding box corners for a circle with radius of a threshold
   * with center in a geodetic position.
   * @param {LngLat} lngLat - Longitude, latitude to encode.
   * @param {number} threshold - Threshold distance from the position in meters.
   * @returns {Array<LngLat>} The south west and north east corners of the
   * bounding box.
   */
  boundingBoxCorners(lngLat: LngLat, threshold: number): [LngLat, LngLat];

  /**
   * Convert a compass angle to an angle axis rotation vector.
   * @param {number} compassAngle - The compass angle in degrees.
   * @param {number} orientation - The orientation of the original image.
   * @returns {Array<number>} Angle axis rotation vector.
   */
  rotationFromCompass(compassAngle: number, orientation: number): number[];
}
/**
 * @class Sequence
 * @classdesc Represents a sequence of ordered images.
 */
declare class Sequence {
  /**
   * Create a new sequene instance.
   * @param {SequenceEnt} sequence - Raw sequence data.
   */
  constructor(sequence: SequenceEnt): this;

  /**
   * Get id.
   * @returns {string} Unique sequence id.
   */
  id: string;

  /**
   * Get ids.
   * @returns {Array<string>} Array of ordered image ids in the sequence.
   */
  imageIds: string[];

  /**
   * Dispose the sequence.
   * @description Disposes all cached assets.
   */
  dispose(): void;

  /**
   * Find the next image id in the sequence with respect to
   * the provided image id.
   * @param {string} id - Reference image id.
   * @returns {string} Next id in sequence if it exists, null otherwise.
   */
  findNext(id: string): string;

  /**
   * Find the previous image id in the sequence with respect to
   * the provided image id.
   * @param {string} id - Reference image id.
   * @returns {string} Previous id in sequence if it exists, null otherwise.
   */
  findPrev(id: string): string;
}
/**
 * Interface for graph configuration.
 * @interface GraphConfiguration
 */
export interface GraphConfiguration {
  /**
   * The maximum number of cached sequences left
   * after uncache.
   */
  maxSequences: number;

  /**
   * The maximum number of unused cached images left
   * after uncache.
   */
  maxUnusedImages: number;

  /**
   * The maximum number of unused pre-stored cached images left
   * after uncache.
   */
  maxUnusedPreStoredImages: number;

  /**
   * The maximum number of unused cached tiles left
   * after uncache.
   */
  maxUnusedTiles: number;
}
declare class EdgeCalculatorCoefficients {
  sphericalPreferredDistance: number;
  sphericalMotion: number;
  sphericalSequencePenalty: number;
  sphericalMergeCCPenalty: number;
  stepPreferredDistance: number;
  stepMotion: number;
  stepRotation: number;
  stepSequencePenalty: number;
  stepMergeCCPenalty: number;
  similarDistance: number;
  similarRotation: number;
  turnDistance: number;
  turnMotion: number;
  turnSequencePenalty: number;
  turnMergeCCPenalty: number;
  constructor(): this;
}
declare interface SphericalDirection {
  direction: $Values<typeof NavigationDirection>;
  prev: $Values<typeof NavigationDirection>;
  next: $Values<typeof NavigationDirection>;
  directionChange: number;
}
declare interface StepDirection {
  direction: $Values<typeof NavigationDirection>;
  motionChange: number;
  useFallback: boolean;
}
declare interface TurnDirection {
  direction: $Values<typeof NavigationDirection>;
  directionChange: number;
  motionChange?: number;
}
declare class EdgeCalculatorDirections {
  steps: {
    [direction: string]: StepDirection,
    ...
  };
  turns: {
    [direction: string]: TurnDirection,
    ...
  };
  spherical: {
    [direction: string]: SphericalDirection,
    ...
  };
  constructor(): this;
}
declare class EdgeCalculatorSettings {
  sphericalMinDistance: number;
  sphericalMaxDistance: number;
  sphericalPreferredDistance: number;
  sphericalMaxItems: number;
  sphericalMaxStepTurnChange: number;
  rotationMaxDistance: number;
  rotationMaxDirectionChange: number;
  rotationMaxVerticalDirectionChange: number;
  similarMaxDirectionChange: number;
  similarMaxDistance: number;
  similarMinTimeDifference: number;
  stepMaxDistance: number;
  stepMaxDirectionChange: number;
  stepMaxDrift: number;
  stepPreferredDistance: number;
  turnMaxDistance: number;
  turnMaxDirectionChange: number;
  turnMaxRigDistance: number;
  turnMinRigDirectionChange: number;
  constructor(): this;
  maxDistance: number;
}
/**
 * Interface that describes the properties for a image that is the destination of a
 * potential edge from an origin image.
 * @interface PotentialEdge
 */
declare interface PotentialEdge {
  /**
   * Timestamp when the image was captured.
   * @property {number} capturedAt
   */
  capturedAt: number;

  /**
   * Change in viewing direction with respect to the origin image.
   * @property {number} directionChange
   */
  directionChange: number;

  /**
   * Distance to the origin image.
   * @property {number} distance
   */
  distance: number;

  /**
   * Determines if the destination image is spherical.
   * @property {boolean} spherical
   */
  spherical: boolean;

  /**
   * Unique image id.
   * @property {string} id
   */
  id: string;

  /**
   * Change in motion with respect to the viewing direction
   * of the origin image.
   * @property {number} motionChange
   */
  motionChange: number;

  /**
   * General camera rotation with respect to the origin image.
   * @property {number} rotation
   */
  rotation: number;

  /**
   * Determines if the origin and destination image are considered
   * to be in the same merge connected component.
   * @property {boolean} sameMergeCC
   */
  sameMergeCC: boolean;

  /**
   * Determines if the origin and destination image are in the
   * same sequence.
   * @property {boolean} sameSequence
   */
  sameSequence: boolean;

  /**
   * Determines if the origin and destination image have been captured
   * by the same user.
   * @property {boolean} sameUser
   */
  sameUser: boolean;

  /**
   * Determines which sequence the destination image of the potential edge
   * belongs to.
   * @property {string} sequenceId
   */
  sequenceId: string;

  /**
   * Change in viewing direction with respect to the XY-plane.
   * @property {number} verticalDirectionChange
   */
  verticalDirectionChange: number;

  /**
   * The angle between motion vector and the XY-plane
   * @property {number} verticalMotion
   */
  verticalMotion: number;

  /**
   * The counter clockwise horizontal rotation angle from
   * the X-axis in a spherical coordiante system.
   * @property {number} worldMotionAzimuth
   */
  worldMotionAzimuth: number;
}
/**
 * @class EdgeCalculator
 * @classdesc Represents a class for calculating node edges.
 */
declare class EdgeCalculator {
  /**
   * Create a new edge calculator instance.
   * @param {EdgeCalculatorSettings} settings - Settings struct.
   * @param {EdgeCalculatorDirections} directions - Directions struct.
   * @param {EdgeCalculatorCoefficients} coefficients - Coefficients struct.
   */
  constructor(
    settings?: EdgeCalculatorSettings,
    directions?: EdgeCalculatorDirections,
    coefficients?: EdgeCalculatorCoefficients
  ): this;

  /**
   * Returns the potential edges to destination nodes for a set
   * of nodes with respect to a source node.
   * @param {Image} node - Source node.
   * @param {Array<Image>} nodes - Potential destination nodes.
   * @param {Array<string>} fallbackIds - Ids for destination nodes
   * that should be returned even if they do not meet the
   * criteria for a potential edge.
   * @throws {ArgumentMapillaryError} If node is not full.
   */
  getPotentialEdges(
    node: Image,
    potentialImages: Image[],
    fallbackIds: string[]
  ): PotentialEdge[];

  /**
   * Computes the sequence edges for a node.
   * @param {Image} node - Source node.
   * @throws {ArgumentMapillaryError} If node is not full.
   */
  computeSequenceEdges(node: Image, sequence: Sequence): NavigationEdge[];

  /**
   * Computes the similar edges for a node.
   * @description Similar edges for perspective images
   * look roughly in the same direction and are positioned closed to the node.
   * Similar edges for spherical only target other spherical.
   * @param {Image} node - Source node.
   * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
   * @throws {ArgumentMapillaryError} If node is not full.
   */
  computeSimilarEdges(
    node: Image,
    potentialEdges: PotentialEdge[]
  ): NavigationEdge[];

  /**
   * Computes the step edges for a perspective node.
   * @description Step edge targets can only be other perspective nodes.
   * Returns an empty array for spherical.
   * @param {Image} node - Source node.
   * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
   * @param {string} prevId - Id of previous node in sequence.
   * @param {string} nextId - Id of next node in sequence.
   * @throws {ArgumentMapillaryError} If node is not full.
   */
  computeStepEdges(
    node: Image,
    potentialEdges: PotentialEdge[],
    prevId: string,
    nextId: string
  ): NavigationEdge[];

  /**
   * Computes the turn edges for a perspective node.
   * @description Turn edge targets can only be other perspective images.
   * Returns an empty array for spherical.
   * @param {Image} node - Source node.
   * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
   * @throws {ArgumentMapillaryError} If node is not full.
   */
  computeTurnEdges(
    node: Image,
    potentialEdges: PotentialEdge[]
  ): NavigationEdge[];

  /**
   * Computes the spherical edges for a perspective node.
   * @description Perspective to spherical edge targets can only be
   * spherical nodes. Returns an empty array for spherical.
   * @param {Image} node - Source node.
   * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
   * @throws {ArgumentMapillaryError} If node is not full.
   */
  computePerspectiveToSphericalEdges(
    node: Image,
    potentialEdges: PotentialEdge[]
  ): NavigationEdge[];

  /**
   * Computes the spherical and step edges for a spherical node.
   * @description Spherical to spherical edge targets can only be
   * spherical nodes. spherical to step edge targets can only be perspective
   * nodes.
   * @param {Image} node - Source node.
   * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
   * @throws {ArgumentMapillaryError} If node is not full.
   */
  computeSphericalEdges(
    node: Image,
    potentialEdges: PotentialEdge[]
  ): NavigationEdge[];
}
/**
 * @class API
 * @classdesc Provides methods for access to the API.
 */
declare class APIWrapper {
  constructor(_data: IDataProvider): this;
  data: IDataProvider;
  setAccessToken(accessToken?: string): void;
}
/**
 * @class Graph
 * @classdesc Represents a graph of nodes with edges.
 */
declare class Graph {
  /**
   * Create a new graph instance.
   * @param {APIWrapper} [api] - API instance for retrieving data.
   * @param {rbush.RBush<NodeIndexItem>} [nodeIndex] - Node index for fast spatial retreival.
   * @param {GraphCalculator} [graphCalculator] - Instance for graph calculations.
   * @param {EdgeCalculator} [edgeCalculator] - Instance for edge calculations.
   * @param {FilterCreator} [filterCreator] - Instance for  filter creation.
   * @param {GraphConfiguration} [configuration] - Configuration struct.
   */
  constructor(
    api: APIWrapper,
    nodeIndex?: mixed,
    graphCalculator?: GraphCalculator,
    edgeCalculator?: EdgeCalculator,
    filterCreator?: FilterCreator,
    configuration?: GraphConfiguration
  ): this;
  static register(spatialIndex: (...args: mixed[]) => mixed): void;

  /**
   * Get api.
   * @returns {APIWrapper} The API instance used by
   * the graph.
   */
  api: APIWrapper;

  /**
   * Cache sequence edges for a node.
   * @param {string} key - Key of node.
   * @throws {GraphMapillaryError} When the operation is not valid on the
   * current graph.
   */
  cacheSequenceEdges(key: string): void;

  /**
   * Cache spatial edges for a node.
   * @param {string} key - Key of node.
   * @throws {GraphMapillaryError} When the operation is not valid on the
   * current graph.
   */
  cacheSpatialEdges(key: string): void;

  /**
   * Initialize the cache for a node.
   * @param {string} key - Key of node.
   * @throws {GraphMapillaryError} When the operation is not valid on the
   * current graph.
   */
  initializeCache(key: string): void;

  /**
   * Get a value indicating if the graph is fill caching a node.
   * @param {string} key - Key of node.
   * @returns {boolean} Value indicating if the node is being fill cached.
   */
  isCachingFill(key: string): boolean;

  /**
   * Get a value indicating if the graph is fully caching a node.
   * @param {string} key - Key of node.
   * @returns {boolean} Value indicating if the node is being fully cached.
   */
  isCachingFull(key: string): boolean;

  /**
   * Get a value indicating if the graph is caching a sequence of a node.
   * @param {string} key - Key of node.
   * @returns {boolean} Value indicating if the sequence of a node is
   * being cached.
   */
  isCachingNodeSequence(key: string): boolean;

  /**
   * Get a value indicating if the graph is caching a sequence.
   * @param {string} sequenceKey - Key of sequence.
   * @returns {boolean} Value indicating if the sequence is
   * being cached.
   */
  isCachingSequence(sequenceKey: string): boolean;

  /**
   * Get a value indicating if the graph is caching sequence nodes.
   * @param {string} sequenceKey - Key of sequence.
   * @returns {boolean} Value indicating if the sequence nodes are
   * being cached.
   */
  isCachingSequenceNodes(sequenceKey: string): boolean;

  /**
   * Get a value indicating if the graph is caching the tiles
   * required for calculating spatial edges of a node.
   * @param {string} key - Key of node.
   * @returns {boolean} Value indicating if the tiles of
   * a node are being cached.
   */
  isCachingTiles(key: string): boolean;

  /**
   * Get a value indicating if the cache has been initialized
   * for a node.
   * @param {string} key - Key of node.
   * @returns {boolean} Value indicating if the cache has been
   * initialized for a node.
   */
  hasInitializedCache(key: string): boolean;

  /**
   * Get a value indicating if a node exist in the graph.
   * @param {string} key - Key of node.
   * @returns {boolean} Value indicating if a node exist in the graph.
   */
  hasNode(key: string): boolean;

  /**
   * Get a value indicating if a node sequence exist in the graph.
   * @param {string} key - Key of node.
   * @returns {boolean} Value indicating if a node sequence exist
   * in the graph.
   */
  hasNodeSequence(key: string): boolean;

  /**
   * Get a value indicating if a sequence exist in the graph.
   * @param {string} sequenceKey - Key of sequence.
   * @returns {boolean} Value indicating if a sequence exist
   * in the graph.
   */
  hasSequence(sequenceKey: string): boolean;

  /**
   * Get a value indicating if sequence nodes has been cached in the graph.
   * @param {string} sequenceKey - Key of sequence.
   * @returns {boolean} Value indicating if a sequence nodes has been
   * cached in the graph.
   */
  hasSequenceNodes(sequenceKey: string): boolean;

  /**
   * Get a value indicating if the graph has fully cached
   * all nodes in the spatial area of a node.
   * @param {string} key - Key of node.
   * @returns {boolean} Value indicating if the spatial area
   * of a node has been cached.
   */
  hasSpatialArea(key: string): boolean;

  /**
   * Get a value indicating if the graph has a tiles required
   * for a node.
   * @param {string} key - Key of node.
   * @returns {boolean} Value indicating if the the tiles required
   * by a node has been cached.
   */
  hasTiles(key: string): boolean;

  /**
   * Get a node.
   * @param {string} key - Key of node.
   * @returns {Image} Retrieved node.
   */
  getNode(key: string): Image;

  /**
   * Get a sequence.
   * @param {string} sequenceKey - Key of sequence.
   * @returns {Image} Retrieved sequence.
   */
  getSequence(sequenceKey: string): Sequence;

  /**
   * Reset all spatial edges of the graph nodes.
   */
  resetSpatialEdges(): void;

  /**
   * Reset the complete graph but keep the nodes corresponding
   * to the supplied keys. All other nodes will be disposed.
   * @param {Array<string>} keepKeys - Keys for nodes to keep
   * in graph after reset.
   */
  reset(keepKeys: string[]): void;

  /**
   * Set the spatial node filter.
   * @emits [object Object],[object Object],[object Object]
   * @param {FilterExpression} filter - Filter expression to be applied
   * when calculating spatial edges.
   */
  setFilter(filter: FilterExpression): void;

  /**
   * Uncache the graph according to the graph configuration.
   * @description Uncaches unused tiles, unused nodes and
   * sequences according to the numbers specified in the
   * graph configuration. Sequences does not have a direct
   * reference to either tiles or nodes and may be uncached
   * even if they are related to the nodes that should be kept.
   * @param {Array<string>} keepIds - Ids of nodes to keep in
   * graph unrelated to last access. Tiles related to those keys
   * will also be kept in graph.
   * @param {Array<string>} keepCellIds - Ids of cells to keep in
   * graph unrelated to last access. The nodes of the cells may
   * still be uncached if not specified in the keep ids param
   * but are guaranteed to not be disposed.
   * @param {string} keepSequenceId - Optional id of sequence
   * for which the belonging nodes should not be disposed or
   * removed from the graph. These nodes may still be uncached if
   * not specified in keep ids param but are guaranteed to not
   * be disposed.
   */
  uncache(
    keepIds: string[],
    keepCellIds: string[],
    keepSequenceId?: string
  ): void;

  /**
   * Unsubscribes all subscriptions.
   * @description Afterwards, you must not call any other methods
   * on the graph instance.
   */
  unsubscribe(): void;
}
/**
 * Enumeration for graph modes.
 * @enum {number} *
 * @readonly
 * @description Modes for the retrieval and caching performed
 * by the graph service on the graph.
 */

declare var GraphMode: {|
  +Sequence: 0, // 0
  +Spatial: 1, // 1
|};

/**
 * @class GraphService
 * @classdesc Represents a service for graph operations.
 */
declare class GraphService {
  /**
   * Create a new graph service instance.
   * @param {Graph} graph - Graph instance to be operated on.
   */
  constructor(graph: Graph): this;

  /**
   * Dispose the graph service and its children.
   */
  dispose(): void;

  /**
 * Set the graph mode.
 * @description If graph mode is set to spatial, caching
 * is performed with emphasis on spatial edges. If graph
 * mode is set to sequence no tile data is requested and
 * no spatial edges are computed.
 *
 * When setting graph mode to sequence all spatial
 * subscriptions are aborted.
 * @param {$Values<
                typeof
                GraphMode>} mode - Graph mode to set.
 */
  setGraphMode(mode: $Values<typeof GraphMode>): void;
}

declare interface CacheServiceConfiguration {
  cellDepth: number;
}
declare class CacheService {
  constructor(
    _graphService: GraphService,
    _stateService: StateService,
    _api: APIWrapper
  ): this;
  started: boolean;
  configure(configuration?: CacheServiceConfiguration): void;
  start(): void;
  stop(): void;
}
declare class LoadingService {
  constructor(): this;
  startLoading(task: string): void;
  stopLoading(task: string): void;
}
/**
 * @class Spatial
 * @classdesc Provides methods for scalar, vector and matrix calculations.
 */
declare class Spatial {
  /**
   * Converts azimuthal phi rotation (counter-clockwise with origin on X-axis) to
   * bearing (clockwise with origin at north or Y-axis).
   * @param {number} phi - Azimuthal phi angle in radians.
   * @returns {number} Bearing in radians.
   */
  azimuthalToBearing(phi: number): number;

  /**
   * Converts degrees to radians.
   * @param {number} deg - Degrees.
   * @returns {number} Radians.
   */
  degToRad(deg: number): number;

  /**
   * Converts radians to degrees.
   * @param {number} rad - Radians.
   * @returns {number} Degrees.
   */
  radToDeg(rad: number): number;

  /**
   * Wrap a number on the interval [min, max].
   * @param {number} value - Value to wrap.
   * @param {number} min - Lower endpoint of interval.
   * @param {number} max - Upper endpoint of interval.
   * @returns {number} The wrapped number.
   */
  wrap(value: number, min: number, max: number): number;

  /**
   * Wrap an angle on the interval [-Pi, Pi].
   * @param {number} angle - Value to wrap.
   * @returns {number} Wrapped angle.
   */
  wrapAngle(angle: number): number;

  /**
   * Limit the value to the interval [min, max] by changing the value to
   * the nearest available one when it is outside the interval.
   * @param {number} value - Value to clamp.
   * @param {number} min - Minimum of the interval.
   * @param {number} max - Maximum of the interval.
   * @returns {number} Clamped value.
   */
  clamp(value: number, min: number, max: number): number;

  /**
   * Calculates the counter-clockwise angle from the first
   * vector (x1, y1)^T to the second (x2, y2)^T.
   * @param {number} x1 - X coordinate of first vector.
   * @param {number} y1 - Y coordinate of first vector.
   * @param {number} x2 - X coordinate of second vector.
   * @param {number} y2 - Y coordinate of second vector.
   * @returns {number} Counter clockwise angle between the vectors.
   */
  angleBetweenVector2(x1: number, y1: number, x2: number, y2: number): number;

  /**
   * Calculates the minimum (absolute) angle change for rotation
   * from one angle to another on the [-Pi, Pi] interval.
   * @param {number} angle1 - Start angle.
   * @param {number} angle2 - Destination angle.
   * @returns {number} Absolute angle change between angles.
   */
  angleDifference(angle1: number, angle2: number): number;

  /**
   * Calculates the relative rotation angle between two
   * angle-axis vectors.
   * @param {number} rotation1 - First angle-axis vector.
   * @param {number} rotation2 - Second angle-axis vector.
   * @returns {number} Relative rotation angle.
   */
  relativeRotationAngle(rotation1: number[], rotation2: number[]): number;

  /**
   * Calculates the angle from a vector to a plane.
   * @param {Array<number>} vector - The vector.
   * @param {Array<number>} planeNormal - Normal of the plane.
   * @returns {number} Angle from between plane and vector.
   */
  angleToPlane(vector: number[], planeNormal: number[]): number;
  azimuthal(direction: number[], up: number[]): number;

  /**
   * Calculates the distance between two coordinates
   * (longitude, latitude pairs) in meters according to
   * the haversine formula.
   * @param {number} lat1 - Latitude of the first coordinate in degrees.
   * @param {number} lng1 - Longitude of the first coordinate in degrees.
   * @param {number} lat2 - Latitude of the second coordinate in degrees.
   * @param {number} lng2 - Longitude of the second coordinate in degrees.
   * @returns {number} Distance between lat lon positions in meters.
   */
  distanceFromLngLat(
    lng1: number,
    lat1: number,
    lng2: number,
    lat2: number
  ): number;
}
/**
 * @class ViewportCoords
 * @classdesc Provides methods for calculating 2D coordinate conversions
 * as well as 3D projection and unprojection.
 *
 * Basic coordinates are 2D coordinates on the [0, 1] interval and
 * have the origin point, (0, 0), at the top left corner and the
 * maximum value, (1, 1), at the bottom right corner of the original
 * image.
 *
 * Viewport coordinates are 2D coordinates on the [-1, 1] interval and
 * have the origin point in the center. The bottom left corner point is
 * (-1, -1) and the top right corner point is (1, 1).
 *
 * Canvas coordiantes are 2D pixel coordinates on the [0, canvasWidth] and
 * [0, canvasHeight] intervals. The origin point (0, 0) is in the top left
 * corner and the maximum value is (canvasWidth, canvasHeight) is in the
 * bottom right corner.
 *
 * 3D coordinates are in the topocentric world reference frame.
 */
declare class ViewportCoords {
  /**
   * Convert basic coordinates to canvas coordinates.
   * @description Transform origin and camera position needs to be the
   * equal for reliable return value.
   * @param {number} basicX - Basic X coordinate.
   * @param {number} basicY - Basic Y coordinate.
   * @param {HTMLElement} container - The viewer container.
   * @param {Transform} transform - Transform of the image to unproject from.
   * @param {THREE.Camera} camera - Camera used in rendering.
   * @returns {Array<number>} 2D canvas coordinates.
   */
  basicToCanvas(
    basicX: number,
    basicY: number,
    container: {
      offsetHeight: number,
      offsetWidth: number,
      ...
    },
    transform: Transform
  ): number[];

  /**
   * Convert basic coordinates to canvas coordinates safely. If 3D point is
   * behind camera null will be returned.
   * @description Transform origin and camera position needs to be the
   * equal for reliable return value.
   * @param {number} basicX - Basic X coordinate.
   * @param {number} basicY - Basic Y coordinate.
   * @param {HTMLElement} container - The viewer container.
   * @param {Transform} transform - Transform of the image to unproject from.
   * @param {THREE.Camera} camera - Camera used in rendering.
   * @returns {Array<number>} 2D canvas coordinates if the basic point represents a 3D point
   * in front of the camera, otherwise null.
   */
  basicToCanvasSafe(
    basicX: number,
    basicY: number,
    container: {
      offsetHeight: number,
      offsetWidth: number,
      ...
    },
    transform: Transform
  ): number[];

  /**
   * Convert basic coordinates to viewport coordinates.
   * @description Transform origin and camera position needs to be the
   * equal for reliable return value.
   * @param {number} basicX - Basic X coordinate.
   * @param {number} basicY - Basic Y coordinate.
   * @param {Transform} transform - Transform of the image to unproject from.
   * @param {THREE.Camera} camera - Camera used in rendering.
   * @returns {Array<number>} 2D viewport coordinates.
   */
  basicToViewport(
    basicX: number,
    basicY: number,
    transform: Transform
  ): number[];

  /**
   * Convert basic coordinates to viewport coordinates safely. If 3D point is
   * behind camera null will be returned.
   * @description Transform origin and camera position needs to be the
   * equal for reliable return value.
   * @param {number} basicX - Basic X coordinate.
   * @param {number} basicY - Basic Y coordinate.
   * @param {Transform} transform - Transform of the image to unproject from.
   * @param {THREE.Camera} camera - Camera used in rendering.
   * @returns {Array<number>} 2D viewport coordinates.
   */
  basicToViewportSafe(
    basicX: number,
    basicY: number,
    transform: Transform
  ): number[];

  /**
   * Get canvas pixel position from event.
   * @param {Event} event - Event containing clientX and clientY properties.
   * @param {HTMLElement} element - HTML element.
   * @returns {Array<number>} 2D canvas coordinates.
   */
  canvasPosition(
    event: {
      clientX: number,
      clientY: number,
      ...
    },
    element: HTMLElement
  ): number[];

  /**
   * Convert canvas coordinates to viewport coordinates.
   * @param {number} canvasX - Canvas X coordinate.
   * @param {number} canvasY - Canvas Y coordinate.
   * @param {HTMLElement} container - The viewer container.
   * @returns {Array<number>} 2D viewport coordinates.
   */
  canvasToViewport(
    canvasX: number,
    canvasY: number,
    container: {
      offsetHeight: number,
      offsetWidth: number,
      ...
    }
  ): number[];

  /**
   * Determines the width and height of the container in canvas coordinates.
   * @param {HTMLElement} container - The viewer container.
   * @returns {Array<number>} 2D canvas coordinates.
   */
  containerToCanvas(container: {
    offsetHeight: number,
    offsetWidth: number,
    ...
  }): number[];

  /**
   * Determine if an event occured inside an element.
   * @param {Event} event - Event containing clientX and clientY properties.
   * @param {HTMLElement} element - HTML element.
   * @returns {boolean} Value indicating if the event occured inside the element or not.
   */
  insideElement(
    event: {
      clientX: number,
      clientY: number,
      ...
    },
    element: HTMLElement
  ): boolean;

  /**
   * Convert viewport coordinates to canvas coordinates.
   * @param {number} viewportX - Viewport X coordinate.
   * @param {number} viewportY - Viewport Y coordinate.
   * @param {HTMLElement} container - The viewer container.
   * @returns {Array<number>} 2D canvas coordinates.
   */
  viewportToCanvas(
    viewportX: number,
    viewportY: number,
    container: {
      offsetHeight: number,
      offsetWidth: number,
      ...
    }
  ): number[];
}
declare class PanService {
  constructor(
    graphService: GraphService,
    stateService: StateService,
    enabled?: boolean,
    graphCalculator?: GraphCalculator,
    spatial?: Spatial,
    viewportCoords?: ViewportCoords
  ): this;
  dispose(): void;
  enable(): void;
  disable(): void;
  start(): void;
  stop(): void;
}
declare class PlayService {
  static +sequenceSpeed: number;
  constructor(graphService: GraphService, stateService: StateService): this;
  playing: boolean;
  play(): void;
  dispose(): void;
  setDirection(direction: $Values<typeof NavigationDirection>): void;
  setSpeed(speed: number): void;
  stop(): void;
}
declare class Navigator {
  constructor(
    options: ViewerOptions,
    api?: APIWrapper,
    graphService?: GraphService,
    loadingService?: LoadingService,
    stateService?: StateService,
    cacheService?: CacheService,
    playService?: PlayService,
    panService?: PanService
  ): this;
  api: APIWrapper;
  cacheService: CacheService;
  graphService: GraphService;
  loadingService: LoadingService;
  panService: PanService;
  playService: PlayService;
  stateService: StateService;
  dispose(): void;
}
declare class SubscriptionHolder {
  unsubscribe(): void;
}
export interface IComponent {
  /**
   * Value indicating if the component is currently active.
   */
  +activated: boolean;

  /**
   * Default configuration for the component.
   */
  +defaultConfiguration: ComponentConfiguration;

  /**
   * The name of the component. Used when interacting with the
   * component through the Viewer's API.
   */
  +name: string;

  /**
   * Configure the component.
   */
  configure(configuration: ComponentConfiguration): void;
}
/**
 * @event
 */
export type ComponentEventType =
  | "geometrycreate"
  | "hover"
  | "markerdragend"
  | "markerdragstart"
  | "markerposition"
  | "playing"
  | "tagcreateend"
  | "tagcreatestart"
  | "tagmode"
  | "tags";
declare class Component<TConfiguration: ComponentConfiguration>
  implements IEventEmitter, IComponent
{
  static componentName: string;
  _activated: boolean;
  _container: Container;
  _name: string;
  _navigator: Navigator;
  +_subscriptions: SubscriptionHolder;
  constructor(name: string, container: Container, navigator: Navigator): this;

  /**
   * Get activated.
   * @returns {boolean} Value indicating if the component is
   * currently active.
   */
  activated: boolean;

  /**
   * Get default configuration.
   * @returns {TConfiguration} Default configuration for component.
   */
  defaultConfiguration: TConfiguration;

  /**
   * Get name.
   * @description The name of the component. Used when interacting with the
   * component through the Viewer's API.
   */
  name: string;

  /**
   * @ignore
   */
  activate(conf?: TConfiguration): void;

  /**
   * Configure the component.
   * @param configuration Component configuration.
   */
  configure(configuration: ComponentConfiguration): void;

  /**
   * @ignore
   */
  deactivate(): void;

  /**
   * @inheritdoc
   */
  fire<T>(type: string, event: T): void;

  /**
   * @inheritdoc
   */
  off<T>(type: string, handler: (event: T) => void): void;

  /**
   * @inheritdoc
   */
  on<T>(type: string, handler: (event: T) => void): void;

  /**
   * Detect the viewer's new width and height and resize the component's
   * rendered elements accordingly if applicable.
   * @ignore
   */
  resize(): void;
  _activate(): void;
  _deactivate(): void;
  _getDefaultConfiguration(): TConfiguration;
}
/**
 * @class BearingComponent
 * @classdesc Component for indicating bearing and field of view.
 * @example ```js
 * var viewer = new Viewer({ ... });
 * var bearingComponent = viewer.getComponent("bearing");
 * bearingComponent.configure({ size: ComponentSize.Small });
 * ```
 */
declare class BearingComponent extends Component<BearingConfiguration> {
  static componentName: string;

  /**
   * @ignore
   */
  constructor(name: string, container: Container, navigator: Navigator): this;
  _activate(): void;
  _deactivate(): void;
  _getDefaultConfiguration(): BearingConfiguration;
}
declare class CacheComponent extends Component<CacheConfiguration> {
  static componentName: string;

  /**
   * @ignore
   */
  constructor(name: string, container: Container, navigator: Navigator): this;
  _activate(): void;
  _deactivate(): void;
  _getDefaultConfiguration(): CacheConfiguration;
}
/**
 * Interface for general component events.
 */
export interface ComponentEvent {
  /**
   * The component object that fired the event.
   */
  target: IComponent;

  /**
   * The event type.
   */
  type: ComponentEventType;
}
/**
 * Interface for component hover events.
 */
export type ComponentHoverEvent = {
  /**
   * The image id corresponding to the element or object that
   * is being hovered. When the mouse leaves the element or
   * object the id will be null.
   */
  id: string,
  type: "hover",
  ...
} & ComponentEvent;

/**
 * @class Geometry
 * @abstract
 * @classdesc Represents a geometry.
 */
declare class Geometry {
  /**
   * Create a geometry.
   * @constructor
   * @ignore
   */
  constructor(): this;

  /**
   * Get the 2D basic coordinates for the centroid of the geometry.
   * @returns {Array<number>} 2D basic coordinates representing the centroid.
   * @ignore
   */
  getCentroid2d(): number[];

  /**
   * Get the 3D world coordinates for the centroid of the geometry.
   * @param {Transform} transform - The transform of the image related to the geometry.
   * @returns {Array<number>} 3D world coordinates representing the centroid.
   * @ignore
   */
  getCentroid3d(transform: Transform): number[];

  /**
   * Set the 2D centroid of the geometry.
   * @param {Array<number>} value - The new value of the centroid in basic coordinates.
   * @param {Transform} transform - The transform of the image related to the geometry.
   * @ignore
   */
  setCentroid2d(value: number[], transform: Transform): void;
}
/**
 * Interface for component geometry events.
 */
export type ComponentGeometryEvent = {
  /**
   * Geometry related to the event.
   */
  geometry: Geometry,
  type: "geometrycreate",
  ...
} & ComponentEvent;

/**
 * @class Marker
 * @classdesc Represents an abstract marker class that should be extended
 * by marker implementations used in the marker component.
 */
declare class Marker {
  constructor(id: string, lngLat: LngLat): this;

  /**
   * Get id.
   * @returns {string} The id of the marker.
   */
  id: string;

  /**
   * Get lngLat.
   * @returns {LngLat} The geographic coordinates of the marker.
   */
  lngLat: LngLat;

  /**
   * @ignore
   */
  createGeometry(position: number[]): void;

  /**
   * @ignore
   */
  disposeGeometry(): void;

  /**
   * @ignore
   */
  lerpAltitude(alt: number, alpha: number): void;

  /**
   * @ignore
   */
  updatePosition(position: number[], lngLat?: LngLat): void;
  _createGeometry(position: number[]): void;
  _disposeGeometry(): void;
}
/**
 * Interface for component marker events.
 */
export type ComponentMarkerEvent = {
  /**
   * The marker that was affected by the event.
   */
  marker: Marker,
  type: "markerdragend" | "markerdragstart" | "markerposition",
  ...
} & ComponentEvent;

/**
 * Interface for component play events.
 */
export type ComponentPlayEvent = {
  /**
   * Value indiciating if the component is playing or not.
   */
  playing: boolean,
  type: "playing",
  ...
} & ComponentEvent;

/**
 * Interface for component state events.
 * @example ```js
 * // The `hover` event is an example of a `ComponentStateEvent`.
 * // Set up an event listener on the direction component.
 * var directionComponent = viewer.getComponent('direction');
 * directionComponent.on('hover', function(e) {
 *   console.log('A hover event has occured');
 * });
 * ```
 */
export type ComponentStateEvent = {
  type: "tagcreateend" | "tagcreatestart" | "tags",
  ...
} & ComponentEvent;

/**
 * Interface for component tag mode events.
 */
export type ComponentTagModeEvent = {
  /**
   * Value indicating the current tag mode of the component.
   */
  mode: $Values<typeof TagMode>,
  type: "tagmode",
  ...
} & ComponentEvent;

/**
 * @class DirectionDOMRenderer
 * @classdesc DOM renderer for direction arrows.
 */
declare class DirectionDOMRenderer {
  constructor(configuration: DirectionConfiguration, size: ViewportSize): this;

  /**
   * Get needs render.
   * @returns {boolean} Value indicating whether render should be called.
   */
  needsRender: boolean;

  /**
   * Renders virtual DOM elements.
   * @description Calling render resets the needs render property.
   */
  setEdges(edgeStatus: NavigationEdgeStatus, sequence: Sequence): void;

  /**
   * Set image for which to show edges.
   * @param {Image} image
   */
  setImage(image: Image): void;

  /**
   * Set the render camera to use for calculating rotations.
   * @param {RenderCamera} renderCamera
   */
  setRenderCamera(renderCamera: RenderCamera): void;

  /**
   * Set configuration values.
   * @param {DirectionConfiguration} configuration
   */
  setConfiguration(configuration: DirectionConfiguration): void;

  /**
   * Detect the element's width and height and resize
   * elements accordingly.
   * @param {ViewportSize} size Size of vßiewer container element.
   */
  resize(size: ViewportSize): void;
}
/**
 * @class DirectionComponent
 * @classdesc Component showing navigation arrows for steps and turns.
 */
declare class DirectionComponent extends Component<DirectionConfiguration> {
  /**
   * @inheritdoc
   */
  static componentName: string;

  /**
   * @ignore
   */
  constructor(
    name: string,
    container: Container,
    navigator: Navigator,
    directionDOMRenderer?: DirectionDOMRenderer
  ): this;

  _activate(): void;
  _deactivate(): void;
  _getDefaultConfiguration(): DirectionConfiguration;
}
declare class HandlerBase<TConfiguration: ComponentConfiguration> {
  _component: Component<TConfiguration>;
  _container: Container;
  _navigator: Navigator;
  _enabled: boolean;

  /**
   * @ignore
   */
  constructor(
    component_: Component<TConfiguration>,
    container: Container,
    navigator: Navigator
  ): this;

  /**
   * Returns a Boolean indicating whether the interaction is enabled.
   * @returns {boolean} `true` if the interaction is enabled.
   */
  isEnabled: boolean;

  /**
   * Enables the interaction.
   * @example ```js
   * <component-name>.<handler-name>.enable();
   * ```
   */
  enable(): void;

  /**
   * Disables the interaction.
   * @example ```js
   * <component-name>.<handler-name>.disable();
   * ```
   */
  disable(): void;
  _enable(): void;
  _disable(): void;
  _getConfiguration(enable: boolean): TConfiguration;
}
/**
 * The `KeySequenceNavigationHandler` allows the user to navigate through a sequence using the
 * following key commands:
 *
 * `ALT` + `Up Arrow`: Navigate to next image in the sequence.
 * `ALT` + `Down Arrow`: Navigate to previous image in sequence.
 * @example ```js
 * var keyboardComponent = viewer.getComponent("keyboard");
 *
 * keyboardComponent.keySequenceNavigation.disable();
 * keyboardComponent.keySequenceNavigation.enable();
 *
 * var isEnabled = keyboardComponent.keySequenceNavigation.isEnabled;
 * ```
 */
declare class KeySequenceNavigationHandler
  extends HandlerBase<KeyboardConfiguration>
{
  _enable(): void;
  _disable(): void;
  _getConfiguration(enable: boolean): KeyboardConfiguration;
}
/**
 * The `KeySpatialNavigationHandler` allows the user to navigate through a sequence using the
 * following key commands:
 *
 * `Up Arrow`: Step forward.
 * `Down Arrow`: Step backward.
 * `Left Arrow`: Step to the left.
 * `Rigth Arrow`: Step to the right.
 * `SHIFT` + `Down Arrow`: Turn around.
 * `SHIFT` + `Left Arrow`: Turn to the left.
 * `SHIFT` + `Rigth Arrow`: Turn to the right.
 * @example ```js
 * var keyboardComponent = viewer.getComponent("keyboard");
 *
 * keyboardComponent.keySpatialNavigation.disable();
 * keyboardComponent.keySpatialNavigation.enable();
 *
 * var isEnabled = keyboardComponent.keySpatialNavigation.isEnabled;
 * ```
 */
declare class KeySpatialNavigationHandler
  extends HandlerBase<KeyboardConfiguration>
{
  /**
   * @ignore
   */
  constructor(
    component_: Component<KeyboardConfiguration>,
    container: Container,
    navigator: Navigator,
    spatial: Spatial
  ): this;
  _enable(): void;
  _disable(): void;
  _getConfiguration(enable: boolean): KeyboardConfiguration;
}
/**
 * The `KeyZoomHandler` allows the user to zoom in and out using the
 * following key commands:
 *
 * `+`: Zoom in.
 * `-`: Zoom out.
 * @example ```js
 * var keyboardComponent = viewer.getComponent("keyboard");
 *
 * keyboardComponent.keyZoom.disable();
 * keyboardComponent.keyZoom.enable();
 *
 * var isEnabled = keyboardComponent.keyZoom.isEnabled;
 * ```
 */
declare class KeyZoomHandler extends HandlerBase<KeyboardConfiguration> {
  /**
   * @ignore
   */
  constructor(
    component_: Component<KeyboardConfiguration>,
    container: Container,
    navigator: Navigator,
    viewportCoords: ViewportCoords
  ): this;
  _enable(): void;
  _disable(): void;
  _getConfiguration(enable: boolean): KeyboardConfiguration;
}
/**
 * The `KeyPlayHandler` allows the user to control the play behavior
 * using the following key commands:
 *
 * `Spacebar`: Start or stop playing.
 * `SHIFT` + `D`: Switch direction.
 * `<`: Decrease speed.
 * `>`: Increase speed.
 * @example ```js
 * var keyboardComponent = viewer.getComponent("keyboard");
 *
 * keyboardComponent.keyPlay.disable();
 * keyboardComponent.keyPlay.enable();
 *
 * var isEnabled = keyboardComponent.keyPlay.isEnabled;
 * ```
 */
declare class KeyPlayHandler extends HandlerBase<KeyboardConfiguration> {
  _enable(): void;
  _disable(): void;
  _getConfiguration(enable: boolean): KeyboardConfiguration;
}
/**
 * @class KeyboardComponent
 * @classdesc Component for keyboard event handling.
 *
 * To retrive and use the keyboard component
 * @example ```js
 * var viewer = new Viewer({ ... });
 *
 * var keyboardComponent = viewer.getComponent("keyboard");
 * ```
 */
declare class KeyboardComponent extends Component<KeyboardConfiguration> {
  static componentName: string;

  /**
   * @ignore
   */
  constructor(name: string, container: Container, navigator: Navigator): this;

  /**
   * Get key play.
   * @returns {KeyPlayHandler} The key play handler.
   */
  keyPlay: KeyPlayHandler;

  /**
   * Get key sequence navigation.
   * @returns {KeySequenceNavigationHandler} The key sequence navigation handler.
   */
  keySequenceNavigation: KeySequenceNavigationHandler;

  /**
   * Get spatial.
   * @returns {KeySpatialNavigationHandler} The spatial handler.
   */
  keySpatialNavigation: KeySpatialNavigationHandler;

  /**
   * Get key zoom.
   * @returns {KeyZoomHandler} The key zoom handler.
   */
  keyZoom: KeyZoomHandler;
  _activate(): void;
  _deactivate(): void;
  _getDefaultConfiguration(): KeyboardConfiguration;
}
/**
 * @interface CircleMarkerOptions
 *
 * Interface that represents the options for configuring a `CircleMarker`.
 */
export interface CircleMarkerOptions {
  /**
   * The color of the marker.
   * @default "#fff"
   */
  color?: number | string;

  /**
   * The opacity of the marker.
   * @default 0.4
   */
  opacity?: number;

  /**
   * The radius of the circle in meters.
   * @default 1
   */
  radius?: number;
}
/**
 * @class CircleMarker
 * @classdesc Non-interactive marker with a flat circle shape. The circle
 * marker can not be configured to be interactive.
 *
 * Circle marker properties can not be updated after creation.
 *
 * To create and add one `CircleMarker` with default configuration
 * and one with configuration use
 * @example ```js
 * var defaultMarker = new CircleMarker(
 *     "id-1",
 *     { lat: 0, lng: 0, });
 *
 * var configuredMarker = new CircleMarker(
 *     "id-2",
 *     { lat: 0, lng: 0, },
 *     {
 *         color: "#0ff",
 *         opacity: 0.3,
 *         radius: 0.7,
 *     });
 *
 * markerComponent.add([defaultMarker, configuredMarker]);
 * ```
 */
declare class CircleMarker extends Marker {
  constructor(id: string, lngLat: LngLat, options?: CircleMarkerOptions): this;
  _createGeometry(position: number[]): void;
  _disposeGeometry(): void;
}
/**
 * @class MarkerComponent
 * @classdesc Component for showing and editing 3D marker objects.
 *
 * The `add` method is used for adding new markers or replacing
 * markers already in the set.
 *
 * If a marker already in the set has the same
 * id as one of the markers added, the old marker will be removed and
 * the added marker will take its place.
 *
 * It is not possible to update markers in the set by updating any properties
 * directly on the marker object. Markers need to be replaced by
 * re-adding them for updates to geographic position or configuration
 * to be reflected.
 *
 * Markers added to the marker component can be either interactive
 * or non-interactive. Different marker types define their behavior.
 * Markers with interaction support can be configured with options
 * to respond to dragging inside the viewer and be detected when
 * retrieving markers from pixel points with the `getMarkerIdAt` method.
 *
 * To retrive and use the marker component
 * @example ```js
 * var viewer = new Viewer({ component: { marker: true }, ... });
 *
 * var markerComponent = viewer.getComponent("marker");
 * ```
 */
declare class MarkerComponent extends Component<MarkerConfiguration> {
  static componentName: string;

  /**
   * @ignore
   */
  constructor(name: string, container: Container, navigator: Navigator): this;

  /**
   * Add markers to the marker set or replace markers in the marker set.
   * @description If a marker already in the set has the same
   * id as one of the markers added, the old marker will be removed
   * the added marker will take its place.
   *
   * Any marker inside the visible bounding bbox
   * will be initialized and placed in the viewer.
   * @param {Array<Marker>} markers - Markers to add.
   * @example ```js
   * markerComponent.add([marker1, marker2]);
   * ```
   */
  add(markers: Marker[]): void;

  /**
   * Returns the marker in the marker set with the specified id, or
   * undefined if the id matches no marker.
   * @param {string} markerId - Id of the marker.
   * @example ```js
   * var marker = markerComponent.get("markerId");
   * ```
   */
  get(markerId: string): Marker;

  /**
   * Returns an array of all markers.
   * @example ```js
   * var markers = markerComponent.getAll();
   * ```
   */
  getAll(): Marker[];

  /**
   * Returns the id of the interactive marker closest to the current camera
   * position at the specified point.
   * @description Notice that the pixelPoint argument requires x, y
   * coordinates from pixel space.
   *
   * With this function, you can use the coordinates provided by mouse
   * events to get information out of the marker component.
   *
   * If no interactive geometry of an interactive marker exist at the pixel
   * point, `null` will be returned.
   * @param {Array<number>} pixelPoint - Pixel coordinates on the viewer element.
   * @returns {string} Id of the interactive marker closest to the camera. If no
   * interactive marker exist at the pixel point, `null` will be returned.
   * @example ```js
   * markerComponent.getMarkerIdAt([100, 100])
   *     .then((markerId) => { console.log(markerId); });
   * ```
   */
  getMarkerIdAt(pixelPoint: number[]): Promise<string>;

  /**
   * Check if a marker exist in the marker set.
   * @param {string} markerId - Id of the marker.
   * @example ```js
   * var markerExists = markerComponent.has("markerId");
   * ```
   */
  has(markerId: string): boolean;

  /**
   * Remove markers with the specified ids from the marker set.
   * @param {Array<string>} markerIds - Ids for markers to remove.
   * @example ```js
   * markerComponent.remove(["id-1", "id-2"]);
   * ```
   */
  remove(markerIds: string[]): void;

  /**
   * Remove all markers from the marker set.
   * @example ```js
   * markerComponent.removeAll();
   * ```
   */
  removeAll(): void;
  _activate(): void;
  _deactivate(): void;
  _getDefaultConfiguration(): MarkerConfiguration;
}
/**
 * @interface SimpleMarkerOptions
 *
 * Interface that represents the options for configuring a `SimpleMarker`.
 */
export interface SimpleMarkerOptions {
  /**
   * The color of the ball inside the marker.
   * @default "#f00"
   */
  ballColor?: number | string;

  /**
   * The opacity of the ball inside the marker.
   * @default 0.8
   */
  ballOpacity?: number;

  /**
   * The color of the ice creame shape.
   * @default "#f00"
   */
  color?: number | string;

  /**
   * Value indicating if the marker should be interactive or not.
   * @description If the marker is configured to be interactive
   * it will be draggable in the viewer and retrievable with the
   * `getMarkerIdAt` method on the `MarkerComponent`.
   * @default false
   */
  interactive?: boolean;

  /**
   * The opacity of the ice creame shape.
   * @default 0.4
   */
  opacity?: number;

  /**
   * The radius of the ice cream shape in meters.
   * @default 1
   */
  radius?: number;
}
/**
 * @class SimpleMarker
 * @classdesc Interactive marker with ice cream shape. The sphere
 * inside the ice cream can be configured to be interactive.
 *
 * Simple marker properties can not be updated after creation.
 *
 * To create and add one `SimpleMarker` with default configuration
 * (non-interactive) and one interactive with configuration use
 * @example ```js
 * var defaultMarker = new SimpleMarker(
 *     "id-1",
 *     { lat: 0, lng: 0, });
 *
 * var interactiveMarker = new SimpleMarker(
 *     "id-2",
 *     { lat: 0, lng: 0, },
 *     {
 *         ballColor: "#00f",
 *         ballOpacity: 0.5,
 *         color: "#00f",
 *         interactive: true,
 *         opacity: 0.3,
 *         radius: 0.7,
 *     });
 *
 * markerComponent.add([defaultMarker, interactiveMarker]);
 * ```
 */
declare class SimpleMarker extends Marker {
  constructor(id: string, lngLat: LngLat, options?: SimpleMarkerOptions): this;
  _createGeometry(position: number[]): void;
  _disposeGeometry(): void;
}
/**
 * The `DragPanHandler` allows the user to pan the viewer image by clicking and dragging the cursor.
 * @example ```js
 * var pointerComponent = viewer.getComponent("pointer");
 *
 * pointerComponent.dragPan.disable();
 * pointerComponent.dragPan.enable();
 *
 * var isEnabled = pointerComponent.dragPan.isEnabled;
 * ```
 */
declare class DragPanHandler extends HandlerBase<PointerConfiguration> {
  /**
   * @ignore
   */
  constructor(
    component_: Component<PointerConfiguration>,
    container: Container,
    navigator: Navigator,
    viewportCoords: ViewportCoords,
    spatial: Spatial
  ): this;
  _enable(): void;
  _disable(): void;
  _getConfiguration(enable: boolean): PointerConfiguration;
}
declare class EarthControlHandler extends HandlerBase<PointerConfiguration> {
  /**
   * @ignore
   */
  constructor(
    component_: Component<PointerConfiguration>,
    container: Container,
    navigator: Navigator,
    viewportCoords: ViewportCoords,
    spatial: Spatial
  ): this;
  _enable(): void;
  _disable(): void;
  _getConfiguration(): PointerConfiguration;
}
/**
 * The `ScrollZoomHandler` allows the user to zoom the viewer image by scrolling.
 * @example ```js
 * var pointerComponent = viewer.getComponent("pointer");
 *
 * pointerComponent.scrollZoom.disable();
 * pointerComponent.scrollZoom.enable();
 *
 * var isEnabled = pointerComponent.scrollZoom.isEnabled;
 * ```
 */
declare class ScrollZoomHandler extends HandlerBase<PointerConfiguration> {
  /**
   * @ignore
   */
  constructor(
    component_: Component<PointerConfiguration>,
    container: Container,
    navigator: Navigator,
    viewportCoords: ViewportCoords
  ): this;
  _enable(): void;
  _disable(): void;
  _getConfiguration(enable: boolean): PointerConfiguration;
}
/**
 * The `TouchZoomHandler` allows the user to zoom the viewer image by pinching on a touchscreen.
 * @example ```js
 * var pointerComponent = viewer.getComponent("pointer");
 *
 * pointerComponent.touchZoom.disable();
 * pointerComponent.touchZoom.enable();
 *
 * var isEnabled = pointerComponent.touchZoom.isEnabled;
 * ```
 */
declare class TouchZoomHandler extends HandlerBase<PointerConfiguration> {
  /**
   * @ignore
   */
  constructor(
    component_: Component<PointerConfiguration>,
    container: Container,
    navigator: Navigator,
    viewportCoords: ViewportCoords
  ): this;
  _enable(): void;
  _disable(): void;
  _getConfiguration(enable: boolean): PointerConfiguration;
}
/**
 * @class PointerComponent
 * @classdesc Component handling mouse, pen, and touch events for camera movement.
 *
 * To retrive and use the mouse component
 * @example ```js
 * var viewer = new Viewer({ ... });
 *
 * var pointerComponent = viewer.getComponent("pointer");
 * ```
 */
declare class PointerComponent extends Component<PointerConfiguration> {
  /**
   * @inheritdoc
   */
  static componentName: string;

  /**
   * @ignore
   */
  constructor(name: string, container: Container, navigator: Navigator): this;

  /**
   * Get drag pan.
   * @returns {DragPanHandler} The drag pan handler.
   */
  dragPan: DragPanHandler;

  /**
   * Get earth control.
   * @returns {EarthControlHandler} The earth control handler.
   */
  earthControl: EarthControlHandler;

  /**
   * Get scroll zoom.
   * @returns {ScrollZoomHandler} The scroll zoom handler.
   */
  scrollZoom: ScrollZoomHandler;

  /**
   * Get touch zoom.
   * @returns {TouchZoomHandler} The touch zoom handler.
   */
  touchZoom: TouchZoomHandler;
  _activate(): void;
  _deactivate(): void;
  _getDefaultConfiguration(): PointerConfiguration;
}
/**
 * Interface for the popup offset with respect to its anchor point.
 * @description An object of number arrays specifying an offset for
 * each float direction. Negative offsets indicate left and up.
 * @interface
 * @example ```js
 * var offset = = {
 *     bottom: [0, 10],
 *     bottomLeft: [-10, 10],
 *     bottomRight: [10, 10],
 *     center: [0, 0],
 *     left: [-10, 0],
 *     right: [10, 0],
 *     top: [0, -10],
 *     topLeft: [-10, -10],
 *     topRight: [10, -10],
 * }
 *
 * var popup = new Popup({ offset: offset });
 * ```
 */
export interface PopupOffset {
  bottom: number[];
  bottomLeft: number[];
  bottomRight: number[];
  center: number[];
  left: number[];
  right: number[];
  top: number[];
  topLeft: number[];
  topRight: number[];
}
/**
 * Interface for the options that define behavior and
 * appearance of a popup.
 * @interface
 */
export interface PopupOptions {
  /**
   * Specify if the popup should capture pointer events.
   * @description If the popup is specified to not capture
   * pointer events the provided content can still override
   * this behavior for the individual content HTML elements
   * by specifying the appropriate CSS.
   * @default true
   */
  capturePointer?: boolean;

  /**
   * Specify that the popup should not have any tooltip
   * like visuals around the provided content.
   * @default false
   */
  clean?: boolean;

  /**
   * The direction in which the popup floats with respect to the
   * anchor point or points. If no value is supplied the popup
   * will change float automatically based on the its position
   * in the viewport so that as much of its area as possible is
   * visible.
   * @description For automatic floating (undefined) the popup
   * will float in eight directions around a point or a position
   * in a rect. When a rectangle is set without a position option
   * specified, the popup will float outward from the rectangle
   * center based on the side it is currently rendered in. The
   * default floating direction is to the bottom for both points
   * and rectangles.
   * @default undefined
   */
  float?: $Values<typeof Alignment>;

  /**
   * A pixel offset applied to the popup's location specfied as:
   *
   * - A single number in pixels in the float direction that the popup
   * will be translated with respect to the current anchor point.
   *
   * - An object of number arrays specifying an offset for
   * each float direction. Negative offsets indicate left and up.
   * @default 0
   */
  offset?: number | PopupOffset;

  /**
   * Opacity of the popup visuals.
   * @default 1
   */
  opacity?: number;

  /**
   * The popup position in a rectangle (does not apply to points).
   * When not set the popup will change position automatically
   * based on the viewport so that as much of it as possible is
   * visible.
   * @default undefined
   */
  position?: $Values<typeof Alignment>;
}
/**
 * @class Popup
 * @classdesc [object Object],[object Object],[object Object]
 * @example ```js
 * var defaultSpan = document.createElement('span');
 * defaultSpan.innerHTML = 'hello default';
 *
 * var defaultPopup = new Popup();
 * defaultPopup.setDOMContent(defaultSpan);
 * defaultPopup.setBasicPoint([0.3, 0.3]);
 *
 * var cleanSpan = document.createElement('span');
 * cleanSpan.innerHTML = 'hello clean';
 *
 * var cleanPopup = new Popup({
 *     clean: true,
 *     float: Alignment.Top,
 *     offset: 10,
 *     opacity: 0.7,
 * });
 *
 * cleanPopup.setDOMContent(cleanSpan);
 * cleanPopup.setBasicPoint([0.6, 0.6]);
 *
 * popupComponent.add([defaultPopup, cleanPopup]);
 * ```
 * @description Implementation of API methods and API documentation inspired
 * by/used from https://github.com/mapbox/mapbox-gl-js/blob/v0.38.0/src/ui/popup.js
 */
declare class Popup {
  constructor(
    options?: PopupOptions,
    viewportCoords?: ViewportCoords,
    dom?: DOM
  ): this;

  /**
   * @description Internal method used by the component to
   * remove all references to the popup.
   * @ignore
   */
  remove(): void;

  /**
   * Sets a 2D basic image coordinates point to the popup's anchor, and
   * moves the popup to it.
   * @description Overwrites any previously set point or rect.
   * @param {Array<number>} basicPoint - Point in 2D basic image coordinates.
   * @example ```js
   * var popup = new Popup();
   * popup.setText('hello image');
   * popup.setBasicPoint([0.3, 0.3]);
   *
   * popupComponent.add([popup]);
   * ```
   */
  setBasicPoint(basicPoint: number[]): void;

  /**
   * Sets a 2D basic image coordinates rect to the popup's anchor, and
   * moves the popup to it.
   * @description Overwrites any previously set point or rect.
   * @param {Array<number>} basicRect - Rect in 2D basic image
   * coordinates ([topLeftX, topLeftY, bottomRightX, bottomRightY]) .
   * @example ```js
   * var popup = new Popup();
   * popup.setText('hello image');
   * popup.setBasicRect([0.3, 0.3, 0.5, 0.6]);
   *
   * popupComponent.add([popup]);
   * ```
   */
  setBasicRect(basicRect: number[]): void;

  /**
   * Sets the popup's content to the element provided as a DOM node.
   * @param {Node} htmlNode - A DOM node to be used as content for the popup.
   * @example ```js
   * var div = document.createElement('div');
   * div.innerHTML = 'hello image';
   *
   * var popup = new Popup();
   * popup.setDOMContent(div);
   * popup.setBasicPoint([0.3, 0.3]);
   *
   * popupComponent.add([popup]);
   * ```
   */
  setDOMContent(htmlNode: Node): void;

  /**
   * Sets the popup's content to the HTML provided as a string.
   * @description [object Object],[object Object],[object Object]
   * @param {string} html - A string representing HTML content for the popup.
   * @example ```js
   * var popup = new Popup();
   * popup.setHTML('<div>hello image</div>');
   * popup.setBasicPoint([0.3, 0.3]);
   *
   * popupComponent.add([popup]);
   * ```
   */
  setHTML(html: string): void;

  /**
   * Sets the popup's content to a string of text.
   * @description This function creates a Text node in the DOM, so it cannot insert raw HTML.
   * Use this method for security against XSS if the popup content is user-provided.
   * @param {string} text - Textual content for the popup.
   * @example ```js
   * var popup = new Popup();
   * popup.setText('hello image');
   * popup.setBasicPoint([0.3, 0.3]);
   *
   * popupComponent.add([popup]);
   * ```
   */
  setText(text: string): void;

  /**
   * @description Internal method for attaching the popup to
   * its parent container so that it is rendered in the DOM tree.
   * @ignore
   */
  setParentContainer(parentContainer: HTMLElement): void;

  /**
   * @description Internal method for updating the rendered
   * position of the popup called by the popup component.
   * @ignore
   */
  update(
    renderCamera: RenderCamera,
    size: ViewportSize,
    transform: Transform
  ): void;
}
/**
 * @class PopupComponent
 * @classdesc Component for showing HTML popup objects.
 *
 * The `add` method is used for adding new popups. Popups are removed by reference.
 *
 * It is not possible to update popups in the set by updating any properties
 * directly on the popup object. Popups need to be replaced by
 * removing them and creating new ones with relevant changed properties and
 * adding those instead.
 *
 * Popups are only relevant to a single image because they are based on
 * 2D basic image coordinates. Popups related to a certain image should
 * be removed when the viewer is moved to another image.
 *
 * To retrive and use the popup component
 * @example ```js
 * var viewer = new Viewer({ component: { popup: true }, ... });
 *
 * var popupComponent = viewer.getComponent("popup");
 * ```
 */
declare class PopupComponent extends Component<ComponentConfiguration> {
  static componentName: string;

  /**
   * @ignore
   */
  constructor(
    name: string,
    container: Container,
    navigator: Navigator,
    dom?: DOM
  ): this;

  /**
   * Add popups to the popups set.
   * @description Adding a new popup never replaces an old one
   * because they are stored by reference. Adding an already
   * existing popup has no effect.
   * @param {Array<Popup>} popups - Popups to add.
   * @example ```js
   * popupComponent.add([popup1, popup2]);
   * ```
   */
  add(popups: Popup[]): void;

  /**
   * Returns an array of all popups.
   * @example ```js
   * var popups = popupComponent.getAll();
   * ```
   */
  getAll(): Popup[];

  /**
   * Remove popups based on reference from the popup set.
   * @param {Array<Popup>} popups - Popups to remove.
   * @example ```js
   * popupComponent.remove([popup1, popup2]);
   * ```
   */
  remove(popups: Popup[]): void;

  /**
   * Remove all popups from the popup set.
   * @example ```js
   * popupComponent.removeAll();
   * ```
   */
  removeAll(): void;
  _activate(): void;
  _deactivate(): void;
  _getDefaultConfiguration(): ComponentConfiguration;
}
declare class SequenceDOMRenderer {
  constructor(container: Container): this;
  activate(): void;
  deactivate(): void;
  getContainerWidth(
    size: ViewportSize,
    configuration: SequenceConfiguration
  ): number;
}
/**
 * @class SequenceComponent
 * @classdesc Component showing navigation arrows for sequence directions
 * as well as playing button. Exposes an API to start and stop play.
 */
declare class SequenceComponent extends Component<SequenceConfiguration> {
  /**
   * @inheritdoc
   */
  static componentName: string;
  constructor(
    name: string,
    container: Container,
    navigator: Navigator,
    renderer?: SequenceDOMRenderer
  ): this;

  /**
   * Start playing.
   * @fires playing
   */
  play(): void;

  /**
   * Stop playing.
   * @fires playing
   */
  stop(): void;
  _activate(): void;
  _deactivate(): void;
  _getDefaultConfiguration(): SequenceConfiguration;
}

/**
 * @class SliderComponent
 * @classdesc Component for comparing pairs of images. Renders
 * a slider for adjusting the curtain of the first image.
 *
 * Deactivate the sequence, direction and image plane
 * components when activating the slider component to avoid
 * interfering UI elements.
 *
 * To retrive and use the slider component
 * @example ```js
 * var viewer = new Viewer({ ... });
 *
 * viewer.deactivateComponent("image");
 * viewer.deactivateComponent("direction");
 * viewer.deactivateComponent("sequence");
 *
 * viewer.activateComponent("slider");
 *
 * var sliderComponent = viewer.getComponent("slider");
 * ```
 */
declare class SliderComponent extends Component<SliderConfiguration> {
  static componentName: string;

  /**
   * @ignore
   */
  constructor(
    name: string,
    container: Container,
    navigator: Navigator,
    viewportCoords?: ViewportCoords
  ): this;
  _activate(): void;
  _deactivate(): void;
  _getDefaultConfiguration(): SliderConfiguration;
}

declare class SpatialComponent extends Component<SpatialConfiguration> {
  static componentName: string;

  /**
   * @ignore
   */
  constructor(name: string, container: Container, navigator: Navigator): this;

  /**
   * Get the currently set camera frame override color, or null if
   * no color is set.
   * @param {string} clusterId - Id of the cluster.
   * @returns {string | number | null} The current override color
   * for the cluster.
   */
  getCameraOverrideColor(clusterId: string): string | number | null;

  /**
   * 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>;

  /**
   * Get the currently set point override color, or null if
   * no color is set.
   * @param {string} clusterId - Id of the cluster.
   * @returns {string | number | null} The current override color
   * for the cluster.
   */
  getPointOverrideColor(clusterId: string): string | number | null;

  /**
   * Override the camera color for a cluster.
   * @description The configured color is applied for all visible
   * visualization modes, overriding the color of the currently
   * selected mode.
   * @param {string} clusterId - Id of the cluster to configure.
   * @param {number | string} color - The color to paint the cameras with.
   * @example ```js
   * spatialComponent.setCameraOverrideColor('my-cluster-id', 0x00ff00);
   * ```
   */
  setCameraOverrideColor(
    clusterId: string,
    color: number | string | null
  ): void;

  /**
   * Override the point color for a cluster.
   * @description The configured color is applied for all visible
   * visualization modes, overriding the color of the currently
   * selected mode.
   * @param {string} clusterId - Id of the cluster to configure.
   * @param {number | string} color - The color to paint the points with.
   * @example ```js
   * spatialComponent.setPointOverrideColor('my-cluster-id', 0x00ff00);
   * ```
   */
  setPointOverrideColor(clusterId: string, color: number | string | null): void;
  _activate(): void;
  _deactivate(): void;
  _getDefaultConfiguration(): SpatialConfiguration;
}
declare class GeometryTagError extends MapillaryError {
  constructor(message?: string): this;
}
/**
 * @class PointGeometry
 * @classdesc Represents a point geometry in the 2D basic image coordinate system.
 * @example ```js
 * var basicPoint = [0.5, 0.7];
 * var pointGeometry = new PointGeometry(basicPoint);
 * ```
 */
declare class PointGeometry extends Geometry {
  /**
   * Create a point geometry.
   * @constructor
   * @param {Array<number>} point - An array representing the basic coordinates of
   * the point.
   * @throws {GeometryTagError} Point coordinates must be valid basic coordinates.
   */
  constructor(point: number[]): this;

  /**
   * Get point property.
   * @returns {Array<number>} Array representing the basic coordinates of the point.
   */
  point: number[];

  /**
   * Get the 2D basic coordinates for the centroid of the point, i.e. the 2D
   * basic coordinates of the point itself.
   * @returns {Array<number>} 2D basic coordinates representing the centroid.
   * @ignore
   */
  getCentroid2d(): number[];

  /**
   * Get the 3D world coordinates for the centroid of the point, i.e. the 3D
   * world coordinates of the point itself.
   * @param {Transform} transform - The transform of the image related to the point.
   * @returns {Array<number>} 3D world coordinates representing the centroid.
   * @ignore
   */
  getCentroid3d(transform: Transform): number[];

  /**
   * Set the centroid of the point, i.e. the point coordinates.
   * @param {Array<number>} value - The new value of the centroid.
   * @param {Transform} transform - The transform of the image related to the point.
   * @ignore
   */
  setCentroid2d(value: number[], transform: Transform): void;
}
/**
 * @class PointsGeometry
 * @classdesc Represents a point set in the 2D basic image coordinate system.
 * @example ```js
 * var points = [[0.5, 0.3], [0.7, 0.3], [0.6, 0.5]];
 * var pointsGeometry = new PointsGeometry(points);
 * ```
 */
declare class PointsGeometry extends Geometry {
  /**
   * Create a points geometry.
   * @constructor
   * @param {Array<Array<number>>} points - Array of 2D points on the basic coordinate
   * system. The number of points must be greater than or equal to two.
   * @throws {GeometryTagError} Point coordinates must be valid basic coordinates.
   */
  constructor(points: number[][]): this;

  /**
   * Get points property.
   * @returns {Array<Array<number>>} Array of 2d points.
   */
  points: number[][];

  /**
   * Add a point to the point set.
   * @param {Array<number>} point - Point to add.
   * @ignore
   */
  addPoint2d(point: number[]): void;

  /**
   * Get the coordinates of a point from the point set representation of the geometry.
   * @param {number} index - Point index.
   * @returns {Array<number>} Array representing the 2D basic coordinates of the point.
   * @ignore
   */
  getPoint2d(index: number): number[];

  /**
   * Remove a point from the point set.
   * @param {number} index - The index of the point to remove.
   * @ignore
   */
  removePoint2d(index: number): void;

  /**
   * @ignore
   */
  setVertex2d(index: number, value: number[], transform: Transform): void;

  /**
   * @ignore
   */
  setPoint2d(index: number, value: number[], transform: Transform): void;

  /**
   * @ignore
   */
  getPoints3d(transform: Transform): number[][];

  /**
   * @ignore
   */
  getPoint3d(index: number, transform: Transform): number[];

  /**
   * @ignore
   */
  getPoints2d(): number[][];

  /**
   * @ignore
   */
  getCentroid2d(transform?: Transform): number[];

  /**
   * @ignore
   */
  getCentroid3d(transform: Transform): number[];

  /**
   * @ignore
   */
  getRect2d(transform: Transform): number[];

  /**
   * @ignore
   */
  setCentroid2d(value: number[], transform: Transform): void;
}
/**
 * @class VertexGeometry
 * @abstract
 * @classdesc Represents a vertex geometry.
 */
declare class VertexGeometry extends Geometry {
  /**
   * Create a vertex geometry.
   * @constructor
   * @ignore
   */
  constructor(): this;

  /**
   * Get the 3D coordinates for the vertices of the geometry with possibly
   * subsampled points along the lines.
   * @param {Transform} transform - The transform of the image related to
   * the geometry.
   * @returns {Array<Array<number>>} Polygon array of 3D world coordinates
   * representing the geometry.
   * @ignore
   */
  getPoints3d(transform: Transform): number[][];

  /**
   * Get the polygon pole of inaccessibility, the most
   * distant internal point from the polygon outline.
   * @returns {Array<number>} 2D basic coordinates for the pole of inaccessibility.
   * @ignore
   */
  getPoleOfInaccessibility2d(): number[];

  /**
   * Get the polygon pole of inaccessibility, the most
   * distant internal point from the polygon outline.
   * @param transform - The transform of the image related to
   * the geometry.
   * @returns {Array<number>} 3D world coordinates for the pole of inaccessibility.
   * @ignore
   */
  getPoleOfInaccessibility3d(transform: Transform): number[];

  /**
   * Get the coordinates of a vertex from the polygon representation of the geometry.
   * @param {number} index - Vertex index.
   * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
   * @ignore
   */
  getVertex2d(index: number): number[];

  /**
   * Get a vertex from the polygon representation of the 3D coordinates for the
   * vertices of the geometry.
   * @param {number} index - Vertex index.
   * @param {Transform} transform - The transform of the image related to the geometry.
   * @returns {Array<number>} Array representing the 3D world coordinates of the vertex.
   * @ignore
   */
  getVertex3d(index: number, transform: Transform): number[];

  /**
   * Get a polygon representation of the 2D basic coordinates for the vertices of the geometry.
   * @returns {Array<Array<number>>} Polygon array of 2D basic coordinates representing
   * the vertices of the geometry.
   * @ignore
   */
  getVertices2d(): number[][];

  /**
   * Get a polygon representation of the 3D world coordinates for the vertices of the geometry.
   * @param {Transform} transform - The transform of the image related to the geometry.
   * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
   * the vertices of the geometry.
   * @ignore
   */
  getVertices3d(transform: Transform): number[][];

  /**
   * Get a flattend array of the 3D world coordinates for the
   * triangles filling the geometry.
   * @param {Transform} transform - The transform of the image related to the geometry.
   * @returns {Array<number>} Flattened array of 3D world coordinates of the triangles.
   * @ignore
   */
  getTriangles3d(transform: Transform): number[];

  /**
   * Set the value of a vertex in the polygon representation of the geometry.
   * @description The polygon is defined to have the first vertex at the
   * bottom-left corner with the rest of the vertices following in clockwise order.
   * @param {number} index - The index of the vertex to be set.
   * @param {Array<number>} value - The new value of the vertex.
   * @param {Transform} transform - The transform of the image related to the geometry.
   * @ignore
   */
  setVertex2d(index: number, value: number[], transform: Transform): void;

  /**
   * Finds the polygon pole of inaccessibility, the most distant internal
   * point from the polygon outline.
   * @param {Array<Array<number>>} points2d - 2d points of outline to triangulate.
   * @returns {Array<number>} Point of inaccessibility.
   * @ignore
   */
  _getPoleOfInaccessibility2d(points2d: number[][]): number[];
  _project(points2d: number[][], transform: Transform): number[][];
  _subsample(points2d: number[][], threshold?: number): number[][];

  /**
   * Triangulates a 2d polygon and returns the triangle
   * representation as a flattened array of 3d points.
   * @param {Array<Array<number>>} points2d - 2d points of outline to triangulate.
   * @param {Array<Array<number>>} points3d - 3d points of outline corresponding to the 2d points.
   * @param {Array<Array<Array<number>>>} [holes2d] - 2d points of holes to triangulate.
   * @param {Array<Array<Array<number>>>} [holes3d] - 3d points of holes corresponding to the 2d points.
   * @returns {Array<number>} Flattened array of 3d points ordered based on the triangles.
   * @ignore
   */
  _triangulate(
    points2d: number[][],
    points3d: number[][],
    holes2d?: number[][][],
    holes3d?: number[][][]
  ): number[];
  _triangulateSpherical(
    points2d: number[][],
    holes2d: number[][][],
    transform: Transform
  ): number[];
  _unproject(
    points2d: number[][],
    transform: Transform,
    distance?: number
  ): number[][];
}
/**
 * @class PolygonGeometry
 * @classdesc Represents a polygon geometry in the 2D basic image coordinate system.
 * All polygons and holes provided to the constructor needs to be closed.
 * @example ```js
 * var basicPolygon = [[0.5, 0.3], [0.7, 0.3], [0.6, 0.5], [0.5, 0.3]];
 * var polygonGeometry = new PolygonGeometry(basicPolygon);
 * ```
 */
declare class PolygonGeometry extends VertexGeometry {
  /**
   * Create a polygon geometry.
   * @constructor
   * @param {Array<Array<number>>} polygon - Array of polygon vertices. Must be closed.
   * @param {Array<Array<Array<number>>>} [holes] - Array of arrays of hole vertices.
   * Each array of holes vertices must be closed.
   * @throws {GeometryTagError} Polygon coordinates must be valid basic coordinates.
   */
  constructor(polygon: number[][], holes?: number[][][]): this;

  /**
   * Get polygon property.
   * @returns {Array<Array<number>>} Closed 2d polygon.
   */
  polygon: number[][];

  /**
   * Get holes property.
   * @returns {Array<Array<Array<number>>>} Holes of 2d polygon.
   */
  holes: number[][][];

  /**
   * Add a vertex to the polygon by appending it after the last vertex.
   * @param {Array<number>} vertex - Vertex to add.
   * @ignore
   */
  addVertex2d(vertex: number[]): void;

  /**
   * Get the coordinates of a vertex from the polygon representation of the geometry.
   * @param {number} index - Vertex index.
   * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
   * @ignore
   */
  getVertex2d(index: number): number[];

  /**
   * Remove a vertex from the polygon.
   * @param {number} index - The index of the vertex to remove.
   * @ignore
   */
  removeVertex2d(index: number): void;

  /**
   * @ignore
   */
  setVertex2d(index: number, value: number[], transform: Transform): void;

  /**
   * @ignore
   */
  setCentroid2d(value: number[], transform: Transform): void;

  /**
   * @ignore
   */
  getPoints3d(transform: Transform): number[][];

  /**
   * @ignore
   */
  getVertex3d(index: number, transform: Transform): number[];

  /**
   * @ignore
   */
  getVertices2d(): number[][];

  /**
   * @ignore
   */
  getVertices3d(transform: Transform): number[][];

  /**
   * Get a polygon representation of the 3D coordinates for the vertices of each hole
   * of the geometry. Line segments between vertices will possibly be subsampled
   * resulting in a larger number of points than the total number of vertices.
   * @param {Transform} transform - The transform of the image related to the geometry.
   * @returns {Array<Array<Array<number>>>} Array of hole polygons in 3D world coordinates
   * representing the vertices of each hole of the geometry.
   * @ignore
   */
  getHolePoints3d(transform: Transform): number[][][];

  /**
   * Get a polygon representation of the 3D coordinates for the vertices of each hole
   * of the geometry.
   * @param {Transform} transform - The transform of the image related to the geometry.
   * @returns {Array<Array<Array<number>>>} Array of hole polygons in 3D world coordinates
   * representing the vertices of each hole of the geometry.
   * @ignore
   */
  getHoleVertices3d(transform: Transform): number[][][];

  /**
   * @ignore
   */
  getCentroid2d(): number[];

  /**
   * @ignore
   */
  getCentroid3d(transform: Transform): number[];

  /**
   * @ignore
   */
  get3dDomainTriangles3d(transform: Transform): number[];

  /**
   * @ignore
   */
  getTriangles3d(transform: Transform): number[];

  /**
   * @ignore
   */
  getPoleOfInaccessibility2d(): number[];

  /**
   * @ignore
   */
  getPoleOfInaccessibility3d(transform: Transform): number[];
}
/**
 * @class RectGeometry
 * @classdesc Represents a rectangle geometry in the 2D basic image coordinate system.
 * @example ```js
 * var basicRect = [0.5, 0.3, 0.7, 0.4];
 * var rectGeometry = new RectGeometry(basicRect);
 * ```
 */
declare class RectGeometry extends VertexGeometry {
  /**
   * Create a rectangle geometry.
   * @constructor
   * @param {Array<number>} rect - An array representing the top-left and bottom-right
   * corners of the rectangle in basic coordinates. Ordered according to [x0, y0, x1, y1].
   * @throws {GeometryTagError} Rectangle coordinates must be valid basic coordinates.
   */
  constructor(rect: number[]): this;

  /**
   * Get anchor index property.
   * @returns {number} Index representing the current anchor property if
   * achoring indexing has been initialized. If anchor indexing has not been
   * initialized or has been terminated undefined will be returned.
   * @ignore
   */
  anchorIndex: number;

  /**
   * Get inverted property.
   * @returns {boolean} Boolean determining whether the rect geometry is
   * inverted. For spherical the rect geometrye may be inverted.
   * @ignore
   */
  inverted: boolean;

  /**
   * Get rect property.
   * @returns {Array<number>} Array representing the top-left and bottom-right
   * corners of the rectangle in basic coordinates.
   */
  rect: number[];

  /**
   * Initialize anchor indexing to enable setting opposite vertex.
   * @param {number} [index] - The index of the vertex to use as anchor.
   * @throws {GeometryTagError} If anchor indexing has already been initialized.
   * @throws {GeometryTagError} If index is not valid (0 to 3).
   * @ignore
   */
  initializeAnchorIndexing(index?: number): void;

  /**
   * Terminate anchor indexing to disable setting pposite vertex.
   * @ignore
   */
  terminateAnchorIndexing(): void;

  /**
   * Set the value of the vertex opposite to the anchor in the polygon
   * representation of the rectangle.
   * @description Setting the opposite vertex may change the anchor index.
   * @param {Array<number>} opposite - The new value of the vertex opposite to the anchor.
   * @param {Transform} transform - The transform of the image related to the rectangle.
   * @throws {GeometryTagError} When anchor indexing has not been initialized.
   * @ignore
   */
  setOppositeVertex2d(opposite: number[], transform: Transform): void;

  /**
   * Set the value of a vertex in the polygon representation of the rectangle.
   * @description The polygon is defined to have the first vertex at the
   * bottom-left corner with the rest of the vertices following in clockwise order.
   * @param {number} index - The index of the vertex to be set.
   * @param {Array<number>} value - The new value of the vertex.
   * @param {Transform} transform - The transform of the image related to the rectangle.
   * @ignore
   */
  setVertex2d(index: number, value: number[], transform: Transform): void;

  /**
   * @ignore
   */
  setCentroid2d(value: number[], transform: Transform): void;

  /**
   * Get the 3D coordinates for the vertices of the rectangle with
   * interpolated points along the lines.
   * @param {Transform} transform - The transform of the image related to
   * the rectangle.
   * @returns {Array<Array<number>>} Polygon array of 3D world coordinates
   * representing the rectangle.
   * @ignore
   */
  getPoints3d(transform: Transform): number[][];

  /**
   * Get the coordinates of a vertex from the polygon representation of the geometry.
   * @description The first vertex represents the bottom-left corner with the rest of
   * the vertices following in clockwise order. The method shifts the right side
   * coordinates of the rectangle by one unit to ensure that the vertices are ordered
   * clockwise.
   * @param {number} index - Vertex index.
   * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
   * @ignore
   */
  getVertex2d(index: number): number[];

  /**
   * Get the coordinates of a vertex from the polygon representation of the geometry.
   * @description The first vertex represents the bottom-left corner with the rest of
   * the vertices following in clockwise order. The coordinates will not be shifted
   * so they may not appear in clockwise order when layed out on the plane.
   * @param {number} index - Vertex index.
   * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
   * @ignore
   */
  getNonAdjustedVertex2d(index: number): number[];

  /**
   * Get a vertex from the polygon representation of the 3D coordinates for the
   * vertices of the geometry.
   * @description The first vertex represents the bottom-left corner with the rest of
   * the vertices following in clockwise order.
   * @param {number} index - Vertex index.
   * @param {Transform} transform - The transform of the image related to the geometry.
   * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
   * the vertices of the geometry.
   * @ignore
   */
  getVertex3d(index: number, transform: Transform): number[];

  /**
   * Get a polygon representation of the 2D basic coordinates for the vertices of the rectangle.
   * @description The first vertex represents the bottom-left corner with the rest of
   * the vertices following in clockwise order.
   * @returns {Array<Array<number>>} Polygon array of 2D basic coordinates representing
   * the rectangle vertices.
   * @ignore
   */
  getVertices2d(): number[][];

  /**
   * Get a polygon representation of the 3D coordinates for the vertices of the rectangle.
   * @description The first vertex represents the bottom-left corner with the rest of
   * the vertices following in clockwise order.
   * @param {Transform} transform - The transform of the image related to the rectangle.
   * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
   * the rectangle vertices.
   * @ignore
   */
  getVertices3d(transform: Transform): number[][];

  /**
   * @ignore
   */
  getCentroid2d(): number[];

  /**
   * @ignore
   */
  getCentroid3d(transform: Transform): number[];

  /**
   * @ignore
   */
  getPoleOfInaccessibility2d(): number[];

  /**
   * @ignore
   */
  getPoleOfInaccessibility3d(transform: Transform): number[];

  /**
   * @ignore
   */
  getTriangles3d(transform: Transform): number[];

  /**
   * Check if a particular bottom-right value is valid according to the current
   * rectangle coordinates.
   * @param {Array<number>} bottomRight - The bottom-right coordinates to validate
   * @returns {boolean} Value indicating whether the provided bottom-right coordinates
   * are valid.
   * @ignore
   */
  validate(bottomRight: number[]): boolean;
}
/**
 * @event
 */
export type TagEventType = "click" | "geometry" | "tag";
/**
 * Interface for tag state events.
 * @example ```js
 * var tag = new OutlineTag({ // tag options });
 * // Set an event listener
 * tag.on('tag', function() {
 *   console.log("A tag event has occurred.");
 * });
 * ```
 */
export interface TagStateEvent {
  /**
   * The component object that fired the event.
   */
  target: Tag;

  /**
   * The event type.
   */
  type: TagEventType;
}
/**
 * @class Tag
 * @abstract
 * @classdesc Abstract class representing the basic functionality of for a tag.
 */
declare class Tag extends EventEmitter {
  _id: string;
  _geometry: Geometry;

  /**
   * Create a tag.
   * @constructor
   * @param {string} id
   * @param {Geometry} geometry
   */
  constructor(id: string, geometry: Geometry): this;

  /**
   * Get id property.
   * @returns {string}
   */
  id: string;

  /**
   * Get geometry property.
   * @returns {Geometry} The geometry of the tag.
   */
  geometry: Geometry;
}
/**
 * Interface for the options that define the behavior and
 * appearance of the outline tag.
 * @interface
 */
export interface ExtremePointTagOptions {
  /**
   * Indicate whether the tag geometry should be editable.
   * @description Polygon tags with two dimensional domain
   * are never editable.
   * @default false
   */
  editable?: boolean;

  /**
   * Color for the interior fill as a hexadecimal number.
   * @default 0xFFFFFF
   */
  fillColor?: number;

  /**
   * Opacity of the interior fill between 0 and 1.
   * @default 0.3
   */
  fillOpacity?: number;

  /**
   * Determines whether vertices should be indicated by points
   * when tag is editable.
   * @default true
   */
  indicateVertices?: boolean;

  /**
   * Color for the edge lines as a hexadecimal number.
   * @default 0xFFFFFF
   */
  lineColor?: number;

  /**
   * Opacity of the edge lines on [0, 1].
   * @default 1
   */
  lineOpacity?: number;

  /**
   * Line width in pixels.
   * @default 1
   */
  lineWidth?: number;
}
/**
 * @class ExtremePointTag
 * @classdesc Tag holding properties for visualizing a extreme points
 * and their outline.
 * @example ```js
 * var geometry = new PointsGeometry([[0.3, 0.3], [0.5, 0.4]]);
 * var tag = new ExtremePointTag(
 *     "id-1",
 *     geometry
 *     { editable: true, lineColor: 0xff0000 });
 *
 * tagComponent.add([tag]);
 * ```
 */
declare class ExtremePointTag extends Tag {
  /**
   * Create an extreme point tag.
   * @override
   * @constructor
   * @param {string} id - Unique identifier of the tag.
   * @param {PointsGeometry} geometry - Geometry defining points of tag.
   * @param {ExtremePointTagOptions} options - Options defining the visual appearance and
   * behavior of the extreme point tag.
   */
  constructor(
    id: string,
    geometry: PointsGeometry,
    options?: ExtremePointTagOptions
  ): this;

  /**
   * Get editable property.
   * @returns {boolean} Value indicating if tag is editable.
   */
  editable: boolean;

  /**
   * Set editable property.
   * @param {boolean}
   * @fires changed
   */
  -editable: boolean;

  /**
   * Get fill color property.
   * @returns {number}
   */
  fillColor: number;

  /**
   * Set fill color property.
   * @param {number}
   * @fires changed
   */
  -fillColor: number;

  /**
   * Get fill opacity property.
   * @returns {number}
   */
  fillOpacity: number;

  /**
   * Set fill opacity property.
   * @param {number}
   * @fires changed
   */
  -fillOpacity: number;

  /**
   * @inheritdoc
   */
  geometry: Geometry;

  /**
   * Get indicate vertices property.
   * @returns {boolean} Value indicating if vertices should be indicated
   * when tag is editable.
   */
  indicateVertices: boolean;

  /**
   * Get line color property.
   * @returns {number}
   */
  lineColor: number;

  /**
   * Get line opacity property.
   * @returns {number}
   */
  lineOpacity: number;

  /**
   * Get line width property.
   * @returns {number}
   */
  lineWidth: number;

  /**
   * Set options for tag.
   * @description Sets all the option properties provided and keeps
   * the rest of the values as is.
   * @param {ExtremePointTagOptions} options - Extreme point tag options
   * @fires changed
   */
  setOptions(options: ExtremePointTagOptions): void;
}
/**
 * Enumeration for tag domains.
 * @enum {number} *
 * @readonly
 * @description Defines where lines between two vertices are treated
 * as straight.
 *
 * Only applicable for polygons. For rectangles lines between
 * vertices are always treated as straight in the distorted 2D
 * projection and bended in the undistorted 3D space.
 */

declare var TagDomain: {|
  +TwoDimensional: 0, // 0
  +ThreeDimensional: 1, // 1
|};

/**
 * Interface for the options that define the behavior and
 * appearance of the outline tag.
 * @interface
 */
export interface OutlineTagOptions {
  /**
   * The domain where lines between vertices are treated as straight.
   * @description Only applicable for tags that renders polygons.
   *
   * If the domain is specified as two dimensional, editing of the
   * polygon will be disabled.
   * @default {TagDomain.TwoDimensional}
   */
  domain?: $Values<typeof TagDomain>;

  /**
   * Indicate whether the tag geometry should be editable.
   * @description Polygon tags with two dimensional domain
   * are never editable.
   * @default false
   */
  editable?: boolean;

  /**
   * Color for the interior fill as a hexadecimal number.
   * @default 0xFFFFFF
   */
  fillColor?: number;

  /**
   * Opacity of the interior fill between 0 and 1.
   * @default 0.3
   */
  fillOpacity?: number;

  /**
   * A string referencing the sprite data property to pull from.
   * @description Icon is not shown for tags with polygon
   * geometries in spherical.
   */
  icon?: string;

  /**
   * Value determining how the icon will float with respect to its anchor
   * position when rendering.
   * @default {Alignment.Center}
   */
  iconFloat?: $Values<typeof Alignment>;

  /**
   * Number representing the index for where to show the icon or
   * text for a rectangle geometry.
   * @description The default index corresponds to the bottom right corner.
   * @default 3
   */
  iconIndex?: number;

  /**
   * Determines whether vertices should be indicated by points
   * when tag is editable.
   * @default true
   */
  indicateVertices?: boolean;

  /**
   * Color for the edge lines as a hexadecimal number.
   * @default 0xFFFFFF
   */
  lineColor?: number;

  /**
   * Opacity of the edge lines on [0, 1].
   * @default 1
   */
  lineOpacity?: number;

  /**
   * Line width in pixels.
   * @default 1
   */
  lineWidth?: number;

  /**
   * Text shown as label if no icon is provided.
   * @description Text is not shown for tags with
   * polygon geometries in spherical.
   */
  text?: string;

  /**
   * Text color as hexadecimal number.
   * @default 0xFFFFFF
   */
  textColor?: number;
}
/**
 * Interface for the options that define the behavior and
 * appearance of the spot tag.
 * @interface
 */
export interface SpotTagOptions {
  /**
   * Color for the spot specified as a hexadecimal number.
   * @default 0xFFFFFF
   */
  color?: number;

  /**
   * Indicate whether the tag geometry should be editable.
   * @default false
   */
  editable?: boolean;

  /**
   * A string referencing the sprite data property to pull from.
   */
  icon?: string;

  /**
   * Text shown as label if no icon is provided.
   */
  text?: string;

  /**
   * Text color as hexadecimal number.
   * @default 0xFFFFFF
   */
  textColor?: number;
}
/**
 * @class OutlineTag
 * @classdesc Tag holding properties for visualizing a geometry outline.
 * @example ```js
 * var geometry = new RectGeometry([0.3, 0.3, 0.5, 0.4]);
 * var tag = new OutlineTag(
 *     "id-1",
 *     geometry
 *     { editable: true, lineColor: 0xff0000 });
 *
 * tagComponent.add([tag]);
 * ```
 */
declare class OutlineTag extends Tag {
  /**
   * Create an outline tag.
   * @override
   * @constructor
   * @param {string} id - Unique identifier of the tag.
   * @param {VertexGeometry} geometry - Geometry defining vertices of tag.
   * @param {OutlineTagOptions} options - Options defining the visual appearance and
   * behavior of the outline tag.
   */
  constructor(
    id: string,
    geometry: VertexGeometry,
    options?: OutlineTagOptions
  ): this;

  /**
   * Get domain property.
   * @description Readonly property that can only be set in constructor.
   * @returns Value indicating the domain of the tag.
   */
  domain: $Values<typeof TagDomain>;

  /**
   * Get editable property.
   * @returns {boolean} Value indicating if tag is editable.
   */
  editable: boolean;

  /**
   * Set editable property.
   * @param {boolean}
   * @fires changed
   */
  -editable: boolean;

  /**
   * Get fill color property.
   * @returns {number}
   */
  fillColor: number;

  /**
   * Set fill color property.
   * @param {number}
   * @fires changed
   */
  -fillColor: number;

  /**
   * Get fill opacity property.
   * @returns {number}
   */
  fillOpacity: number;

  /**
   * Set fill opacity property.
   * @param {number}
   * @fires changed
   */
  -fillOpacity: number;

  /**
   * @inheritdoc
   */
  geometry: Geometry;

  /**
   * Get icon property.
   * @returns {string}
   */
  icon: string;

  /**
   * Set icon property.
   * @param {string}
   * @fires changed
   */
  -icon: string;

  /**
 * Get icon float property.
 * @returns {$Values<
                typeof
                Alignment>}
 */
  iconFloat: $Values<typeof Alignment>;

  /**
 * Set icon float property.
 * @param {$Values<
                typeof
                Alignment>}
 * @fires changed
 */
  -iconFloat: $Values<typeof Alignment>;

  /**
   * Get icon index property.
   * @returns {number}
   */
  iconIndex: number;

  /**
   * Set icon index property.
   * @param {number}
   * @fires changed
   */
  -iconIndex: number;

  /**
   * Get indicate vertices property.
   * @returns {boolean} Value indicating if vertices should be indicated
   * when tag is editable.
   */
  indicateVertices: boolean;

  /**
   * Set indicate vertices property.
   * @param {boolean}
   * @fires changed
   */
  -indicateVertices: boolean;

  /**
   * Get line color property.
   * @returns {number}
   */
  lineColor: number;

  /**
   * Set line color property.
   * @param {number}
   * @fires changed
   */
  -lineColor: number;

  /**
   * Get line opacity property.
   * @returns {number}
   */
  lineOpacity: number;

  /**
   * Set line opacity property.
   * @param {number}
   * @fires changed
   */
  -lineOpacity: number;

  /**
   * Get line width property.
   * @returns {number}
   */
  lineWidth: number;

  /**
   * Set line width property.
   * @param {number}
   * @fires changed
   */
  -lineWidth: number;

  /**
   * Get text property.
   * @returns {string}
   */
  text: string;

  /**
   * Set text property.
   * @param {string}
   * @fires changed
   */
  -text: string;

  /**
   * Get text color property.
   * @returns {number}
   */
  textColor: number;

  /**
   * Set text color property.
   * @param {number}
   * @fires changed
   */
  -textColor: number;

  /**
   * Set options for tag.
   * @description Sets all the option properties provided and keeps
   * the rest of the values as is.
   * @param {OutlineTagOptions} options - Outline tag options
   * @fires changed
   */
  setOptions(options: OutlineTagOptions): void;
}
/**
 * @class SpotTag
 * @classdesc Tag holding properties for visualizing the centroid of a geometry.
 * @example ```js
 * var geometry = new PointGeometry([0.3, 0.3]);
 * var tag = new SpotTag(
 *     "id-1",
 *     geometry
 *     { editable: true, color: 0xff0000 });
 *
 * tagComponent.add([tag]);
 * ```
 */
declare class SpotTag extends Tag {
  _geometry: Geometry;

  /**
   * Create a spot tag.
   * @override
   * @constructor
   * @param {string} id
   * @param {Geometry} geometry
   * @param {IOutlineTagOptions} options - Options defining the visual appearance and
   * behavior of the spot tag.
   */
  constructor(id: string, geometry: Geometry, options?: SpotTagOptions): this;

  /**
   * Get color property.
   * @returns {number} The color of the spot as a hexagonal number;
   */
  color: number;

  /**
   * Set color property.
   * @param {number}
   * @fires changed
   */
  -color: number;

  /**
   * Get editable property.
   * @returns {boolean} Value indicating if tag is editable.
   */
  editable: boolean;

  /**
   * Set editable property.
   * @param {boolean}
   * @fires changed
   */
  -editable: number;

  /**
   * Get icon property.
   * @returns {string}
   */
  icon: string;

  /**
   * Set icon property.
   * @param {string}
   * @fires changed
   */
  -icon: string;

  /**
   * Get text property.
   * @returns {string}
   */
  text: string;

  /**
   * Set text property.
   * @param {string}
   * @fires changed
   */
  -text: string;

  /**
   * Get text color property.
   * @returns {number}
   */
  textColor: number;

  /**
   * Set text color property.
   * @param {number}
   * @fires changed
   */
  -textColor: number;

  /**
   * Set options for tag.
   * @description Sets all the option properties provided and keps
   * the rest of the values as is.
   * @param {SpotTagOptions} options - Spot tag options
   * @fires changed
   */
  setOptions(options: SpotTagOptions): void;
}
/**
 * @class TagComponent
 * @classdesc [object Object],[object Object],[object Object]
 * @example ```js
 * var viewer = new Viewer({ component: { tag: true } }, ...);
 *
 * var tagComponent = viewer.getComponent("tag");
 * ```
 */
declare class TagComponent extends Component<TagConfiguration> {
  /**
   * @inheritdoc
   */
  static componentName: string;

  /**
   * @ignore
   */
  constructor(name: string, container: Container, navigator: Navigator): this;

  /**
   * Add tags to the tag set or replace tags in the tag set.
   * @description If a tag already in the set has the same
   * id as one of the tags added, the old tag will be removed
   * the added tag will take its place.
   * @param {Array<Tag>} tags - Tags to add.
   * @example ```js
   * tagComponent.add([tag1, tag2]);
   * ```
   */
  add(tags: Tag[]): void;

  /**
   * Calculate the smallest rectangle containing all the points
   * in the points geometry.
   * @description The result may be different depending on if the
   * current image is an spherical or not. If the
   * current image is an spherical the rectangle may
   * wrap the horizontal border of the image.
   * @returns {Promise<Array<number>>} [object Object],[object Object],[object Object]
   */
  calculateRect(geometry: PointsGeometry): Promise<number[]>;

  /**
   * Force the creation of a geometry programatically using its
   * current vertices.
   * @description [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
   * @fires geometrycreate
   * @example ```js
   * tagComponent.on("geometrycreate", function(geometry) {
   *     console.log(geometry);
   * });
   *
   * tagComponent.create();
   * ```
   */
  create(): void;

  /**
 * Change the current tag mode.
 * @description Change the tag mode to one of the create modes for creating new geometries.
 * @param {$Values<
                typeof
                TagMode>} mode - New tag mode.
 * @fires tagmode
 * @example ```js
 * tagComponent.changeMode(TagMode.CreateRect);
 * ```
 */
  changeMode(mode: $Values<typeof TagMode>): void;

  /**
   * Returns the tag in the tag set with the specified id, or
   * undefined if the id matches no tag.
   * @param {string} tagId - Id of the tag.
   * @example ```js
   * var tag = tagComponent.get("tagId");
   * ```
   */
  get(tagId: string): Tag;

  /**
   * Returns an array of all tags.
   * @example ```js
   * var tags = tagComponent.getAll();
   * ```
   */
  getAll(): Tag[];

  /**
   * Returns an array of tag ids for tags that contain the specified point.
   * @description The pixel point must lie inside the polygon or rectangle
   * of an added tag for the tag id to be returned. Tag ids for
   * tags that do not have a fill will also be returned if the point is inside
   * the geometry of the tag. Tags with point geometries can not be retrieved.
   *
   * No tag ids will be returned for polygons rendered in cropped spherical or
   * rectangles rendered in spherical.
   *
   * Notice that the pixelPoint argument requires x, y coordinates from pixel space.
   *
   * With this function, you can use the coordinates provided by mouse
   * events to get information out of the tag component.
   *
   * If no tag at exist the pixel point, an empty array will be returned.
   * @param {Array<number>} pixelPoint - Pixel coordinates on the viewer element.
   * @returns {Promise<Array<string>>} Promise to the ids of the tags that
   * contain the specified pixel point.
   * @example ```js
   * tagComponent.getTagIdsAt([100, 100])
   *     .then((tagIds) => { console.log(tagIds); });
   * ```
   */
  getTagIdsAt(pixelPoint: number[]): Promise<string[]>;

  /**
   * Check if a tag exist in the tag set.
   * @param {string} tagId - Id of the tag.
   * @example ```js
   * var tagExists = tagComponent.has("tagId");
   * ```
   */
  has(tagId: string): boolean;

  /**
   * Remove tags with the specified ids from the tag set.
   * @param {Array<string>} tagIds - Ids for tags to remove.
   * @example ```js
   * tagComponent.remove(["id-1", "id-2"]);
   * ```
   */
  remove(tagIds: string[]): void;

  /**
   * Remove all tags from the tag set.
   * @example ```js
   * tagComponent.removeAll();
   * ```
   */
  removeAll(): void;
  _activate(): void;
  _deactivate(): void;
  _getDefaultConfiguration(): TagConfiguration;
}
/**
 * @class ZoomComponent
 * @classdesc Component rendering UI elements used for zooming.
 * @example ```js
 * var viewer = new Viewer({ ... });
 *
 * var zoomComponent = viewer.getComponent("zoom");
 * zoomComponent.configure({ size: ComponentSize.Small });
 * ```
 */
declare class ZoomComponent extends Component<ZoomConfiguration> {
  static componentName: string;
  constructor(name: string, container: Container, navigator: Navigator): this;
  _activate(): void;
  _deactivate(): void;
  _getDefaultConfiguration(): ZoomConfiguration;
}
declare export {
  Alignment,
  ArgumentMapillaryError,
  BearingComponent,
  CacheComponent,
  CameraControls,
  CameraVisualizationMode,
  CancelMapillaryError,
  CircleMarker,
  Component,
  ComponentSize,
  DataProviderBase,
  DirectionComponent,
  DragPanHandler,
  EventEmitter,
  ExtremePointTag,
  FISHEYE_CAMERA_TYPE,
  FisheyeCamera,
  Geometry,
  GeometryProviderBase,
  GeometryTagError,
  GraphDataProvider,
  GraphMapillaryError,
  Image,
  KeyPlayHandler,
  KeySequenceNavigationHandler,
  KeySpatialNavigationHandler,
  KeyZoomHandler,
  KeyboardComponent,
  MapillaryError,
  Marker,
  MarkerComponent,
  NavigationDirection,
  OriginalPositionMode,
  OutlineTag,
  PERSPECTIVE_CAMERA_TYPE,
  PerspectiveCamera,
  PointGeometry,
  PointVisualizationMode,
  PointerComponent,
  PointsGeometry,
  PolygonGeometry,
  Popup,
  PopupComponent,
  RectGeometry,
  RenderMode,
  RenderPass,
  S2GeometryProvider,
  SPHERICAL_CAMERA_TYPE,
  SphericalCamera,
  ScrollZoomHandler,
  SequenceComponent,
  Shader,
  ShaderChunk,
  SimpleMarker,
  SliderComponent,
  SliderConfigurationMode,
  SpatialComponent,
  SpotTag,
  Tag,
  TagComponent,
  TagDomain,
  TagMode,
  TouchZoomHandler,
  TransitionMode,
  VertexGeometry,
  Viewer,
  ZoomComponent,
  decompress,
  ecefToEnu,
  ecefToGeodetic,
  enuToEcef,
  enuToGeodetic,
  fetchArrayBuffer,
  geodeticToEcef,
  geodeticToEnu,
  isFallbackSupported,
  isSupported,
  readMeshPbf,
  resolveShader,
};