1 import { Observable, Subject, Subscription, BehaviorSubject, Scheduler } from 'rxjs';
2 import * as THREE from 'three';
3 import * as vd from 'virtual-dom';
6 * Convert coordinates from geodetic (WGS84) reference to local topocentric
9 * @param {number} lng Longitude in degrees.
10 * @param {number} lat Latitude in degrees.
11 * @param {number} alt Altitude in meters.
12 * @param {number} refLng Reference longitude in degrees.
13 * @param {number} refLat Reference latitude in degrees.
14 * @param {number} refAlt Reference altitude in meters.
15 * @returns {Array<number>} The x, y, z local topocentric ENU coordinates.
17 declare function geodeticToEnu(lng: number, lat: number, alt: number, refLng: number, refLat: number, refAlt: number): number[];
19 * Convert coordinates from local topocentric (ENU) reference to
20 * geodetic (WGS84) reference.
22 * @param {number} x Topocentric ENU coordinate in East direction.
23 * @param {number} y Topocentric ENU coordinate in North direction.
24 * @param {number} z Topocentric ENU coordinate in Up direction.
25 * @param {number} refLng Reference longitude in degrees.
26 * @param {number} refLat Reference latitude in degrees.
27 * @param {number} refAlt Reference altitude in meters.
28 * @returns {Array<number>} The longitude, latitude in degrees
29 * and altitude in meters.
31 declare function enuToGeodetic(x: number, y: number, z: number, refLng: number, refLat: number, refAlt: number): number[];
33 * Convert coordinates from Earth-Centered, Earth-Fixed (ECEF) reference
34 * to local topocentric (ENU) reference.
36 * @param {number} X ECEF X-value.
37 * @param {number} Y ECEF Y-value.
38 * @param {number} Z ECEF Z-value.
39 * @param {number} refLng Reference longitude in degrees.
40 * @param {number} refLat Reference latitude in degrees.
41 * @param {number} refAlt Reference altitude in meters.
42 * @returns {Array<number>} The x, y, z topocentric ENU coordinates in East, North
43 * and Up directions respectively.
45 declare function ecefToEnu(X: number, Y: number, Z: number, refLng: number, refLat: number, refAlt: number): number[];
47 * Convert coordinates from local topocentric (ENU) reference
48 * to Earth-Centered, Earth-Fixed (ECEF) reference.
50 * @param {number} x Topocentric ENU coordinate in East direction.
51 * @param {number} y Topocentric ENU coordinate in North direction.
52 * @param {number} z Topocentric ENU coordinate in Up direction.
53 * @param {number} refLng Reference longitude in degrees.
54 * @param {number} refLat Reference latitude in degrees.
55 * @param {number} refAlt Reference altitude in meters.
56 * @returns {Array<number>} The X, Y, Z ECEF coordinates.
58 declare function enuToEcef(x: number, y: number, z: number, refLng: number, refLat: number, refAlt: number): number[];
60 * Convert coordinates from geodetic reference (WGS84) to Earth-Centered,
61 * Earth-Fixed (ECEF) reference.
63 * @param {number} lng Longitude in degrees.
64 * @param {number} lat Latitude in degrees.
65 * @param {number} alt Altitude in meters.
66 * @returns {Array<number>} The X, Y, Z ECEF coordinates.
68 declare function geodeticToEcef(lng: number, lat: number, alt: number): number[];
70 * Convert coordinates from Earth-Centered, Earth-Fixed (ECEF) reference
71 * to geodetic reference (WGS84).
73 * @param {number} X ECEF X-value.
74 * @param {number} Y ECEF Y-value.
75 * @param {number} Z ECEF Z-value.
76 * @returns {Array<number>} The longitude, latitude in degrees
77 * and altitude in meters.
79 declare function ecefToGeodetic(X: number, Y: number, Z: number): number[];
82 * Contract describing triangulated meshes.
84 interface MeshContract {
86 * Flattened array of faces for the mesh. Each face consist
87 * three vertex indices.
91 * Flattened array of vertices for the mesh. Each vertex
92 * consists of X, Y and Z coordinates in the camera
99 * Decompress and parse an array buffer containing zipped
100 * json data and return as a json object.
102 * @description Handles array buffers continaing zipped json
105 * @param {ArrayBuffer} buffer - Array buffer to decompress.
106 * @returns {Object} Parsed object.
108 declare function decompress<T>(buffer: ArrayBuffer): T;
110 * Retrieves a resource as an array buffer and returns a promise
113 * @description Rejects the promise on request failure.
115 * @param {string} url - URL for resource to retrieve.
116 * @param {Promise} [abort] - Optional promise for aborting
117 * the request through rejection.
118 * @returns {Promise<ArrayBuffer>} Promise to the array buffer
121 declare function fetchArrayBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer>;
123 * Read the fields of a protobuf array buffer into a mesh
126 * @param {ArrayBuffer} buffer - Protobuf array buffer
128 * @returns {MeshContract} Mesh object.
130 declare function readMeshPbf(buffer: ArrayBuffer): MeshContract;
133 * Interface describing event emitter members.
135 interface IEventEmitter {
139 fire<T>(type: string, event: T): void;
141 * Unsubscribe from an event by its name.
142 * @param {string} type - The name of the event
143 * to unsubscribe from.
144 * @param {(event: T) => void} handler - The
147 off<T>(type: string, handler: (event: T) => void): void;
149 * Subscribe to an event by its name.
150 * @param {string} type - The name of the event
152 * @param {(event: T) => void} handler - The
153 * handler called when the event occurs.
155 on<T>(type: string, handler: (event: T) => void): void;
158 declare class EventEmitter implements IEventEmitter {
164 fire<T>(type: string, event: T): void;
166 * Unsubscribe from an event by its name.
167 * @param {string} type - The name of the event
168 * to unsubscribe from.
169 * @param {(event: T) => void} handler - The
172 off<T>(type: string, handler: (event: T) => void): void;
174 * Subscribe to an event by its name.
175 * @param {string} type - The name of the event
177 * @param {(event: T) => void} handler - The
178 * handler called when the event occurs.
180 on<T>(type: string, handler: (event: T) => void): void;
185 * Interface that represents a longitude, latitude coordinate,
186 * measured in degrees. Coordinates are defined in the WGS84 datum.
190 * Latitude, measured in degrees.
194 * Longitude, measured in degrees.
200 * Interface that represents longitude-latitude-altitude
201 * coordinates. Longitude and latitude are measured in degrees
202 * and altitude in meters. Coordinates are defined in the WGS84 datum.
206 interface LngLatAlt extends LngLat {
208 * Altitude, measured in meters.
214 * Contract describing a reconstruction point.
216 interface PointContract {
218 * RGB color vector of the point, normalized to floats
219 * on the interval [0, 1];
223 * Coordinates in metric scale in topocentric ENU
224 * reference frame with respect to a geo reference.
226 coordinates: number[];
230 * Contract describing cluster reconstruction data.
232 interface ClusterContract {
234 * The unique id of the cluster.
238 * The points of the reconstruction.
241 [pointId: string]: PointContract;
244 * The reference longitude, latitude, altitude of
245 * the reconstruction. Determines the
246 * position of the reconstruction in world reference
249 reference: LngLatAlt;
253 * Ent representing an entity with a unique ID.
265 * Ent representing core image properties.
267 interface CoreImageEnt extends IDEnt {
269 * SfM computed longitude, latitude in WGS84 datum, measured in degrees.
271 * @description Optional - no 3D interaction available
274 computed_geometry?: LngLat;
276 * Original EXIF longitude, latitude in WGS84 datum, measured in degrees.
280 * Sequence that the image is part of.
286 * Contract describing core image results.
288 interface CoreImagesContract {
294 * Array of core image ents.
296 images: CoreImageEnt[];
300 * Ent representing camera properties.
302 interface CameraEnt {
304 * Camera type dependent camera parameters.
306 * For perspective and fisheye camera types,
307 * the camera parameters array should be
308 * constructed according to
312 * where focal is the camera focal length,
313 * and k1, k2 are radial distortion parameters.
315 * For spherical camera type the camera
316 * parameters should be an emtpy array.
318 camera_parameters: number[];
320 * Projection type of the camera.
322 * @description Supported camera types are:
330 * Other camera types will be treated as
331 * perspective images.
337 * Ent representing URL properties.
339 interface URLEnt extends IDEnt {
341 * URL for fetching ent data.
347 * Ent representing image creator properties.
349 interface CreatorEnt extends IDEnt {
351 * The username of the creator.
357 * Ent representing spatial image properties.
359 interface SpatialImageEnt extends CameraEnt, IDEnt {
361 * Original EXIF altitude above sea level, in meters.
365 * Scale of atomic reconstruction.
367 * @description Optional - no 3D interaction available
370 atomic_scale?: number;
372 * Timestamp representing the capture date and time.
374 * @description Unix epoch timestamp in milliseconds.
378 * Original EXIF compass angle, measured in degrees.
380 compass_angle: number;
382 * Computed altitude, in meters.
384 * @description Optional - no 3D interaction available
387 computed_altitude?: number;
389 * SfM computed compass angle, measured in degrees.
391 * @description Optional - no 3D interaction available
394 computed_compass_angle?: number;
396 * Rotation vector in angle axis representation.
398 * @description Optional - no 3D interaction available
401 computed_rotation?: number[];
403 * Cluster reconstruction to which the image belongs.
411 * EXIF orientation of original image.
413 exif_orientation: number;
415 * Height of original image, not adjusted for orientation.
419 * SfM connected component id to which the image belongs.
421 * @description Optional - no 3D interaction available
430 * Owner to which the image belongs.
434 * Value specifying if image is accessible to organization members only
439 * Image quality score on the interval [0, 1].
441 quality_score?: number;
443 * Image thumbnail resource.
447 * Width of original image, not adjusted for orientation.
453 * Contract describing ent results.
455 interface EntContract<T> {
467 * Contract describing spatial image results.
469 declare type SpatialImagesContract = EntContract<SpatialImageEnt>[];
472 * Ent representing image properties.
474 interface ImageEnt extends CoreImageEnt, SpatialImageEnt {
478 * Contract describing image results.
480 declare type ImagesContract = EntContract<ImageEnt>[];
483 * Ent representing sequence properties.
485 * @interface SequenceEnt
487 interface SequenceEnt extends IDEnt {
489 * The image IDs of the sequence sorted in
490 * acsending order based on capture time.
496 * Contract describing sequence results.
498 declare type SequenceContract = SequenceEnt;
501 * Ent representing image tile properties.
503 interface ImageTileEnt {
505 * URL for fetching image tile pixel data.
523 * Contract describing image tile results.
525 declare type ImageTilesContract = EntContract<ImageTileEnt[]>;
528 * Contract describing image tile requests.
530 interface ImageTilesRequestContract {
532 * ID of the tile's image.
544 declare type ProviderEventType = "datacreate";
548 * Interface for data provider cell events.
550 interface ProviderCellEvent extends ProviderEvent {
552 * Cell ids for cells where data have been created.
556 * Provider event type.
562 * @interface IGeometryProvider
564 * Interface describing geometry provider members.
566 * This is a specification for implementers to model: it
567 * is not an exported method or class.
569 interface IGeometryProvider {
571 * Convert a geodetic bounding box to the the minimum set
572 * of cell ids containing the bounding box.
574 * @description The bounding box needs
575 * to be sufficiently small to be contained in an area with the size
576 * of maximally four tiles. Up to nine adjacent tiles may be returned.
578 * @param {LngLat} sw - South west corner of bounding box.
579 * @param {LngLat} ne - North east corner of bounding box.
581 * @returns {Array<string>} Array of cell ids.
583 bboxToCellIds(sw: LngLat, ne: LngLat): string[];
585 * Get the cell ids of all adjacent cells.
587 * @description In the case of approximately rectangular cells
588 * this is typically the eight orthogonally and diagonally adjacent
591 * @param {string} cellId - Id of cell.
592 * @returns {Array<string>} Array of cell ids. No specific
593 * order is guaranteed.
595 getAdjacent(cellId: string): string[];
597 * Get the vertices of a cell.
599 * @description The vertices form an unclosed
600 * clockwise polygon in the 2D longitude, latitude
601 * space. No assumption on the position of the first
602 * vertex relative to the others can be made.
604 * @param {string} cellId - Id of cell.
605 * @returns {Array<LngLat>} Unclosed clockwise polygon.
607 getVertices(cellId: string): LngLat[];
609 * Convert geodetic coordinates to a cell id.
611 * @param {LngLat} lngLat - Longitude, latitude to convert.
612 * @returns {string} Cell id for the longitude, latitude.
614 lngLatToCellId(lngLat: LngLat): string;
618 * @interface IDataProvider
620 * Interface describing data provider members.
622 * This is a specification for implementers to model: it is
623 * not an exported method or class.
627 interface IDataProvider extends EventEmitter {
629 * Get geometry property.
631 * @returns {IGeometryProvider} Geometry provider instance.
633 geometry: IGeometryProvider;
635 * Fire when data has been created in the data provider
636 * after initial load.
638 * @param type datacreate
639 * @param event Provider cell event
643 * // Initialize the data provider
644 * class MyDataProvider extends DataProviderBase {
645 * // Class implementation
647 * var provider = new MyDataProvider();
648 * // Create the event
649 * var cellIds = [ // Determine updated cells ];
650 * var target = provider;
651 * var type = "datacreate";
658 * provider.fire(type, event);
661 fire(type: "datacreate", event: ProviderCellEvent): void;
663 fire(type: ProviderEventType, event: ProviderEvent): void;
664 fire<T>(type: ProviderEventType, event: T): void;
666 * Get core images in a geometry cell.
668 * @param {string} cellId - The id of the geometry cell.
669 * @returns {Promise<CoreImagesContract>} Promise to
670 * the core images of the requested geometry cell id.
671 * @throws Rejects the promise on errors.
673 getCoreImages(cellId: string): Promise<CoreImagesContract>;
675 * Get a cluster reconstruction.
677 * @param {string} url - URL for the cluster reconstruction
679 * @param {Promise} [abort] - Optional promise for aborting
680 * the request through rejection.
681 * @returns {Promise<ClusterContract>} Promise to the
682 * cluster reconstruction.
683 * @throws Rejects the promise on errors.
685 getCluster(url: string, abort?: Promise<void>): Promise<ClusterContract>;
687 * Get spatial images.
689 * @param {Array<string>} imageIds - The ids for the
690 * images to retrieve.
691 * @returns {Promise<SpatialImagesContract>} Promise to
692 * the spatial images of the requested image ids.
693 * @throws Rejects the promise on errors.
695 getSpatialImages(imageIds: string[]): Promise<SpatialImagesContract>;
697 * Get complete images.
699 * @param {Array<string>} imageIds - The ids for the
700 * images to retrieve.
701 * @returns {Promise<ImagesContract>} Promise to the images of the
702 * requested image ids.
703 * @throws Rejects the promise on errors.
705 getImages(imageIds: string[]): Promise<ImagesContract>;
707 * Get an image as an array buffer.
709 * @param {string} url - URL for image to retrieve.
710 * @param {Promise<void>} [abort] - Optional promise for aborting
711 * the request through rejection.
712 * @returns {Promise<ArrayBuffer>} Promise to the array
713 * buffer containing the image.
714 * @throws Rejects the promise on errors.
716 getImageBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer>;
718 * Get image tiles urls for a tile level.
720 * @param {ImageTilesRequestContract} tiles - Tiles to request
721 * @returns {Promise<ImageTilesContract>} Promise to the
722 * image tiles response contract
724 * @throws Rejects the promise on errors.
728 * var tileRequest = { imageId: 'image-id', z: 12 };
729 * provider.getImageTiles(tileRequest)
730 * .then((response) => console.log(response));
733 getImageTiles(tiles: ImageTilesRequestContract): Promise<ImageTilesContract>;
737 * @param {string} url - URL for mesh to retrieve.
738 * @param {Promise<void>} [abort] - Optional promise for aborting
739 * the request through rejection.
740 * @returns {Promise<MeshContract>} Promise to the mesh.
741 * @throws Rejects the promise on errors.
743 getMesh(url: string, abort?: Promise<void>): Promise<MeshContract>;
747 * @param {Array<string>} sequenceId - The id for the
748 * sequence to retrieve.
749 * @returns {Promise} Promise to the sequences of the
750 * requested image ids.
751 * @throws Rejects the promise on errors.
753 getSequence(sequenceId: string): Promise<SequenceContract>;
754 off(type: ProviderCellEvent["type"], handler: (event: ProviderCellEvent) => void): void;
756 off(type: ProviderEventType, handler: (event: ProviderEvent) => void): void;
758 off<T>(type: ProviderEventType, handler: (event: T) => void): void;
760 * Fired when data has been created in the data provider
761 * after initial load.
766 * // Initialize the data provider
767 * class MyDataProvider extends DataProviderBase {
770 * var provider = new MyDataProvider();
771 * // Set an event listener
772 * provider.on("datacreate", function() {
773 * console.log("A datacreate event has occurred.");
777 on(type: "datacreate", handler: (event: ProviderCellEvent) => void): void;
779 on(type: ProviderEventType, handler: (event: ProviderEvent) => void): void;
781 on<T>(type: ProviderEventType, handler: (event: T) => void): void;
783 * Set an access token for authenticated API requests of
784 * protected resources.
786 * @param {string} [accessToken] accessToken - User access
787 * token or client access token.
789 setAccessToken(accessToken?: string): void;
793 * Interface for general provider events.
795 interface ProviderEvent {
797 * Data provider target that emitted the event.
799 target: IDataProvider;
801 * Provider event type.
803 type: ProviderEventType;
807 * @class DataProviderBase
809 * @classdesc Base class to extend if implementing a data provider
816 * class MyDataProvider extends DataProviderBase {
818 * super(new S2GeometryProvider());
824 declare abstract class DataProviderBase extends EventEmitter implements IDataProvider {
825 protected _geometry: IGeometryProvider;
827 * Create a new data provider base instance.
829 * @param {IGeometryProvider} geometry - Geometry
832 constructor(_geometry: IGeometryProvider);
834 * Get geometry property.
836 * @returns {IGeometryProvider} Geometry provider instance.
838 get geometry(): IGeometryProvider;
840 * Fire when data has been created in the data provider
841 * after initial load.
843 * @param type datacreate
844 * @param event Provider cell event
848 * // Initialize the data provider
849 * class MyDataProvider extends DataProviderBase {
850 * // Class implementation
852 * var provider = new MyDataProvider();
853 * // Create the event
854 * var cellIds = [ // Determine updated cells ];
855 * var target = provider;
856 * var type = "datacreate";
863 * provider.fire(type, event);
866 fire(type: "datacreate", event: ProviderCellEvent): void;
868 fire(type: ProviderEventType, event: ProviderEvent): void;
870 * Get core images in a geometry cell.
872 * @param {string} cellId - The id of the geometry cell.
873 * @returns {Promise<CoreImagesContract>} Promise to
874 * the core images of the requested geometry cell id.
875 * @throws Rejects the promise on errors.
877 getCoreImages(cellId: string): Promise<CoreImagesContract>;
879 * Get a cluster reconstruction.
881 * @param {string} url - URL for the cluster reconstruction
883 * @param {Promise} [abort] - Optional promise for aborting
884 * the request through rejection.
885 * @returns {Promise<ClusterContract>} Promise to the
886 * cluster reconstruction.
887 * @throws Rejects the promise on errors.
889 getCluster(url: string, abort?: Promise<void>): Promise<ClusterContract>;
891 * Get spatial images.
893 * @param {Array<string>} imageIds - The ids for the
894 * images to retrieve.
895 * @returns {Promise<SpatialImagesContract>} Promise to
896 * the spatial images of the requested image ids.
897 * @throws Rejects the promise on errors.
899 getSpatialImages(imageIds: string[]): Promise<SpatialImagesContract>;
901 * Get complete images.
903 * @param {Array<string>} imageIds - The ids for the
904 * images to retrieve.
905 * @returns {Promise<ImagesContract>} Promise to the images of the
906 * requested image ids.
907 * @throws Rejects the promise on errors.
909 getImages(imageIds: string[]): Promise<ImagesContract>;
911 * Get an image as an array buffer.
913 * @param {string} url - URL for image to retrieve.
914 * @param {Promise<void>} [abort] - Optional promise for aborting
915 * the request through rejection.
916 * @returns {Promise<ArrayBuffer>} Promise to the array
917 * buffer containing the image.
918 * @throws Rejects the promise on errors.
920 getImageBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer>;
922 * Get image tiles urls for a tile level.
924 * @param {ImageTilesRequestContract} tiles - Tiles to request
925 * @returns {Promise<ImageTilesContract>} Promise to the
926 * image tiles response contract
928 * @throws Rejects the promise on errors.
932 * var tileRequest = { imageId: 'image-id', z: 12 };
933 * provider.getImageTiles(tileRequest)
934 * .then((response) => console.log(response));
937 getImageTiles(tiles: ImageTilesRequestContract): Promise<ImageTilesContract>;
941 * @param {string} url - URL for mesh to retrieve.
942 * @param {Promise<void>} [abort] - Optional promise for aborting
943 * the request through rejection.
944 * @returns {Promise<MeshContract>} Promise to the mesh.
945 * @throws Rejects the promise on errors.
947 getMesh(url: string, abort?: Promise<void>): Promise<MeshContract>;
951 * @param {Array<string>} sequenceId - The id for the
952 * sequence to retrieve.
953 * @returns {Promise} Promise to the sequences of the
954 * requested image ids.
955 * @throws Rejects the promise on errors.
957 getSequence(sequenceId: string): Promise<SequenceContract>;
958 off(type: ProviderCellEvent["type"], handler: (event: ProviderCellEvent) => void): void;
960 off(type: ProviderEventType, handler: (event: ProviderEvent) => void): void;
962 * Fired when data has been created in the data provider
963 * after initial load.
968 * // Initialize the data provider
969 * class MyDataProvider extends DataProviderBase {
972 * var provider = new MyDataProvider();
973 * // Set an event listener
974 * provider.on("datacreate", function() {
975 * console.log("A datacreate event has occurred.");
979 on(type: "datacreate", handler: (event: ProviderCellEvent) => void): void;
981 on(type: ProviderEventType, handler: (event: ProviderEvent) => void): void;
983 * Set an access token for authenticated API requests of
984 * protected resources.
986 * @param {string} [accessToken] accessToken - User access
987 * token or client access token.
989 setAccessToken(accessToken?: string): void;
993 * @class GeometryProviderBase
995 * @classdesc Base class to extend if implementing a geometry
1000 * class MyGeometryProvider extends GeometryProviderBase {
1005 declare abstract class GeometryProviderBase implements IGeometryProvider {
1007 * Create a new geometry provider base instance.
1011 * Convert a geodetic bounding box to the the minimum set
1012 * of cell ids containing the bounding box.
1014 * @description The bounding box needs
1015 * to be sufficiently small to be contained in an area with the size
1016 * of maximally four tiles. Up to nine adjacent tiles may be returned.
1018 * @param {LngLat} sw - South west corner of bounding box.
1019 * @param {LngLat} ne - North east corner of bounding box.
1021 * @returns {Array<string>} Array of cell ids.
1023 bboxToCellIds(sw: LngLat, ne: LngLat): string[];
1025 * Get the cell ids of all adjacent cells.
1027 * @description In the case of approximately rectangular cells
1028 * this is typically the eight orthogonally and diagonally adjacent
1031 * @param {string} cellId - Id of cell.
1032 * @returns {Array<string>} Array of cell ids. No specific
1033 * order is guaranteed.
1035 getAdjacent(cellId: string): string[];
1037 * Get the vertices of a cell.
1039 * @description The vertices form an unclosed
1040 * clockwise polygon in the 2D longitude, latitude
1041 * space. No assumption on the position of the first
1042 * vertex relative to the others can be made.
1044 * @param {string} cellId - Id of cell.
1045 * @returns {Array<LngLat>} Unclosed clockwise polygon.
1047 getVertices(cellId: string): LngLat[];
1049 * Convert geodetic coordinates to a cell id.
1051 * @param {LngLat} lngLat - Longitude, latitude to convert.
1052 * @returns {string} Cell id for the longitude, latitude.
1054 lngLatToCellId(lngLat: LngLat): string;
1056 protected _approxBboxToCellIds(sw: LngLat, ne: LngLat): string[];
1058 private _enuToGeodetic;
1060 private _getLngLatBoundingBoxCorners;
1062 * Convert a geodetic square to cell ids.
1064 * The square is specified as a longitude, latitude
1065 * and a threshold from the position using Manhattan distance.
1067 * @param {LngLat} lngLat - Longitude, latitude.
1068 * @param {number} threshold - Threshold of the conversion in meters.
1070 * @returns {Array<string>} Array of cell ids reachable within
1075 private _lngLatToCellIds;
1078 interface GraphCameraContract {
1082 projection_type: string;
1084 interface GraphCameraShotContract {
1087 translation: number[];
1089 interface GraphReferenceContract {
1094 interface GraphPointContract {
1096 coordinates: number[];
1098 interface GraphClusterContract {
1100 [cameraId: string]: GraphCameraContract;
1103 [pointId: string]: GraphPointContract;
1105 reference_lla: GraphReferenceContract;
1107 [imageKey: string]: GraphCameraShotContract;
1111 interface GraphGeometry {
1112 coordinates: [number, number];
1114 interface GraphCoreImageEnt extends IDEnt {
1115 computed_geometry: GraphGeometry;
1116 geometry: GraphGeometry;
1119 interface GraphSpatialImageEnt extends SpatialImageEnt {
1121 organization: IDEnt;
1122 sfm_cluster: URLEnt;
1123 thumb_1024_url: string;
1124 thumb_2048_url: string;
1127 declare class GraphConverter {
1128 clusterReconstruction(source: GraphClusterContract): ClusterContract;
1129 coreImage(source: GraphCoreImageEnt): CoreImageEnt;
1130 spatialImage(source: GraphSpatialImageEnt): SpatialImageEnt;
1134 interface GraphDataProviderOptions {
1136 accessToken?: string;
1139 declare class GraphQueryCreator {
1140 readonly imagesPath: string;
1141 readonly sequencePath: string;
1142 readonly coreFields: string[];
1143 readonly idFields: string[];
1144 readonly spatialFields: string[];
1145 readonly imageTileFields: string[];
1146 private readonly _imageTilesPath;
1148 images(imageIds: string[], fields: string[]): string;
1149 imagesS2(cellId: string, fields: string[]): string;
1150 imageTiles(z: number, fields: string[]): string;
1151 imageTilesPath(imageId: string): string;
1152 sequence(sequenceId: string): string;
1155 declare class GraphDataProvider extends DataProviderBase {
1156 private readonly _method;
1157 private readonly _endpoint;
1158 private readonly _convert;
1159 private readonly _query;
1160 private _accessToken;
1161 constructor(options?: GraphDataProviderOptions, geometry?: IGeometryProvider, converter?: GraphConverter, queryCreator?: GraphQueryCreator);
1162 getCluster(url: string, abort?: Promise<void>): Promise<ClusterContract>;
1163 getCoreImages(cellId: string): Promise<CoreImagesContract>;
1164 getImageBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer>;
1165 getImages(imageIds: string[]): Promise<ImagesContract>;
1166 getImageTiles(request: ImageTilesRequestContract): Promise<ImageTilesContract>;
1167 getMesh(url: string, abort?: Promise<void>): Promise<MeshContract>;
1168 getSequence(sequenceId: string): Promise<SequenceContract>;
1169 getSpatialImages(imageIds: string[]): Promise<SpatialImagesContract>;
1170 setAccessToken(accessToken: string): void;
1171 private _createHeaders;
1172 private _fetchGraphContract;
1173 private _makeErrorMessage;
1177 * @class S2GeometryProvider
1179 * @classdesc Geometry provider based on S2 cells.
1183 * class MyDataProvider extends DataProviderBase {
1187 * const geometryProvider = new S2GeometryProvider();
1188 * const dataProvider = new MyDataProvider(geometryProvider);
1191 declare class S2GeometryProvider extends GeometryProviderBase {
1192 private readonly _level;
1194 * Create a new S2 geometry provider instance.
1196 constructor(_level?: number);
1198 bboxToCellIds(sw: LngLat, ne: LngLat): string[];
1200 getAdjacent(cellId: string): string[];
1202 getVertices(cellId: string): LngLat[];
1204 lngLatToCellId(lngLat: LngLat): string;
1205 private _getNeighbors;
1206 private _lngLatToId;
1209 interface ComponentConfiguration {
1214 * Enumeration for render mode
1217 * @description Modes for specifying how rendering is done
1218 * in the viewer. All modes preserves the original aspect
1219 * ratio of the images.
1221 declare enum RenderMode {
1223 * Displays all content within the viewer.
1225 * @description Black bars shown on both
1226 * sides of the content. Bars are shown
1227 * either below and above or to the left
1228 * and right of the content depending on
1229 * the aspect ratio relation between the
1230 * image and the viewer.
1234 * Fills the viewer by cropping content.
1236 * @description Cropping is done either
1237 * in horizontal or vertical direction
1238 * depending on the aspect ratio relation
1239 * between the image and the viewer.
1244 interface ViewportSize {
1249 declare type CameraType = "spherical" | "fisheye" | "perspective";
1254 * @classdesc Class used for calculating coordinate transformations
1257 declare class Transform {
1261 private _orientation;
1263 private _basicWidth;
1264 private _basicHeight;
1265 private _basicAspect;
1266 private _worldToCamera;
1267 private _worldToCameraInverse;
1268 private _scaledWorldToCamera;
1269 private _scaledWorldToCameraInverse;
1270 private _basicWorldToCamera;
1271 private _textureScale;
1274 private _cameraType;
1275 private _radialPeak;
1277 * Create a new transform instance.
1278 * @param {number} orientation - Image orientation.
1279 * @param {number} width - Image height.
1280 * @param {number} height - Image width.
1281 * @param {number} focal - Focal length.
1282 * @param {number} scale - Atomic scale.
1283 * @param {Array<number>} rotation - Rotation vector in three dimensions.
1284 * @param {Array<number>} translation - Translation vector in three dimensions.
1285 * @param {HTMLImageElement} image - Image for fallback size calculations.
1287 constructor(orientation: number, width: number, height: number, scale: number, rotation: number[], translation: number[], image: HTMLImageElement, textureScale?: number[], cameraParameters?: number[], cameraType?: CameraType);
1290 get cameraType(): CameraType;
1293 * @returns {number} The orientation adjusted aspect ratio.
1295 get basicAspect(): number;
1299 * @description Does not fall back to image image height but
1300 * uses original value from API so can be faulty.
1302 * @returns {number} The height of the basic version image
1303 * (adjusted for orientation).
1305 get basicHeight(): number;
1306 get basicRt(): THREE.Matrix4;
1310 * @description Does not fall back to image image width but
1311 * uses original value from API so can be faulty.
1313 * @returns {number} The width of the basic version image
1314 * (adjusted for orientation).
1316 get basicWidth(): number;
1319 * @returns {number} The image focal length.
1321 get focal(): number;
1325 * @description Falls back to the image image height if
1326 * the API data is faulty.
1328 * @returns {number} The orientation adjusted image height.
1330 get height(): number;
1333 * @returns {number} The image orientation.
1335 get orientation(): number;
1338 * @returns {THREE.Matrix4} The extrinsic camera matrix.
1340 get rt(): THREE.Matrix4;
1343 * @returns {THREE.Matrix4} The scaled extrinsic camera matrix.
1345 get srt(): THREE.Matrix4;
1348 * @returns {THREE.Matrix4} The scaled extrinsic camera matrix.
1350 get srtInverse(): THREE.Matrix4;
1353 * @returns {number} The image atomic reconstruction scale.
1355 get scale(): number;
1357 * Get has valid scale.
1358 * @returns {boolean} Value indicating if the scale of the transform is valid.
1360 get hasValidScale(): boolean;
1363 * @returns {number} Value indicating the radius where the radial
1364 * undistortion function peaks.
1366 get radialPeak(): number;
1370 * @description Falls back to the image image width if
1371 * the API data is faulty.
1373 * @returns {number} The orientation adjusted image width.
1375 get width(): number;
1377 * Calculate the up vector for the image transform.
1379 * @returns {THREE.Vector3} Normalized and orientation adjusted up vector.
1381 upVector(): THREE.Vector3;
1383 * Calculate projector matrix for projecting 3D points to texture map
1384 * coordinates (u and v).
1386 * @returns {THREE.Matrix4} Projection matrix for 3D point to texture
1387 * map coordinate calculations.
1389 projectorMatrix(): THREE.Matrix4;
1391 * Project 3D world coordinates to basic coordinates.
1393 * @param {Array<number>} point3d - 3D world coordinates.
1394 * @return {Array<number>} 2D basic coordinates.
1396 projectBasic(point3d: number[]): number[];
1398 * Unproject basic coordinates to 3D world coordinates.
1400 * @param {Array<number>} basic - 2D basic coordinates.
1401 * @param {Array<number>} distance - Distance to unproject from camera center.
1402 * @param {boolean} [depth] - Treat the distance value as depth from camera center.
1403 * Only applicable for perspective images. Will be
1404 * ignored for spherical.
1405 * @returns {Array<number>} Unprojected 3D world coordinates.
1407 unprojectBasic(basic: number[], distance: number, depth?: boolean): number[];
1409 * Project 3D world coordinates to SfM coordinates.
1411 * @param {Array<number>} point3d - 3D world coordinates.
1412 * @return {Array<number>} 2D SfM coordinates.
1414 projectSfM(point3d: number[]): number[];
1416 * Unproject SfM coordinates to a 3D world coordinates.
1418 * @param {Array<number>} sfm - 2D SfM coordinates.
1419 * @param {Array<number>} distance - Distance to unproject
1420 * from camera center.
1421 * @param {boolean} [depth] - Treat the distance value as
1422 * depth from camera center. Only applicable for perspective
1423 * images. Will be ignored for spherical.
1424 * @returns {Array<number>} Unprojected 3D world coordinates.
1426 unprojectSfM(sfm: number[], distance: number, depth?: boolean): number[];
1428 * Transform SfM coordinates to bearing vector (3D cartesian
1429 * coordinates on the unit sphere).
1431 * @param {Array<number>} sfm - 2D SfM coordinates.
1432 * @returns {Array<number>} Bearing vector (3D cartesian coordinates
1433 * on the unit sphere).
1435 private _sfmToBearing;
1436 /** Compute distortion given the distorted radius.
1438 * Solves for d in the equation
1439 * y = d(x, k1, k2) * x
1440 * given the distorted radius, y.
1442 private _distortionFromDistortedRadius;
1444 * Transform bearing vector (3D cartesian coordiantes on the unit sphere) to
1447 * @param {Array<number>} bearing - Bearing vector (3D cartesian coordinates on the
1449 * @returns {Array<number>} 2D SfM coordinates.
1451 private _bearingToSfm;
1453 * Convert basic coordinates to SfM coordinates.
1455 * @param {Array<number>} basic - 2D basic coordinates.
1456 * @returns {Array<number>} 2D SfM coordinates.
1458 private _basicToSfm;
1460 * Convert SfM coordinates to basic coordinates.
1462 * @param {Array<number>} sfm - 2D SfM coordinates.
1463 * @returns {Array<number>} 2D basic coordinates.
1465 private _sfmToBasic;
1467 * Checks a value and returns it if it exists and is larger than 0.
1468 * Fallbacks if it is null.
1470 * @param {number} value - Value to check.
1471 * @param {number} fallback - Value to fall back to.
1472 * @returns {number} The value or its fallback value if it is not defined or negative.
1475 private _getCameraParameters;
1477 * Creates the extrinsic camera matrix [ R | t ].
1479 * @param {Array<number>} rotation - Rotation vector in angle axis representation.
1480 * @param {Array<number>} translation - Translation vector.
1481 * @returns {THREE.Matrix4} Extrisic camera matrix.
1483 private createWorldToCamera;
1485 * Calculates the scaled extrinsic camera matrix scale * [ R | t ].
1487 * @param {THREE.Matrix4} worldToCamera - Extrisic camera matrix.
1488 * @param {number} scale - Scale factor.
1489 * @returns {THREE.Matrix4} Scaled extrisic camera matrix.
1491 private _createScaledWorldToCamera;
1492 private _createBasicWorldToCamera;
1493 private _getRadialPeak;
1495 * Calculate a transformation matrix from normalized coordinates for
1496 * texture map coordinates.
1498 * @returns {THREE.Matrix4} Normalized coordinates to texture map
1499 * coordinates transformation matrix.
1501 private _normalizedToTextureMatrix;
1507 * @classdesc Holds information about a camera.
1509 declare class Camera {
1515 * Create a new camera instance.
1516 * @param {Transform} [transform] - Optional transform instance.
1518 constructor(transform?: Transform);
1521 * @returns {THREE.Vector3} The position vector.
1523 get position(): THREE.Vector3;
1526 * @returns {THREE.Vector3} The lookat vector.
1528 get lookat(): THREE.Vector3;
1531 * @returns {THREE.Vector3} The up vector.
1533 get up(): THREE.Vector3;
1536 * @returns {number} The focal length.
1538 get focal(): number;
1542 set focal(value: number);
1544 * Update this camera to the linearly interpolated value of two other cameras.
1546 * @param {Camera} a - First camera.
1547 * @param {Camera} b - Second camera.
1548 * @param {number} alpha - Interpolation value on the interval [0, 1].
1550 lerpCameras(a: Camera, b: Camera, alpha: number): void;
1552 * Copy the properties of another camera to this camera.
1554 * @param {Camera} other - Another camera.
1556 copy(other: Camera): void;
1558 * Clone this camera.
1560 * @returns {Camera} A camera with cloned properties equal to this camera.
1564 * Determine the distance between this camera and another camera.
1566 * @param {Camera} other - Another camera.
1567 * @returns {number} The distance between the cameras.
1569 diff(other: Camera): number;
1571 * Get the focal length based on the transform.
1573 * @description Returns the focal length corresponding
1574 * to a 90 degree field of view for spherical
1577 * Returns the transform focal length for other
1580 * @returns {number} Focal length.
1585 declare enum State {
1590 WaitingInteractively = 4
1594 * Enumeration for edge directions
1597 * @description Directions for edges in image graph describing
1598 * sequence, spatial and image type relations between nodes.
1600 declare enum NavigationDirection {
1602 * Next image in the sequence.
1606 * Previous image in the sequence.
1610 * Step to the left keeping viewing direction.
1614 * Step to the right keeping viewing direction.
1618 * Step forward keeping viewing direction.
1622 * Step backward keeping viewing direction.
1626 * Turn 90 degrees counter clockwise.
1630 * Turn 90 degrees clockwise.
1638 * Spherical in general direction.
1642 * Looking in roughly the same direction at rougly the same position.
1648 * Interface that describes additional properties of an edge.
1650 * @interface NavigationEdgeData
1652 interface NavigationEdgeData {
1654 * The edge direction.
1656 direction: NavigationDirection;
1658 * The counter clockwise horizontal rotation angle from
1659 * the X-axis in a spherical coordiante system of the
1660 * motion from the source image to the destination node.
1662 worldMotionAzimuth: number;
1666 * Interface that describes the properties for a
1667 * navigation edge from a source image to a
1670 * @interface NavigationEdge
1672 interface NavigationEdge {
1674 * The id of the source image.
1678 * The id of the target image.
1682 * Additional data describing properties of the edge.
1684 data: NavigationEdgeData;
1688 * Interface that indicates edge status.
1690 * @interface NavigationEdgeStatus
1692 interface NavigationEdgeStatus {
1694 * Value indicating whether the edges have been cached.
1700 * @description If the cached property is false the edges
1701 * property will always be an empty array. If the cached
1702 * property is true, there will exist edges in the the
1703 * array if the image has edges.
1705 edges: NavigationEdge[];
1711 * @classdesc Represents the cached properties of a image.
1713 declare class ImageCache {
1718 private _sequenceEdges;
1719 private _spatialEdges;
1720 private _imageAborter;
1721 private _meshAborter;
1722 private _imageChanged$;
1724 private _sequenceEdgesChanged$;
1725 private _sequenceEdges$;
1726 private _spatialEdgesChanged$;
1727 private _spatialEdges$;
1728 private _cachingAssets$;
1729 private _iamgeSubscription;
1730 private _sequenceEdgesSubscription;
1731 private _spatialEdgesSubscription;
1733 * Create a new image cache instance.
1735 constructor(provider: IDataProvider);
1739 * @description Will not be set when assets have not been cached
1740 * or when the object has been disposed.
1742 * @returns {HTMLImageElement} Cached image element of the image.
1744 get image(): HTMLImageElement;
1748 * @returns {Observable<HTMLImageElement>} Observable emitting
1749 * the cached image when it is updated.
1751 get image$(): Observable<HTMLImageElement>;
1755 * @description Will not be set when assets have not been cached
1756 * or when the object has been disposed.
1758 * @returns {MeshContract} SfM triangulated mesh of reconstructed
1761 get mesh(): MeshContract;
1763 * Get sequenceEdges.
1765 * @returns {NavigationEdgeStatus} Value describing the status of the
1768 get sequenceEdges(): NavigationEdgeStatus;
1770 * Get sequenceEdges$.
1772 * @returns {Observable<NavigationEdgeStatus>} Observable emitting
1773 * values describing the status of the sequence edges.
1775 get sequenceEdges$(): Observable<NavigationEdgeStatus>;
1779 * @returns {NavigationEdgeStatus} Value describing the status of the
1782 get spatialEdges(): NavigationEdgeStatus;
1784 * Get spatialEdges$.
1786 * @returns {Observable<NavigationEdgeStatus>} Observable emitting
1787 * values describing the status of the spatial edges.
1789 get spatialEdges$(): Observable<NavigationEdgeStatus>;
1791 * Cache the image and mesh assets.
1793 * @param {SpatialImageEnt} spatial - Spatial props of the image to cache.
1794 * @param {boolean} spherical - Value indicating whether image is a spherical.
1795 * @param {boolean} merged - Value indicating whether image is merged.
1796 * @returns {Observable<ImageCache>} Observable emitting this image
1797 * cache whenever the load status has changed and when the mesh or image
1798 * has been fully loaded.
1800 cacheAssets$(spatial: SpatialImageEnt, merged: boolean): Observable<ImageCache>;
1802 * Cache an image with a higher resolution than the current one.
1804 * @param {SpatialImageEnt} spatial - Spatial props.
1805 * @returns {Observable<ImageCache>} Observable emitting a single item,
1806 * the image cache, when the image has been cached. If supplied image
1807 * size is not larger than the current image size the image cache is
1808 * returned immediately.
1810 cacheImage$(spatial: SpatialImageEnt): Observable<ImageCache>;
1812 * Cache the sequence edges.
1814 * @param {Array<NavigationEdge>} edges - Sequence edges to cache.
1816 cacheSequenceEdges(edges: NavigationEdge[]): void;
1818 * Cache the spatial edges.
1820 * @param {Array<NavigationEdge>} edges - Spatial edges to cache.
1822 cacheSpatialEdges(edges: NavigationEdge[]): void;
1824 * Dispose the image cache.
1826 * @description Disposes all cached assets and unsubscribes to
1831 * Reset the sequence edges.
1833 resetSequenceEdges(): void;
1835 * Reset the spatial edges.
1837 resetSpatialEdges(): void;
1841 * @param {SpatialImageEnt} spatial - Spatial image.
1842 * @param {boolean} spherical - Value indicating whether image is a spherical.
1843 * @returns {Observable<ILoadStatusObject<HTMLImageElement>>} Observable
1844 * emitting a load status object every time the load status changes
1845 * and completes when the image is fully loaded.
1847 private _cacheImage$;
1851 * @param {SpatialImageEnt} spatial - Spatial props.
1852 * @param {boolean} merged - Value indicating whether image is merged.
1853 * @returns {Observable<ILoadStatusObject<MeshContract>>} Observable emitting
1854 * a load status object every time the load status changes and completes
1855 * when the mesh is fully loaded.
1857 private _cacheMesh$;
1859 * Create a load status object with an empty mesh.
1861 * @returns {ILoadStatusObject<MeshContract>} Load status object
1864 private _createEmptyMesh;
1865 private _disposeImage;
1871 * @classdesc Represents a image in the navigation graph.
1873 * Explanation of position and bearing properties:
1875 * When images are uploaded they will have GPS information in the EXIF, this is what
1876 * is called `originalLngLat` {@link Image.originalLngLat}.
1878 * When Structure from Motions has been run for a image a `computedLngLat` that
1879 * differs from the `originalLngLat` will be created. It is different because
1880 * GPS positions are not very exact and SfM aligns the camera positions according
1881 * to the 3D reconstruction {@link Image.computedLngLat}.
1883 * At last there exist a `lngLat` property which evaluates to
1884 * the `computedLngLat` from SfM if it exists but falls back
1885 * to the `originalLngLat` from the EXIF GPS otherwise {@link Image.lngLat}.
1887 * Everything that is done in in the Viewer is based on the SfM positions,
1888 * i.e. `computedLngLat`. That is why the smooth transitions go in the right
1889 * direction (nd not in strange directions because of bad GPS).
1891 * E.g. when placing a marker in the Viewer it is relative to the SfM
1892 * position i.e. the `computedLngLat`.
1894 * The same concept as above also applies to the compass angle (or bearing) properties
1895 * `originalCa`, `computedCa` and `ca`.
1897 declare class Image {
1902 * Create a new image instance.
1904 * @description Images are always created internally by the library.
1905 * Images can not be added to the library through any API method.
1907 * @param {CoreImageEnt} core- Raw core image data.
1910 constructor(core: CoreImageEnt);
1912 * Get assets cached.
1914 * @description The assets that need to be cached for this property
1915 * to report true are the following: fill properties, image and mesh.
1916 * The library ensures that the current image will always have the
1919 * @returns {boolean} Value indicating whether all assets have been
1924 get assetsCached(): boolean;
1926 * Get cameraParameters.
1928 * @description Will be undefined if SfM has
1931 * Camera type dependent parameters.
1933 * For perspective and fisheye camera types,
1934 * the camera parameters array should be
1935 * constructed according to
1939 * where focal is the camera focal length,
1940 * and k1, k2 are radial distortion parameters.
1942 * For spherical camera type the camera
1943 * parameters are unset or emtpy array.
1945 * @returns {Array<number>} The parameters
1946 * related to the camera type.
1948 get cameraParameters(): number[];
1952 * @description Will be undefined if SfM has not been run.
1954 * @returns {string} The camera type that captured the image.
1956 get cameraType(): string;
1960 * @description Timestamp of the image capture date
1961 * and time represented as a Unix epoch timestamp in milliseconds.
1963 * @returns {number} Timestamp when the image was captured.
1965 get capturedAt(): number;
1969 * @returns {string} Globally unique id of the SfM cluster to which
1970 * the image belongs.
1972 get clusterId(): string;
1976 * @returns {string} Url to the cluster reconstruction file.
1980 get clusterUrl(): string;
1984 * @description If the SfM computed compass angle exists it will
1985 * be returned, otherwise the original EXIF compass angle.
1987 * @returns {number} Compass angle, measured in degrees
1988 * clockwise with respect to north.
1990 get compassAngle(): number;
1994 * @description The library ensures that the current image will
1997 * @returns {boolean} Value indicating whether the image has all
1998 * properties filled.
2002 get complete(): boolean;
2004 * Get computedAltitude.
2006 * @description If SfM has not been run the computed altitude is
2007 * set to a default value of two meters.
2009 * @returns {number} Altitude, in meters.
2011 get computedAltitude(): number;
2013 * Get computedCompassAngle.
2015 * @description Will not be set if SfM has not been run.
2017 * @returns {number} SfM computed compass angle, measured
2018 * in degrees clockwise with respect to north.
2020 get computedCompassAngle(): number;
2022 * Get computedLngLat.
2024 * @description Will not be set if SfM has not been run.
2026 * @returns {LngLat} SfM computed longitude, latitude in WGS84 datum,
2027 * measured in degrees.
2029 get computedLngLat(): LngLat;
2033 * @description Note that the creator ID will not be set when using
2034 * the Mapillary API.
2036 * @returns {string} Globally unique id of the user who uploaded
2039 get creatorId(): string;
2041 * Get creatorUsername.
2043 * @description Note that the creator username will not be set when
2044 * using the Mapillary API.
2046 * @returns {string} Username of the creator who uploaded
2049 get creatorUsername(): string;
2051 * Get exifOrientation.
2053 * @returns {number} EXIF orientation of original image.
2055 get exifOrientation(): number;
2059 * @returns {number} Height of original image, not adjusted
2062 get height(): number;
2066 * @description The image will always be set on the current image.
2068 * @returns {HTMLImageElement} Cached image element of the image.
2070 get image(): HTMLImageElement;
2074 * @returns {Observable<HTMLImageElement>} Observable emitting
2075 * the cached image when it is updated.
2079 get image$(): Observable<HTMLImageElement>;
2083 * @returns {string} Globally unique id of the image.
2089 * @description If the SfM computed longitude, latitude exist
2090 * it will be returned, otherwise the original EXIF latitude
2093 * @returns {LngLat} Longitude, latitude in WGS84 datum,
2094 * measured in degrees.
2096 get lngLat(): LngLat;
2100 * @returns {boolean} Value indicating whether SfM has been
2101 * run on the image and the image has been merged into a
2102 * connected component.
2104 get merged(): boolean;
2108 * @description Will not be set if SfM has not yet been run on
2111 * @returns {stirng} Id of connected component to which image
2112 * belongs after the aligning merge.
2114 get mergeId(): string;
2118 * @description The mesh will always be set on the current image.
2120 * @returns {MeshContract} SfM triangulated mesh of reconstructed
2123 get mesh(): MeshContract;
2125 * Get originalAltitude.
2127 * @returns {number} EXIF altitude, in meters, if available.
2129 get originalAltitude(): number;
2131 * Get originalCompassAngle.
2133 * @returns {number} Original EXIF compass angle, measured in
2136 get originalCompassAngle(): number;
2138 * Get originalLngLat.
2140 * @returns {LngLat} Original EXIF longitude, latitude in
2141 * WGS84 datum, measured in degrees.
2143 get originalLngLat(): LngLat;
2147 * @returns {string} Globally unique id of the owner to which
2148 * the image belongs. If the image does not belong to an
2149 * owner the owner id will be undefined.
2151 get ownerId(): string;
2155 * @returns {boolean} Value specifying if image is accessible to
2156 * organization members only or to everyone.
2158 get private(): boolean;
2162 * @returns {number} A number between zero and one
2163 * determining the quality of the image. Blurriness
2164 * (motion blur / out-of-focus), occlusion (camera
2165 * mount, ego vehicle, water-drops), windshield
2166 * reflections, bad illumination (exposure, glare),
2167 * and bad weather condition (fog, rain, snow)
2168 * affect the quality score.
2170 * @description Value should be on the interval [0, 1].
2172 get qualityScore(): number;
2176 * @description Will not be set if SfM has not been run.
2178 * @returns {Array<number>} Rotation vector in angle axis representation.
2180 get rotation(): number[];
2184 * @description Will not be set if SfM has not been run.
2186 * @returns {number} Scale of reconstruction the image
2189 get scale(): number;
2193 * @returns {string} Globally unique id of the sequence
2194 * to which the image belongs.
2196 get sequenceId(): string;
2198 * Get sequenceEdges.
2200 * @returns {NavigationEdgeStatus} Value describing the status of the
2205 get sequenceEdges(): NavigationEdgeStatus;
2207 * Get sequenceEdges$.
2209 * @description Internal observable, should not be used as an API.
2211 * @returns {Observable<NavigationEdgeStatus>} Observable emitting
2212 * values describing the status of the sequence edges.
2216 get sequenceEdges$(): Observable<NavigationEdgeStatus>;
2220 * @returns {NavigationEdgeStatus} Value describing the status of the
2225 get spatialEdges(): NavigationEdgeStatus;
2227 * Get spatialEdges$.
2229 * @description Internal observable, should not be used as an API.
2231 * @returns {Observable<NavigationEdgeStatus>} Observable emitting
2232 * values describing the status of the spatial edges.
2236 get spatialEdges$(): Observable<NavigationEdgeStatus>;
2240 * @returns {number} Width of original image, not
2241 * adjusted for orientation.
2243 get width(): number;
2245 * Cache the image and mesh assets.
2247 * @description The assets are always cached internally by the
2248 * library prior to setting a image as the current image.
2250 * @returns {Observable<Image>} Observable emitting this image whenever the
2251 * load status has changed and when the mesh or image has been fully loaded.
2255 cacheAssets$(): Observable<Image>;
2257 * Cache the image asset.
2259 * @description Use for caching a differently sized image than
2260 * the one currently held by the image.
2262 * @returns {Observable<Image>} Observable emitting this image whenever the
2263 * load status has changed and when the mesh or image has been fully loaded.
2267 cacheImage$(): Observable<Image>;
2269 * Cache the sequence edges.
2271 * @description The sequence edges are cached asynchronously
2272 * internally by the library.
2274 * @param {Array<NavigationEdge>} edges - Sequence edges to cache.
2277 cacheSequenceEdges(edges: NavigationEdge[]): void;
2279 * Cache the spatial edges.
2281 * @description The spatial edges are cached asynchronously
2282 * internally by the library.
2284 * @param {Array<NavigationEdge>} edges - Spatial edges to cache.
2287 cacheSpatialEdges(edges: NavigationEdge[]): void;
2289 * Dispose the image.
2291 * @description Disposes all cached assets.
2296 * Initialize the image cache.
2298 * @description The image cache is initialized internally by
2301 * @param {ImageCache} cache - The image cache to set as cache.
2304 initializeCache(cache: ImageCache): void;
2306 * Complete an image with spatial properties.
2308 * @description The image is completed internally by
2311 * @param {SpatialImageEnt} fill - The spatial image struct.
2314 makeComplete(fill: SpatialImageEnt): void;
2316 * Reset the sequence edges.
2320 resetSequenceEdges(): void;
2322 * Reset the spatial edges.
2326 resetSpatialEdges(): void;
2328 * Clears the image and mesh assets, aborts
2329 * any outstanding requests and resets edges.
2336 interface IAnimationState {
2337 reference: LngLatAlt;
2341 currentImage: Image;
2342 currentCamera: Camera;
2343 previousImage: Image;
2344 trajectory: Image[];
2345 currentIndex: number;
2347 imagesAhead: number;
2348 currentTransform: Transform;
2349 previousTransform: Transform;
2350 motionless: boolean;
2352 stateTransitionAlpha: number;
2355 interface AnimationFrame {
2358 state: IAnimationState;
2361 interface EulerRotation {
2366 declare class RenderCamera {
2368 private _viewportCoords;
2370 private _stateTransitionAlpha;
2371 private _stateTransitionFov;
2372 private _renderMode;
2377 private _perspective;
2380 private _changedForFrame;
2381 private _currentImageId;
2382 private _previousImageId;
2383 private _currentSpherical;
2384 private _previousSpherical;
2386 private _currentProjectedPoints;
2387 private _previousProjectedPoints;
2388 private _currentFov;
2389 private _previousFov;
2390 private _initialFov;
2391 constructor(elementWidth: number, elementHeight: number, renderMode: RenderMode);
2392 get alpha(): number;
2393 get camera(): Camera;
2394 get changed(): boolean;
2395 get frameId(): number;
2396 get perspective(): THREE.PerspectiveCamera;
2397 get renderMode(): RenderMode;
2398 get rotation(): EulerRotation;
2400 get size(): ViewportSize;
2402 fovToZoom(fov: number): number;
2403 setFrame(frame: AnimationFrame): void;
2404 setProjectionMatrix(matrix: number[]): void;
2405 setRenderMode(renderMode: RenderMode): void;
2406 setSize(size: ViewportSize): void;
2407 private _computeAspect;
2408 private _computeCurrentFov;
2409 private _computeFov;
2410 private _computePreviousFov;
2411 private _computeProjectedPoints;
2412 private _computeRequiredVerticalFov;
2413 private _computeRotation;
2414 private _computeVerticalFov;
2416 private _focalToFov;
2418 private _interpolateFov;
2419 private _setFrameId;
2422 declare class RenderService {
2425 private _currentFrame$;
2426 private _projectionMatrix$;
2427 private _renderCameraOperation$;
2428 private _renderCameraHolder$;
2429 private _renderCameraFrame$;
2430 private _renderCamera$;
2434 private _renderMode$;
2435 private _subscriptions;
2436 constructor(element: HTMLElement, currentFrame$: Observable<AnimationFrame>, renderMode: RenderMode, renderCamera?: RenderCamera);
2437 get bearing$(): Observable<number>;
2438 get element(): HTMLElement;
2439 get projectionMatrix$(): Subject<number[]>;
2440 get renderCamera$(): Observable<RenderCamera>;
2441 get renderCameraFrame$(): Observable<RenderCamera>;
2442 get renderMode$(): Subject<RenderMode>;
2443 get resize$(): Subject<void>;
2444 get size$(): Observable<ViewportSize>;
2448 interface VirtualNodeHash {
2453 declare class DOMRenderer {
2454 private _renderService;
2455 private _currentFrame$;
2456 private _adaptiveOperation$;
2462 private _renderAdaptive$;
2463 private _subscriptions;
2464 constructor(element: HTMLElement, renderService: RenderService, currentFrame$: Observable<AnimationFrame>);
2465 get element$(): Observable<Element>;
2466 get render$(): Subject<VirtualNodeHash>;
2467 get renderAdaptive$(): Subject<VirtualNodeHash>;
2468 clear(name: string): void;
2472 interface GLRenderFunction extends Function {
2473 (perspectiveCamera: THREE.PerspectiveCamera, renderer: THREE.WebGLRenderer): void;
2476 declare enum RenderPass$1 {
2481 interface GLFrameRenderer {
2483 needsRender: boolean;
2484 render: GLRenderFunction;
2488 interface GLRenderHash {
2490 renderer: GLFrameRenderer;
2493 declare class GLRenderer {
2494 private _renderService;
2495 private _renderFrame$;
2496 private _renderCameraOperation$;
2497 private _renderCamera$;
2500 private _renderOperation$;
2501 private _renderCollection$;
2502 private _rendererOperation$;
2504 private _eraserOperation$;
2506 private _triggerOperation$;
2507 private _webGLRenderer$;
2508 private _renderFrameSubscription;
2509 private _subscriptions;
2510 private _opaqueRender$;
2511 constructor(canvas: HTMLCanvasElement, canvasContainer: HTMLElement, renderService: RenderService);
2512 get render$(): Subject<GLRenderHash>;
2513 get opaqueRender$(): Observable<void>;
2514 get webGLRenderer$(): Observable<THREE.WebGLRenderer>;
2515 clear(name: string): void;
2517 triggerRerender(): void;
2518 private _renderFrameSubscribe;
2522 * Enumeration for transition mode
2525 * @description Modes for specifying how transitions
2526 * between images are performed.
2528 declare enum TransitionMode {
2530 * Default transitions.
2532 * @description The viewer dynamically determines
2533 * whether transitions should be performed with or
2534 * without motion and blending for each transition
2535 * based on the underlying data.
2539 * Instantaneous transitions.
2541 * @description All transitions are performed
2542 * without motion or blending.
2547 declare class StateService {
2550 private _contextOperation$;
2553 private _currentState$;
2554 private _lastState$;
2555 private _currentImage$;
2556 private _currentImageExternal$;
2557 private _currentCamera$;
2558 private _currentId$;
2559 private _currentTransform$;
2560 private _reference$;
2561 private _inMotionOperation$;
2563 private _inTranslationOperation$;
2564 private _inTranslation$;
2565 private _appendImage$;
2566 private _frameGenerator;
2569 private _subscriptions;
2570 constructor(initialState: State, transitionMode?: TransitionMode);
2571 get currentState$(): Observable<AnimationFrame>;
2572 get currentImage$(): Observable<Image>;
2573 get currentId$(): Observable<string>;
2574 get currentImageExternal$(): Observable<Image>;
2575 get currentCamera$(): Observable<Camera>;
2576 get currentTransform$(): Observable<Transform>;
2577 get state$(): Observable<State>;
2578 get reference$(): Observable<LngLatAlt>;
2579 get inMotion$(): Observable<boolean>;
2580 get inTranslation$(): Observable<boolean>;
2581 get appendImage$(): Subject<Image>;
2587 waitInteractively(): void;
2588 appendImagess(images: Image[]): void;
2589 prependImages(images: Image[]): void;
2590 removeImages(n: number): void;
2591 clearImages(): void;
2592 clearPriorImages(): void;
2594 setImages(images: Image[]): void;
2595 setViewMatrix(matrix: number[]): void;
2596 rotate(delta: EulerRotation): void;
2597 rotateUnbounded(delta: EulerRotation): void;
2598 rotateWithoutInertia(delta: EulerRotation): void;
2599 rotateBasic(basicRotation: number[]): void;
2600 rotateBasicUnbounded(basicRotation: number[]): void;
2601 rotateBasicWithoutInertia(basicRotation: number[]): void;
2602 rotateToBasic(basic: number[]): void;
2603 move(delta: number): void;
2604 moveTo(position: number): void;
2605 dolly(delta: number): void;
2606 orbit(rotation: EulerRotation): void;
2607 truck(direction: number[]): void;
2609 * Change zoom level while keeping the reference point position approximately static.
2611 * @parameter {number} delta - Change in zoom level.
2612 * @parameter {Array<number>} reference - Reference point in basic coordinates.
2614 zoomIn(delta: number, reference: number[]): void;
2615 getCenter(): Observable<number[]>;
2616 getZoom(): Observable<number>;
2617 setCenter(center: number[]): void;
2618 setSpeed(speed: number): void;
2619 setTransitionMode(mode: TransitionMode): void;
2620 setZoom(zoom: number): void;
2623 private _invokeContextOperation;
2629 constructor(doc?: Node);
2630 get document(): HTMLDocument;
2631 createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, className?: string, container?: HTMLElement): HTMLElementTagNameMap[K];
2635 * Enumeration for component size.
2638 * @description May be used by a component to allow for resizing
2639 * of the UI elements rendered by the component.
2641 declare enum ComponentSize {
2643 * Automatic size. The size of the elements will automatically
2644 * change at a predefined threshold.
2648 * Large size. The size of the elements will be fixed until another
2649 * component size is configured.
2653 * Small size. The size of the elements will be fixed until another
2654 * component size is configured.
2659 interface BearingConfiguration extends ComponentConfiguration {
2661 * The size of the ui elements.
2663 * @default ComponentSize.Automatic
2665 size?: ComponentSize;
2669 * Interface for configuration of cache depth.
2674 * var viewer = new Viewer({
2688 interface CacheDepthConfiguration {
2690 * Cache depth in the sequence directions.
2692 * @description Max value is 4. Value will be clamped
2693 * to the interval [0, 4].
2698 * Cache depth in the spherical direction.
2700 * @description Max value is 2. Value will be clamped
2701 * to the interval [0, 2].
2706 * Cache depth in the step directions.
2708 * @description Max value is 3. Value will be clamped
2709 * to the interval [0, 3].
2714 * Cache depth in the turn directions.
2716 * @description Max value is 1. Value will be clamped
2717 * to the interval [0, 1].
2723 * Interface for configuration of cache component.
2727 interface CacheConfiguration extends ComponentConfiguration {
2729 * Cache depth struct.
2731 depth?: CacheDepthConfiguration;
2735 * Interface for configuration of direction component.
2740 * var viewer = new Viewer({
2752 interface DirectionConfiguration extends ComponentConfiguration {
2754 * Determines if the sequence arrow appearance should be different from
2755 * the non sequence arrows.
2757 * @description Needs to be set to true for the sequence suffixed classes
2758 * to be applied to the navigation elements. Additional calculations will be
2759 * performed resulting in a performance cost.
2763 distinguishSequence?: boolean;
2765 * The image id representing the direction arrow to be highlighted.
2767 * @description The arrow pointing towards the image corresponding to the
2768 * highlight id will be highlighted.
2770 * @default undefined
2772 highlightId?: string;
2774 * The min width of the non transformed container element holding
2775 * the navigation arrows.
2777 * @description Set min width of the non transformed
2778 * container element holding the navigation arrows.
2779 * If the min width is larger than the max width the
2780 * min width value will be used.
2782 * The container element is automatically resized when the resize
2783 * method on the Viewer class is called.
2789 * The max width of the non transformed container element holding
2790 * the navigation arrows.
2792 * @description Set max width of the non transformed
2793 * container element holding the navigation arrows.
2794 * If the min width is larger than the max width the
2795 * min width value will be used.
2797 * The container element is automatically resized when the resize
2798 * method on the Viewer class is called.
2806 * Interface for configuration of keyboard component.
2811 * var viewer = new Viewer({
2816 * keySequenceNavigation: false,
2817 * keySpatialNavigation: false,
2824 interface KeyboardConfiguration extends ComponentConfiguration {
2826 * Enable or disable the `KeyPlayHandler`.
2832 * Enable or disable the `KeySequenceNavigationHandler`.
2836 keySequenceNavigation?: boolean;
2838 * Enable or disable the `KeySpatialNavigationHandler`.
2842 keySpatialNavigation?: boolean;
2844 * Enable or disable the `KeyZoomHandler`.
2852 * Interface for configuration of marker component.
2857 * var viewer = new Viewer({
2861 * visibleBBoxSize: 80,
2868 interface MarkerConfiguration extends ComponentConfiguration {
2870 * The size of the bounding box for which markers will be visible.
2872 * @description Provided values will be clamped to the [1, 200]
2877 visibleBBoxSize?: number;
2881 * Interface for configuration of mouse component.
2886 * var viewer = new Viewer({
2891 * scrollZoom: false,
2899 interface PointerConfiguration extends ComponentConfiguration {
2901 * Activate or deactivate the `DragPanHandler`.
2907 * Activate or deactivate the `EarthControlHandler`.
2911 earthControl?: boolean;
2913 * Activate or deactivate the `ScrollZoomHandler`.
2917 scrollZoom?: boolean;
2919 * Activate or deactivate the `TouchZoomHandler`.
2923 touchZoom?: boolean;
2927 * Interface for configuration of sequence component.
2932 * const viewer = new Viewer({
2945 interface SequenceConfiguration extends ComponentConfiguration {
2947 * Set the direction to follow when playing.
2949 * @default EdgeDirection.Next
2951 direction?: NavigationDirection;
2953 * The node id representing the direction arrow to be highlighted.
2955 * @description When set to null no direction will be highlighted.
2956 * The arrow pointing towards the node corresponding to the
2957 * highlight id will be highlighted.
2959 * @default undefined
2963 highlightId?: string;
2965 * The max width of the sequence container.
2967 * @description Set max width of the container element holding
2968 * the sequence navigation elements. If the min width is larger than the
2969 * max width the min width value will be used.
2971 * The container element is automatically resized when the resize
2972 * method on the Viewer class is called.
2978 * The min width of the sequence container.
2980 * @description Set min width of the container element holding
2981 * the sequence navigation elements. If the min width is larger than the
2982 * max width the min width value will be used.
2984 * The container element is automatically resized when the resize
2985 * method on the Viewer class is called.
2991 * Indicating whether the component is playing.
2997 * Determine whether the sequence UI elements
2998 * should be visible.
3006 * Enumeration for slider mode.
3011 * @description Modes for specifying how transitions
3012 * between images are performed in slider mode. Only
3013 * applicable when the slider component determines
3014 * that transitions with motion is possilble. When it
3015 * is not, the stationary mode will be applied.
3017 declare enum SliderConfigurationMode {
3019 * Transitions with motion.
3021 * @description The slider component moves the
3022 * camera between the image origins.
3024 * In this mode it is not possible to zoom or pan.
3026 * The slider component falls back to stationary
3027 * mode when it determines that the pair of images
3028 * does not have a strong enough relation.
3032 * Stationary transitions.
3034 * @description The camera is stationary.
3036 * In this mode it is possible to zoom and pan.
3041 * Interface for configuration of slider ids.
3045 interface SliderConfigurationIds {
3047 * Id for the image plane in the background.
3051 * Id for the image plane in the foreground.
3056 * Interface for configuration of slider component.
3060 * var viewer = new Viewer({
3064 * initialPosition: 0.5,
3066 * background: '<background-id>',
3067 * foreground: '<foreground-id>',
3069 * sliderVisible: true,
3076 interface SliderConfiguration extends ComponentConfiguration {
3078 * Initial position of the slider on the interval [0, 1].
3080 * @description Configures the initial position of the slider.
3081 * The inital position value will be used when the component
3086 initialPosition?: number;
3090 * @description Configures the component to show the image
3091 * planes for the supplied image ids in the foreground
3092 * and the background.
3094 ids?: SliderConfigurationIds;
3096 * Value indicating whether the slider should be visible.
3098 * @description Set the value controlling if the
3099 * slider is visible.
3103 sliderVisible?: boolean;
3105 * Mode used for image pair transitions.
3107 * @description Configures the mode for transitions between
3110 mode?: SliderConfigurationMode;
3113 declare enum CameraVisualizationMode {
3115 * Cameras are hidden.
3119 * Cameras are shown, all with the same color.
3123 * Cameras are shown with colors based on the
3128 * Cameras are shown with colors based on the
3129 * their connected components.
3131 ConnectedComponent = 3,
3133 * Cameras are shown, with colors based on the
3139 declare enum OriginalPositionMode {
3141 * Original positions are hidden.
3145 * Visualize original positions with altitude change.
3149 * Visualize original positions without altitude change,
3150 * i.e. as flat lines from the camera origin.
3155 declare enum PointVisualizationMode {
3157 * Points are hidden.
3161 * Visualize points with original colors.
3165 * Paint all points belonging to a specific
3166 * cluster with the same random color.
3172 * Interface for configuration of spatial component.
3177 * var viewer = new Viewer({
3182 * cameraVisualizationMode: CameraVisualizationMode.Cluster,
3183 * cellsVisible: true,
3184 * originalPositionMode: OriginalPositionMode.Altitude,
3186 * pointVisualizationMode: PointVisualizationMode.Hidden,
3193 interface SpatialConfiguration extends ComponentConfiguration {
3195 * The camera size on the interval [0.01, 1].
3199 cameraSize?: number;
3201 * Specify the camera visualization mode.
3203 * @default CameraVisualizationMode.Homogeneous
3205 cameraVisualizationMode?: CameraVisualizationMode;
3207 * Specify if the currently rendered cells should be visualize on
3208 * an approximated ground plane.
3212 cellsVisible?: boolean;
3214 * Cell grid depth from the cell of the currently
3217 * @description Max value is 3. Value will be clamped
3218 * to the interval [1, 3].
3221 cellGridDepth?: number;
3223 * Specify the original position visualization mode.
3225 * @description The original positions are hidden
3228 * @default OriginalPositionMode.Hidden
3230 originalPositionMode?: OriginalPositionMode;
3232 * The point size on the interval [0.01, 1].
3238 * Specify if the points should be visible or not.
3240 * @deprecated `pointsVisible` will be removed in
3241 * v5.x. Use {@link pointVisualizationMode} instead.
3245 pointsVisible?: boolean;
3247 * Specify how point clouds should be visualized.
3249 * @default PointVisualizationMode.Original
3251 pointVisualizationMode?: PointVisualizationMode;
3255 * Enumeration for tag modes
3258 * @description Modes for the interaction in the tag component.
3260 declare enum TagMode {
3262 * Disables creating tags.
3266 * Create a point geometry through a click.
3270 * Create a points geometry through clicks.
3274 * Create a polygon geometry through clicks.
3278 * Create a rect geometry through clicks.
3282 * Create a rect geometry through drag.
3284 * @description Claims the mouse which results in mouse handlers like
3285 * drag pan and scroll zoom becoming inactive.
3291 * Interface for configuration of tag component.
3296 * var viewer = new Viewer({
3300 * createColor: 0xFF0000,
3301 * mode: TagMode.CreateRect,
3308 interface TagConfiguration extends ComponentConfiguration {
3310 * The color of vertices and edges for tags that
3311 * are being created.
3315 createColor?: number;
3317 * Show an indicator at the centroid of the points geometry
3318 * that creates the geometry when clicked.
3321 indicatePointsCompleter?: boolean;
3323 * The interaction mode of the tag component.
3325 * @default TagMode.Default
3330 interface ZoomConfiguration extends ComponentConfiguration {
3332 * The size of the ui elements.
3334 * @default ComponentSize.Automatic
3336 size?: ComponentSize;
3340 * Interface for configuration of navigation component.
3345 * var viewer = new Viewer({
3358 interface NavigationFallbackConfiguration extends ComponentConfiguration {
3360 * Enable or disable the sequence arrows.
3366 * Enable or disable the spatial arrows.
3374 * Interface for the fallback component options that can be
3375 * provided to the viewer when the browser does not have
3380 interface FallbackOptions {
3382 * Show static images without pan, zoom, or transitions.
3384 * @description Fallback for `image` when WebGL is not supported.
3390 * Show static navigation arrows in the corners.
3392 * @description Fallback for `direction` and `sequence` when WebGL is not supported.
3396 navigation?: boolean | NavigationFallbackConfiguration;
3400 * Interface for the component options that can be provided to the viewer.
3404 interface ComponentOptions {
3410 attribution?: boolean;
3412 * Show indicator for bearing and field of view.
3416 bearing?: boolean | BearingConfiguration;
3418 * Cache images around the current one.
3422 cache?: boolean | CacheConfiguration;
3424 * Use a cover to avoid loading data until viewer interaction.
3430 * Show spatial direction arrows for navigation.
3432 * @description Default spatial navigation when there is WebGL support.
3433 * Requires WebGL support.
3437 direction?: boolean | DirectionConfiguration;
3439 * Enable fallback component options
3440 * when the browser does not have WebGL support.
3442 * @default undefined
3444 fallback?: FallbackOptions;
3446 * Show image planes in 3D.
3448 * @description Requires WebGL support.
3454 * Enable use of keyboard commands.
3456 * @description Requires WebGL support.
3460 keyboard?: boolean | KeyboardConfiguration;
3462 * Enable an interface for showing 3D markers in the viewer.
3464 * @description Requires WebGL support.
3468 marker?: boolean | MarkerConfiguration;
3470 * Enable mouse, pen, and touch interaction for zoom and pan.
3472 * @description Requires WebGL support.
3476 pointer?: boolean | PointerConfiguration;
3478 * Show HTML popups over images.
3480 * @description Requires WebGL support.
3486 * Show sequence related navigation.
3488 * @description Default sequence navigation when there is WebGL support.
3492 sequence?: boolean | SequenceConfiguration;
3494 * Show a slider for transitioning between image planes.
3496 * @description Requires WebGL support.
3500 slider?: boolean | SliderConfiguration;
3502 * Enable an interface for showing spatial data in the viewer.
3504 * @description Requires WebGL support.
3508 spatial?: boolean | SpatialConfiguration;
3510 * Enable an interface for drawing 2D geometries on top of images.
3512 * @description Requires WebGL support.
3516 tag?: boolean | TagConfiguration;
3518 * Show buttons for zooming in and out.
3520 * @description Requires WebGL support.
3524 zoom?: boolean | ZoomConfiguration;
3528 * Interface for the URL options that can be provided to the viewer.
3532 interface UrlOptions {
3536 * @description Host used for links to the full
3537 * mapillary website.
3539 * @default {"www.mapillary.com"}
3541 exploreHost?: string;
3545 * @description Used for all hosts.
3547 * @default {"https"}
3553 * Enumeration for camera controls.
3555 * @description Specifies different modes for how the
3556 * camera is controlled through pointer, keyboard or
3557 * other modes of input.
3562 declare enum CameraControls {
3564 * Control the camera with custom logic by
3565 * attaching a custom camera controls
3566 * instance to the {@link Viewer}.
3570 * Control the camera from a birds perspective
3571 * to get an overview.
3575 * Control the camera in a first person view
3576 * from the street level perspective.
3582 * Interface for the options that can be provided to the {@link Viewer}.
3584 interface ViewerOptions {
3586 * Optional access token for API requests of
3589 * @description Can be a user access token or
3590 * a client access token.
3592 * A Mapillary client access token can be obtained
3593 * by [signing in](https://www.mapillary.com/app/?login=true) and
3594 * [registering an application](https://www.mapillary.com/dashboard/developers).
3596 * The access token can also be set through the
3597 * {@link Viewer.setAccessToken} method.
3599 accessToken?: string;
3601 * Value specifying the initial camera controls of
3604 * @default {@link CameraControls.Street}
3606 cameraControls?: CameraControls;
3608 * Value specifying if combined panning should be activated.
3612 combinedPanning?: boolean;
3614 * Component options.
3616 component?: ComponentOptions;
3618 * The HTML element in which MapillaryJS will render the
3619 * viewer, or the element's string `id`. The
3620 * specified element must have no children.
3622 container: string | HTMLElement;
3624 * Optional data provider class instance for API and static
3625 * resource requests.
3627 * @description The data provider will override the
3628 * default MapillaryJS data provider and take responsibility
3629 * for all IO handling.
3631 * The data provider takes precedence over the {@link ViewerOptions.accessToken} property.
3633 * A data provider instance must implement all members
3634 * specified in the {@link IDataProvider} interface. This can
3635 * be done by extending the {@link DataProviderBase} class or
3636 * implementing the interface directly.
3638 dataProvider?: IDataProvider;
3640 * Optional `image-id` to start from. The id
3641 * can be any Mapillary image. If a id is provided the viewer is
3642 * bound to that id until it has been fully loaded. If null is provided
3643 * no image is loaded at viewer initialization and the viewer is not
3644 * bound to any particular id. Any image can then be navigated to
3645 * with e.g. `viewer.moveTo("<my-image-id>")`.
3649 * Value indicating if the viewer should fetch high resolution
3652 * @description Can be used when extending MapillaryJS with
3653 * a custom data provider. If no image tiling server exists
3654 * the image tiling can be inactivated to avoid error
3655 * messages about non-existing tiles in the console.
3659 imageTiling?: boolean;
3661 * The render mode in the viewer.
3663 * @default {@link RenderMode.Fill}
3665 renderMode?: RenderMode;
3667 * A base URL for retrieving a PNG sprite image and json metadata file.
3668 * File name extensions will be automatically appended.
3672 * If `true`, the viewer will automatically resize when the
3673 * browser window resizes.
3677 trackResize?: boolean;
3679 * The transtion mode in the viewer.
3681 * @default {@link TransitionMode.Default}
3683 transitionMode?: TransitionMode;
3690 declare class KeyboardService {
3693 constructor(canvasContainer: HTMLElement);
3694 get keyDown$(): Observable<KeyboardEvent>;
3695 get keyUp$(): Observable<KeyboardEvent>;
3698 declare class MouseService {
3699 private _activeSubject$;
3701 private _domMouseDown$;
3702 private _domMouseMove$;
3703 private _domMouseDragStart$;
3704 private _domMouseDrag$;
3705 private _domMouseDragEnd$;
3706 private _documentMouseMove$;
3707 private _documentMouseUp$;
3708 private _mouseDown$;
3709 private _mouseEnter$;
3710 private _mouseMove$;
3711 private _mouseLeave$;
3714 private _mouseOver$;
3715 private _contextMenu$;
3716 private _consistentContextMenu$;
3719 private _deferPixelClaims$;
3720 private _deferPixels$;
3721 private _proximateClick$;
3722 private _staticClick$;
3723 private _mouseWheel$;
3724 private _mouseDragStart$;
3725 private _mouseDrag$;
3726 private _mouseDragEnd$;
3727 private _mouseRightDragStart$;
3728 private _mouseRightDrag$;
3729 private _mouseRightDragEnd$;
3730 private _claimMouse$;
3731 private _claimWheel$;
3732 private _mouseOwner$;
3733 private _wheelOwner$;
3734 private _windowBlur$;
3735 private _subscriptions;
3736 constructor(container: EventTarget, canvasContainer: EventTarget, domContainer: EventTarget, doc: EventTarget);
3737 get active$(): Observable<boolean>;
3738 get activate$(): Subject<boolean>;
3739 get documentMouseMove$(): Observable<MouseEvent>;
3740 get documentMouseUp$(): Observable<MouseEvent>;
3741 get domMouseDragStart$(): Observable<MouseEvent>;
3742 get domMouseDrag$(): Observable<MouseEvent>;
3743 get domMouseDragEnd$(): Observable<MouseEvent | FocusEvent>;
3744 get domMouseDown$(): Observable<MouseEvent>;
3745 get domMouseMove$(): Observable<MouseEvent>;
3746 get mouseOwner$(): Observable<string>;
3747 get mouseDown$(): Observable<MouseEvent>;
3748 get mouseEnter$(): Observable<MouseEvent>;
3749 get mouseMove$(): Observable<MouseEvent>;
3750 get mouseLeave$(): Observable<MouseEvent>;
3751 get mouseOut$(): Observable<MouseEvent>;
3752 get mouseOver$(): Observable<MouseEvent>;
3753 get mouseUp$(): Observable<MouseEvent>;
3754 get click$(): Observable<MouseEvent>;
3755 get dblClick$(): Observable<MouseEvent>;
3756 get contextMenu$(): Observable<MouseEvent>;
3757 get mouseWheel$(): Observable<WheelEvent>;
3758 get mouseDragStart$(): Observable<MouseEvent>;
3759 get mouseDrag$(): Observable<MouseEvent>;
3760 get mouseDragEnd$(): Observable<MouseEvent | FocusEvent>;
3761 get mouseRightDragStart$(): Observable<MouseEvent>;
3762 get mouseRightDrag$(): Observable<MouseEvent>;
3763 get mouseRightDragEnd$(): Observable<MouseEvent | FocusEvent>;
3764 get proximateClick$(): Observable<MouseEvent>;
3765 get staticClick$(): Observable<MouseEvent>;
3766 get windowBlur$(): Observable<FocusEvent>;
3768 claimMouse(name: string, zindex: number): void;
3769 unclaimMouse(name: string): void;
3770 deferPixels(name: string, deferPixels: number): void;
3771 undeferPixels(name: string): void;
3772 claimWheel(name: string, zindex: number): void;
3773 unclaimWheel(name: string): void;
3774 filtered$<T>(name: string, observable$: Observable<T>): Observable<T>;
3775 filteredWheel$<T>(name: string, observable$: Observable<T>): Observable<T>;
3776 private _createDeferredMouseMove$;
3777 private _createMouseDrag$;
3778 private _createMouseDragEnd$;
3779 private _createMouseDragStart$;
3780 private _createMouseDragInitiate$;
3781 private _createOwner$;
3783 private _mouseButton;
3784 private _buttonReleased;
3785 private _isMousePen;
3789 * Enumeration for alignments
3793 declare enum Alignment {
3799 * Align to bottom left
3803 * Align to bottom right
3827 * Align to top right
3832 interface ISpriteAtlas {
3834 getGLSprite(name: string): THREE.Object3D;
3835 getDOMSprite(name: string, float?: Alignment): vd.VNode;
3838 declare class SpriteAtlas implements ISpriteAtlas {
3842 set json(value: Sprites);
3843 set image(value: HTMLImageElement);
3844 get loaded(): boolean;
3845 getGLSprite(name: string): THREE.Object3D;
3846 getDOMSprite(name: string, float?: Alignment): vd.VNode;
3856 [key: string]: Sprite;
3858 declare class SpriteService {
3860 private _spriteAtlasOperation$;
3861 private _spriteAtlas$;
3862 private _atlasSubscription;
3863 constructor(sprite?: string);
3864 get spriteAtlas$(): Observable<SpriteAtlas>;
3868 interface TouchPinch {
3870 * X client coordinate for center of pinch.
3874 * Y client coordinate for center of pinch.
3878 * X page coordinate for center of pinch.
3882 * Y page coordinate for center of pinch.
3886 * X screen coordinate for center of pinch.
3890 * Y screen coordinate for center of pinch.
3894 * Distance change in X direction between touches
3895 * compared to previous event.
3899 * Distance change in Y direction between touches
3900 * compared to previous event.
3904 * Pixel distance between touches.
3908 * Change in pixel distance between touches compared
3909 * to previous event.
3911 distanceChange: number;
3913 * Distance in X direction between touches.
3917 * Distance in Y direction between touches.
3921 * Original touch event.
3923 originalEvent: TouchEvent;
3934 declare class TouchService {
3935 private _activeSubject$;
3937 private _touchStart$;
3938 private _touchMove$;
3940 private _touchCancel$;
3941 private _singleTouchDrag$;
3942 private _singleTouchDragStart$;
3943 private _singleTouchDragEnd$;
3944 private _singleTouchMove$;
3945 private _pinchOperation$;
3947 private _pinchStart$;
3949 private _pinchChange$;
3950 private _doubleTap$;
3951 private _subscriptions;
3952 constructor(canvasContainer: HTMLElement, domContainer: HTMLElement);
3953 get active$(): Observable<boolean>;
3954 get activate$(): Subject<boolean>;
3955 get doubleTap$(): Observable<TouchEvent>;
3956 get touchStart$(): Observable<TouchEvent>;
3957 get touchMove$(): Observable<TouchEvent>;
3958 get touchEnd$(): Observable<TouchEvent>;
3959 get touchCancel$(): Observable<TouchEvent>;
3960 get singleTouchDragStart$(): Observable<TouchEvent>;
3961 get singleTouchDrag$(): Observable<TouchEvent>;
3962 get singleTouchDragEnd$(): Observable<TouchEvent>;
3963 get pinch$(): Observable<TouchPinch>;
3964 get pinchStart$(): Observable<TouchEvent>;
3965 get pinchEnd$(): Observable<TouchEvent>;
3970 * Test whether the current browser supports the full
3971 * functionality of MapillaryJS.
3973 * @description The full functionality includes WebGL rendering.
3977 * @example `var supported = isSupported();`
3979 declare function isSupported(): boolean;
3981 * Test whether the current browser supports the fallback
3982 * functionality of MapillaryJS.
3984 * @description The fallback functionality does not include WebGL
3985 * rendering, only 2D canvas rendering.
3989 * @example `var fallbackSupported = isFallbackSupported();`
3991 declare function isFallbackSupported(): boolean;
3993 declare type ComparisonFilterOperator = "==" | "!=" | ">" | ">=" | "<" | "<=";
3994 declare type SetMembershipFilterOperator = "in" | "!in";
3995 declare type CombiningFilterOperator = "all";
3996 declare type FilterOperator = CombiningFilterOperator | ComparisonFilterOperator | SetMembershipFilterOperator;
3997 declare type FilterImage = Pick<Image, "cameraType" | "capturedAt" | "clusterId" | "creatorId" | "creatorUsername" | "exifOrientation" | "height" | "id" | "mergeId" | "merged" | "ownerId" | "private" | "qualityScore" | "sequenceId" | "width">;
3998 declare type FilterKey = keyof FilterImage;
3999 declare type FilterValue = boolean | number | string;
4000 declare type ComparisonFilterExpression = [
4001 ComparisonFilterOperator,
4005 declare type SetMembershipFilterExpression = [
4006 SetMembershipFilterOperator,
4010 declare type CombiningFilterExpression = [
4011 CombiningFilterOperator,
4012 ...(ComparisonFilterExpression | SetMembershipFilterExpression)[]
4014 declare type FilterExpression = ComparisonFilterExpression | SetMembershipFilterExpression | CombiningFilterExpression;
4019 declare type ViewerEventType = "bearing" | "click" | "contextmenu" | "dblclick" | "fov" | "dataloading" | "load" | "mousedown" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "moveend" | "movestart" | "navigable" | "image" | "position" | "pov" | "reference" | "remove" | "sequenceedges" | "spatialedges";
4024 * @description Interface for custom camera controls.
4025 * This is a specification for implementers to model:
4026 * it is not an exported method or class.
4028 * Custom camera controls allow the API user to freely
4029 * move the viewer's camera and define the camera
4030 * projection used. These camera properties are used
4031 * to render the viewer 3D scene directly into the
4032 * viewer's GL context.
4034 * Custom camera controls must implement the
4035 * onActivate, onAnimationFrame, onAttach, onDeactivate,
4036 * onDetach, onReference, and onResize methods.
4038 * Custom camera controls trigger rerendering
4039 * automatically when the camera pose or projection
4040 * is changed through the projectionMatrix and
4041 * viewMatrix callbacks.
4044 * [model view projection article]{@link https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection}
4045 * on MDN for an introduction to view and projection matrices.
4047 * Custom camera controls can choose to make updates on
4048 * each animation frame or only based on user input.
4049 * Invoking updates on each camera frame is more resource
4052 * Only a single custom camera control instance can be
4053 * attached to the viewer at any given time.
4055 interface ICustomCameraControls {
4057 * Method called when the camera controls have been
4058 * activated and is responsible for moving the
4059 * viewer's camera and defining its projection. This
4060 * method gives the camera controls a chance to initialize
4061 * resources, perform any transitions, and determine
4064 * @description Use the {@link Viewer.getContainer} method
4065 * to get the container for determining the viewer size
4066 * and aspect as well as for attaching event handlers.
4068 * Use the view matrix to determine initial properties such
4069 * as camera position, forward vector, and up vector.
4071 * Use the projection matrix to determine the initial
4072 * projection properties.
4074 * Store the reference coordiante translations
4075 * during future reference reference changes.
4077 * @param {IViewer} viewer - The viewer this custom
4078 * camera controls instance was just added to.
4079 * @param {Array<number>} viewMatrix - The viewer's view matrix.
4080 * @param {Array<number>} projectionMatrix - The viewers's
4081 * projection matrix.
4082 * @param {LngLatAlt} reference - The viewer's reference.
4084 onActivate(viewer: IViewer, viewMatrix: number[], projectionMatrix: number[], reference: LngLatAlt): void;
4086 * Method called for each animation frame.
4088 * @desdcription Custom camera controls can choose to
4089 * make updates on each animation frame or only based on
4090 * user input. Invoking updates on each animation frame is
4091 * more resource intensive.
4093 * @param {IViewer} viewer - The viewer this custom
4094 * camera controls instance is attached to.
4096 * @param {number} frameId - The request animation frame's id.
4098 onAnimationFrame(viewer: IViewer, frameId: number): void;
4100 * Method called when the camera controls have been
4101 * attached to the viewer.
4102 * This gives the camera controls a chance to initialize
4105 * @description Camera controls are attached to the
4106 * viewer with the with {@link Viewer.attachCustomCameraControls}
4109 * Use the matrix callback functions
4110 * to modify the camera pose and projection of the
4113 * Invoking the matrix callbacks has no effect if the
4114 * custom camera controls have not been activated.
4116 * @param {IViewer} viewer - The viewer this custom
4117 * camera controls instance was just added to.
4119 onAttach(viewer: IViewer, viewMatrixCallback: (viewMatrix: number[]) => void, projectionMatrixCallback: (projectionMatrix: number[]) => void): void;
4121 * Method called when the camera controls have been deactivated.
4122 * This gives the camera controls a chance to clean up resources
4123 * and event listeners.
4125 * @param {IViewer} viewer - The viewer this custom camera controls
4126 * instance is attached to.
4128 onDeactivate(viewer: IViewer): void;
4130 * Method called when the camera controls have been detached from
4131 * the viewer. This gives the camera controls a chance to clean
4132 * up resources and event listeners.
4134 * @description Camera controls are attached to the
4135 * viewer with the with {@link Viewer.detachCustomCameraControls}
4138 * @param {IViewer} viewer - The viewer this custom camera
4139 * controls instance was just detached from.
4141 onDetach(viewer: IViewer): void;
4143 * Method called when the viewer's reference position has changed.
4144 * This gives the custom camera controls a chance to reposition
4147 * @description Calculate the updated topocentric positions
4148 * for scene objects using the previous reference, the
4149 * new provided reference as well as the
4150 * {@link geodeticToEnu} and
4151 * {@link enuToGeodetic} functions.
4153 * @param {IViewer} viewer - The viewer this custom renderer
4155 * @param {LngLatAlt} reference - The viewer's current
4156 * reference position.
4158 onReference(viewer: IViewer, reference: LngLatAlt): void;
4160 * Method called when the viewer has been resized.
4162 * @description Use this method to modify the projection.
4164 onResize(viewer: IViewer): void;
4167 declare enum RenderPass {
4169 * Occurs after the background render pass.
4177 * @description Interface for custom renderers. This is a
4178 * specification for implementers to model: it is not
4179 * an exported method or class.
4181 * A custom renderer allows the API user to render directly
4182 * into the viewer's GL context using the viewer's camera.
4184 * Custom renderers must have a unique id. They must implement
4185 * render, onReferenceChanged, onAdd, and onRemove. They can
4186 * trigger rendering using {@link Viewer.triggerRerender}.
4188 * The viewer uses a metric topocentric
4189 * [local east, north, up coordinate system](https://en.wikipedia.org/wiki/Local_tangent_plane_coordinates).
4191 * Custom renderers can calculate the topocentric positions
4192 * of their objects using the reference parameter of the
4193 * renderer interface methods and the {@link geodeticToEnu}
4196 * During a render pass, custom renderers
4197 * are called in the order they were added.
4199 interface ICustomRenderer {
4201 * A unique renderer id.
4205 * The custom renderer's render pass.
4207 * @description The {@link ICustomRenderer.render} method
4208 * will be called during this render pass.
4210 renderPass: RenderPass;
4212 * Method called when the renderer has been added to the
4213 * viewer. This gives the
4214 * renderer a chance to initialize gl resources and
4215 * register event listeners.
4217 * @description Custom renderers are added with the
4218 * with {@link Viewer.addCustomRenderer} method.
4220 * Calculate the topocentric positions
4221 * for scene objects using the provided reference and
4222 * the {@link geodeticToEnu} function.
4224 * @param {IViewer} viewer - The viewer this custom renderer
4225 * was just added to.
4226 * @param {LngLatAlt} reference - The viewer's current
4227 * reference position.
4228 * @param {WebGLRenderingContext | WebGL2RenderingContext} context -
4229 * The viewer's gl context.
4231 onAdd(viewer: IViewer, reference: LngLatAlt, context: WebGLRenderingContext | WebGL2RenderingContext): void;
4233 * Method called when the viewer's reference position has changed.
4234 * This gives the renderer a chance to reposition its scene objects.
4236 * @description Calculate the updated topocentric positions
4237 * for scene objects using the provided reference and
4238 * the {@link geodeticToEnu} function.
4240 * @param {IViewer} viewer - The viewer this custom renderer
4242 * @param {LngLatAlt} reference - The viewer's current
4243 * reference position.
4245 onReference(viewer: IViewer, reference: LngLatAlt): void;
4247 * Method called when the renderer has been removed from the
4248 * viewer. This gives the
4249 * renderer a chance to clean up gl resources and event
4252 * @description Custom renderers are remove with the
4253 * {@link Viewer.removeCustomRenderer} method.
4255 * @param {IViewer} viewer - The viewer this custom renderer
4256 * was just removed from.
4257 * @param {WebGLRenderingContext | WebGL2RenderingContext} context -
4258 * The viewer's gl context.
4260 onRemove(viewer: IViewer, context: WebGLRenderingContext | WebGL2RenderingContext): void;
4262 * Called during an animation frame allowing the renderer to draw
4263 * into the GL context. The layer cannot make assumptions
4264 * about the current GL state.
4266 * @description Take a look at the
4267 * [WebGL model view projection article](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection)
4268 * on MDN for an introduction to the view and projection matrices.
4270 * @param {WebGLRenderingContext | WebGL2RenderingContext} context The
4271 * viewer's WebGL context.
4272 * @param {Array<number>} viewMatrix The viewer's view matrix.
4273 * @param {Array<number>} projectionMatrix The viewers's projection
4276 render(context: WebGLRenderingContext | WebGL2RenderingContext, viewMatrix: number[], projectionMatrix: number[]): void;
4280 * @interface PointOfView
4282 * Interface that represents the point of view of the viewer.
4284 interface PointOfView {
4286 * Value indicating the current bearing of the viewer
4287 * measured in degrees clockwise with respect to north.
4288 * Ranges from 0° to 360°.
4292 * The camera tilt in degrees, relative to a horizontal plane.
4293 * Ranges from 90° (directly upwards) to -90° (directly downwards).
4299 readonly dataProvider: IDataProvider;
4300 readonly isNavigable: boolean;
4301 activateCombinedPanning(): void;
4302 activateComponent(name: string): void;
4303 activateCover(): void;
4304 addCustomRenderer(renderer: ICustomRenderer): void;
4305 attachCustomCameraControls(controls: ICustomCameraControls): void;
4306 deactivateCombinedPanning(): void;
4307 deactivateComponent(name: string): void;
4308 deactivateCover(): void;
4309 detachCustomCameraControls(): Promise<ICustomCameraControls>;
4310 fire<T>(type: ViewerEventType, event: T): void;
4311 getBearing(): Promise<number>;
4312 getCameraControls(): Promise<CameraControls>;
4313 getCanvas(): HTMLCanvasElement;
4314 getCanvasContainer(): HTMLDivElement;
4315 getCenter(): Promise<number[]>;
4316 getComponent<TComponent extends Component<ComponentConfiguration>>(name: string): TComponent;
4317 getContainer(): HTMLElement;
4318 getFieldOfView(): Promise<number>;
4319 getImage(): Promise<Image>;
4320 getPointOfView(): Promise<PointOfView>;
4321 getPosition(): Promise<LngLat>;
4322 getReference(): Promise<LngLatAlt>;
4323 getZoom(): Promise<number>;
4324 hasCustomCameraControls(controls: ICustomCameraControls): boolean;
4325 hasCustomRenderer(rendererId: string): boolean;
4326 moveDir(direction: NavigationDirection): Promise<Image>;
4327 moveTo(imageId: string): Promise<Image>;
4328 off<T>(type: ViewerEventType, handler: (event: T) => void): void;
4329 on<T>(type: ViewerEventType, handler: (event: T) => void): void;
4330 project(lngLat: LngLat): Promise<number[]>;
4331 projectFromBasic(basicPoint: number[]): Promise<number[]>;
4333 removeCustomRenderer(rendererId: string): void;
4335 setCameraControls(controls: CameraControls): void;
4336 setCenter(center: number[]): void;
4337 setFieldOfView(fov: number): void;
4338 setFilter(filter?: FilterExpression): Promise<void>;
4339 setRenderMode(renderMode: RenderMode): void;
4340 setTransitionMode(transitionMode: TransitionMode): void;
4341 setAccessToken(accessToken?: string): Promise<void>;
4342 setZoom(zoom: number): void;
4343 triggerRerender(): void;
4344 unproject(pixelPoint: number[]): Promise<LngLat>;
4345 unprojectToBasic(pixelPoint: number[]): Promise<number[]>;
4349 * Interface for general viewer events.
4351 interface ViewerEvent {
4353 * The viewer object that fired the event.
4359 type: ViewerEventType;
4363 * Interface for bearing viewer events.
4365 interface ViewerBearingEvent extends ViewerEvent {
4367 * Bearing is measured in degrees
4368 * clockwise with respect to north.
4370 * @description Bearing is related to the computed
4371 * compass angle ({@link Image.computedCompassAngle})
4372 * from SfM, not the original EXIF compass angle.
4379 * Interface for viewer data loading events.
4381 * @description Fired when any viewer data (image, mesh, metadata, etc)
4382 * begins loading or changing asyncronously as a result of viewer
4385 * Also fired when the data has finished loading and the viewer
4386 * is able to perform the navigation.
4388 interface ViewerDataLoadingEvent extends ViewerEvent {
4390 * Indicates if the viewer navigation is awaiting data load.
4393 type: "dataloading";
4397 * Interface for mouse-related viewer events.
4401 * // The `click` event is an example of a `ViewerMouseEvent`.
4402 * // Set up an event listener on the viewer.
4403 * viewer.on('click', function(e) {
4404 * // The event object contains information like the
4405 * // coordinates of the point in the viewer that was clicked.
4406 * console.log('A click event has occurred at ' + e.lngLat);
4410 interface ViewerMouseEvent extends ViewerEvent {
4412 * The basic coordinates in the current image of the mouse
4415 * @description In some situations mouse events can occur outside of
4416 * the border of a image. In that case the basic coordinates will be
4419 * The basic point is only provided when the
4420 * {@link CameraControls.Street} mode is active. For all other camera
4421 * control modes, the basic point will be `null`.
4423 * Basic coordinates are 2D coordinates on the [0, 1] interval
4424 * and has the origin point, (0, 0), at the top left corner and the
4425 * maximum value, (1, 1), at the bottom right corner of the original
4428 basicPoint: number[];
4430 * The geographic location in the viewer of the mouse event target.
4432 * @description In some situations the viewer can not determine a valid
4433 * geographic location for the mouse event target. In that case the
4434 * geographic coordinates will be `null`.
4438 * The pixel coordinates of the mouse event target, relative to
4439 * the viewer and measured from the top left corner.
4441 pixelPoint: number[];
4443 * The original event that triggered the viewer event.
4445 originalEvent: MouseEvent;
4449 type: "click" | "contextmenu" | "dblclick" | "mousedown" | "mousemove" | "mouseout" | "mouseover" | "mouseup";
4453 * Interface for navigable viewer events.
4455 interface ViewerNavigableEvent extends ViewerEvent {
4457 * The navigable state indicates if the viewer supports
4458 * moving, i.e. calling the `moveTo` and `moveDir`
4459 * methods. The viewer will not be in a navigable state if the cover
4460 * is activated and the viewer has been supplied a id. When the cover
4461 * is deactivated or activated without being supplied a id it will
4469 * Interface for navigation edge viewer events.
4471 interface ViewerNavigationEdgeEvent extends ViewerEvent {
4473 * The viewer's current navigation edge status.
4475 status: NavigationEdgeStatus;
4476 type: "sequenceedges" | "spatialedges";
4480 * Interface for viewer image events.
4482 interface ViewerImageEvent extends ViewerEvent {
4484 * The viewer's current image.
4491 * Interface for viewer state events.
4495 * // The `fov` event is an example of a `ViewerStateEvent`.
4496 * // Set up an event listener on the viewer.
4497 * viewer.on('fov', function(e) {
4498 * console.log('A fov event has occured');
4502 interface ViewerStateEvent extends ViewerEvent {
4506 type: "fov" | "moveend" | "movestart" | "position" | "pov" | "remove";
4509 declare type ComponentName = "attribution" | "bearing" | "cache" | "cover" | "direction" | "image" | "keyboard" | "marker" | "pointer" | "popup" | "sequence" | "slider" | "spatial" | "tag" | "zoom";
4511 declare type FallbackComponentName = "imagefallback" | "navigationfallback";
4514 * Interface for viewer load events.
4516 * @description Fired immediately after all necessary resources
4517 * have been downloaded and the first visually complete
4518 * rendering of the viewer has occurred.
4520 * The visually complete rendering does not include custom
4523 * This event is only fired for viewer configurations where
4524 * the WebGL context is created, i.e. not when using the
4525 * fallback functionality only.
4529 * // Set up an event listener on the viewer.
4530 * viewer.on('load', function(e) {
4531 * console.log('A load event has occured');
4535 interface ViewerLoadEvent extends ViewerEvent {
4540 * Interface for viewer reference events.
4542 interface ViewerReferenceEvent extends ViewerEvent {
4544 * The viewer's current reference.
4546 reference: LngLatAlt;
4553 * @classdesc The Viewer object represents the navigable image viewer.
4554 * Create a Viewer by specifying a container, client ID, image ID and
4555 * other options. The viewer exposes methods and events for programmatic
4558 * In the case of asynchronous methods, MapillaryJS returns promises to
4559 * the results. Notifications are always emitted through JavaScript events.
4561 declare class Viewer extends EventEmitter implements IViewer {
4563 * Private component controller object which manages component states.
4565 private _componentController;
4567 * Private container object which maintains the DOM Element,
4568 * renderers and relevant services.
4572 * Private observer object which observes the viewer state and
4573 * fires events on behalf of the viewer.
4577 * Private navigator object which controls navigation.
4581 * Private custom camera controls object which handles
4582 * custom control subscriptions.
4584 private _customCameraControls;
4586 * Private custom renderer object which controls WebGL custom
4587 * rendering subscriptions.
4589 private _customRenderer;
4591 * Create a new viewer instance.
4593 * @description The `Viewer` object represents the street imagery
4594 * viewer on your web page. It exposes methods and properties that
4595 * you can use to programatically change the view, and fires
4596 * events as users interact with it.
4598 * It is possible to initialize the viewer with or
4601 * When you want to show a specific image in the viewer from
4602 * the start you should initialize it with a ID.
4604 * When you do not know the first image ID at implementation
4605 * time, e.g. in a map-viewer application you should initialize
4606 * the viewer without a ID and call `moveTo` instead.
4608 * When initializing with an ID the viewer is bound to that ID
4609 * until the image for that ID has been successfully loaded.
4610 * Also, a cover with the image of the ID will be shown.
4611 * If the data for that ID can not be loaded because the ID is
4612 * faulty or other errors occur it is not possible to navigate
4613 * to another ID because the viewer is not navigable. The viewer
4614 * becomes navigable when the data for the ID has been loaded and
4615 * the image is shown in the viewer. This way of initializing
4616 * the viewer is mostly for embedding in blog posts and similar
4617 * where one wants to show a specific image initially.
4619 * If the viewer is initialized without a ID (with null or
4620 * undefined) it is not bound to any particular ID and it is
4621 * possible to move to any ID with `viewer.moveTo("<my-image-id>")`.
4622 * If the first move to a ID fails it is possible to move to another
4623 * ID. The viewer will show a black background until a move
4624 * succeeds. This way of intitializing is suited for a map-viewer
4625 * application when the initial ID is not known at implementation
4628 * @param {ViewerOptions} options - Optional configuration object
4629 * specifying Viewer's and the components' initial setup.
4633 * var viewer = new Viewer({
4634 * accessToken: "<my-access-token>",
4635 * container: "<my-container-id>",
4639 constructor(options: ViewerOptions);
4641 * Returns the data provider used by the viewer to fetch
4642 * all contracts, ents, and buffers.
4644 * @description The viewer's data provider can be set
4645 * upon initialization through the {@link ViewerOptions.dataProvider}
4648 * @returns {IDataProvider} The viewer's data provider.
4650 get dataProvider(): IDataProvider;
4652 * Return a boolean indicating if the viewer is in a navigable state.
4654 * @description The navigable state indicates if the viewer supports
4655 * moving, i.e. calling the {@link moveTo} and {@link moveDir}
4656 * methods or changing the authentication state,
4657 * i.e. calling {@link setAccessToken}. The viewer will not be in a navigable
4658 * state if the cover is activated and the viewer has been supplied a ID.
4659 * When the cover is deactivated or the viewer is activated without being
4660 * supplied a ID it will be navigable.
4662 * @returns {boolean} Boolean indicating whether the viewer is navigable.
4664 get isNavigable(): boolean;
4666 * Activate the combined panning functionality.
4668 * @description The combined panning functionality is active by default.
4670 activateCombinedPanning(): void;
4672 * Activate a component.
4674 * @param {ComponentName | FallbackComponentName} name - Name of
4675 * the component which will become active.
4679 * viewer.activateComponent("marker");
4682 activateComponent(name: ComponentName | FallbackComponentName): void;
4684 * Activate the cover (deactivates all other components).
4686 activateCover(): void;
4688 * Add a custom renderer to the viewer's rendering pipeline.
4690 * @description During a render pass, custom renderers
4691 * are called in the order they were added.
4693 * @param renderer - The custom renderer implementation.
4695 addCustomRenderer(renderer: ICustomRenderer): void;
4697 * Attach custom camera controls to control the viewer's
4698 * camera pose and projection.
4700 * @description Custom camera controls allow the API user
4701 * to move the viewer's camera freely and define the camera
4702 * projection. These camera properties are used
4703 * to render the viewer 3D scene directly into the
4704 * viewer's GL context.
4706 * Only a single custom camera control instance can be
4707 * attached to the viewer. A new custom camera control
4708 * instance can be attached after detaching a previous
4711 * Set the viewer's camera controls to
4712 * {@link CameraControls.Custom} to activate attached
4713 * camera controls. If {@link CameraControls.Custom}
4714 * has already been set when a custom camera control
4715 * instance is attached, it will be activated immediately.
4717 * Set the viewer's camera controls to any other
4718 * {@link CameraControls} mode to deactivate the
4719 * custom camera controls.
4721 * @param controls - The custom camera controls implementation.
4723 * @throws {MapillaryError} When camera controls attached
4724 * are already attached to the viewer.
4726 attachCustomCameraControls(controls: ICustomCameraControls): void;
4728 * Deactivate the combined panning functionality.
4730 * @description Deactivating the combined panning functionality
4731 * could be needed in scenarios involving sequence only navigation.
4733 deactivateCombinedPanning(): void;
4735 * Deactivate a component.
4737 * @param {ComponentName | FallbackComponentName} name - Name
4738 * of component which become inactive.
4742 * viewer.deactivateComponent("pointer");
4745 deactivateComponent(name: ComponentName | FallbackComponentName): void;
4747 * Deactivate the cover (activates all components marked as active).
4749 deactivateCover(): void;
4751 * Detach a previously attached custom camera control
4752 * instance from the viewer.
4754 * @description If no custom camera control instance
4755 * has previously been attached, calling this method
4758 * Already attached custom camera controls need to
4759 * be detached before attaching another custom camera
4762 detachCustomCameraControls(): Promise<ICustomCameraControls>;
4763 fire(type: ViewerBearingEvent["type"], event: ViewerBearingEvent): void;
4764 fire(type: ViewerDataLoadingEvent["type"], event: ViewerDataLoadingEvent): void;
4765 fire(type: ViewerNavigableEvent["type"], event: ViewerNavigableEvent): void;
4766 fire(type: ViewerImageEvent["type"], event: ViewerImageEvent): void;
4767 fire(type: ViewerNavigationEdgeEvent["type"], event: ViewerNavigationEdgeEvent): void;
4768 fire(type: ViewerReferenceEvent["type"], event: ViewerReferenceEvent): void;
4769 fire(type: ViewerStateEvent["type"], event: ViewerStateEvent): void;
4770 fire(type: ViewerMouseEvent["type"], event: ViewerMouseEvent): void;
4772 * Get the bearing of the current viewer camera.
4774 * @description The bearing depends on how the camera
4775 * is currently rotated and does not correspond
4776 * to the compass angle of the current image if the view
4779 * Bearing is measured in degrees clockwise with respect to
4782 * @returns {Promise<number>} Promise to the bearing
4783 * of the current viewer camera.
4787 * viewer.getBearing().then(b => { console.log(b); });
4790 getBearing(): Promise<number>;
4792 * Get the viewer's camera control mode.
4794 * @description The camera control mode determines
4795 * how the camera is controlled when the viewer
4796 * receives pointer and keyboard input.
4798 * @returns {CameraControls} controls - Camera control mode.
4802 * viewer.getCameraControls().then(c => { console.log(c); });
4805 getCameraControls(): Promise<CameraControls>;
4807 * Returns the viewer's canvas element.
4809 * @description This is the element onto which the viewer renders
4810 * the WebGL content.
4812 * @returns {HTMLCanvasElement} The viewer's canvas element, or
4813 * null or not initialized.
4815 getCanvas(): HTMLCanvasElement;
4817 * Returns the HTML element containing the viewer's canvas element.
4819 * @description This is the element to which event bindings for viewer
4820 * interactivity (such as panning and zooming) are attached.
4822 * @returns {HTMLDivElement} The container for the viewer's
4825 getCanvasContainer(): HTMLDivElement;
4827 * Get the basic coordinates of the current image that is
4828 * at the center of the viewport.
4830 * @description Basic coordinates are 2D coordinates on the [0, 1] interval
4831 * and have the origin point, (0, 0), at the top left corner and the
4832 * maximum value, (1, 1), at the bottom right corner of the original
4835 * @returns {Promise<number[]>} Promise to the basic coordinates
4836 * of the current image at the center for the viewport.
4840 * viewer.getCenter().then(c => { console.log(c); });
4843 getCenter(): Promise<number[]>;
4847 * @param {string} name - Name of component.
4848 * @returns {Component} The requested component.
4852 * var pointerComponent = viewer.getComponent("pointer");
4855 getComponent<TComponent extends Component<ComponentConfiguration>>(name: ComponentName | FallbackComponentName): TComponent;
4857 * Returns the viewer's containing HTML element.
4859 * @returns {HTMLElement} The viewer's container.
4861 getContainer(): HTMLElement;
4863 * Get the viewer's current vertical field of view.
4865 * @description The vertical field of view rendered on the viewer canvas
4866 * measured in degrees.
4868 * @returns {Promise<number>} Promise to the current field of view
4869 * of the viewer camera.
4873 * viewer.getFieldOfView().then(fov => { console.log(fov); });
4876 getFieldOfView(): Promise<number>;
4878 * Get the viewer's current image.
4880 * @returns {Promise<Image>} Promise to the current image.
4884 * viewer.getImage().then(image => { console.log(image.id); });
4887 getImage(): Promise<Image>;
4889 * Get the viewer's current point of view.
4891 * @returns {Promise<PointOfView>} Promise to the current point of view
4892 * of the viewer camera.
4896 * viewer.getPointOfView().then(pov => { console.log(pov); });
4899 getPointOfView(): Promise<PointOfView>;
4901 * Get the viewer's current position
4903 * @returns {Promise<LngLat>} Promise to the viewers's current
4908 * viewer.getPosition().then(pos => { console.log(pos); });
4911 getPosition(): Promise<LngLat>;
4913 * Get the viewer's current reference position.
4915 * @description The reference position specifies the origin in
4916 * the viewer's topocentric coordinate system.
4918 * @returns {Promise<LngLatAlt>} Promise to the reference position.
4922 * viewer.getReference().then(reference => { console.log(reference); });
4925 getReference(): Promise<LngLatAlt>;
4927 * Get the image's current zoom level.
4929 * @returns {Promise<number>} Promise to the viewers's current
4934 * viewer.getZoom().then(z => { console.log(z); });
4937 getZoom(): Promise<number>;
4939 * Check if a controls instance is the camera controls that are
4940 * currently attached to the viewer.
4942 * @param {ICustomCameraControls} controls - Camera controls instance.
4943 * @returns {boolean} Value indicating whether the controls instance
4944 * is currently attached.
4946 hasCustomCameraControls(controls: ICustomCameraControls): boolean;
4948 * Check if a custom renderer has been added to the viewer's
4949 * rendering pipeline.
4951 * @param {string} id - Unique ID of the custom renderer.
4952 * @returns {boolean} Value indicating whether the customer
4953 * renderer has been added.
4955 hasCustomRenderer(rendererId: string): boolean;
4957 * Navigate in a given direction.
4959 * @param {NavigationDirection} direction - Direction in which which to move.
4960 * @returns {Promise<Image>} Promise to the image that was navigated to.
4961 * @throws If the current image does not have the edge direction
4962 * or the edges has not yet been cached.
4963 * @throws Propagates any IO errors to the caller.
4964 * @throws When viewer is not navigable.
4965 * @throws {@link CancelMapillaryError} When a subsequent move request
4966 * is made before the move dir call has completed.
4970 * viewer.moveDir(NavigationDirection.Next).then(
4971 * image => { console.log(image); },
4972 * error => { console.error(error); });
4975 moveDir(direction: NavigationDirection): Promise<Image>;
4977 * Navigate to a given image ID.
4979 * @param {string} imageId - Id of the image to move to.
4980 * @returns {Promise<Image>} Promise to the image that was navigated to.
4981 * @throws Propagates any IO errors to the caller.
4982 * @throws When viewer is not navigable.
4983 * @throws {@link CancelMapillaryError} When a subsequent
4984 * move request is made before the move to ID call has completed.
4988 * viewer.moveTo("<my-image-id>").then(
4989 * image => { console.log(image); },
4990 * error => { console.error(error); });
4993 moveTo(imageId: string): Promise<Image>;
4994 off(type: ViewerBearingEvent["type"], handler: (event: ViewerBearingEvent) => void): void;
4995 off(type: ViewerDataLoadingEvent["type"], handler: (event: ViewerDataLoadingEvent) => void): void;
4996 off(type: ViewerNavigableEvent["type"], handler: (event: ViewerNavigableEvent) => void): void;
4997 off(type: ViewerImageEvent["type"], handler: (event: ViewerImageEvent) => void): void;
4998 off(type: ViewerNavigationEdgeEvent["type"], handler: (event: ViewerNavigationEdgeEvent) => void): void;
4999 off(type: ViewerReferenceEvent["type"], handler: (event: ViewerReferenceEvent) => void): void;
5000 off(type: ViewerStateEvent["type"], handler: (event: ViewerStateEvent) => void): void;
5001 off(type: ViewerMouseEvent["type"], handler: (event: ViewerMouseEvent) => void): void;
5003 * Fired when the viewing direction of the camera changes.
5008 * // Initialize the viewer
5009 * var viewer = new Viewer({ // viewer options });
5010 * // Set an event listener
5011 * viewer.on("bearing", function() {
5012 * console.log("A bearing event has occurred.");
5016 on(type: "bearing", handler: (event: ViewerBearingEvent) => void): void;
5018 * Fired when a pointing device (usually a mouse) is
5019 * pressed and released at the same point in the viewer.
5024 * // Initialize the viewer
5025 * var viewer = new Viewer({ // viewer options });
5026 * // Set an event listener
5027 * viewer.on("click", function() {
5028 * console.log("A click event has occurred.");
5032 on(type: "click", handler: (event: ViewerMouseEvent) => void): void;
5034 * Fired when the right button of the mouse is clicked
5035 * within the viewer.
5037 * @event contextmenu
5040 * // Initialize the viewer
5041 * var viewer = new Viewer({ // viewer options });
5042 * // Set an event listener
5043 * viewer.on("contextmenu", function() {
5044 * console.log("A contextmenu event has occurred.");
5048 on(type: "contextmenu", handler: (event: ViewerMouseEvent) => void): void;
5050 * Fired when the viewer is loading data.
5055 * // Initialize the viewer
5056 * var viewer = new Viewer({ // viewer options });
5057 * // Set an event listener
5058 * viewer.on("dataloading", function() {
5059 * console.log("A loading event has occurred.");
5063 on(type: "dataloading", handler: (event: ViewerDataLoadingEvent) => void): void;
5065 * Fired when a pointing device (usually a mouse) is clicked twice at
5066 * the same point in the viewer.
5071 * // Initialize the viewer
5072 * var viewer = new Viewer({ // viewer options });
5073 * // Set an event listener
5074 * viewer.on("dblclick", function() {
5075 * console.log("A dblclick event has occurred.");
5079 on(type: "dblclick", handler: (event: ViewerMouseEvent) => void): void;
5081 * Fired when the viewer's vertical field of view changes.
5086 * // Initialize the viewer
5087 * var viewer = new Viewer({ // viewer options });
5088 * // Set an event listener
5089 * viewer.on("fov", function() {
5090 * console.log("A fov event has occurred.");
5094 on(type: "fov", handler: (event: ViewerStateEvent) => void): void;
5096 * Fired immediately after all necessary resources
5097 * have been downloaded and the first visually complete
5098 * rendering of the viewer has occurred.
5100 * This event is only fired for viewer configurations where
5101 * the WebGL context is created, i.e. not when using the
5102 * fallback functionality only.
5108 * // Set an event listener
5109 * viewer.on('load', function(event) {
5110 * console.log('A load event has occured');
5114 on(type: "load", handler: (event: ViewerLoadEvent) => void): void;
5116 * Fired when a pointing device (usually a mouse) is pressed
5117 * within the viewer.
5122 * // Initialize the viewer
5123 * var viewer = new Viewer({ // viewer options });
5124 * // Set an event listener
5125 * viewer.on("mousedown", function() {
5126 * console.log("A mousedown event has occurred.");
5130 on(type: "mousedown", handler: (event: ViewerMouseEvent) => void): void;
5132 * Fired when a pointing device (usually a mouse)
5133 * is moved within the viewer.
5138 * // Initialize the viewer
5139 * var viewer = new Viewer({ // viewer options });
5140 * // Set an event listener
5141 * viewer.on("mousemove", function() {
5142 * console.log("A mousemove event has occurred.");
5146 on(type: "mousemove", handler: (event: ViewerMouseEvent) => void): void;
5148 * Fired when a pointing device (usually a mouse)
5149 * leaves the viewer's canvas.
5154 * // Initialize the viewer
5155 * var viewer = new Viewer({ // viewer options });
5156 * // Set an event listener
5157 * viewer.on("mouseout", function() {
5158 * console.log("A mouseout event has occurred.");
5162 on(type: "mouseout", handler: (event: ViewerMouseEvent) => void): void;
5164 * Fired when a pointing device (usually a mouse)
5165 * is moved onto the viewer's canvas.
5170 * // Initialize the viewer
5171 * var viewer = new Viewer({ // viewer options });
5172 * // Set an event listener
5173 * viewer.on("mouseover", function() {
5174 * console.log("A mouseover event has occurred.");
5178 on(type: "mouseover", handler: (event: ViewerMouseEvent) => void): void;
5180 * Fired when a pointing device (usually a mouse)
5181 * is released within the viewer.
5186 * // Initialize the viewer
5187 * var viewer = new Viewer({ // viewer options });
5188 * // Set an event listener
5189 * viewer.on("mouseup", function() {
5190 * console.log("A mouseup event has occurred.");
5194 on(type: "mouseup", handler: (event: ViewerMouseEvent) => void): void;
5196 * Fired when the viewer motion stops and it is in a fixed
5197 * position with a fixed point of view.
5202 * // Initialize the viewer
5203 * var viewer = new Viewer({ // viewer options });
5204 * // Set an event listener
5205 * viewer.on("moveend", function() {
5206 * console.log("A moveend event has occurred.");
5210 on(type: "moveend", handler: (event: ViewerStateEvent) => void): void;
5212 * Fired when the motion from one view to another start,
5213 * either by changing the position (e.g. when changing image)
5214 * or when changing point of view
5215 * (e.g. by interaction such as pan and zoom).
5220 * // Initialize the viewer
5221 * var viewer = new Viewer({ // viewer options });
5222 * // Set an event listener
5223 * viewer.on("movestart", function() {
5224 * console.log("A movestart event has occurred.");
5228 on(type: "movestart", handler: (event: ViewerStateEvent) => void): void;
5230 * Fired when the navigable state of the viewer changes.
5235 * // Initialize the viewer
5236 * var viewer = new Viewer({ // viewer options });
5237 * // Set an event listener
5238 * viewer.on("navigable", function() {
5239 * console.log("A navigable event has occurred.");
5243 on(type: "navigable", handler: (event: ViewerNavigableEvent) => void): void;
5245 * Fired every time the viewer navigates to a new image.
5250 * // Initialize the viewer
5251 * var viewer = new Viewer({ // viewer options });
5252 * // Set an event listener
5253 * viewer.on("image", function() {
5254 * console.log("A image event has occurred.");
5258 on(type: "image", handler: (event: ViewerImageEvent) => void): void;
5260 * Fired when the viewer's position changes.
5262 * @description The viewer's position changes when transitioning
5268 * // Initialize the viewer
5269 * var viewer = new Viewer({ // viewer options });
5270 * // Set an event listener
5271 * viewer.on("position", function() {
5272 * console.log("A position event has occurred.");
5276 on(type: "position", handler: (event: ViewerStateEvent) => void): void;
5278 * Fired when the viewer's point of view changes. The
5279 * point of view changes when the bearing, or tilt changes.
5284 * // Initialize the viewer
5285 * var viewer = new Viewer({ // viewer options });
5286 * // Set an event listener
5287 * viewer.on("pov", function() {
5288 * console.log("A pov event has occurred.");
5292 on(type: "pov", handler: (event: ViewerStateEvent) => void): void;
5294 * Fired when the viewer's reference position changes.
5296 * The reference position specifies the origin in
5297 * the viewer's topocentric coordinate system.
5302 * // Initialize the viewer
5303 * var viewer = new Viewer({ // viewer options });
5304 * // Set an event listener
5305 * viewer.on("reference", function(reference) {
5306 * console.log("A reference event has occurred.");
5310 on(type: "reference", handler: (event: ViewerReferenceEvent) => void): void;
5312 * Fired when the viewer is removed. After this event is emitted
5313 * you must not call any methods on the viewer.
5318 * // Initialize the viewer
5319 * var viewer = new Viewer({ // viewer options });
5320 * // Set an event listener
5321 * viewer.on("remove", function() {
5322 * console.log("A remove event has occurred.");
5326 on(type: "remove", handler: (event: ViewerStateEvent) => void): void;
5328 * Fired every time the sequence edges of the current image changes.
5330 * @event sequenceedges
5333 * // Initialize the viewer
5334 * var viewer = new Viewer({ // viewer options });
5335 * // Set an event listener
5336 * viewer.on("sequenceedges", function() {
5337 * console.log("A sequenceedges event has occurred.");
5341 on(type: "sequenceedges", handler: (event: ViewerNavigationEdgeEvent) => void): void;
5343 * Fired every time the spatial edges of the current image changes.
5345 * @event spatialedges
5348 * // Initialize the viewer
5349 * var viewer = new Viewer({ // viewer options });
5350 * // Set an event listener
5351 * viewer.on("spatialedges", function() {
5352 * console.log("A spatialedges event has occurred.");
5356 on(type: "spatialedges", handler: (event: ViewerNavigationEdgeEvent) => void): void;
5358 * Project geodetic coordinates to canvas pixel coordinates.
5360 * @description The geodetic coordinates may not always correspond to pixel
5361 * coordinates, e.g. if the geodetic coordinates have a position behind the
5362 * viewer camera. In the case of no correspondence the returned value will
5365 * If the distance from the viewer camera position to the provided
5366 * longitude-latitude is more than 1000 meters `null` will be returned.
5368 * The projection is performed from the ground plane, i.e.
5369 * the altitude with respect to the ground plane for the geodetic
5372 * Note that whenever the camera moves, the result of the method will be
5375 * @param {LngLat} lngLat - Geographical coordinates to project.
5376 * @returns {Promise<Array<number>>} Promise to the pixel coordinates corresponding
5381 * viewer.project({ lat: 0, lng: 0 })
5382 * .then(pixelPoint => {
5383 * if (!pixelPoint) {
5384 * console.log("no correspondence");
5387 * console.log(pixelPoint);
5391 project(lngLat: LngLat): Promise<number[]>;
5393 * Project basic image coordinates for the current image to canvas pixel
5396 * @description The basic image coordinates may not always correspond to a
5397 * pixel point that lies in the visible area of the viewer container. In the
5398 * case of no correspondence the returned value can be `null`.
5401 * @param {Array<number>} basicPoint - Basic images coordinates to project.
5402 * @returns {Promise<Array<number>>} Promise to the pixel coordinates corresponding
5403 * to the basic image point.
5407 * viewer.projectFromBasic([0.3, 0.7])
5408 * .then(pixelPoint => { console.log(pixelPoint); });
5411 projectFromBasic(basicPoint: number[]): Promise<number[]>;
5413 * Clean up and release all internal resources associated with
5416 * @description This includes DOM elements, event bindings, and
5419 * Use this method when you are done using the viewer and wish to
5420 * ensure that it no longer consumes browser resources. Afterwards,
5421 * you must not call any other methods on the viewer.
5432 * Remove a custom renderer from the viewer's rendering pipeline.
5434 * @param id - Unique ID of the custom renderer.
5436 removeCustomRenderer(rendererId: string): void;
5438 * Detect the viewer's new width and height and resize it
5441 * @description The components will also detect the viewer's
5442 * new size and resize their rendered elements if needed.
5444 * When the {@link ViewerOptions.trackResize} option is
5445 * set to true, the viewer will automatically resize
5446 * when the browser window is resized. If any other
5447 * custom behavior is preferred, the option should be set
5448 * to false and the {@link Viewer.resize} method should
5449 * be called on demand.
5458 * Set the viewer's camera control mode.
5460 * @description The camera control mode determines
5461 * how the camera is controlled when the viewer
5462 * receives pointer and keyboard input.
5464 * Changing the camera control mode is not possible
5465 * when the slider component is active and attempts
5466 * to do so will be ignored.
5468 * @param {CameraControls} controls - Camera control mode.
5472 * viewer.setCameraControls(CameraControls.Street);
5475 setCameraControls(controls: CameraControls): void;
5477 * Set the basic coordinates of the current image to be in the
5478 * center of the viewport.
5480 * @description Basic coordinates are 2D coordinates on the [0, 1] interval
5481 * and has the origin point, (0, 0), at the top left corner and the
5482 * maximum value, (1, 1), at the bottom right corner of the original
5485 * @param {number[]} The basic coordinates of the current
5486 * image to be at the center for the viewport.
5490 * viewer.setCenter([0.5, 0.5]);
5493 setCenter(center: number[]): void;
5495 * Set the viewer's current vertical field of view.
5497 * @description Sets the vertical field of view rendered
5498 * on the viewer canvas measured in degrees. The value
5499 * will be clamped to be able to set a valid zoom level
5500 * based on the projection model of the current image and
5501 * the viewer's current render mode.
5503 * @param {number} fov - Vertical field of view in degrees.
5507 * viewer.setFieldOfView(45);
5510 setFieldOfView(fov: number): void;
5512 * Set the filter selecting images to use when calculating
5513 * the spatial edges.
5515 * @description The following filter types are supported:
5519 * `["==", key, value]` equality: `image[key] = value`
5521 * `["!=", key, value]` inequality: `image[key] ≠value`
5523 * `["<", key, value]` less than: `image[key] < value`
5525 * `["<=", key, value]` less than or equal: `image[key] ≤ value`
5527 * `[">", key, value]` greater than: `image[key] > value`
5529 * `[">=", key, value]` greater than or equal: `image[key] ≥ value`
5533 * `["in", key, v0, ..., vn]` set inclusion: `image[key] ∈ {v0, ..., vn}`
5535 * `["!in", key, v0, ..., vn]` set exclusion: `image[key] ∉ {v0, ..., vn}`
5539 * `["all", f0, ..., fn]` logical `AND`: `f0 ∧ ... ∧ fn`
5541 * A key must be a string that identifies a property name of a
5542 * simple {@link Image} property, i.e. a key of the {@link FilterKey}
5543 * type. A value must be a string, number, or
5544 * boolean. Strictly-typed comparisons are used. The values
5545 * `f0, ..., fn` of the combining filter must be filter expressions.
5547 * Clear the filter by setting it to null or empty array.
5549 * Commonly used filter properties (see the {@link Image} class
5550 * documentation for a full list of properties that can be used
5551 * in a filter) are shown the the example code.
5553 * @param {FilterExpression} [filter] - The filter expression.
5554 * Applied filter is cleared if omitted.
5555 * @returns {Promise<void>} Promise that resolves after filter is applied.
5560 * viewer.setFilter(["==", "cameraType", "spherical"]);
5561 * viewer.setFilter([">=", "capturedAt", <my-time-stamp>]);
5562 * viewer.setFilter(["in", "sequenceId", "<sequence-id-1>", "<sequence-id-2>"]);
5565 setFilter(filter?: FilterExpression): Promise<void>;
5567 * Set the viewer's render mode.
5569 * @param {RenderMode} renderMode - Render mode.
5573 * viewer.setRenderMode(RenderMode.Letterbox);
5576 setRenderMode(renderMode: RenderMode): void;
5578 * Set the viewer's transition mode.
5580 * @param {TransitionMode} transitionMode - Transition mode.
5584 * viewer.setTransitionMode(TransitionMode.Instantaneous);
5587 setTransitionMode(transitionMode: TransitionMode): void;
5589 * Set an access token for authenticated API requests of protected
5592 * The token may be a user access token or a client access token.
5594 * @description When the supplied user token is null or undefined,
5595 * any previously set user bearer token will be cleared and the
5596 * viewer will make unauthenticated requests.
5598 * Calling setAccessToken aborts all outstanding move requests.
5599 * The promises of those move requests will be rejected with a
5600 * {@link CancelMapillaryError} the rejections need to be caught.
5602 * Calling setAccessToken also resets the complete viewer cache
5603 * so it should not be called repeatedly.
5605 * @param {string} [accessToken] accessToken - Optional user
5606 * access token or client access token.
5607 * @returns {Promise<void>} Promise that resolves after token
5610 * @throws When viewer is not navigable.
5614 * viewer.setAccessToken("<my access token>")
5615 * .then(() => { console.log("user token set"); });
5618 setAccessToken(accessToken?: string): Promise<void>;
5620 * Set the image's current zoom level.
5622 * @description Possible zoom level values are on the [0, 3] interval.
5623 * Zero means zooming out to fit the image to the view whereas three
5624 * shows the highest level of detail.
5626 * @param {number} The image's current zoom level.
5630 * viewer.setZoom(2);
5633 setZoom(zoom: number): void;
5635 * Trigger the rendering of a single frame.
5637 * @description Use this method with custom renderers to
5638 * force the viewer to rerender when the custom content
5639 * changes. Calling this multiple times before the next
5640 * frame is rendered will still result in only a single
5641 * frame being rendered.
5643 triggerRerender(): void;
5645 * Unproject canvas pixel coordinates to geodetic
5648 * @description The pixel point may not always correspond to geodetic
5649 * coordinates. In the case of no correspondence the returned value will
5652 * The unprojection to a lngLat will be performed towards the ground plane, i.e.
5653 * the altitude with respect to the ground plane for the returned lngLat is zero.
5655 * @param {Array<number>} pixelPoint - Pixel coordinates to unproject.
5656 * @returns {Promise<LngLat>} Promise to the lngLat corresponding to the pixel point.
5660 * viewer.unproject([100, 100])
5661 * .then(lngLat => { console.log(lngLat); });
5664 unproject(pixelPoint: number[]): Promise<LngLat>;
5666 * Unproject canvas pixel coordinates to basic image coordinates for the
5669 * @description The pixel point may not always correspond to basic image
5670 * coordinates. In the case of no correspondence the returned value will
5673 * @param {Array<number>} pixelPoint - Pixel coordinates to unproject.
5674 * @returns {Promise<LngLat>} Promise to the basic coordinates corresponding
5675 * to the pixel point.
5679 * viewer.unprojectToBasic([100, 100])
5680 * .then(basicPoint => { console.log(basicPoint); });
5683 unprojectToBasic(pixelPoint: number[]): Promise<number[]>;
5687 * @class MapillaryError
5689 * @classdesc Generic Mapillary error.
5691 declare class MapillaryError extends Error {
5692 constructor(message?: string);
5696 * @class CancelMapillaryError
5698 * @classdesc Error thrown when a move to request has been
5699 * cancelled before completing because of a subsequent request.
5701 declare class CancelMapillaryError extends MapillaryError {
5702 constructor(message?: string);
5705 declare class ArgumentMapillaryError extends MapillaryError {
5706 constructor(message?: string);
5709 declare class GraphMapillaryError extends MapillaryError {
5710 constructor(message: string);
5713 declare class ConfigurationService {
5714 private _imageTiling$;
5715 private _exploreUrl$;
5716 constructor(options: ViewerOptions);
5717 get exploreUrl$(): Observable<string>;
5718 get imageTiling$(): Observable<boolean>;
5721 declare class Container {
5723 renderService: RenderService;
5724 glRenderer: GLRenderer;
5725 domRenderer: DOMRenderer;
5726 keyboardService: KeyboardService;
5727 mouseService: MouseService;
5728 touchService: TouchService;
5729 spriteService: SpriteService;
5730 readonly configurationService: ConfigurationService;
5731 private _canvasContainer;
5734 private _domContainer;
5736 private readonly _trackResize;
5737 constructor(options: ViewerOptions, stateService: StateService, dom?: DOM);
5738 get canvas(): HTMLCanvasElement;
5739 get canvasContainer(): HTMLDivElement;
5740 get container(): HTMLElement;
5741 get domContainer(): HTMLDivElement;
5743 private _onWindowResize;
5744 private _removeNode;
5747 declare type Func<T, TResult> = (item: T) => TResult;
5749 declare type FilterFunction = Func<Image, boolean>;
5753 * @classdesc Represents a class for creating image filters. Implementation and
5754 * definitions based on https://github.com/mapbox/feature-filter.
5756 declare class FilterCreator {
5758 * Create a filter from a filter expression.
5760 * @description The following filters are supported:
5777 * @param {FilterExpression} filter - Comparison, set membership or combinding filter
5779 * @returns {FilterFunction} Function taking a image and returning a boolean that
5780 * indicates whether the image passed the test or not.
5782 createFilter(filter: FilterExpression): FilterFunction;
5785 private _compileComparisonOp;
5786 private _compileInOp;
5787 private _compileLogicalOp;
5788 private _compileNegation;
5789 private _compilePropertyReference;
5793 * @class GraphCalculator
5795 * @classdesc Represents a calculator for graph entities.
5797 declare class GraphCalculator {
5799 * Get the bounding box corners for a circle with radius of a threshold
5800 * with center in a geodetic position.
5802 * @param {LngLat} lngLat - Longitude, latitude to encode.
5803 * @param {number} threshold - Threshold distance from the position in meters.
5805 * @returns {Array<LngLat>} The south west and north east corners of the
5808 boundingBoxCorners(lngLat: LngLat, threshold: number): [LngLat, LngLat];
5810 * Convert a compass angle to an angle axis rotation vector.
5812 * @param {number} compassAngle - The compass angle in degrees.
5813 * @param {number} orientation - The orientation of the original image.
5815 * @returns {Array<number>} Angle axis rotation vector.
5817 rotationFromCompass(compassAngle: number, orientation: number): number[];
5823 * @classdesc Represents a sequence of ordered images.
5825 declare class Sequence {
5829 * Create a new sequene instance.
5831 * @param {SequenceEnt} sequence - Raw sequence data.
5833 constructor(sequence: SequenceEnt);
5837 * @returns {string} Unique sequence id.
5843 * @returns {Array<string>} Array of ordered image ids in the sequence.
5845 get imageIds(): string[];
5847 * Dispose the sequence.
5849 * @description Disposes all cached assets.
5853 * Find the next image id in the sequence with respect to
5854 * the provided image id.
5856 * @param {string} id - Reference image id.
5857 * @returns {string} Next id in sequence if it exists, null otherwise.
5859 findNext(id: string): string;
5861 * Find the previous image id in the sequence with respect to
5862 * the provided image id.
5864 * @param {string} id - Reference image id.
5865 * @returns {string} Previous id in sequence if it exists, null otherwise.
5867 findPrev(id: string): string;
5871 * Interface for graph configuration.
5873 * @interface GraphConfiguration
5875 interface GraphConfiguration {
5877 * The maximum number of cached sequences left
5880 maxSequences: number;
5882 * The maximum number of unused cached images left
5885 maxUnusedImages: number;
5887 * The maximum number of unused pre-stored cached images left
5890 maxUnusedPreStoredImages: number;
5892 * The maximum number of unused cached tiles left
5895 maxUnusedTiles: number;
5898 declare class EdgeCalculatorCoefficients {
5899 sphericalPreferredDistance: number;
5900 sphericalMotion: number;
5901 sphericalSequencePenalty: number;
5902 sphericalMergeCCPenalty: number;
5903 stepPreferredDistance: number;
5905 stepRotation: number;
5906 stepSequencePenalty: number;
5907 stepMergeCCPenalty: number;
5908 similarDistance: number;
5909 similarRotation: number;
5910 turnDistance: number;
5912 turnSequencePenalty: number;
5913 turnMergeCCPenalty: number;
5917 interface SphericalDirection {
5918 direction: NavigationDirection;
5919 prev: NavigationDirection;
5920 next: NavigationDirection;
5921 directionChange: number;
5924 interface StepDirection {
5925 direction: NavigationDirection;
5926 motionChange: number;
5927 useFallback: boolean;
5930 interface TurnDirection {
5931 direction: NavigationDirection;
5932 directionChange: number;
5933 motionChange?: number;
5936 declare class EdgeCalculatorDirections {
5938 [direction: string]: StepDirection;
5941 [direction: string]: TurnDirection;
5944 [direction: string]: SphericalDirection;
5949 declare class EdgeCalculatorSettings {
5950 sphericalMinDistance: number;
5951 sphericalMaxDistance: number;
5952 sphericalPreferredDistance: number;
5953 sphericalMaxItems: number;
5954 sphericalMaxStepTurnChange: number;
5955 rotationMaxDistance: number;
5956 rotationMaxDirectionChange: number;
5957 rotationMaxVerticalDirectionChange: number;
5958 similarMaxDirectionChange: number;
5959 similarMaxDistance: number;
5960 similarMinTimeDifference: number;
5961 stepMaxDistance: number;
5962 stepMaxDirectionChange: number;
5963 stepMaxDrift: number;
5964 stepPreferredDistance: number;
5965 turnMaxDistance: number;
5966 turnMaxDirectionChange: number;
5967 turnMaxRigDistance: number;
5968 turnMinRigDirectionChange: number;
5970 get maxDistance(): number;
5974 * Interface that describes the properties for a image that is the destination of a
5975 * potential edge from an origin image.
5977 * @interface PotentialEdge
5979 interface PotentialEdge {
5981 * Timestamp when the image was captured.
5982 * @property {number} capturedAt
5986 * Change in viewing direction with respect to the origin image.
5987 * @property {number} directionChange
5989 directionChange: number;
5991 * Distance to the origin image.
5992 * @property {number} distance
5996 * Determines if the destination image is spherical.
5997 * @property {boolean} spherical
6002 * @property {string} id
6006 * Change in motion with respect to the viewing direction
6007 * of the origin image.
6008 * @property {number} motionChange
6010 motionChange: number;
6012 * General camera rotation with respect to the origin image.
6013 * @property {number} rotation
6017 * Determines if the origin and destination image are considered
6018 * to be in the same merge connected component.
6019 * @property {boolean} sameMergeCC
6021 sameMergeCC: boolean;
6023 * Determines if the origin and destination image are in the
6025 * @property {boolean} sameSequence
6027 sameSequence: boolean;
6029 * Determines if the origin and destination image have been captured
6031 * @property {boolean} sameUser
6035 * Determines which sequence the destination image of the potential edge
6037 * @property {string} sequenceId
6041 * Change in viewing direction with respect to the XY-plane.
6042 * @property {number} verticalDirectionChange
6044 verticalDirectionChange: number;
6046 * The angle between motion vector and the XY-plane
6047 * @property {number} verticalMotion
6049 verticalMotion: number;
6051 * The counter clockwise horizontal rotation angle from
6052 * the X-axis in a spherical coordiante system.
6053 * @property {number} worldMotionAzimuth
6055 worldMotionAzimuth: number;
6059 * @class EdgeCalculator
6061 * @classdesc Represents a class for calculating node edges.
6063 declare class EdgeCalculator {
6066 private _directions;
6067 private _coefficients;
6069 * Create a new edge calculator instance.
6071 * @param {EdgeCalculatorSettings} settings - Settings struct.
6072 * @param {EdgeCalculatorDirections} directions - Directions struct.
6073 * @param {EdgeCalculatorCoefficients} coefficients - Coefficients struct.
6075 constructor(settings?: EdgeCalculatorSettings, directions?: EdgeCalculatorDirections, coefficients?: EdgeCalculatorCoefficients);
6077 * Returns the potential edges to destination nodes for a set
6078 * of nodes with respect to a source node.
6080 * @param {Image} node - Source node.
6081 * @param {Array<Image>} nodes - Potential destination nodes.
6082 * @param {Array<string>} fallbackIds - Ids for destination nodes
6083 * that should be returned even if they do not meet the
6084 * criteria for a potential edge.
6085 * @throws {ArgumentMapillaryError} If node is not full.
6087 getPotentialEdges(node: Image, potentialImages: Image[], fallbackIds: string[]): PotentialEdge[];
6089 * Computes the sequence edges for a node.
6091 * @param {Image} node - Source node.
6092 * @throws {ArgumentMapillaryError} If node is not full.
6094 computeSequenceEdges(node: Image, sequence: Sequence): NavigationEdge[];
6096 * Computes the similar edges for a node.
6098 * @description Similar edges for perspective images
6099 * look roughly in the same direction and are positioned closed to the node.
6100 * Similar edges for spherical only target other spherical.
6102 * @param {Image} node - Source node.
6103 * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
6104 * @throws {ArgumentMapillaryError} If node is not full.
6106 computeSimilarEdges(node: Image, potentialEdges: PotentialEdge[]): NavigationEdge[];
6108 * Computes the step edges for a perspective node.
6110 * @description Step edge targets can only be other perspective nodes.
6111 * Returns an empty array for spherical.
6113 * @param {Image} node - Source node.
6114 * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
6115 * @param {string} prevId - Id of previous node in sequence.
6116 * @param {string} nextId - Id of next node in sequence.
6117 * @throws {ArgumentMapillaryError} If node is not full.
6119 computeStepEdges(node: Image, potentialEdges: PotentialEdge[], prevId: string, nextId: string): NavigationEdge[];
6121 * Computes the turn edges for a perspective node.
6123 * @description Turn edge targets can only be other perspective images.
6124 * Returns an empty array for spherical.
6126 * @param {Image} node - Source node.
6127 * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
6128 * @throws {ArgumentMapillaryError} If node is not full.
6130 computeTurnEdges(node: Image, potentialEdges: PotentialEdge[]): NavigationEdge[];
6132 * Computes the spherical edges for a perspective node.
6134 * @description Perspective to spherical edge targets can only be
6135 * spherical nodes. Returns an empty array for spherical.
6137 * @param {Image} node - Source node.
6138 * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
6139 * @throws {ArgumentMapillaryError} If node is not full.
6141 computePerspectiveToSphericalEdges(node: Image, potentialEdges: PotentialEdge[]): NavigationEdge[];
6143 * Computes the spherical and step edges for a spherical node.
6145 * @description Spherical to spherical edge targets can only be
6146 * spherical nodes. spherical to step edge targets can only be perspective
6149 * @param {Image} node - Source node.
6150 * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
6151 * @throws {ArgumentMapillaryError} If node is not full.
6153 computeSphericalEdges(node: Image, potentialEdges: PotentialEdge[]): NavigationEdge[];
6159 * @classdesc Provides methods for access to the API.
6161 declare class APIWrapper {
6162 private readonly _data;
6163 constructor(_data: IDataProvider);
6164 get data(): IDataProvider;
6165 getCoreImages$(cellId: string): Observable<CoreImagesContract>;
6166 getImages$(imageIds: string[]): Observable<ImagesContract>;
6167 getImageTiles$(tiles: ImageTilesRequestContract): Observable<ImageTilesContract>;
6168 getSequence$(sequenceId: string): Observable<SequenceContract>;
6169 getSpatialImages$(imageIds: string[]): Observable<SpatialImagesContract>;
6170 setAccessToken(accessToken?: string): void;
6177 * @classdesc Represents a graph of nodes with edges.
6179 declare class Graph {
6180 private static _spatialIndex;
6183 * Nodes that have initialized cache with a timestamp of last access.
6185 private _cachedNodes;
6187 * Nodes for which the required tiles are cached.
6189 private _cachedNodeTiles;
6191 * Sequences for which the nodes are cached.
6193 private _cachedSequenceNodes;
6195 * Nodes for which the spatial edges are cached.
6197 private _cachedSpatialEdges;
6199 * Cached tiles with a timestamp of last access.
6201 private _cachedTiles;
6203 * Nodes for which fill properties are being retreived.
6205 private _cachingFill$;
6207 * Nodes for which full properties are being retrieved.
6209 private _cachingFull$;
6211 * Sequences for which the nodes are being retrieved.
6213 private _cachingSequenceNodes$;
6215 * Sequences that are being retrieved.
6217 private _cachingSequences$;
6219 * Nodes for which the spatial area fill properties are being retrieved.
6221 private _cachingSpatialArea$;
6223 * Tiles that are being retrieved.
6225 private _cachingTiles$;
6227 private _defaultAlt;
6228 private _edgeCalculator;
6229 private _graphCalculator;
6230 private _configuration;
6232 private _filterCreator;
6233 private _filterSubject$;
6235 private _filterSubscription;
6237 * All nodes in the graph.
6241 * Contains all nodes in the graph. Used for fast spatial lookups.
6245 * All node index items sorted in tiles for easy uncache.
6247 private _nodeIndexTiles;
6249 * Node to tile dictionary for easy tile access updates.
6251 private _nodeToTile;
6253 * Nodes retrieved before tiles, stored on tile level.
6257 * Tiles required for a node to retrive spatial area.
6259 private _requiredNodeTiles;
6261 * Other nodes required for node to calculate spatial edges.
6263 private _requiredSpatialArea;
6265 * All sequences in graph with a timestamp of last access.
6268 private _tileThreshold;
6270 * Create a new graph instance.
6272 * @param {APIWrapper} [api] - API instance for retrieving data.
6273 * @param {rbush.RBush<NodeIndexItem>} [nodeIndex] - Node index for fast spatial retreival.
6274 * @param {GraphCalculator} [graphCalculator] - Instance for graph calculations.
6275 * @param {EdgeCalculator} [edgeCalculator] - Instance for edge calculations.
6276 * @param {FilterCreator} [filterCreator] - Instance for filter creation.
6277 * @param {GraphConfiguration} [configuration] - Configuration struct.
6279 constructor(api: APIWrapper, nodeIndex?: any, graphCalculator?: GraphCalculator, edgeCalculator?: EdgeCalculator, filterCreator?: FilterCreator, configuration?: GraphConfiguration);
6280 static register(spatialIndex: new (...args: any[]) => any): void;
6284 * @returns {APIWrapper} The API instance used by
6287 get api(): APIWrapper;
6291 * @returns {Observable<Graph>} Observable emitting
6292 * the graph every time it has changed.
6294 get changed$(): Observable<Graph>;
6298 * @returns {Observable<FilterFunction>} Observable emitting
6299 * the filter every time it has changed.
6301 get filter$(): Observable<FilterFunction>;
6303 * Caches the full node data for all images within a bounding
6306 * @description The node assets are not cached.
6308 * @param {LngLat} sw - South west corner of bounding box.
6309 * @param {LngLat} ne - North east corner of bounding box.
6310 * @returns {Observable<Array<Image>>} Observable emitting
6311 * the full nodes in the bounding box.
6313 cacheBoundingBox$(sw: LngLat, ne: LngLat): Observable<Image[]>;
6315 * Caches the full node data for all images of a cell.
6317 * @description The node assets are not cached.
6319 * @param {string} cellId - Cell id.
6320 * @returns {Observable<Array<Image>>} Observable
6321 * emitting the full nodes of the cell.
6323 cacheCell$(cellId: string): Observable<Image[]>;
6325 * Retrieve and cache node fill properties.
6327 * @param {string} key - Key of node to fill.
6328 * @returns {Observable<Graph>} Observable emitting the graph
6329 * when the node has been updated.
6330 * @throws {GraphMapillaryError} When the operation is not valid on the
6333 cacheFill$(key: string): Observable<Graph>;
6335 * Retrieve and cache full node properties.
6337 * @param {string} key - Key of node to fill.
6338 * @returns {Observable<Graph>} Observable emitting the graph
6339 * when the node has been updated.
6340 * @throws {GraphMapillaryError} When the operation is not valid on the
6343 cacheFull$(key: string): Observable<Graph>;
6345 * Retrieve and cache a node sequence.
6347 * @param {string} key - Key of node for which to retrieve sequence.
6348 * @returns {Observable<Graph>} Observable emitting the graph
6349 * when the sequence has been retrieved.
6350 * @throws {GraphMapillaryError} When the operation is not valid on the
6353 cacheNodeSequence$(key: string): Observable<Graph>;
6355 * Retrieve and cache a sequence.
6357 * @param {string} sequenceKey - Key of sequence to cache.
6358 * @returns {Observable<Graph>} Observable emitting the graph
6359 * when the sequence has been retrieved.
6360 * @throws {GraphMapillaryError} When the operation is not valid on the
6363 cacheSequence$(sequenceKey: string): Observable<Graph>;
6365 * Cache sequence edges for a node.
6367 * @param {string} key - Key of node.
6368 * @throws {GraphMapillaryError} When the operation is not valid on the
6371 cacheSequenceEdges(key: string): void;
6373 * Retrieve and cache full nodes for all keys in a sequence.
6375 * @param {string} sequenceKey - Key of sequence.
6376 * @param {string} referenceNodeKey - Key of node to use as reference
6377 * for optimized caching.
6378 * @returns {Observable<Graph>} Observable emitting the graph
6379 * when the nodes of the sequence has been cached.
6381 cacheSequenceNodes$(sequenceKey: string, referenceNodeKey?: string): Observable<Graph>;
6383 * Retrieve and cache full nodes for a node spatial area.
6385 * @param {string} key - Key of node for which to retrieve sequence.
6386 * @returns {Observable<Graph>} Observable emitting the graph
6387 * when the nodes in the spatial area has been made full.
6388 * @throws {GraphMapillaryError} When the operation is not valid on the
6391 cacheSpatialArea$(key: string): Observable<Graph>[];
6393 * Cache spatial edges for a node.
6395 * @param {string} key - Key of node.
6396 * @throws {GraphMapillaryError} When the operation is not valid on the
6399 cacheSpatialEdges(key: string): void;
6401 * Retrieve and cache tiles for a node.
6403 * @param {string} key - Key of node for which to retrieve tiles.
6404 * @returns {Array<Observable<Graph>>} Array of observables emitting
6405 * the graph for each tile required for the node has been cached.
6406 * @throws {GraphMapillaryError} When the operation is not valid on the
6409 cacheTiles$(key: string): Observable<Graph>[];
6411 * Initialize the cache for a node.
6413 * @param {string} key - Key of node.
6414 * @throws {GraphMapillaryError} When the operation is not valid on the
6417 initializeCache(key: string): void;
6419 * Get a value indicating if the graph is fill caching a node.
6421 * @param {string} key - Key of node.
6422 * @returns {boolean} Value indicating if the node is being fill cached.
6424 isCachingFill(key: string): boolean;
6426 * Get a value indicating if the graph is fully caching a node.
6428 * @param {string} key - Key of node.
6429 * @returns {boolean} Value indicating if the node is being fully cached.
6431 isCachingFull(key: string): boolean;
6433 * Get a value indicating if the graph is caching a sequence of a node.
6435 * @param {string} key - Key of node.
6436 * @returns {boolean} Value indicating if the sequence of a node is
6439 isCachingNodeSequence(key: string): boolean;
6441 * Get a value indicating if the graph is caching a sequence.
6443 * @param {string} sequenceKey - Key of sequence.
6444 * @returns {boolean} Value indicating if the sequence is
6447 isCachingSequence(sequenceKey: string): boolean;
6449 * Get a value indicating if the graph is caching sequence nodes.
6451 * @param {string} sequenceKey - Key of sequence.
6452 * @returns {boolean} Value indicating if the sequence nodes are
6455 isCachingSequenceNodes(sequenceKey: string): boolean;
6457 * Get a value indicating if the graph is caching the tiles
6458 * required for calculating spatial edges of a node.
6460 * @param {string} key - Key of node.
6461 * @returns {boolean} Value indicating if the tiles of
6462 * a node are being cached.
6464 isCachingTiles(key: string): boolean;
6466 * Get a value indicating if the cache has been initialized
6469 * @param {string} key - Key of node.
6470 * @returns {boolean} Value indicating if the cache has been
6471 * initialized for a node.
6473 hasInitializedCache(key: string): boolean;
6475 * Get a value indicating if a node exist in the graph.
6477 * @param {string} key - Key of node.
6478 * @returns {boolean} Value indicating if a node exist in the graph.
6480 hasNode(key: string): boolean;
6482 * Get a value indicating if a node sequence exist in the graph.
6484 * @param {string} key - Key of node.
6485 * @returns {boolean} Value indicating if a node sequence exist
6488 hasNodeSequence(key: string): boolean;
6490 * Get a value indicating if a sequence exist in the graph.
6492 * @param {string} sequenceKey - Key of sequence.
6493 * @returns {boolean} Value indicating if a sequence exist
6496 hasSequence(sequenceKey: string): boolean;
6498 * Get a value indicating if sequence nodes has been cached in the graph.
6500 * @param {string} sequenceKey - Key of sequence.
6501 * @returns {boolean} Value indicating if a sequence nodes has been
6502 * cached in the graph.
6504 hasSequenceNodes(sequenceKey: string): boolean;
6506 * Get a value indicating if the graph has fully cached
6507 * all nodes in the spatial area of a node.
6509 * @param {string} key - Key of node.
6510 * @returns {boolean} Value indicating if the spatial area
6511 * of a node has been cached.
6513 hasSpatialArea(key: string): boolean;
6515 * Get a value indicating if the graph has a tiles required
6518 * @param {string} key - Key of node.
6519 * @returns {boolean} Value indicating if the the tiles required
6520 * by a node has been cached.
6522 hasTiles(key: string): boolean;
6526 * @param {string} key - Key of node.
6527 * @returns {Image} Retrieved node.
6529 getNode(key: string): Image;
6533 * @param {string} sequenceKey - Key of sequence.
6534 * @returns {Image} Retrieved sequence.
6536 getSequence(sequenceKey: string): Sequence;
6538 * Reset all spatial edges of the graph nodes.
6540 resetSpatialEdges(): void;
6542 * Reset the complete graph but keep the nodes corresponding
6543 * to the supplied keys. All other nodes will be disposed.
6545 * @param {Array<string>} keepKeys - Keys for nodes to keep
6546 * in graph after reset.
6548 reset(keepKeys: string[]): void;
6550 * Set the spatial node filter.
6552 * @emits FilterFunction The filter function to the {@link Graph.filter$}
6555 * @param {FilterExpression} filter - Filter expression to be applied
6556 * when calculating spatial edges.
6558 setFilter(filter: FilterExpression): void;
6560 * Uncache the graph according to the graph configuration.
6562 * @description Uncaches unused tiles, unused nodes and
6563 * sequences according to the numbers specified in the
6564 * graph configuration. Sequences does not have a direct
6565 * reference to either tiles or nodes and may be uncached
6566 * even if they are related to the nodes that should be kept.
6568 * @param {Array<string>} keepIds - Ids of nodes to keep in
6569 * graph unrelated to last access. Tiles related to those keys
6570 * will also be kept in graph.
6571 * @param {Array<string>} keepCellIds - Ids of cells to keep in
6572 * graph unrelated to last access. The nodes of the cells may
6573 * still be uncached if not specified in the keep ids param
6574 * but are guaranteed to not be disposed.
6575 * @param {string} keepSequenceId - Optional id of sequence
6576 * for which the belonging nodes should not be disposed or
6577 * removed from the graph. These nodes may still be uncached if
6578 * not specified in keep ids param but are guaranteed to not
6581 uncache(keepIds: string[], keepCellIds: string[], keepSequenceId?: string): void;
6583 * Updates existing cells with new core nodes.
6585 * @description Non-existing cells are discarded
6586 * and not requested at all.
6588 * Existing nodes are not changed.
6590 * New nodes are not made full or getting assets
6593 * @param {Array<string>} cellIds - Cell ids.
6594 * @returns {Observable<Array<Image>>} Observable
6595 * emitting the updated cells.
6597 updateCells$(cellIds: string[]): Observable<string>;
6599 * Unsubscribes all subscriptions.
6601 * @description Afterwards, you must not call any other methods
6602 * on the graph instance.
6604 unsubscribe(): void;
6605 private _addNewKeys;
6606 private _cacheSequence$;
6607 private _cacheTile$;
6610 private _removeFromPreStore;
6612 private _uncacheTile;
6613 private _uncachePreStored;
6614 private _updateCachedTileAccess;
6615 private _updateCachedNodeAccess;
6616 private _updateCell$;
6620 * Enumeration for graph modes.
6623 * @description Modes for the retrieval and caching performed
6624 * by the graph service on the graph.
6626 declare enum GraphMode {
6628 * Caching is performed on sequences only and sequence edges are
6629 * calculated. Spatial tiles
6630 * are not retrieved and spatial edges are not calculated when
6631 * caching nodes. Complete sequences are being cached for requested
6632 * nodes within the graph.
6636 * Caching is performed with emphasis on spatial data. Sequence edges
6637 * as well as spatial edges are cached. Sequence data
6638 * is still requested but complete sequences are not being cached
6639 * for requested nodes.
6641 * This is the initial mode of the graph service.
6647 * @class GraphService
6649 * @classdesc Represents a service for graph operations.
6651 declare class GraphService {
6654 private _graphMode$;
6655 private _graphModeSubject$;
6656 private _firstGraphSubjects$;
6657 private _dataAdded$;
6658 private _initializeCacheSubscriptions;
6659 private _sequenceSubscriptions;
6660 private _spatialSubscriptions;
6661 private _subscriptions;
6663 * Create a new graph service instance.
6665 * @param {Graph} graph - Graph instance to be operated on.
6667 constructor(graph: Graph);
6671 * @returns {Observable<string>} Observable emitting
6672 * a cell id every time data has been added to a cell.
6674 get dataAdded$(): Observable<string>;
6676 * Get filter observable.
6678 * @desciption Emits the filter every time it has changed.
6680 * @returns {Observable<FilterFunction>} Observable
6681 * emitting the filter function every time it is set.
6683 get filter$(): Observable<FilterFunction>;
6685 * Get graph mode observable.
6687 * @description Emits the current graph mode.
6689 * @returns {Observable<GraphMode>} Observable
6690 * emitting the current graph mode when it changes.
6692 get graphMode$(): Observable<GraphMode>;
6694 * Cache full images in a bounding box.
6696 * @description When called, the full properties of
6697 * the image are retrieved. The image cache is not initialized
6698 * for any new images retrieved and the image assets are not
6699 * retrieved, {@link cacheImage$} needs to be called for caching
6702 * @param {LngLat} sw - South west corner of bounding box.
6703 * @param {LngLat} ne - North east corner of bounding box.
6704 * @return {Observable<Array<Image>>} Observable emitting a single item,
6705 * the images of the bounding box, when they have all been retrieved.
6706 * @throws {Error} Propagates any IO image caching errors to the caller.
6708 cacheBoundingBox$(sw: LngLat, ne: LngLat): Observable<Image[]>;
6710 * Cache full images in a cell.
6712 * @description When called, the full properties of
6713 * the image are retrieved. The image cache is not initialized
6714 * for any new images retrieved and the image assets are not
6715 * retrieved, {@link cacheImage$} needs to be called for caching
6718 * @param {string} cellId - Id of the cell.
6719 * @return {Observable<Array<Image>>} Observable emitting a single item,
6720 * the images of the cell, when they have all been retrieved.
6721 * @throws {Error} Propagates any IO image caching errors to the caller.
6723 cacheCell$(cellId: string): Observable<Image[]>;
6725 * Cache a image in the graph and retrieve it.
6727 * @description When called, the full properties of
6728 * the image are retrieved and the image cache is initialized.
6729 * After that the image assets are cached and the image
6730 * is emitted to the observable when.
6731 * In parallel to caching the image assets, the sequence and
6732 * spatial edges of the image are cached. For this, the sequence
6733 * of the image and the required tiles and spatial images are
6734 * retrieved. The sequence and spatial edges may be set before
6735 * or after the image is returned.
6737 * @param {string} id - Id of the image to cache.
6738 * @return {Observable<Image>} Observable emitting a single item,
6739 * the image, when it has been retrieved and its assets are cached.
6740 * @throws {Error} Propagates any IO image caching errors to the caller.
6742 cacheImage$(id: string): Observable<Image>;
6744 * Cache a sequence in the graph and retrieve it.
6746 * @param {string} sequenceId - Sequence id.
6747 * @returns {Observable<Sequence>} Observable emitting a single item,
6748 * the sequence, when it has been retrieved and its assets are cached.
6749 * @throws {Error} Propagates any IO image caching errors to the caller.
6751 cacheSequence$(sequenceId: string): Observable<Sequence>;
6753 * Cache a sequence and its images in the graph and retrieve the sequence.
6755 * @description Caches a sequence and its assets are cached and
6756 * retrieves all images belonging to the sequence. The image assets
6757 * or edges will not be cached.
6759 * @param {string} sequenceId - Sequence id.
6760 * @param {string} referenceImageId - Id of image to use as reference
6761 * for optimized caching.
6762 * @returns {Observable<Sequence>} Observable emitting a single item,
6763 * the sequence, when it has been retrieved, its assets are cached and
6764 * all images belonging to the sequence has been retrieved.
6765 * @throws {Error} Propagates any IO image caching errors to the caller.
6767 cacheSequenceImages$(sequenceId: string, referenceImageId?: string): Observable<Sequence>;
6769 * Dispose the graph service and its children.
6773 * Set a spatial edge filter on the graph.
6775 * @description Resets the spatial edges of all cached images.
6777 * @param {FilterExpression} filter - Filter expression to be applied.
6778 * @return {Observable<Graph>} Observable emitting a single item,
6779 * the graph, when the spatial edges have been reset.
6781 setFilter$(filter: FilterExpression): Observable<void>;
6783 * Set the graph mode.
6785 * @description If graph mode is set to spatial, caching
6786 * is performed with emphasis on spatial edges. If graph
6787 * mode is set to sequence no tile data is requested and
6788 * no spatial edges are computed.
6790 * When setting graph mode to sequence all spatial
6791 * subscriptions are aborted.
6793 * @param {GraphMode} mode - Graph mode to set.
6795 setGraphMode(mode: GraphMode): void;
6799 * @description Resets the graph but keeps the images of the
6802 * @param {Array<string>} keepIds - Ids of images to keep in graph.
6803 * @return {Observable<Image>} Observable emitting a single item,
6804 * the graph, when it has been reset.
6806 reset$(keepIds: string[]): Observable<void>;
6808 * Uncache the graph.
6810 * @description Uncaches the graph by removing tiles, images and
6811 * sequences. Keeps the images of the supplied ids and the tiles
6812 * related to those images.
6814 * @param {Array<string>} keepIds - Ids of images to keep in graph.
6815 * @param {Array<string>} keepCellIds - Ids of cells to keep in graph.
6816 * @param {string} keepSequenceId - Optional id of sequence
6817 * for which the belonging images should not be disposed or
6818 * removed from the graph. These images may still be uncached if
6819 * not specified in keep ids param.
6820 * @return {Observable<Graph>} Observable emitting a single item,
6821 * the graph, when the graph has been uncached.
6823 uncache$(keepIds: string[], keepCellIds: string[], keepSequenceId?: string): Observable<void>;
6824 private _abortSubjects;
6825 private _onDataAdded;
6826 private _removeFromArray;
6827 private _resetSubscriptions;
6830 interface CacheServiceConfiguration {
6833 declare class CacheService {
6834 private readonly _graphService;
6835 private readonly _stateService;
6836 private readonly _api;
6837 private _subscriptions;
6840 constructor(_graphService: GraphService, _stateService: StateService, _api: APIWrapper);
6841 get started(): boolean;
6842 configure(configuration?: CacheServiceConfiguration): void;
6845 private _keyToEdges;
6848 declare class LoadingService {
6850 private _loadersSubject$;
6852 get loading$(): Observable<boolean>;
6853 taskLoading$(task: string): Observable<boolean>;
6854 startLoading(task: string): void;
6855 stopLoading(task: string): void;
6861 * @classdesc Provides methods for scalar, vector and matrix calculations.
6863 declare class Spatial {
6866 * Converts azimuthal phi rotation (counter-clockwise with origin on X-axis) to
6867 * bearing (clockwise with origin at north or Y-axis).
6869 * @param {number} phi - Azimuthal phi angle in radians.
6870 * @returns {number} Bearing in radians.
6872 azimuthalToBearing(phi: number): number;
6874 * Converts degrees to radians.
6876 * @param {number} deg - Degrees.
6877 * @returns {number} Radians.
6879 degToRad(deg: number): number;
6881 * Converts radians to degrees.
6883 * @param {number} rad - Radians.
6884 * @returns {number} Degrees.
6886 radToDeg(rad: number): number;
6888 * Creates a rotation matrix from an angle-axis vector.
6890 * @param {Array<number>} angleAxis - Angle-axis representation of a rotation.
6891 * @returns {THREE.Matrix4} Rotation matrix.
6893 rotationMatrix(angleAxis: number[]): THREE.Matrix4;
6895 * Rotates a vector according to a angle-axis rotation vector.
6897 * @param {Array<number>} vector - Vector to rotate.
6898 * @param {Array<number>} angleAxis - Angle-axis representation of a rotation.
6899 * @returns {THREE.Vector3} Rotated vector.
6901 rotate(vector: number[], angleAxis: number[]): THREE.Vector3;
6903 * Calculates the optical center from a rotation vector
6904 * on the angle-axis representation and a translation vector
6905 * according to C = -R^T t.
6907 * @param {Array<number>} rotation - Angle-axis representation of a rotation.
6908 * @param {Array<number>} translation - Translation vector.
6909 * @returns {THREE.Vector3} Optical center.
6911 opticalCenter(rotation: number[], translation: number[]): THREE.Vector3;
6913 * Calculates the viewing direction from a rotation vector
6914 * on the angle-axis representation.
6916 * @param {number[]} rotation - Angle-axis representation of a rotation.
6917 * @returns {THREE.Vector3} Viewing direction.
6919 viewingDirection(rotation: number[]): THREE.Vector3;
6921 * Wrap a number on the interval [min, max].
6923 * @param {number} value - Value to wrap.
6924 * @param {number} min - Lower endpoint of interval.
6925 * @param {number} max - Upper endpoint of interval.
6926 * @returns {number} The wrapped number.
6928 wrap(value: number, min: number, max: number): number;
6930 * Wrap an angle on the interval [-Pi, Pi].
6932 * @param {number} angle - Value to wrap.
6933 * @returns {number} Wrapped angle.
6935 wrapAngle(angle: number): number;
6937 * Limit the value to the interval [min, max] by changing the value to
6938 * the nearest available one when it is outside the interval.
6940 * @param {number} value - Value to clamp.
6941 * @param {number} min - Minimum of the interval.
6942 * @param {number} max - Maximum of the interval.
6943 * @returns {number} Clamped value.
6945 clamp(value: number, min: number, max: number): number;
6947 * Calculates the counter-clockwise angle from the first
6948 * vector (x1, y1)^T to the second (x2, y2)^T.
6950 * @param {number} x1 - X coordinate of first vector.
6951 * @param {number} y1 - Y coordinate of first vector.
6952 * @param {number} x2 - X coordinate of second vector.
6953 * @param {number} y2 - Y coordinate of second vector.
6954 * @returns {number} Counter clockwise angle between the vectors.
6956 angleBetweenVector2(x1: number, y1: number, x2: number, y2: number): number;
6958 * Calculates the minimum (absolute) angle change for rotation
6959 * from one angle to another on the [-Pi, Pi] interval.
6961 * @param {number} angle1 - Start angle.
6962 * @param {number} angle2 - Destination angle.
6963 * @returns {number} Absolute angle change between angles.
6965 angleDifference(angle1: number, angle2: number): number;
6967 * Calculates the relative rotation angle between two
6968 * angle-axis vectors.
6970 * @param {number} rotation1 - First angle-axis vector.
6971 * @param {number} rotation2 - Second angle-axis vector.
6972 * @returns {number} Relative rotation angle.
6974 relativeRotationAngle(rotation1: number[], rotation2: number[]): number;
6976 * Calculates the angle from a vector to a plane.
6978 * @param {Array<number>} vector - The vector.
6979 * @param {Array<number>} planeNormal - Normal of the plane.
6980 * @returns {number} Angle from between plane and vector.
6982 angleToPlane(vector: number[], planeNormal: number[]): number;
6983 azimuthal(direction: number[], up: number[]): number;
6985 * Calculates the distance between two coordinates
6986 * (longitude, latitude pairs) in meters according to
6987 * the haversine formula.
6989 * @param {number} lat1 - Latitude of the first coordinate in degrees.
6990 * @param {number} lng1 - Longitude of the first coordinate in degrees.
6991 * @param {number} lat2 - Latitude of the second coordinate in degrees.
6992 * @param {number} lng2 - Longitude of the second coordinate in degrees.
6993 * @returns {number} Distance between lat lon positions in meters.
6995 distanceFromLngLat(lng1: number, lat1: number, lng2: number, lat2: number): number;
6999 * @class ViewportCoords
7001 * @classdesc Provides methods for calculating 2D coordinate conversions
7002 * as well as 3D projection and unprojection.
7004 * Basic coordinates are 2D coordinates on the [0, 1] interval and
7005 * have the origin point, (0, 0), at the top left corner and the
7006 * maximum value, (1, 1), at the bottom right corner of the original
7009 * Viewport coordinates are 2D coordinates on the [-1, 1] interval and
7010 * have the origin point in the center. The bottom left corner point is
7011 * (-1, -1) and the top right corner point is (1, 1).
7013 * Canvas coordiantes are 2D pixel coordinates on the [0, canvasWidth] and
7014 * [0, canvasHeight] intervals. The origin point (0, 0) is in the top left
7015 * corner and the maximum value is (canvasWidth, canvasHeight) is in the
7016 * bottom right corner.
7018 * 3D coordinates are in the topocentric world reference frame.
7020 declare class ViewportCoords {
7021 private _unprojectDepth;
7023 * Convert basic coordinates to canvas coordinates.
7025 * @description Transform origin and camera position needs to be the
7026 * equal for reliable return value.
7028 * @param {number} basicX - Basic X coordinate.
7029 * @param {number} basicY - Basic Y coordinate.
7030 * @param {HTMLElement} container - The viewer container.
7031 * @param {Transform} transform - Transform of the image to unproject from.
7032 * @param {THREE.Camera} camera - Camera used in rendering.
7033 * @returns {Array<number>} 2D canvas coordinates.
7035 basicToCanvas(basicX: number, basicY: number, container: {
7036 offsetHeight: number;
7037 offsetWidth: number;
7038 }, transform: Transform, camera: THREE.Camera): number[];
7040 * Convert basic coordinates to canvas coordinates safely. If 3D point is
7041 * behind camera null will be returned.
7043 * @description Transform origin and camera position needs to be the
7044 * equal for reliable return value.
7046 * @param {number} basicX - Basic X coordinate.
7047 * @param {number} basicY - Basic Y coordinate.
7048 * @param {HTMLElement} container - The viewer container.
7049 * @param {Transform} transform - Transform of the image to unproject from.
7050 * @param {THREE.Camera} camera - Camera used in rendering.
7051 * @returns {Array<number>} 2D canvas coordinates if the basic point represents a 3D point
7052 * in front of the camera, otherwise null.
7054 basicToCanvasSafe(basicX: number, basicY: number, container: {
7055 offsetHeight: number;
7056 offsetWidth: number;
7057 }, transform: Transform, camera: THREE.Camera): number[];
7059 * Convert basic coordinates to viewport coordinates.
7061 * @description Transform origin and camera position needs to be the
7062 * equal for reliable return value.
7064 * @param {number} basicX - Basic X coordinate.
7065 * @param {number} basicY - Basic Y coordinate.
7066 * @param {Transform} transform - Transform of the image to unproject from.
7067 * @param {THREE.Camera} camera - Camera used in rendering.
7068 * @returns {Array<number>} 2D viewport coordinates.
7070 basicToViewport(basicX: number, basicY: number, transform: Transform, camera: THREE.Camera): number[];
7072 * Convert basic coordinates to viewport coordinates safely. If 3D point is
7073 * behind camera null will be returned.
7075 * @description Transform origin and camera position needs to be the
7076 * equal for reliable return value.
7078 * @param {number} basicX - Basic X coordinate.
7079 * @param {number} basicY - Basic Y coordinate.
7080 * @param {Transform} transform - Transform of the image to unproject from.
7081 * @param {THREE.Camera} camera - Camera used in rendering.
7082 * @returns {Array<number>} 2D viewport coordinates.
7084 basicToViewportSafe(basicX: number, basicY: number, transform: Transform, camera: THREE.Camera): number[];
7086 * Convert camera 3D coordinates to viewport coordinates.
7088 * @param {number} pointCamera - 3D point in camera coordinate system.
7089 * @param {THREE.Camera} camera - Camera used in rendering.
7090 * @returns {Array<number>} 2D viewport coordinates.
7092 cameraToViewport(pointCamera: number[], camera: THREE.Camera): number[];
7094 * Get canvas pixel position from event.
7096 * @param {Event} event - Event containing clientX and clientY properties.
7097 * @param {HTMLElement} element - HTML element.
7098 * @returns {Array<number>} 2D canvas coordinates.
7100 canvasPosition(event: {
7103 }, element: HTMLElement): number[];
7105 * Convert canvas coordinates to basic coordinates.
7107 * @description Transform origin and camera position needs to be the
7108 * equal for reliable return value.
7110 * @param {number} canvasX - Canvas X coordinate.
7111 * @param {number} canvasY - Canvas Y coordinate.
7112 * @param {HTMLElement} container - The viewer container.
7113 * @param {Transform} transform - Transform of the image to unproject from.
7114 * @param {THREE.Camera} camera - Camera used in rendering.
7115 * @returns {Array<number>} 2D basic coordinates.
7117 canvasToBasic(canvasX: number, canvasY: number, container: {
7118 offsetHeight: number;
7119 offsetWidth: number;
7120 }, transform: Transform, camera: THREE.Camera): number[];
7122 * Convert canvas coordinates to viewport coordinates.
7124 * @param {number} canvasX - Canvas X coordinate.
7125 * @param {number} canvasY - Canvas Y coordinate.
7126 * @param {HTMLElement} container - The viewer container.
7127 * @returns {Array<number>} 2D viewport coordinates.
7129 canvasToViewport(canvasX: number, canvasY: number, container: {
7130 offsetHeight: number;
7131 offsetWidth: number;
7134 * Determines the width and height of the container in canvas coordinates.
7136 * @param {HTMLElement} container - The viewer container.
7137 * @returns {Array<number>} 2D canvas coordinates.
7139 containerToCanvas(container: {
7140 offsetHeight: number;
7141 offsetWidth: number;
7144 * Determine basic distances from image to canvas corners.
7146 * @description Transform origin and camera position needs to be the
7147 * equal for reliable return value.
7149 * Determines the smallest basic distance for every side of the canvas.
7151 * @param {Transform} transform - Transform of the image to unproject from.
7152 * @param {THREE.Camera} camera - Camera used in rendering.
7153 * @returns {Array<number>} Array of basic distances as [top, right, bottom, left].
7155 getBasicDistances(transform: Transform, camera: THREE.Camera): number[];
7157 * Determine pixel distances from image to canvas corners.
7159 * @description Transform origin and camera position needs to be the
7160 * equal for reliable return value.
7162 * Determines the smallest pixel distance for every side of the canvas.
7164 * @param {HTMLElement} container - The viewer container.
7165 * @param {Transform} transform - Transform of the image to unproject from.
7166 * @param {THREE.Camera} camera - Camera used in rendering.
7167 * @returns {Array<number>} Array of pixel distances as [top, right, bottom, left].
7169 getPixelDistances(container: {
7170 offsetHeight: number;
7171 offsetWidth: number;
7172 }, transform: Transform, camera: THREE.Camera): number[];
7174 * Determine if an event occured inside an element.
7176 * @param {Event} event - Event containing clientX and clientY properties.
7177 * @param {HTMLElement} element - HTML element.
7178 * @returns {boolean} Value indicating if the event occured inside the element or not.
7180 insideElement(event: {
7183 }, element: HTMLElement): boolean;
7185 * Project 3D world coordinates to canvas coordinates.
7187 * @param {Array<number>} point3D - 3D world coordinates.
7188 * @param {HTMLElement} container - The viewer container.
7189 * @param {THREE.Camera} camera - Camera used in rendering.
7190 * @returns {Array<number>} 2D canvas coordinates.
7192 projectToCanvas(point3d: number[], container: {
7193 offsetHeight: number;
7194 offsetWidth: number;
7195 }, camera: THREE.Camera): number[];
7197 * Project 3D world coordinates to canvas coordinates safely. If 3D
7198 * point is behind camera null will be returned.
7200 * @param {Array<number>} point3D - 3D world coordinates.
7201 * @param {HTMLElement} container - The viewer container.
7202 * @param {THREE.Camera} camera - Camera used in rendering.
7203 * @returns {Array<number>} 2D canvas coordinates.
7205 projectToCanvasSafe(point3d: number[], container: {
7206 offsetHeight: number;
7207 offsetWidth: number;
7208 }, camera: THREE.Camera): number[];
7210 * Project 3D world coordinates to viewport coordinates.
7212 * @param {Array<number>} point3D - 3D world coordinates.
7213 * @param {THREE.Camera} camera - Camera used in rendering.
7214 * @returns {Array<number>} 2D viewport coordinates.
7216 projectToViewport(point3d: number[], camera: THREE.Camera): number[];
7218 * Uproject canvas coordinates to 3D world coordinates.
7220 * @param {number} canvasX - Canvas X coordinate.
7221 * @param {number} canvasY - Canvas Y coordinate.
7222 * @param {HTMLElement} container - The viewer container.
7223 * @param {THREE.Camera} camera - Camera used in rendering.
7224 * @returns {Array<number>} 3D world coordinates.
7226 unprojectFromCanvas(canvasX: number, canvasY: number, container: {
7227 offsetHeight: number;
7228 offsetWidth: number;
7229 }, camera: THREE.Camera): THREE.Vector3;
7231 * Unproject viewport coordinates to 3D world coordinates.
7233 * @param {number} viewportX - Viewport X coordinate.
7234 * @param {number} viewportY - Viewport Y coordinate.
7235 * @param {THREE.Camera} camera - Camera used in rendering.
7236 * @returns {Array<number>} 3D world coordinates.
7238 unprojectFromViewport(viewportX: number, viewportY: number, camera: THREE.Camera): THREE.Vector3;
7240 * Convert viewport coordinates to basic coordinates.
7242 * @description Transform origin and camera position needs to be the
7243 * equal for reliable return value.
7245 * @param {number} viewportX - Viewport X coordinate.
7246 * @param {number} viewportY - Viewport Y coordinate.
7247 * @param {Transform} transform - Transform of the image to unproject from.
7248 * @param {THREE.Camera} camera - Camera used in rendering.
7249 * @returns {Array<number>} 2D basic coordinates.
7251 viewportToBasic(viewportX: number, viewportY: number, transform: Transform, camera: THREE.Camera): number[];
7253 * Convert viewport coordinates to canvas coordinates.
7255 * @param {number} viewportX - Viewport X coordinate.
7256 * @param {number} viewportY - Viewport Y coordinate.
7257 * @param {HTMLElement} container - The viewer container.
7258 * @returns {Array<number>} 2D canvas coordinates.
7260 viewportToCanvas(viewportX: number, viewportY: number, container: {
7261 offsetHeight: number;
7262 offsetWidth: number;
7265 * Convert 3D world coordinates to 3D camera coordinates.
7267 * @param {number} point3D - 3D point in world coordinate system.
7268 * @param {THREE.Camera} camera - Camera used in rendering.
7269 * @returns {Array<number>} 3D camera coordinates.
7271 worldToCamera(point3d: number[], camera: THREE.Camera): number[];
7274 declare class PanService {
7275 private _graphService;
7276 private _stateService;
7277 private _graphCalculator;
7279 private _viewportCoords;
7280 private _panImagesSubject$;
7281 private _panImages$;
7282 private _panImagesSubscription;
7283 private _subscriptions;
7285 constructor(graphService: GraphService, stateService: StateService, enabled?: boolean, graphCalculator?: GraphCalculator, spatial?: Spatial, viewportCoords?: ViewportCoords);
7286 get panImages$(): Observable<[Image, Transform, number][]>;
7293 private _timeDifference;
7294 private _createTransform;
7295 private _computeProjectedPoints;
7296 private _computeHorizontalFov;
7297 private _coordToFov;
7300 declare class PlayService {
7301 static readonly sequenceSpeed: number;
7302 private _graphService;
7303 private _stateService;
7304 private _imagesAhead;
7307 private _direction$;
7308 private _directionSubject$;
7310 private _playingSubject$;
7312 private _speedSubject$;
7313 private _playingSubscription;
7314 private _cacheSubscription;
7315 private _clearSubscription;
7316 private _earthSubscription;
7317 private _graphModeSubscription;
7318 private _stopSubscription;
7319 private _subscriptions;
7321 constructor(graphService: GraphService, stateService: StateService);
7322 get playing(): boolean;
7323 get direction$(): Observable<NavigationDirection>;
7324 get playing$(): Observable<boolean>;
7325 get speed$(): Observable<number>;
7328 setDirection(direction: NavigationDirection): void;
7329 setSpeed(speed: number): void;
7332 private _mapImagesAhead;
7333 private _setPlaying;
7337 declare class Navigator {
7339 private _cacheService;
7340 private _graphService;
7341 private _loadingService;
7342 private _loadingName;
7343 private _panService;
7344 private _playService;
7345 private _stateService;
7346 private _idRequested$;
7347 private _movedToId$;
7349 private _requestSubscription;
7350 private _imageRequestSubscription;
7351 constructor(options: ViewerOptions, api?: APIWrapper, graphService?: GraphService, loadingService?: LoadingService, stateService?: StateService, cacheService?: CacheService, playService?: PlayService, panService?: PanService);
7352 get api(): APIWrapper;
7353 get cacheService(): CacheService;
7354 get graphService(): GraphService;
7355 get loadingService(): LoadingService;
7356 get movedToId$(): Observable<string>;
7357 get panService(): PanService;
7358 get playService(): PlayService;
7359 get stateService(): StateService;
7361 moveTo$(id: string): Observable<Image>;
7362 moveDir$(direction: NavigationDirection): Observable<Image>;
7363 setFilter$(filter: FilterExpression): Observable<void>;
7364 setAccessToken$(accessToken?: string): Observable<void>;
7366 private _abortRequest;
7367 private _makeRequest$;
7369 private _trajectoryIds$;
7372 declare class SubscriptionHolder {
7373 private _subscriptions;
7374 push(subscription: Subscription): void;
7375 unsubscribe(): void;
7378 interface IComponent {
7380 * Value indicating if the component is currently active.
7382 readonly activated: boolean;
7384 * Default configuration for the component.
7386 readonly defaultConfiguration: ComponentConfiguration;
7388 * The name of the component. Used when interacting with the
7389 * component through the Viewer's API.
7391 readonly name: string;
7393 * Configure the component.
7395 configure(configuration: ComponentConfiguration): void;
7401 declare type ComponentEventType = "geometrycreate" | "hover" | "markerdragend" | "markerdragstart" | "markerposition" | "playing" | "tagcreateend" | "tagcreatestart" | "tagmode" | "tags";
7403 declare abstract class Component<TConfiguration extends ComponentConfiguration> extends EventEmitter implements IComponent {
7404 static componentName: ComponentName | FallbackComponentName;
7405 protected _activated: boolean;
7406 protected _container: Container;
7407 protected _name: string;
7408 protected _navigator: Navigator;
7409 protected readonly _subscriptions: SubscriptionHolder;
7410 protected _activated$: BehaviorSubject<boolean>;
7411 protected _configuration$: Observable<TConfiguration>;
7412 protected _configurationSubject$: Subject<TConfiguration>;
7413 constructor(name: string, container: Container, navigator: Navigator);
7417 * @returns {boolean} Value indicating if the component is
7420 get activated(): boolean;
7422 get activated$(): Observable<boolean>;
7424 * Get default configuration.
7426 * @returns {TConfiguration} Default configuration for component.
7428 get defaultConfiguration(): TConfiguration;
7430 get configuration$(): Observable<TConfiguration>;
7434 * @description The name of the component. Used when interacting with the
7435 * component through the Viewer's API.
7439 activate(conf?: TConfiguration): void;
7441 * Configure the component.
7443 * @param configuration Component configuration.
7445 configure(configuration: TConfiguration): void;
7449 fire<T>(type: ComponentEventType, event: T): void;
7451 off<T>(type: ComponentEventType, handler: (event: T) => void): void;
7453 on<T>(type: ComponentEventType, handler: (event: T) => void): void;
7455 * Detect the viewer's new width and height and resize the component's
7456 * rendered elements accordingly if applicable.
7461 protected abstract _activate(): void;
7462 protected abstract _deactivate(): void;
7463 protected abstract _getDefaultConfiguration(): TConfiguration;
7467 * @class BearingComponent
7469 * @classdesc Component for indicating bearing and field of view.
7473 * var viewer = new Viewer({ ... });
7474 * var bearingComponent = viewer.getComponent("bearing");
7475 * bearingComponent.configure({ size: ComponentSize.Small });
7478 declare class BearingComponent extends Component<BearingConfiguration> {
7479 static componentName: ComponentName;
7481 private _viewportCoords;
7482 private _svgNamespace;
7483 private _distinctThreshold;
7484 private _animationSpeed;
7486 constructor(name: string, container: Container, navigator: Navigator);
7487 protected _activate(): void;
7488 protected _deactivate(): void;
7489 protected _getDefaultConfiguration(): BearingConfiguration;
7490 private _createFovIndicator;
7491 private _createFovArc;
7492 private _createCircleSectorCompass;
7493 private _createCircleSector;
7494 private _createNorth;
7495 private _createBackground;
7496 private _computeProjectedPoints;
7497 private _computeHorizontalFov;
7498 private _coordToFov;
7499 private _interpolate;
7502 declare class CacheComponent extends Component<CacheConfiguration> {
7503 static componentName: ComponentName;
7505 constructor(name: string, container: Container, navigator: Navigator);
7506 protected _activate(): void;
7507 protected _deactivate(): void;
7508 protected _getDefaultConfiguration(): CacheConfiguration;
7510 private _imageToEdges$;
7514 * Interface for general component events.
7516 interface ComponentEvent {
7518 * The component object that fired the event.
7524 type: ComponentEventType;
7528 * Interface for component hover events.
7530 interface ComponentHoverEvent extends ComponentEvent {
7532 * The image id corresponding to the element or object that
7533 * is being hovered. When the mouse leaves the element or
7534 * object the id will be null.
7543 * @classdesc Represents a geometry.
7545 declare abstract class Geometry {
7546 protected _notifyChanged$: Subject<Geometry>;
7548 * Create a geometry.
7555 * Get changed observable.
7557 * @description Emits the geometry itself every time the geometry
7560 * @returns {Observable<Geometry>} Observable emitting the geometry instance.
7563 get changed$(): Observable<Geometry>;
7565 * Get the 2D basic coordinates for the centroid of the geometry.
7567 * @returns {Array<number>} 2D basic coordinates representing the centroid.
7570 abstract getCentroid2d(): number[];
7572 * Get the 3D world coordinates for the centroid of the geometry.
7574 * @param {Transform} transform - The transform of the image related to the geometry.
7575 * @returns {Array<number>} 3D world coordinates representing the centroid.
7578 abstract getCentroid3d(transform: Transform): number[];
7580 * Set the 2D centroid of the geometry.
7582 * @param {Array<number>} value - The new value of the centroid in basic coordinates.
7583 * @param {Transform} transform - The transform of the image related to the geometry.
7586 abstract setCentroid2d(value: number[], transform: Transform): void;
7590 * Interface for component geometry events.
7592 interface ComponentGeometryEvent extends ComponentEvent {
7594 * Geometry related to the event.
7597 type: "geometrycreate";
7603 * @classdesc Represents an abstract marker class that should be extended
7604 * by marker implementations used in the marker component.
7606 declare abstract class Marker {
7607 protected _id: string;
7608 protected _geometry: THREE.Object3D;
7609 protected _lngLat: LngLat;
7610 constructor(id: string, lngLat: LngLat);
7613 * @returns {string} The id of the marker.
7621 get geometry(): THREE.Object3D;
7624 * @returns {LngLat} The geographic coordinates of the marker.
7626 get lngLat(): LngLat;
7628 createGeometry(position: number[]): void;
7630 disposeGeometry(): void;
7632 getInteractiveObjects(): THREE.Object3D[];
7634 lerpAltitude(alt: number, alpha: number): void;
7636 updatePosition(position: number[], lngLat?: LngLat): void;
7637 protected abstract _createGeometry(position: number[]): void;
7638 protected abstract _disposeGeometry(): void;
7639 protected abstract _getInteractiveObjects(): THREE.Object3D[];
7643 * Interface for component marker events.
7645 interface ComponentMarkerEvent extends ComponentEvent {
7647 * The marker that was affected by the event.
7650 type: "markerdragend" | "markerdragstart" | "markerposition";
7654 * Interface for component play events.
7656 interface ComponentPlayEvent extends ComponentEvent {
7658 * Value indiciating if the component is playing or not.
7665 * Interface for component state events.
7669 * // The `hover` event is an example of a `ComponentStateEvent`.
7670 * // Set up an event listener on the direction component.
7671 * var directionComponent = viewer.getComponent('direction');
7672 * directionComponent.on('hover', function(e) {
7673 * console.log('A hover event has occured');
7677 interface ComponentStateEvent extends ComponentEvent {
7678 type: "tagcreateend" | "tagcreatestart" | "tags";
7682 * Interface for component tag mode events.
7684 interface ComponentTagModeEvent extends ComponentEvent {
7686 * Value indicating the current tag mode of the component.
7693 * @class DirectionDOMRenderer
7694 * @classdesc DOM renderer for direction arrows.
7696 declare class DirectionDOMRenderer {
7698 private _calculator;
7702 private _highlightKey;
7703 private _distinguishSequence;
7704 private _needsRender;
7707 private _sphericalEdges;
7708 private _sequenceEdgeKeys;
7709 private _stepDirections;
7710 private _turnDirections;
7713 constructor(configuration: DirectionConfiguration, size: ViewportSize);
7717 * @returns {boolean} Value indicating whether render should be called.
7719 get needsRender(): boolean;
7721 * Renders virtual DOM elements.
7723 * @description Calling render resets the needs render property.
7725 render(navigator: Navigator): vd.VNode;
7726 setEdges(edgeStatus: NavigationEdgeStatus, sequence: Sequence): void;
7728 * Set image for which to show edges.
7730 * @param {Image} image
7732 setImage(image: Image): void;
7734 * Set the render camera to use for calculating rotations.
7736 * @param {RenderCamera} renderCamera
7738 setRenderCamera(renderCamera: RenderCamera): void;
7740 * Set configuration values.
7742 * @param {DirectionConfiguration} configuration
7744 setConfiguration(configuration: DirectionConfiguration): void;
7746 * Detect the element's width and height and resize
7747 * elements accordingly.
7749 * @param {ViewportSize} size Size of vßiewer container element.
7751 resize(size: ViewportSize): void;
7752 private _setNeedsRender;
7753 private _clearEdges;
7755 private _createSphericalArrows;
7756 private _createSphericalToPerspectiveArrow;
7757 private _createPerspectiveToSphericalArrows;
7758 private _createStepArrows;
7759 private _createTurnArrows;
7760 private _createVNodeByKey;
7761 private _createVNodeByDirection;
7762 private _createVNodeByTurn;
7763 private _createVNodeInactive;
7764 private _createVNode;
7765 private _getContainer;
7769 * @class DirectionComponent
7770 * @classdesc Component showing navigation arrows for steps and turns.
7772 declare class DirectionComponent extends Component<DirectionConfiguration> {
7774 static componentName: ComponentName;
7776 private _hoveredIdSubject$;
7777 private _hoveredId$;
7779 constructor(name: string, container: Container, navigator: Navigator, directionDOMRenderer?: DirectionDOMRenderer);
7780 fire(type: "hover", event: ComponentHoverEvent): void;
7782 fire(type: ComponentEventType, event: ComponentStateEvent): void;
7783 off(type: "hover", handler: (event: ComponentHoverEvent) => void): void;
7785 off(type: ComponentEventType, handler: (event: ComponentStateEvent) => void): void;
7787 * Fired when the hovered element of a component changes.
7792 * // Initialize the viewer
7793 * var viewer = new Viewer({ // viewer options });
7794 * var component = viewer.getComponent('<component-name>');
7795 * // Set an event listener
7796 * component.on('hover', function() {
7797 * console.log("A hover event has occurred.");
7801 on(type: "hover", handler: (event: ComponentHoverEvent) => void): void;
7803 on(type: ComponentEventType, handler: (event: ComponentStateEvent) => void): void;
7804 protected _activate(): void;
7805 protected _deactivate(): void;
7806 protected _getDefaultConfiguration(): DirectionConfiguration;
7809 declare abstract class HandlerBase<TConfiguration extends ComponentConfiguration> {
7810 protected _component: Component<TConfiguration>;
7811 protected _container: Container;
7812 protected _navigator: Navigator;
7813 protected _enabled: boolean;
7815 constructor(component: Component<TConfiguration>, container: Container, navigator: Navigator);
7817 * Returns a Boolean indicating whether the interaction is enabled.
7819 * @returns {boolean} `true` if the interaction is enabled.
7821 get isEnabled(): boolean;
7823 * Enables the interaction.
7827 * <component-name>.<handler-name>.enable();
7832 * Disables the interaction.
7836 * <component-name>.<handler-name>.disable();
7840 protected abstract _enable(): void;
7841 protected abstract _disable(): void;
7842 protected abstract _getConfiguration(enable: boolean): TConfiguration;
7846 * The `KeySequenceNavigationHandler` allows the user to navigate through a sequence using the
7847 * following key commands:
7849 * `ALT` + `Up Arrow`: Navigate to next image in the sequence.
7850 * `ALT` + `Down Arrow`: Navigate to previous image in sequence.
7854 * var keyboardComponent = viewer.getComponent("keyboard");
7856 * keyboardComponent.keySequenceNavigation.disable();
7857 * keyboardComponent.keySequenceNavigation.enable();
7859 * var isEnabled = keyboardComponent.keySequenceNavigation.isEnabled;
7862 declare class KeySequenceNavigationHandler extends HandlerBase<KeyboardConfiguration> {
7863 private _keyDownSubscription;
7864 protected _enable(): void;
7865 protected _disable(): void;
7866 protected _getConfiguration(enable: boolean): KeyboardConfiguration;
7870 * The `KeySpatialNavigationHandler` allows the user to navigate through a sequence using the
7871 * following key commands:
7873 * `Up Arrow`: Step forward.
7874 * `Down Arrow`: Step backward.
7875 * `Left Arrow`: Step to the left.
7876 * `Rigth Arrow`: Step to the right.
7877 * `SHIFT` + `Down Arrow`: Turn around.
7878 * `SHIFT` + `Left Arrow`: Turn to the left.
7879 * `SHIFT` + `Rigth Arrow`: Turn to the right.
7883 * var keyboardComponent = viewer.getComponent("keyboard");
7885 * keyboardComponent.keySpatialNavigation.disable();
7886 * keyboardComponent.keySpatialNavigation.enable();
7888 * var isEnabled = keyboardComponent.keySpatialNavigation.isEnabled;
7891 declare class KeySpatialNavigationHandler extends HandlerBase<KeyboardConfiguration> {
7893 private _keyDownSubscription;
7895 constructor(component: Component<KeyboardConfiguration>, container: Container, navigator: Navigator, spatial: Spatial);
7896 protected _enable(): void;
7897 protected _disable(): void;
7898 protected _getConfiguration(enable: boolean): KeyboardConfiguration;
7901 private _rotationFromCamera;
7905 * The `KeyZoomHandler` allows the user to zoom in and out using the
7906 * following key commands:
7913 * var keyboardComponent = viewer.getComponent("keyboard");
7915 * keyboardComponent.keyZoom.disable();
7916 * keyboardComponent.keyZoom.enable();
7918 * var isEnabled = keyboardComponent.keyZoom.isEnabled;
7921 declare class KeyZoomHandler extends HandlerBase<KeyboardConfiguration> {
7922 private _keyDownSubscription;
7923 private _viewportCoords;
7925 constructor(component: Component<KeyboardConfiguration>, container: Container, navigator: Navigator, viewportCoords: ViewportCoords);
7926 protected _enable(): void;
7927 protected _disable(): void;
7928 protected _getConfiguration(enable: boolean): KeyboardConfiguration;
7932 * The `KeyPlayHandler` allows the user to control the play behavior
7933 * using the following key commands:
7935 * `Spacebar`: Start or stop playing.
7936 * `SHIFT` + `D`: Switch direction.
7937 * `<`: Decrease speed.
7938 * `>`: Increase speed.
7942 * var keyboardComponent = viewer.getComponent("keyboard");
7944 * keyboardComponent.keyPlay.disable();
7945 * keyboardComponent.keyPlay.enable();
7947 * var isEnabled = keyboardComponent.keyPlay.isEnabled;
7950 declare class KeyPlayHandler extends HandlerBase<KeyboardConfiguration> {
7951 private _keyDownSubscription;
7952 protected _enable(): void;
7953 protected _disable(): void;
7954 protected _getConfiguration(enable: boolean): KeyboardConfiguration;
7958 * @class KeyboardComponent
7960 * @classdesc Component for keyboard event handling.
7962 * To retrive and use the keyboard component
7966 * var viewer = new Viewer({ ... });
7968 * var keyboardComponent = viewer.getComponent("keyboard");
7971 declare class KeyboardComponent extends Component<KeyboardConfiguration> {
7972 static componentName: ComponentName;
7973 private _keyPlayHandler;
7974 private _keySequenceNavigationHandler;
7975 private _keySpatialNavigationHandler;
7976 private _keyZoomHandler;
7978 constructor(name: string, container: Container, navigator: Navigator);
7982 * @returns {KeyPlayHandler} The key play handler.
7984 get keyPlay(): KeyPlayHandler;
7986 * Get key sequence navigation.
7988 * @returns {KeySequenceNavigationHandler} The key sequence navigation handler.
7990 get keySequenceNavigation(): KeySequenceNavigationHandler;
7994 * @returns {KeySpatialNavigationHandler} The spatial handler.
7996 get keySpatialNavigation(): KeySpatialNavigationHandler;
8000 * @returns {KeyZoomHandler} The key zoom handler.
8002 get keyZoom(): KeyZoomHandler;
8003 protected _activate(): void;
8004 protected _deactivate(): void;
8005 protected _getDefaultConfiguration(): KeyboardConfiguration;
8009 * @interface CircleMarkerOptions
8011 * Interface that represents the options for configuring a `CircleMarker`.
8013 interface CircleMarkerOptions {
8015 * The color of the marker.
8019 color?: number | string;
8021 * The opacity of the marker.
8027 * The radius of the circle in meters.
8035 * @class CircleMarker
8037 * @classdesc Non-interactive marker with a flat circle shape. The circle
8038 * marker can not be configured to be interactive.
8040 * Circle marker properties can not be updated after creation.
8042 * To create and add one `CircleMarker` with default configuration
8043 * and one with configuration use
8047 * var defaultMarker = new CircleMarker(
8049 * { lat: 0, lng: 0, });
8051 * var configuredMarker = new CircleMarker(
8053 * { lat: 0, lng: 0, },
8060 * markerComponent.add([defaultMarker, configuredMarker]);
8063 declare class CircleMarker extends Marker {
8067 constructor(id: string, lngLat: LngLat, options?: CircleMarkerOptions);
8068 protected _createGeometry(position: number[]): void;
8069 protected _disposeGeometry(): void;
8070 protected _getInteractiveObjects(): THREE.Object3D[];
8074 * @class MarkerComponent
8076 * @classdesc Component for showing and editing 3D marker objects.
8078 * The `add` method is used for adding new markers or replacing
8079 * markers already in the set.
8081 * If a marker already in the set has the same
8082 * id as one of the markers added, the old marker will be removed and
8083 * the added marker will take its place.
8085 * It is not possible to update markers in the set by updating any properties
8086 * directly on the marker object. Markers need to be replaced by
8087 * re-adding them for updates to geographic position or configuration
8090 * Markers added to the marker component can be either interactive
8091 * or non-interactive. Different marker types define their behavior.
8092 * Markers with interaction support can be configured with options
8093 * to respond to dragging inside the viewer and be detected when
8094 * retrieving markers from pixel points with the `getMarkerIdAt` method.
8096 * To retrive and use the marker component
8100 * var viewer = new Viewer({ component: { marker: true }, ... });
8102 * var markerComponent = viewer.getComponent("marker");
8105 declare class MarkerComponent extends Component<MarkerConfiguration> {
8106 static componentName: ComponentName;
8107 private _graphCalculator;
8108 private _markerScene;
8110 private _viewportCoords;
8111 private _relativeGroundAltitude;
8113 constructor(name: string, container: Container, navigator: Navigator);
8115 * Add markers to the marker set or replace markers in the marker set.
8117 * @description If a marker already in the set has the same
8118 * id as one of the markers added, the old marker will be removed
8119 * the added marker will take its place.
8121 * Any marker inside the visible bounding bbox
8122 * will be initialized and placed in the viewer.
8124 * @param {Array<Marker>} markers - Markers to add.
8128 * markerComponent.add([marker1, marker2]);
8131 add(markers: Marker[]): void;
8132 fire(type: "markerdragend" | "markerdragstart" | "markerposition", event: ComponentMarkerEvent): void;
8134 fire(type: ComponentEventType, event: ComponentEvent): void;
8136 * Returns the marker in the marker set with the specified id, or
8137 * undefined if the id matches no marker.
8139 * @param {string} markerId - Id of the marker.
8143 * var marker = markerComponent.get("markerId");
8147 get(markerId: string): Marker;
8149 * Returns an array of all markers.
8153 * var markers = markerComponent.getAll();
8158 * Returns the id of the interactive marker closest to the current camera
8159 * position at the specified point.
8161 * @description Notice that the pixelPoint argument requires x, y
8162 * coordinates from pixel space.
8164 * With this function, you can use the coordinates provided by mouse
8165 * events to get information out of the marker component.
8167 * If no interactive geometry of an interactive marker exist at the pixel
8168 * point, `null` will be returned.
8170 * @param {Array<number>} pixelPoint - Pixel coordinates on the viewer element.
8171 * @returns {string} Id of the interactive marker closest to the camera. If no
8172 * interactive marker exist at the pixel point, `null` will be returned.
8176 * markerComponent.getMarkerIdAt([100, 100])
8177 * .then((markerId) => { console.log(markerId); });
8180 getMarkerIdAt(pixelPoint: number[]): Promise<string>;
8182 * Check if a marker exist in the marker set.
8184 * @param {string} markerId - Id of the marker.
8188 * var markerExists = markerComponent.has("markerId");
8191 has(markerId: string): boolean;
8192 off(type: "markerdragend" | "markerdragstart" | "markerposition", handler: (event: ComponentMarkerEvent) => void): void;
8194 off(type: ComponentEventType, handler: (event: ComponentEvent) => void): void;
8196 * Fired when a marker drag interaction ends.
8198 * @event markerdragend
8201 * // Initialize the viewer
8202 * var viewer = new Viewer({ // viewer options });
8203 * var component = viewer.getComponent('<component-name>');
8204 * // Set an event listener
8205 * component.on('markerdragend', function() {
8206 * console.log("A markerdragend event has occurred.");
8210 on(type: "markerdragend", handler: (event: ComponentMarkerEvent) => void): void;
8212 * Fired when a marker drag interaction starts.
8214 * @event markerdragstart
8217 * // Initialize the viewer
8218 * var viewer = new Viewer({ // viewer options });
8219 * var component = viewer.getComponent('<component-name>');
8220 * // Set an event listener
8221 * component.on('markerdragstart', function() {
8222 * console.log("A markerdragstart event has occurred.");
8226 on(type: "markerdragstart", handler: (event: ComponentMarkerEvent) => void): void;
8228 * Fired when the position of a marker is changed.
8230 * @event markerposition
8233 * // Initialize the viewer
8234 * var viewer = new Viewer({ // viewer options });
8235 * var component = viewer.getComponent('<component-name>');
8236 * // Set an event listener
8237 * component.on('markerposition', function() {
8238 * console.log("A markerposition event has occurred.");
8242 on(type: "markerposition", handler: (event: ComponentMarkerEvent) => void): void;
8244 * Remove markers with the specified ids from the marker set.
8246 * @param {Array<string>} markerIds - Ids for markers to remove.
8250 * markerComponent.remove(["id-1", "id-2"]);
8253 remove(markerIds: string[]): void;
8255 * Remove all markers from the marker set.
8259 * markerComponent.removeAll();
8263 protected _activate(): void;
8264 protected _deactivate(): void;
8265 protected _getDefaultConfiguration(): MarkerConfiguration;
8269 * @interface SimpleMarkerOptions
8271 * Interface that represents the options for configuring a `SimpleMarker`.
8273 interface SimpleMarkerOptions {
8275 * The color of the ball inside the marker.
8279 ballColor?: number | string;
8281 * The opacity of the ball inside the marker.
8285 ballOpacity?: number;
8287 * The color of the ice creame shape.
8291 color?: number | string;
8293 * Value indicating if the marker should be interactive or not.
8295 * @description If the marker is configured to be interactive
8296 * it will be draggable in the viewer and retrievable with the
8297 * `getMarkerIdAt` method on the `MarkerComponent`.
8301 interactive?: boolean;
8303 * The opacity of the ice creame shape.
8309 * The radius of the ice cream shape in meters.
8317 * @class SimpleMarker
8319 * @classdesc Interactive marker with ice cream shape. The sphere
8320 * inside the ice cream can be configured to be interactive.
8322 * Simple marker properties can not be updated after creation.
8324 * To create and add one `SimpleMarker` with default configuration
8325 * (non-interactive) and one interactive with configuration use
8329 * var defaultMarker = new SimpleMarker(
8331 * { lat: 0, lng: 0, });
8333 * var interactiveMarker = new SimpleMarker(
8335 * { lat: 0, lng: 0, },
8337 * ballColor: "#00f",
8340 * interactive: true,
8345 * markerComponent.add([defaultMarker, interactiveMarker]);
8348 declare class SimpleMarker extends Marker {
8350 private _ballOpacity;
8351 private _circleToRayAngle;
8353 private _interactive;
8356 constructor(id: string, lngLat: LngLat, options?: SimpleMarkerOptions);
8357 protected _createGeometry(position: number[]): void;
8358 protected _disposeGeometry(): void;
8359 protected _getInteractiveObjects(): THREE.Object3D[];
8360 private _markerHeight;
8361 private _createMarkerGeometry;
8365 * The `DragPanHandler` allows the user to pan the viewer image by clicking and dragging the cursor.
8369 * var pointerComponent = viewer.getComponent("pointer");
8371 * pointerComponent.dragPan.disable();
8372 * pointerComponent.dragPan.enable();
8374 * var isEnabled = pointerComponent.dragPan.isEnabled;
8377 declare class DragPanHandler extends HandlerBase<PointerConfiguration> {
8379 private _viewportCoords;
8380 private _activeMouseSubscription;
8381 private _activeTouchSubscription;
8382 private _preventDefaultSubscription;
8383 private _rotateSubscription;
8384 private _rotateWithoutInertiaSubscription;
8386 constructor(component: Component<PointerConfiguration>, container: Container, navigator: Navigator, viewportCoords: ViewportCoords, spatial: Spatial);
8387 protected _enable(): void;
8388 protected _disable(): void;
8389 protected _getConfiguration(enable: boolean): PointerConfiguration;
8390 private _drainBuffer;
8393 declare class EarthControlHandler extends HandlerBase<PointerConfiguration> {
8394 private _viewportCoords;
8396 private _subscriptions;
8398 constructor(component: Component<PointerConfiguration>, container: Container, navigator: Navigator, viewportCoords: ViewportCoords, spatial: Spatial);
8399 protected _enable(): void;
8400 protected _disable(): void;
8401 protected _getConfiguration(): PointerConfiguration;
8402 private _eventToViewport;
8403 private _mousePairToRotation;
8404 private _planeIntersection;
8408 * The `ScrollZoomHandler` allows the user to zoom the viewer image by scrolling.
8412 * var pointerComponent = viewer.getComponent("pointer");
8414 * pointerComponent.scrollZoom.disable();
8415 * pointerComponent.scrollZoom.enable();
8417 * var isEnabled = pointerComponent.scrollZoom.isEnabled;
8420 declare class ScrollZoomHandler extends HandlerBase<PointerConfiguration> {
8421 private _viewportCoords;
8422 private _preventDefaultSubscription;
8423 private _zoomSubscription;
8425 constructor(component: Component<PointerConfiguration>, container: Container, navigator: Navigator, viewportCoords: ViewportCoords);
8426 protected _enable(): void;
8427 protected _disable(): void;
8428 protected _getConfiguration(enable: boolean): PointerConfiguration;
8432 * The `TouchZoomHandler` allows the user to zoom the viewer image by pinching on a touchscreen.
8436 * var pointerComponent = viewer.getComponent("pointer");
8438 * pointerComponent.touchZoom.disable();
8439 * pointerComponent.touchZoom.enable();
8441 * var isEnabled = pointerComponent.touchZoom.isEnabled;
8444 declare class TouchZoomHandler extends HandlerBase<PointerConfiguration> {
8445 private _viewportCoords;
8446 private _activeSubscription;
8447 private _preventDefaultSubscription;
8448 private _zoomSubscription;
8450 constructor(component: Component<PointerConfiguration>, container: Container, navigator: Navigator, viewportCoords: ViewportCoords);
8451 protected _enable(): void;
8452 protected _disable(): void;
8453 protected _getConfiguration(enable: boolean): PointerConfiguration;
8457 * @class PointerComponent
8459 * @classdesc Component handling mouse, pen, and touch events for camera movement.
8461 * To retrive and use the mouse component
8465 * var viewer = new Viewer({ ... });
8467 * var pointerComponent = viewer.getComponent("pointer");
8470 declare class PointerComponent extends Component<PointerConfiguration> {
8472 static componentName: ComponentName;
8473 private _bounceHandler;
8474 private _dragPanHandler;
8475 private _earthControlHandler;
8476 private _scrollZoomHandler;
8477 private _touchZoomHandler;
8479 constructor(name: string, container: Container, navigator: Navigator);
8483 * @returns {DragPanHandler} The drag pan handler.
8485 get dragPan(): DragPanHandler;
8487 * Get earth control.
8489 * @returns {EarthControlHandler} The earth control handler.
8491 get earthControl(): EarthControlHandler;
8495 * @returns {ScrollZoomHandler} The scroll zoom handler.
8497 get scrollZoom(): ScrollZoomHandler;
8501 * @returns {TouchZoomHandler} The touch zoom handler.
8503 get touchZoom(): TouchZoomHandler;
8504 protected _activate(): void;
8505 protected _deactivate(): void;
8506 protected _getDefaultConfiguration(): PointerConfiguration;
8510 * Interface for the popup offset with respect to its anchor point.
8512 * @description An object of number arrays specifying an offset for
8513 * each float direction. Negative offsets indicate left and up.
8521 * bottomLeft: [-10, 10],
8522 * bottomRight: [10, 10],
8527 * topLeft: [-10, -10],
8528 * topRight: [10, -10],
8531 * var popup = new Popup({ offset: offset });
8534 interface PopupOffset {
8536 bottomLeft: number[];
8537 bottomRight: number[];
8547 * Interface for the options that define behavior and
8548 * appearance of a popup.
8552 interface PopupOptions {
8554 * Specify if the popup should capture pointer events.
8556 * @description If the popup is specified to not capture
8557 * pointer events the provided content can still override
8558 * this behavior for the individual content HTML elements
8559 * by specifying the appropriate CSS.
8563 capturePointer?: boolean;
8565 * Specify that the popup should not have any tooltip
8566 * like visuals around the provided content.
8572 * The direction in which the popup floats with respect to the
8573 * anchor point or points. If no value is supplied the popup
8574 * will change float automatically based on the its position
8575 * in the viewport so that as much of its area as possible is
8578 * @description For automatic floating (undefined) the popup
8579 * will float in eight directions around a point or a position
8580 * in a rect. When a rectangle is set without a position option
8581 * specified, the popup will float outward from the rectangle
8582 * center based on the side it is currently rendered in. The
8583 * default floating direction is to the bottom for both points
8586 * @default undefined
8590 * A pixel offset applied to the popup's location specfied as:
8592 * - A single number in pixels in the float direction that the popup
8593 * will be translated with respect to the current anchor point.
8595 * - An object of number arrays specifying an offset for
8596 * each float direction. Negative offsets indicate left and up.
8600 offset?: number | PopupOffset;
8602 * Opacity of the popup visuals.
8608 * The popup position in a rectangle (does not apply to points).
8609 * When not set the popup will change position automatically
8610 * based on the viewport so that as much of it as possible is
8613 * @default undefined
8615 position?: Alignment;
8621 * @classdesc Popup instance for rendering custom HTML content
8622 * on top of images. Popups are based on 2D basic image coordinates
8623 * (see the {@link Viewer} class documentation for more information about coordinate
8624 * systems) and a certain popup is therefore only relevant to a single image.
8625 * Popups related to a certain image should be removed when moving
8628 * A popup must have both its content and its point or rect set to be
8629 * rendered. Popup options can not be updated after creation but the
8630 * basic point or rect as well as its content can be changed by calling
8631 * the appropriate methods.
8633 * To create and add one `Popup` with default configuration
8634 * (tooltip visuals and automatic float) and one with specific options
8639 * var defaultSpan = document.createElement('span');
8640 * defaultSpan.innerHTML = 'hello default';
8642 * var defaultPopup = new Popup();
8643 * defaultPopup.setDOMContent(defaultSpan);
8644 * defaultPopup.setBasicPoint([0.3, 0.3]);
8646 * var cleanSpan = document.createElement('span');
8647 * cleanSpan.innerHTML = 'hello clean';
8649 * var cleanPopup = new Popup({
8651 * float: Alignment.Top,
8656 * cleanPopup.setDOMContent(cleanSpan);
8657 * cleanPopup.setBasicPoint([0.6, 0.6]);
8659 * popupComponent.add([defaultPopup, cleanPopup]);
8662 * @description Implementation of API methods and API documentation inspired
8663 * by/used from https://github.com/mapbox/mapbox-gl-js/blob/v0.38.0/src/ui/popup.js
8665 declare class Popup {
8666 protected _notifyChanged$: Subject<Popup>;
8669 private _parentContainer;
8675 private _viewportCoords;
8676 constructor(options?: PopupOptions, viewportCoords?: ViewportCoords, dom?: DOM);
8678 * @description Internal observable used by the component to
8679 * render the popup when its position or content has changed.
8682 get changed$(): Observable<Popup>;
8684 * @description Internal method used by the component to
8685 * remove all references to the popup.
8690 * Sets a 2D basic image coordinates point to the popup's anchor, and
8691 * moves the popup to it.
8693 * @description Overwrites any previously set point or rect.
8695 * @param {Array<number>} basicPoint - Point in 2D basic image coordinates.
8699 * var popup = new Popup();
8700 * popup.setText('hello image');
8701 * popup.setBasicPoint([0.3, 0.3]);
8703 * popupComponent.add([popup]);
8706 setBasicPoint(basicPoint: number[]): void;
8708 * Sets a 2D basic image coordinates rect to the popup's anchor, and
8709 * moves the popup to it.
8711 * @description Overwrites any previously set point or rect.
8713 * @param {Array<number>} basicRect - Rect in 2D basic image
8714 * coordinates ([topLeftX, topLeftY, bottomRightX, bottomRightY]) .
8718 * var popup = new Popup();
8719 * popup.setText('hello image');
8720 * popup.setBasicRect([0.3, 0.3, 0.5, 0.6]);
8722 * popupComponent.add([popup]);
8725 setBasicRect(basicRect: number[]): void;
8727 * Sets the popup's content to the element provided as a DOM node.
8729 * @param {Node} htmlNode - A DOM node to be used as content for the popup.
8733 * var div = document.createElement('div');
8734 * div.innerHTML = 'hello image';
8736 * var popup = new Popup();
8737 * popup.setDOMContent(div);
8738 * popup.setBasicPoint([0.3, 0.3]);
8740 * popupComponent.add([popup]);
8743 setDOMContent(htmlNode: Node): void;
8745 * Sets the popup's content to the HTML provided as a string.
8747 * @description This method does not perform HTML filtering or sanitization,
8748 * and must be used only with trusted content. Consider
8749 * {@link Popup.setText} if the
8750 * content is an untrusted text string.
8752 * @param {string} html - A string representing HTML content for the popup.
8756 * var popup = new Popup();
8757 * popup.setHTML('<div>hello image</div>');
8758 * popup.setBasicPoint([0.3, 0.3]);
8760 * popupComponent.add([popup]);
8763 setHTML(html: string): void;
8765 * Sets the popup's content to a string of text.
8767 * @description This function creates a Text node in the DOM, so it cannot insert raw HTML.
8768 * Use this method for security against XSS if the popup content is user-provided.
8770 * @param {string} text - Textual content for the popup.
8774 * var popup = new Popup();
8775 * popup.setText('hello image');
8776 * popup.setBasicPoint([0.3, 0.3]);
8778 * popupComponent.add([popup]);
8781 setText(text: string): void;
8783 * @description Internal method for attaching the popup to
8784 * its parent container so that it is rendered in the DOM tree.
8787 setParentContainer(parentContainer: HTMLElement): void;
8789 * @description Internal method for updating the rendered
8790 * position of the popup called by the popup component.
8793 update(renderCamera: RenderCamera, size: ViewportSize, transform: Transform): void;
8794 private _rectToPixel;
8795 private _alignmentToPopupAligment;
8796 private _normalizeOffset;
8797 private _pixelToFloats;
8798 private _pointFromRectPosition;
8802 * @class PopupComponent
8804 * @classdesc Component for showing HTML popup objects.
8806 * The `add` method is used for adding new popups. Popups are removed by reference.
8808 * It is not possible to update popups in the set by updating any properties
8809 * directly on the popup object. Popups need to be replaced by
8810 * removing them and creating new ones with relevant changed properties and
8811 * adding those instead.
8813 * Popups are only relevant to a single image because they are based on
8814 * 2D basic image coordinates. Popups related to a certain image should
8815 * be removed when the viewer is moved to another image.
8817 * To retrive and use the popup component
8821 * var viewer = new Viewer({ component: { popup: true }, ... });
8823 * var popupComponent = viewer.getComponent("popup");
8826 declare class PopupComponent extends Component<ComponentConfiguration> {
8827 static componentName: ComponentName;
8829 private _popupContainer;
8834 constructor(name: string, container: Container, navigator: Navigator, dom?: DOM);
8836 * Add popups to the popups set.
8838 * @description Adding a new popup never replaces an old one
8839 * because they are stored by reference. Adding an already
8840 * existing popup has no effect.
8842 * @param {Array<Popup>} popups - Popups to add.
8846 * popupComponent.add([popup1, popup2]);
8849 add(popups: Popup[]): void;
8851 * Returns an array of all popups.
8855 * var popups = popupComponent.getAll();
8860 * Remove popups based on reference from the popup set.
8862 * @param {Array<Popup>} popups - Popups to remove.
8866 * popupComponent.remove([popup1, popup2]);
8869 remove(popups: Popup[]): void;
8871 * Remove all popups from the popup set.
8875 * popupComponent.removeAll();
8879 protected _activate(): void;
8880 protected _deactivate(): void;
8881 protected _getDefaultConfiguration(): ComponentConfiguration;
8885 declare class SequenceDOMRenderer {
8887 private _minThresholdWidth;
8888 private _maxThresholdWidth;
8889 private _minThresholdHeight;
8890 private _maxThresholdHeight;
8891 private _stepperDefaultWidth;
8892 private _controlsDefaultWidth;
8893 private _defaultHeight;
8894 private _expandControls;
8897 private _changingSpeed;
8899 private _changingPosition;
8900 private _mouseEnterDirection$;
8901 private _mouseLeaveDirection$;
8902 private _notifyChanged$;
8903 private _notifyChangingPositionChanged$;
8904 private _notifySpeedChanged$;
8905 private _notifyIndexChanged$;
8906 private _changingSubscription;
8907 constructor(container: Container);
8908 get changed$(): Observable<SequenceDOMRenderer>;
8909 get changingPositionChanged$(): Observable<boolean>;
8910 get speed$(): Observable<number>;
8911 get index$(): Observable<number>;
8912 get mouseEnterDirection$(): Observable<NavigationDirection>;
8913 get mouseLeaveDirection$(): Observable<NavigationDirection>;
8916 render(edgeStatus: NavigationEdgeStatus, configuration: SequenceConfiguration, containerWidth: number, speed: number, index: number, max: number, playEnabled: boolean, component: SequenceComponent, navigator: Navigator): vd.VNode;
8917 getContainerWidth(size: ViewportSize, configuration: SequenceConfiguration): number;
8918 private _createPositionInput;
8919 private _createSpeedInput;
8920 private _createPlaybackControls;
8921 private _createPlayingButton;
8922 private _createSequenceControls;
8923 private _createSequenceArrows;
8924 private _createStepper;
8925 private _createTimelineControls;
8926 private _getStepClassName;
8927 private _setChangingPosition;
8931 * @class SequenceComponent
8932 * @classdesc Component showing navigation arrows for sequence directions
8933 * as well as playing button. Exposes an API to start and stop play.
8935 declare class SequenceComponent extends Component<SequenceConfiguration> {
8937 static componentName: ComponentName;
8938 private _sequenceDOMRenderer;
8940 private _hoveredIdSubject$;
8941 private _hoveredId$;
8942 private _containerWidth$;
8943 constructor(name: string, container: Container, navigator: Navigator, renderer?: SequenceDOMRenderer, scheduler?: Scheduler);
8944 fire(type: "hover", event: ComponentHoverEvent): void;
8945 fire(type: "playing", event: ComponentPlayEvent): void;
8946 off(type: "hover", handler: (event: ComponentHoverEvent) => void): void;
8947 off(type: "playing", handler: (event: ComponentPlayEvent) => void): void;
8949 * Fired when the hovered element of a component changes.
8954 * // Initialize the viewer
8955 * var viewer = new Viewer({ // viewer options });
8956 * var component = viewer.getComponent('<component-name>');
8957 * // Set an event listener
8958 * component.on('hover', function() {
8959 * console.log("A hover event has occurred.");
8963 on(type: "hover", handler: (event: ComponentHoverEvent) => void): void;
8965 * Event fired when playing starts or stops.
8970 * // Initialize the viewer
8971 * var viewer = new Viewer({ // viewer options });
8972 * var component = viewer.getComponent('<component-name>');
8973 * // Set an event listener
8974 * component.on('playing', function() {
8975 * console.log("A playing event has occurred.");
8979 on(type: "playing", handler: (event: ComponentPlayEvent) => void): void;
8992 protected _activate(): void;
8993 protected _deactivate(): void;
8994 protected _getDefaultConfiguration(): SequenceConfiguration;
8998 * @class SliderComponent
9000 * @classdesc Component for comparing pairs of images. Renders
9001 * a slider for adjusting the curtain of the first image.
9003 * Deactivate the sequence, direction and image plane
9004 * components when activating the slider component to avoid
9005 * interfering UI elements.
9007 * To retrive and use the slider component
9011 * var viewer = new Viewer({ ... });
9013 * viewer.deactivateComponent("image");
9014 * viewer.deactivateComponent("direction");
9015 * viewer.deactivateComponent("sequence");
9017 * viewer.activateComponent("slider");
9019 * var sliderComponent = viewer.getComponent("slider");
9022 declare class SliderComponent extends Component<SliderConfiguration> {
9023 static componentName: ComponentName;
9024 private _viewportCoords;
9025 private _domRenderer;
9026 private _imageTileLoader;
9027 private _roiCalculator;
9029 private _glRendererOperation$;
9030 private _glRenderer$;
9031 private _glRendererCreator$;
9032 private _glRendererDisposer$;
9033 private _waitSubscription;
9035 constructor(name: string, container: Container, navigator: Navigator, viewportCoords?: ViewportCoords);
9036 protected _activate(): void;
9037 protected _deactivate(): void;
9038 protected _getDefaultConfiguration(): SliderConfiguration;
9039 private _catchCacheImage$;
9040 private _getBasicCorners;
9041 private _clipBoundingBox;
9044 declare class SpatialComponent extends Component<SpatialConfiguration> {
9045 static componentName: ComponentName;
9048 private _viewportCoords;
9051 constructor(name: string, container: Container, navigator: Navigator);
9053 * Returns the image id of the camera frame closest to the current
9054 * render camera position at the specified point.
9056 * @description Notice that the pixelPoint argument requires x, y
9057 * coordinates from pixel space.
9059 * With this function, you can use the coordinates provided by mouse
9060 * events to get information out of the spatial component.
9062 * If no camera frame exist at the pixel
9063 * point, `null` will be returned.
9065 * @param {Array<number>} pixelPoint - Pixel coordinates on
9066 * the viewer element.
9067 * @returns {string} Image id of the camera frame closest to
9068 * the camera. If no camera frame is intersected at the
9069 * pixel point, `null` will be returned.
9073 * spatialComponent.getFrameIdAt([100, 125])
9074 * .then((imageId) => { console.log(imageId); });
9077 getFrameIdAt(pixelPoint: number[]): Promise<string>;
9078 protected _activate(): void;
9079 protected _deactivate(): void;
9080 protected _getDefaultConfiguration(): SpatialConfiguration;
9081 private _addSceneImages;
9082 private _cellsInFov;
9083 private _computeOriginalPosition;
9084 private _cellToTopocentric;
9085 private _computeTranslation;
9086 private _createTransform;
9089 declare class GeometryTagError extends MapillaryError {
9090 constructor(message?: string);
9094 * @class PointGeometry
9096 * @classdesc Represents a point geometry in the 2D basic image coordinate system.
9100 * var basicPoint = [0.5, 0.7];
9101 * var pointGeometry = new PointGeometry(basicPoint);
9104 declare class PointGeometry extends Geometry {
9107 * Create a point geometry.
9110 * @param {Array<number>} point - An array representing the basic coordinates of
9113 * @throws {GeometryTagError} Point coordinates must be valid basic coordinates.
9115 constructor(point: number[]);
9117 * Get point property.
9118 * @returns {Array<number>} Array representing the basic coordinates of the point.
9120 get point(): number[];
9122 * Get the 2D basic coordinates for the centroid of the point, i.e. the 2D
9123 * basic coordinates of the point itself.
9125 * @returns {Array<number>} 2D basic coordinates representing the centroid.
9128 getCentroid2d(): number[];
9130 * Get the 3D world coordinates for the centroid of the point, i.e. the 3D
9131 * world coordinates of the point itself.
9133 * @param {Transform} transform - The transform of the image related to the point.
9134 * @returns {Array<number>} 3D world coordinates representing the centroid.
9137 getCentroid3d(transform: Transform): number[];
9139 * Set the centroid of the point, i.e. the point coordinates.
9141 * @param {Array<number>} value - The new value of the centroid.
9142 * @param {Transform} transform - The transform of the image related to the point.
9145 setCentroid2d(value: number[], transform: Transform): void;
9149 * @class PointsGeometry
9151 * @classdesc Represents a point set in the 2D basic image coordinate system.
9155 * var points = [[0.5, 0.3], [0.7, 0.3], [0.6, 0.5]];
9156 * var pointsGeometry = new PointsGeometry(points);
9159 declare class PointsGeometry extends Geometry {
9162 * Create a points geometry.
9165 * @param {Array<Array<number>>} points - Array of 2D points on the basic coordinate
9166 * system. The number of points must be greater than or equal to two.
9168 * @throws {GeometryTagError} Point coordinates must be valid basic coordinates.
9170 constructor(points: number[][]);
9172 * Get points property.
9173 * @returns {Array<Array<number>>} Array of 2d points.
9175 get points(): number[][];
9177 * Add a point to the point set.
9179 * @param {Array<number>} point - Point to add.
9182 addPoint2d(point: number[]): void;
9184 * Get the coordinates of a point from the point set representation of the geometry.
9186 * @param {number} index - Point index.
9187 * @returns {Array<number>} Array representing the 2D basic coordinates of the point.
9190 getPoint2d(index: number): number[];
9192 * Remove a point from the point set.
9194 * @param {number} index - The index of the point to remove.
9197 removePoint2d(index: number): void;
9199 setVertex2d(index: number, value: number[], transform: Transform): void;
9201 setPoint2d(index: number, value: number[], transform: Transform): void;
9203 getPoints3d(transform: Transform): number[][];
9205 getPoint3d(index: number, transform: Transform): number[];
9207 getPoints2d(): number[][];
9209 getCentroid2d(transform?: Transform): number[];
9211 getCentroid3d(transform: Transform): number[];
9213 getRect2d(transform: Transform): number[];
9215 setCentroid2d(value: number[], transform: Transform): void;
9216 private _getPoints3d;
9220 * @class VertexGeometry
9222 * @classdesc Represents a vertex geometry.
9224 declare abstract class VertexGeometry extends Geometry {
9225 private _subsampleThreshold;
9227 * Create a vertex geometry.
9234 * Get the 3D coordinates for the vertices of the geometry with possibly
9235 * subsampled points along the lines.
9237 * @param {Transform} transform - The transform of the image related to
9239 * @returns {Array<Array<number>>} Polygon array of 3D world coordinates
9240 * representing the geometry.
9243 abstract getPoints3d(transform: Transform): number[][];
9245 * Get the polygon pole of inaccessibility, the most
9246 * distant internal point from the polygon outline.
9248 * @returns {Array<number>} 2D basic coordinates for the pole of inaccessibility.
9251 abstract getPoleOfInaccessibility2d(): number[];
9253 * Get the polygon pole of inaccessibility, the most
9254 * distant internal point from the polygon outline.
9256 * @param transform - The transform of the image related to
9258 * @returns {Array<number>} 3D world coordinates for the pole of inaccessibility.
9261 abstract getPoleOfInaccessibility3d(transform: Transform): number[];
9263 * Get the coordinates of a vertex from the polygon representation of the geometry.
9265 * @param {number} index - Vertex index.
9266 * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
9269 abstract getVertex2d(index: number): number[];
9271 * Get a vertex from the polygon representation of the 3D coordinates for the
9272 * vertices of the geometry.
9274 * @param {number} index - Vertex index.
9275 * @param {Transform} transform - The transform of the image related to the geometry.
9276 * @returns {Array<number>} Array representing the 3D world coordinates of the vertex.
9279 abstract getVertex3d(index: number, transform: Transform): number[];
9281 * Get a polygon representation of the 2D basic coordinates for the vertices of the geometry.
9283 * @returns {Array<Array<number>>} Polygon array of 2D basic coordinates representing
9284 * the vertices of the geometry.
9287 abstract getVertices2d(): number[][];
9289 * Get a polygon representation of the 3D world coordinates for the vertices of the geometry.
9291 * @param {Transform} transform - The transform of the image related to the geometry.
9292 * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
9293 * the vertices of the geometry.
9296 abstract getVertices3d(transform: Transform): number[][];
9298 * Get a flattend array of the 3D world coordinates for the
9299 * triangles filling the geometry.
9301 * @param {Transform} transform - The transform of the image related to the geometry.
9302 * @returns {Array<number>} Flattened array of 3D world coordinates of the triangles.
9305 abstract getTriangles3d(transform: Transform): number[];
9307 * Set the value of a vertex in the polygon representation of the geometry.
9309 * @description The polygon is defined to have the first vertex at the
9310 * bottom-left corner with the rest of the vertices following in clockwise order.
9312 * @param {number} index - The index of the vertex to be set.
9313 * @param {Array<number>} value - The new value of the vertex.
9314 * @param {Transform} transform - The transform of the image related to the geometry.
9317 abstract setVertex2d(index: number, value: number[], transform: Transform): void;
9319 * Finds the polygon pole of inaccessibility, the most distant internal
9320 * point from the polygon outline.
9322 * @param {Array<Array<number>>} points2d - 2d points of outline to triangulate.
9323 * @returns {Array<number>} Point of inaccessibility.
9326 protected _getPoleOfInaccessibility2d(points2d: number[][]): number[];
9327 protected _project(points2d: number[][], transform: Transform): number[][];
9328 protected _subsample(points2d: number[][], threshold?: number): number[][];
9330 * Triangulates a 2d polygon and returns the triangle
9331 * representation as a flattened array of 3d points.
9333 * @param {Array<Array<number>>} points2d - 2d points of outline to triangulate.
9334 * @param {Array<Array<number>>} points3d - 3d points of outline corresponding to the 2d points.
9335 * @param {Array<Array<Array<number>>>} [holes2d] - 2d points of holes to triangulate.
9336 * @param {Array<Array<Array<number>>>} [holes3d] - 3d points of holes corresponding to the 2d points.
9337 * @returns {Array<number>} Flattened array of 3d points ordered based on the triangles.
9340 protected _triangulate(points2d: number[][], points3d: number[][], holes2d?: number[][][], holes3d?: number[][][]): number[];
9341 protected _triangulateSpherical(points2d: number[][], holes2d: number[][][], transform: Transform): number[];
9342 protected _unproject(points2d: number[][], transform: Transform, distance?: number): number[][];
9343 private _createCamera;
9344 private _deunproject;
9345 private _triangulateSubarea;
9349 * @class PolygonGeometry
9351 * @classdesc Represents a polygon geometry in the 2D basic image coordinate system.
9352 * All polygons and holes provided to the constructor needs to be closed.
9356 * var basicPolygon = [[0.5, 0.3], [0.7, 0.3], [0.6, 0.5], [0.5, 0.3]];
9357 * var polygonGeometry = new PolygonGeometry(basicPolygon);
9360 declare class PolygonGeometry extends VertexGeometry {
9364 * Create a polygon geometry.
9367 * @param {Array<Array<number>>} polygon - Array of polygon vertices. Must be closed.
9368 * @param {Array<Array<Array<number>>>} [holes] - Array of arrays of hole vertices.
9369 * Each array of holes vertices must be closed.
9371 * @throws {GeometryTagError} Polygon coordinates must be valid basic coordinates.
9373 constructor(polygon: number[][], holes?: number[][][]);
9375 * Get polygon property.
9376 * @returns {Array<Array<number>>} Closed 2d polygon.
9378 get polygon(): number[][];
9380 * Get holes property.
9381 * @returns {Array<Array<Array<number>>>} Holes of 2d polygon.
9383 get holes(): number[][][];
9385 * Add a vertex to the polygon by appending it after the last vertex.
9387 * @param {Array<number>} vertex - Vertex to add.
9390 addVertex2d(vertex: number[]): void;
9392 * Get the coordinates of a vertex from the polygon representation of the geometry.
9394 * @param {number} index - Vertex index.
9395 * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
9398 getVertex2d(index: number): number[];
9400 * Remove a vertex from the polygon.
9402 * @param {number} index - The index of the vertex to remove.
9405 removeVertex2d(index: number): void;
9407 setVertex2d(index: number, value: number[], transform: Transform): void;
9409 setCentroid2d(value: number[], transform: Transform): void;
9411 getPoints3d(transform: Transform): number[][];
9413 getVertex3d(index: number, transform: Transform): number[];
9415 getVertices2d(): number[][];
9417 getVertices3d(transform: Transform): number[][];
9419 * Get a polygon representation of the 3D coordinates for the vertices of each hole
9420 * of the geometry. Line segments between vertices will possibly be subsampled
9421 * resulting in a larger number of points than the total number of vertices.
9423 * @param {Transform} transform - The transform of the image related to the geometry.
9424 * @returns {Array<Array<Array<number>>>} Array of hole polygons in 3D world coordinates
9425 * representing the vertices of each hole of the geometry.
9428 getHolePoints3d(transform: Transform): number[][][];
9430 * Get a polygon representation of the 3D coordinates for the vertices of each hole
9433 * @param {Transform} transform - The transform of the image related to the geometry.
9434 * @returns {Array<Array<Array<number>>>} Array of hole polygons in 3D world coordinates
9435 * representing the vertices of each hole of the geometry.
9438 getHoleVertices3d(transform: Transform): number[][][];
9440 getCentroid2d(): number[];
9442 getCentroid3d(transform: Transform): number[];
9444 get3dDomainTriangles3d(transform: Transform): number[];
9446 getTriangles3d(transform: Transform): number[];
9448 getPoleOfInaccessibility2d(): number[];
9450 getPoleOfInaccessibility3d(transform: Transform): number[];
9451 private _getPoints3d;
9455 * @class RectGeometry
9457 * @classdesc Represents a rectangle geometry in the 2D basic image coordinate system.
9461 * var basicRect = [0.5, 0.3, 0.7, 0.4];
9462 * var rectGeometry = new RectGeometry(basicRect);
9465 declare class RectGeometry extends VertexGeometry {
9466 private _anchorIndex;
9470 * Create a rectangle geometry.
9473 * @param {Array<number>} rect - An array representing the top-left and bottom-right
9474 * corners of the rectangle in basic coordinates. Ordered according to [x0, y0, x1, y1].
9476 * @throws {GeometryTagError} Rectangle coordinates must be valid basic coordinates.
9478 constructor(rect: number[]);
9480 * Get anchor index property.
9482 * @returns {number} Index representing the current anchor property if
9483 * achoring indexing has been initialized. If anchor indexing has not been
9484 * initialized or has been terminated undefined will be returned.
9487 get anchorIndex(): number;
9489 * Get inverted property.
9491 * @returns {boolean} Boolean determining whether the rect geometry is
9492 * inverted. For spherical the rect geometrye may be inverted.
9495 get inverted(): boolean;
9497 * Get rect property.
9499 * @returns {Array<number>} Array representing the top-left and bottom-right
9500 * corners of the rectangle in basic coordinates.
9502 get rect(): number[];
9504 * Initialize anchor indexing to enable setting opposite vertex.
9506 * @param {number} [index] - The index of the vertex to use as anchor.
9508 * @throws {GeometryTagError} If anchor indexing has already been initialized.
9509 * @throws {GeometryTagError} If index is not valid (0 to 3).
9512 initializeAnchorIndexing(index?: number): void;
9514 * Terminate anchor indexing to disable setting pposite vertex.
9517 terminateAnchorIndexing(): void;
9519 * Set the value of the vertex opposite to the anchor in the polygon
9520 * representation of the rectangle.
9522 * @description Setting the opposite vertex may change the anchor index.
9524 * @param {Array<number>} opposite - The new value of the vertex opposite to the anchor.
9525 * @param {Transform} transform - The transform of the image related to the rectangle.
9527 * @throws {GeometryTagError} When anchor indexing has not been initialized.
9530 setOppositeVertex2d(opposite: number[], transform: Transform): void;
9532 * Set the value of a vertex in the polygon representation of the rectangle.
9534 * @description The polygon is defined to have the first vertex at the
9535 * bottom-left corner with the rest of the vertices following in clockwise order.
9537 * @param {number} index - The index of the vertex to be set.
9538 * @param {Array<number>} value - The new value of the vertex.
9539 * @param {Transform} transform - The transform of the image related to the rectangle.
9542 setVertex2d(index: number, value: number[], transform: Transform): void;
9544 setCentroid2d(value: number[], transform: Transform): void;
9546 * Get the 3D coordinates for the vertices of the rectangle with
9547 * interpolated points along the lines.
9549 * @param {Transform} transform - The transform of the image related to
9551 * @returns {Array<Array<number>>} Polygon array of 3D world coordinates
9552 * representing the rectangle.
9555 getPoints3d(transform: Transform): number[][];
9557 * Get the coordinates of a vertex from the polygon representation of the geometry.
9559 * @description The first vertex represents the bottom-left corner with the rest of
9560 * the vertices following in clockwise order. The method shifts the right side
9561 * coordinates of the rectangle by one unit to ensure that the vertices are ordered
9564 * @param {number} index - Vertex index.
9565 * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
9568 getVertex2d(index: number): number[];
9570 * Get the coordinates of a vertex from the polygon representation of the geometry.
9572 * @description The first vertex represents the bottom-left corner with the rest of
9573 * the vertices following in clockwise order. The coordinates will not be shifted
9574 * so they may not appear in clockwise order when layed out on the plane.
9576 * @param {number} index - Vertex index.
9577 * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
9580 getNonAdjustedVertex2d(index: number): number[];
9582 * Get a vertex from the polygon representation of the 3D coordinates for the
9583 * vertices of the geometry.
9585 * @description The first vertex represents the bottom-left corner with the rest of
9586 * the vertices following in clockwise order.
9588 * @param {number} index - Vertex index.
9589 * @param {Transform} transform - The transform of the image related to the geometry.
9590 * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
9591 * the vertices of the geometry.
9594 getVertex3d(index: number, transform: Transform): number[];
9596 * Get a polygon representation of the 2D basic coordinates for the vertices of the rectangle.
9598 * @description The first vertex represents the bottom-left corner with the rest of
9599 * the vertices following in clockwise order.
9601 * @returns {Array<Array<number>>} Polygon array of 2D basic coordinates representing
9602 * the rectangle vertices.
9605 getVertices2d(): number[][];
9607 * Get a polygon representation of the 3D coordinates for the vertices of the rectangle.
9609 * @description The first vertex represents the bottom-left corner with the rest of
9610 * the vertices following in clockwise order.
9612 * @param {Transform} transform - The transform of the image related to the rectangle.
9613 * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
9614 * the rectangle vertices.
9617 getVertices3d(transform: Transform): number[][];
9619 getCentroid2d(): number[];
9621 getCentroid3d(transform: Transform): number[];
9625 getPoleOfInaccessibility2d(): number[];
9627 getPoleOfInaccessibility3d(transform: Transform): number[];
9629 getTriangles3d(transform: Transform): number[];
9631 * Check if a particular bottom-right value is valid according to the current
9632 * rectangle coordinates.
9634 * @param {Array<number>} bottomRight - The bottom-right coordinates to validate
9635 * @returns {boolean} Value indicating whether the provided bottom-right coordinates
9639 validate(bottomRight: number[]): boolean;
9641 * Get the 2D coordinates for the vertices of the rectangle with
9642 * interpolated points along the lines.
9644 * @returns {Array<Array<number>>} Polygon array of 2D basic coordinates
9645 * representing the rectangle.
9647 private _getPoints2d;
9649 * Convert the top-left, bottom-right representation of a rectangle to a polygon
9650 * representation of the vertices starting at the bottom-left corner going
9653 * @description The method shifts the right side coordinates of the rectangle
9654 * by one unit to ensure that the vertices are ordered clockwise.
9656 * @param {Array<number>} rect - Top-left, bottom-right representation of a
9658 * @returns {Array<Array<number>>} Polygon representation of the vertices of the
9661 private _rectToVertices2d;
9663 * Convert the top-left, bottom-right representation of a rectangle to a polygon
9664 * representation of the vertices starting at the bottom-left corner going
9667 * @description The first vertex represents the bottom-left corner with the rest of
9668 * the vertices following in clockwise order. The coordinates will not be shifted
9669 * to ensure that the vertices are ordered clockwise when layed out on the plane.
9671 * @param {Array<number>} rect - Top-left, bottom-right representation of a
9673 * @returns {Array<Array<number>>} Polygon representation of the vertices of the
9676 private _rectToNonAdjustedVertices2d;
9682 declare type TagEventType = "click" | "geometry" | "tag";
9685 * Interface for tag state events.
9689 * var tag = new OutlineTag({ // tag options });
9690 * // Set an event listener
9691 * tag.on('tag', function() {
9692 * console.log("A tag event has occurred.");
9696 interface TagStateEvent {
9698 * The component object that fired the event.
9710 * @classdesc Abstract class representing the basic functionality of for a tag.
9712 declare abstract class Tag extends EventEmitter {
9713 protected _id: string;
9714 protected _geometry: Geometry;
9715 protected _notifyChanged$: Subject<Tag>;
9720 * @param {string} id
9721 * @param {Geometry} geometry
9723 constructor(id: string, geometry: Geometry);
9730 * Get geometry property.
9731 * @returns {Geometry} The geometry of the tag.
9733 get geometry(): Geometry;
9735 * Get changed observable.
9736 * @returns {Observable<Tag>}
9739 get changed$(): Observable<Tag>;
9741 * Get geometry changed observable.
9742 * @returns {Observable<Tag>}
9745 get geometryChanged$(): Observable<Tag>;
9746 fire(type: "tag" | "geometry", event: TagStateEvent): void;
9748 fire(type: TagEventType, event: TagStateEvent): void;
9749 off(type: "tag" | "geometry", handler: (event: TagStateEvent) => void): void;
9751 off(type: TagEventType, handler: (event: TagStateEvent) => void): void;
9753 * Event fired when the geometry of the tag has changed.
9758 * var tag = new OutlineTag({ // tag options });
9759 * // Set an event listener
9760 * tag.on('geometry', function() {
9761 * console.log("A geometry event has occurred.");
9765 on(type: "geometry", handler: (event: TagStateEvent) => void): void;
9767 * Event fired when a tag has been updated.
9772 * var tag = new OutlineTag({ // tag options });
9773 * // Set an event listener
9774 * tag.on('tag', function() {
9775 * console.log("A tag event has occurred.");
9779 on(type: "tag", handler: (event: TagStateEvent) => void): void;
9781 on(type: TagEventType, handler: (event: TagStateEvent) => void): void;
9785 * Interface for the options that define the behavior and
9786 * appearance of the outline tag.
9790 interface ExtremePointTagOptions {
9792 * Indicate whether the tag geometry should be editable.
9794 * @description Polygon tags with two dimensional domain
9795 * are never editable.
9801 * Color for the interior fill as a hexadecimal number.
9806 * Opacity of the interior fill between 0 and 1.
9809 fillOpacity?: number;
9811 * Determines whether vertices should be indicated by points
9812 * when tag is editable.
9816 indicateVertices?: boolean;
9818 * Color for the edge lines as a hexadecimal number.
9823 * Opacity of the edge lines on [0, 1].
9826 lineOpacity?: number;
9828 * Line width in pixels.
9835 * @class ExtremePointTag
9837 * @classdesc Tag holding properties for visualizing a extreme points
9838 * and their outline.
9842 * var geometry = new PointsGeometry([[0.3, 0.3], [0.5, 0.4]]);
9843 * var tag = new ExtremePointTag(
9846 * { editable: true, lineColor: 0xff0000 });
9848 * tagComponent.add([tag]);
9851 declare class ExtremePointTag extends Tag {
9852 protected _geometry: PointsGeometry;
9854 private _indicateVertices;
9856 private _lineOpacity;
9859 private _fillOpacity;
9861 * Create an extreme point tag.
9865 * @param {string} id - Unique identifier of the tag.
9866 * @param {PointsGeometry} geometry - Geometry defining points of tag.
9867 * @param {ExtremePointTagOptions} options - Options defining the visual appearance and
9868 * behavior of the extreme point tag.
9870 constructor(id: string, geometry: PointsGeometry, options?: ExtremePointTagOptions);
9872 * Get editable property.
9873 * @returns {boolean} Value indicating if tag is editable.
9875 get editable(): boolean;
9877 * Set editable property.
9882 set editable(value: boolean);
9884 * Get fill color property.
9887 get fillColor(): number;
9889 * Set fill color property.
9894 set fillColor(value: number);
9896 * Get fill opacity property.
9899 get fillOpacity(): number;
9901 * Set fill opacity property.
9906 set fillOpacity(value: number);
9908 get geometry(): PointsGeometry;
9910 * Get indicate vertices property.
9911 * @returns {boolean} Value indicating if vertices should be indicated
9912 * when tag is editable.
9914 get indicateVertices(): boolean;
9916 * Set indicate vertices property.
9921 set indicateVertices(value: boolean);
9923 * Get line color property.
9926 get lineColor(): number;
9928 * Set line color property.
9933 set lineColor(value: number);
9935 * Get line opacity property.
9938 get lineOpacity(): number;
9940 * Set line opacity property.
9945 set lineOpacity(value: number);
9947 * Get line width property.
9950 get lineWidth(): number;
9952 * Set line width property.
9957 set lineWidth(value: number);
9959 * Set options for tag.
9961 * @description Sets all the option properties provided and keeps
9962 * the rest of the values as is.
9964 * @param {ExtremePointTagOptions} options - Extreme point tag options
9968 setOptions(options: ExtremePointTagOptions): void;
9972 * Enumeration for tag domains.
9975 * @description Defines where lines between two vertices are treated
9978 * Only applicable for polygons. For rectangles lines between
9979 * vertices are always treated as straight in the distorted 2D
9980 * projection and bended in the undistorted 3D space.
9982 declare enum TagDomain {
9984 * Treats lines between two vertices as straight in the
9985 * distorted 2D projection, i.e. on the image. If the image
9986 * is distorted this will result in bended lines when rendered
9987 * in the undistorted 3D space.
9991 * Treats lines as straight in the undistorted 3D space. If the
9992 * image is distorted this will result in bended lines when rendered
9993 * on the distorted 2D projection of the image.
9995 ThreeDimensional = 1
9999 * Interface for the options that define the behavior and
10000 * appearance of the outline tag.
10004 interface OutlineTagOptions {
10006 * The domain where lines between vertices are treated as straight.
10008 * @description Only applicable for tags that renders polygons.
10010 * If the domain is specified as two dimensional, editing of the
10011 * polygon will be disabled.
10013 * @default {TagDomain.TwoDimensional}
10015 domain?: TagDomain;
10017 * Indicate whether the tag geometry should be editable.
10019 * @description Polygon tags with two dimensional domain
10020 * are never editable.
10024 editable?: boolean;
10026 * Color for the interior fill as a hexadecimal number.
10027 * @default 0xFFFFFF
10029 fillColor?: number;
10031 * Opacity of the interior fill between 0 and 1.
10034 fillOpacity?: number;
10036 * A string referencing the sprite data property to pull from.
10038 * @description Icon is not shown for tags with polygon
10039 * geometries in spherical.
10043 * Value determining how the icon will float with respect to its anchor
10044 * position when rendering.
10046 * @default {Alignment.Center}
10048 iconFloat?: Alignment;
10050 * Number representing the index for where to show the icon or
10051 * text for a rectangle geometry.
10053 * @description The default index corresponds to the bottom right corner.
10057 iconIndex?: number;
10059 * Determines whether vertices should be indicated by points
10060 * when tag is editable.
10064 indicateVertices?: boolean;
10066 * Color for the edge lines as a hexadecimal number.
10067 * @default 0xFFFFFF
10069 lineColor?: number;
10071 * Opacity of the edge lines on [0, 1].
10074 lineOpacity?: number;
10076 * Line width in pixels.
10079 lineWidth?: number;
10081 * Text shown as label if no icon is provided.
10083 * @description Text is not shown for tags with
10084 * polygon geometries in spherical.
10088 * Text color as hexadecimal number.
10089 * @default 0xFFFFFF
10091 textColor?: number;
10095 * Interface for the options that define the behavior and
10096 * appearance of the spot tag.
10100 interface SpotTagOptions {
10102 * Color for the spot specified as a hexadecimal number.
10103 * @default 0xFFFFFF
10107 * Indicate whether the tag geometry should be editable.
10110 editable?: boolean;
10112 * A string referencing the sprite data property to pull from.
10116 * Text shown as label if no icon is provided.
10120 * Text color as hexadecimal number.
10121 * @default 0xFFFFFF
10123 textColor?: number;
10127 * @class OutlineTag
10129 * @classdesc Tag holding properties for visualizing a geometry outline.
10133 * var geometry = new RectGeometry([0.3, 0.3, 0.5, 0.4]);
10134 * var tag = new OutlineTag(
10137 * { editable: true, lineColor: 0xff0000 });
10139 * tagComponent.add([tag]);
10142 declare class OutlineTag extends Tag {
10143 protected _geometry: VertexGeometry;
10147 private _iconFloat;
10148 private _iconIndex;
10149 private _indicateVertices;
10150 private _lineColor;
10151 private _lineOpacity;
10152 private _lineWidth;
10153 private _fillColor;
10154 private _fillOpacity;
10156 private _textColor;
10159 * Create an outline tag.
10163 * @param {string} id - Unique identifier of the tag.
10164 * @param {VertexGeometry} geometry - Geometry defining vertices of tag.
10165 * @param {OutlineTagOptions} options - Options defining the visual appearance and
10166 * behavior of the outline tag.
10168 constructor(id: string, geometry: VertexGeometry, options?: OutlineTagOptions);
10170 * Click observable.
10172 * @description An observable emitting the tag when the icon of the
10173 * tag has been clicked.
10175 * @returns {Observable<Tag>}
10177 get click$(): Subject<OutlineTag>;
10179 * Get domain property.
10181 * @description Readonly property that can only be set in constructor.
10183 * @returns Value indicating the domain of the tag.
10185 get domain(): TagDomain;
10187 * Get editable property.
10188 * @returns {boolean} Value indicating if tag is editable.
10190 get editable(): boolean;
10192 * Set editable property.
10197 set editable(value: boolean);
10199 * Get fill color property.
10200 * @returns {number}
10202 get fillColor(): number;
10204 * Set fill color property.
10209 set fillColor(value: number);
10211 * Get fill opacity property.
10212 * @returns {number}
10214 get fillOpacity(): number;
10216 * Set fill opacity property.
10221 set fillOpacity(value: number);
10223 get geometry(): VertexGeometry;
10225 * Get icon property.
10226 * @returns {string}
10228 get icon(): string;
10230 * Set icon property.
10235 set icon(value: string);
10237 * Get icon float property.
10238 * @returns {Alignment}
10240 get iconFloat(): Alignment;
10242 * Set icon float property.
10243 * @param {Alignment}
10247 set iconFloat(value: Alignment);
10249 * Get icon index property.
10250 * @returns {number}
10252 get iconIndex(): number;
10254 * Set icon index property.
10259 set iconIndex(value: number);
10261 * Get indicate vertices property.
10262 * @returns {boolean} Value indicating if vertices should be indicated
10263 * when tag is editable.
10265 get indicateVertices(): boolean;
10267 * Set indicate vertices property.
10272 set indicateVertices(value: boolean);
10274 * Get line color property.
10275 * @returns {number}
10277 get lineColor(): number;
10279 * Set line color property.
10284 set lineColor(value: number);
10286 * Get line opacity property.
10287 * @returns {number}
10289 get lineOpacity(): number;
10291 * Set line opacity property.
10296 set lineOpacity(value: number);
10298 * Get line width property.
10299 * @returns {number}
10301 get lineWidth(): number;
10303 * Set line width property.
10308 set lineWidth(value: number);
10310 * Get text property.
10311 * @returns {string}
10313 get text(): string;
10315 * Set text property.
10320 set text(value: string);
10322 * Get text color property.
10323 * @returns {number}
10325 get textColor(): number;
10327 * Set text color property.
10332 set textColor(value: number);
10333 fire(type: TagStateEvent["type"], event: TagStateEvent): void;
10335 fire(type: TagEventType, event: TagStateEvent): void;
10336 off(type: TagStateEvent["type"], handler: (event: TagStateEvent) => void): void;
10338 off(type: TagEventType, handler: (event: TagStateEvent) => void): void;
10340 * Event fired when the icon of the outline tag is clicked.
10345 * var tag = new OutlineTag({ // tag options });
10346 * // Set an event listener
10347 * tag.on('click', function() {
10348 * console.log("A click event has occurred.");
10352 on(type: "click", handler: (event: TagStateEvent) => void): void;
10354 * Event fired when the geometry of the tag has changed.
10359 * var tag = new OutlineTag({ // tag options });
10360 * // Set an event listener
10361 * tag.on('geometry', function() {
10362 * console.log("A geometry event has occurred.");
10366 on(type: "geometry", handler: (event: TagStateEvent) => void): void;
10368 * Event fired when a tag has been updated.
10373 * var tag = new OutlineTag({ // tag options });
10374 * // Set an event listener
10375 * tag.on('tag', function() {
10376 * console.log("A tag event has occurred.");
10380 on(type: "tag", handler: (event: TagStateEvent) => void): void;
10382 * Set options for tag.
10384 * @description Sets all the option properties provided and keeps
10385 * the rest of the values as is.
10387 * @param {OutlineTagOptions} options - Outline tag options
10391 setOptions(options: OutlineTagOptions): void;
10392 private _twoDimensionalPolygon;
10398 * @classdesc Tag holding properties for visualizing the centroid of a geometry.
10402 * var geometry = new PointGeometry([0.3, 0.3]);
10403 * var tag = new SpotTag(
10406 * { editable: true, color: 0xff0000 });
10408 * tagComponent.add([tag]);
10411 declare class SpotTag extends Tag {
10412 protected _geometry: Geometry;
10417 private _textColor;
10419 * Create a spot tag.
10423 * @param {string} id
10424 * @param {Geometry} geometry
10425 * @param {IOutlineTagOptions} options - Options defining the visual appearance and
10426 * behavior of the spot tag.
10428 constructor(id: string, geometry: Geometry, options?: SpotTagOptions);
10430 * Get color property.
10431 * @returns {number} The color of the spot as a hexagonal number;
10433 get color(): number;
10435 * Set color property.
10440 set color(value: number);
10442 * Get editable property.
10443 * @returns {boolean} Value indicating if tag is editable.
10445 get editable(): boolean;
10447 * Set editable property.
10452 set editable(value: boolean);
10454 * Get icon property.
10455 * @returns {string}
10457 get icon(): string;
10459 * Set icon property.
10464 set icon(value: string);
10466 * Get text property.
10467 * @returns {string}
10469 get text(): string;
10471 * Set text property.
10476 set text(value: string);
10478 * Get text color property.
10479 * @returns {number}
10481 get textColor(): number;
10483 * Set text color property.
10488 set textColor(value: number);
10490 * Set options for tag.
10492 * @description Sets all the option properties provided and keps
10493 * the rest of the values as is.
10495 * @param {SpotTagOptions} options - Spot tag options
10499 setOptions(options: SpotTagOptions): void;
10503 * @class TagComponent
10505 * @classdesc Component for showing and editing tags with different
10506 * geometries composed from 2D basic image coordinates (see the
10507 * {@link Viewer} class documentation for more information about coordinate
10510 * The `add` method is used for adding new tags or replacing
10511 * tags already in the set. Tags are removed by id.
10513 * If a tag already in the set has the same
10514 * id as one of the tags added, the old tag will be removed and
10515 * the added tag will take its place.
10517 * The tag component mode can be set to either be non interactive or
10518 * to be in creating mode of a certain geometry type.
10520 * The tag properties can be updated at any time and the change will
10521 * be visibile immediately.
10523 * Tags are only relevant to a single image because they are based on
10524 * 2D basic image coordinates. Tags related to a certain image should
10525 * be removed when the viewer is moved to another image.
10527 * To retrive and use the tag component
10531 * var viewer = new Viewer({ component: { tag: true } }, ...);
10533 * var tagComponent = viewer.getComponent("tag");
10536 declare class TagComponent extends Component<TagConfiguration> {
10538 static componentName: ComponentName;
10539 private _tagDomRenderer;
10542 private _tagCreator;
10543 private _viewportCoords;
10544 private _renderTags$;
10545 private _tagChanged$;
10546 private _renderTagGLChanged$;
10547 private _createGeometryChanged$;
10548 private _createGLObjectsChanged$;
10549 private _creatingConfiguration$;
10550 private _createHandlers;
10551 private _editVertexHandler;
10553 constructor(name: string, container: Container, navigator: Navigator);
10555 * Add tags to the tag set or replace tags in the tag set.
10557 * @description If a tag already in the set has the same
10558 * id as one of the tags added, the old tag will be removed
10559 * the added tag will take its place.
10561 * @param {Array<Tag>} tags - Tags to add.
10565 * tagComponent.add([tag1, tag2]);
10568 add(tags: Tag[]): void;
10570 * Calculate the smallest rectangle containing all the points
10571 * in the points geometry.
10573 * @description The result may be different depending on if the
10574 * current image is an spherical or not. If the
10575 * current image is an spherical the rectangle may
10576 * wrap the horizontal border of the image.
10578 * @returns {Promise<Array<number>>} Promise to the rectangle
10579 * on the format specified for the {@link RectGeometry} in basic
10582 calculateRect(geometry: PointsGeometry): Promise<number[]>;
10584 * Force the creation of a geometry programatically using its
10585 * current vertices.
10587 * @description The method only has an effect when the tag
10588 * mode is either of the following modes:
10590 * {@link TagMode.CreatePoints}
10591 * {@link TagMode.CreatePolygon}
10592 * {@link TagMode.CreateRect}
10593 * {@link TagMode.CreateRectDrag}
10595 * In the case of points or polygon creation, only the created
10596 * vertices are used, i.e. the mouse position is disregarded.
10598 * In the case of rectangle creation the position of the mouse
10599 * at the time of the method call is used as one of the vertices
10600 * defining the rectangle.
10602 * @fires geometrycreate
10606 * tagComponent.on("geometrycreate", function(geometry) {
10607 * console.log(geometry);
10610 * tagComponent.create();
10615 * Change the current tag mode.
10617 * @description Change the tag mode to one of the create modes for creating new geometries.
10619 * @param {TagMode} mode - New tag mode.
10625 * tagComponent.changeMode(TagMode.CreateRect);
10628 changeMode(mode: TagMode): void;
10629 fire(type: "geometrycreate", event: ComponentGeometryEvent): void;
10630 fire(type: "tagmode", event: ComponentTagModeEvent): void;
10632 fire(type: "tagcreateend" | "tagcreatestart" | "tags", event: ComponentStateEvent): void;
10634 * Returns the tag in the tag set with the specified id, or
10635 * undefined if the id matches no tag.
10637 * @param {string} tagId - Id of the tag.
10641 * var tag = tagComponent.get("tagId");
10644 get(tagId: string): Tag;
10646 * Returns an array of all tags.
10650 * var tags = tagComponent.getAll();
10655 * Returns an array of tag ids for tags that contain the specified point.
10657 * @description The pixel point must lie inside the polygon or rectangle
10658 * of an added tag for the tag id to be returned. Tag ids for
10659 * tags that do not have a fill will also be returned if the point is inside
10660 * the geometry of the tag. Tags with point geometries can not be retrieved.
10662 * No tag ids will be returned for polygons rendered in cropped spherical or
10663 * rectangles rendered in spherical.
10665 * Notice that the pixelPoint argument requires x, y coordinates from pixel space.
10667 * With this function, you can use the coordinates provided by mouse
10668 * events to get information out of the tag component.
10670 * If no tag at exist the pixel point, an empty array will be returned.
10672 * @param {Array<number>} pixelPoint - Pixel coordinates on the viewer element.
10673 * @returns {Promise<Array<string>>} Promise to the ids of the tags that
10674 * contain the specified pixel point.
10678 * tagComponent.getTagIdsAt([100, 100])
10679 * .then((tagIds) => { console.log(tagIds); });
10682 getTagIdsAt(pixelPoint: number[]): Promise<string[]>;
10684 * Check if a tag exist in the tag set.
10686 * @param {string} tagId - Id of the tag.
10690 * var tagExists = tagComponent.has("tagId");
10693 has(tagId: string): boolean;
10694 off(type: "geometrycreate", handler: (event: ComponentGeometryEvent) => void): void;
10695 off(type: "tagmode", handler: (event: ComponentTagModeEvent) => void): void;
10696 off(type: "tagcreateend" | "tagcreatestart" | "tags", handler: (event: ComponentStateEvent) => void): void;
10698 * Event fired when a geometry has been created.
10700 * @event geometrycreated
10703 * // Initialize the viewer
10704 * var viewer = new Viewer({ // viewer options });
10705 * var component = viewer.getComponent('<component-name>');
10706 * // Set an event listener
10707 * component.on('geometrycreated', function() {
10708 * console.log("A geometrycreated event has occurred.");
10712 on(type: "geometrycreate", handler: (event: ComponentGeometryEvent) => void): void;
10714 * Event fired when an interaction to create a geometry ends.
10716 * @description A create interaction can by a geometry being created
10717 * or by the creation being aborted.
10719 * @event tagcreateend
10722 * // Initialize the viewer
10723 * var viewer = new Viewer({ // viewer options });
10724 * var component = viewer.getComponent('<component-name>');
10725 * // Set an event listener
10726 * component.on('tagcreateend', function() {
10727 * console.log("A tagcreateend event has occurred.");
10731 on(type: "tagcreateend", handler: (event: ComponentStateEvent) => void): void;
10733 * Event fired when an interaction to create a geometry starts.
10735 * @description A create interaction starts when the first vertex
10736 * is created in the geometry.
10738 * @event tagcreatestart
10741 * // Initialize the viewer
10742 * var viewer = new Viewer({ // viewer options });
10743 * var component = viewer.getComponent('<component-name>');
10744 * // Set an event listener
10745 * component.on('tagcreatestart', function() {
10746 * console.log("A tagcreatestart event has occurred.");
10750 on(type: "tagcreatestart", handler: (event: ComponentStateEvent) => void): void;
10752 * Event fired when the create mode is changed.
10757 * // Initialize the viewer
10758 * var viewer = new Viewer({ // viewer options });
10759 * var component = viewer.getComponent('<component-name>');
10760 * // Set an event listener
10761 * component.on('tagmode', function() {
10762 * console.log("A tagmode event has occurred.");
10766 on(type: "tagmode", handler: (event: ComponentTagModeEvent) => void): void;
10768 * Event fired when the tags collection has changed.
10773 * // Initialize the viewer
10774 * var viewer = new Viewer({ // viewer options });
10775 * var component = viewer.getComponent('<component-name>');
10776 * // Set an event listener
10777 * component.on('tags', function() {
10778 * console.log("A tags event has occurred.");
10782 on(type: "tags", handler: (event: ComponentStateEvent) => void): void;
10784 * Remove tags with the specified ids from the tag set.
10786 * @param {Array<string>} tagIds - Ids for tags to remove.
10790 * tagComponent.remove(["id-1", "id-2"]);
10793 remove(tagIds: string[]): void;
10795 * Remove all tags from the tag set.
10799 * tagComponent.removeAll();
10803 protected _activate(): void;
10804 protected _deactivate(): void;
10805 protected _getDefaultConfiguration(): TagConfiguration;
10806 private _disableCreateHandlers;
10810 * @class ZoomComponent
10812 * @classdesc Component rendering UI elements used for zooming.
10816 * var viewer = new Viewer({ ... });
10818 * var zoomComponent = viewer.getComponent("zoom");
10819 * zoomComponent.configure({ size: ComponentSize.Small });
10822 declare class ZoomComponent extends Component<ZoomConfiguration> {
10823 static componentName: ComponentName;
10824 private _viewportCoords;
10825 private _zoomDelta$;
10826 constructor(name: string, container: Container, navigator: Navigator);
10827 protected _activate(): void;
10828 protected _deactivate(): void;
10829 protected _getDefaultConfiguration(): ZoomConfiguration;
10832 export { Alignment, ArgumentMapillaryError, BearingComponent, BearingConfiguration, CacheComponent, CacheConfiguration, CacheDepthConfiguration, CameraControls, CameraEnt, CameraVisualizationMode, CancelMapillaryError, CircleMarker, CircleMarkerOptions, ClusterContract, CombiningFilterExpression, CombiningFilterOperator, ComparisonFilterExpression, ComparisonFilterOperator, Component, ComponentEvent, ComponentEventType, ComponentGeometryEvent, ComponentHoverEvent, ComponentMarkerEvent, ComponentName, ComponentOptions, ComponentPlayEvent, ComponentSize, ComponentStateEvent, ComponentTagModeEvent, CoreImageEnt, CoreImagesContract, CreatorEnt, DataProviderBase, DirectionComponent, DirectionConfiguration, DragPanHandler, EntContract, EventEmitter, ExtremePointTag, ExtremePointTagOptions, FallbackComponentName, FallbackOptions, FilterExpression, FilterImage, FilterKey, FilterOperator, FilterValue, Geometry, GeometryProviderBase, GeometryTagError, GraphDataProvider, GraphDataProviderOptions, GraphMapillaryError, IComponent, ICustomCameraControls, ICustomRenderer, IDEnt, IDataProvider, IEventEmitter, IGeometryProvider, IViewer, Image, ImageEnt, ImageTileEnt, ImageTilesContract, ImageTilesRequestContract, ImagesContract, KeyPlayHandler, KeySequenceNavigationHandler, KeySpatialNavigationHandler, KeyZoomHandler, KeyboardComponent, KeyboardConfiguration, LngLat, LngLatAlt, MapillaryError, Marker, MarkerComponent, MarkerConfiguration, MeshContract, NavigationDirection, NavigationEdge, NavigationEdgeData, NavigationEdgeStatus, OriginalPositionMode, OutlineTag, OutlineTagOptions, PointContract, PointGeometry, PointOfView, PointVisualizationMode, PointerComponent, PointerConfiguration, PointsGeometry, PolygonGeometry, Popup, PopupComponent, PopupOffset, PopupOptions, ProviderCellEvent, ProviderEvent, ProviderEventType, RectGeometry, RenderMode, RenderPass, S2GeometryProvider, ScrollZoomHandler, SequenceComponent, SequenceConfiguration, SequenceContract, SequenceEnt, SetMembershipFilterExpression, SetMembershipFilterOperator, SimpleMarker, SimpleMarkerOptions, SliderComponent, SliderConfiguration, SliderConfigurationIds, SliderConfigurationMode, SpatialComponent, SpatialConfiguration, SpatialImageEnt, SpatialImagesContract, SpotTag, SpotTagOptions, Tag, TagComponent, TagConfiguration, TagDomain, TagEventType, TagMode, TagStateEvent, TouchZoomHandler, TransitionMode, URLEnt, UrlOptions, VertexGeometry, Viewer, ViewerBearingEvent, ViewerDataLoadingEvent, ViewerEvent, ViewerEventType, ViewerImageEvent, ViewerMouseEvent, ViewerNavigableEvent, ViewerNavigationEdgeEvent, ViewerOptions, ViewerReferenceEvent, ViewerStateEvent, ZoomComponent, ZoomConfiguration, decompress, ecefToEnu, ecefToGeodetic, enuToEcef, enuToGeodetic, fetchArrayBuffer, geodeticToEcef, geodeticToEnu, isFallbackSupported, isSupported, readMeshPbf };