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 sfm_cluster: URLEnt;
1122 thumb_1024_url: string;
1123 thumb_2048_url: string;
1126 declare class GraphConverter {
1127 clusterReconstruction(source: GraphClusterContract): ClusterContract;
1128 coreImage(source: GraphCoreImageEnt): CoreImageEnt;
1129 spatialImage(source: GraphSpatialImageEnt): SpatialImageEnt;
1133 interface GraphDataProviderOptions {
1135 accessToken?: string;
1138 declare class GraphQueryCreator {
1139 readonly imagesPath: string;
1140 readonly sequencePath: string;
1141 readonly coreFields: string[];
1142 readonly idFields: string[];
1143 readonly spatialFields: string[];
1144 readonly imageTileFields: string[];
1145 private readonly _imageTilesPath;
1147 images(imageIds: string[], fields: string[]): string;
1148 imagesS2(cellId: string, fields: string[]): string;
1149 imageTiles(z: number, fields: string[]): string;
1150 imageTilesPath(imageId: string): string;
1151 sequence(sequenceId: string): string;
1154 declare class GraphDataProvider extends DataProviderBase {
1155 private readonly _method;
1156 private readonly _endpoint;
1157 private readonly _convert;
1158 private readonly _query;
1159 private _accessToken;
1160 constructor(options?: GraphDataProviderOptions, geometry?: IGeometryProvider, converter?: GraphConverter, queryCreator?: GraphQueryCreator);
1161 getCluster(url: string, abort?: Promise<void>): Promise<ClusterContract>;
1162 getCoreImages(cellId: string): Promise<CoreImagesContract>;
1163 getImageBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer>;
1164 getImages(imageIds: string[]): Promise<ImagesContract>;
1165 getImageTiles(request: ImageTilesRequestContract): Promise<ImageTilesContract>;
1166 getMesh(url: string, abort?: Promise<void>): Promise<MeshContract>;
1167 getSequence(sequenceId: string): Promise<SequenceContract>;
1168 getSpatialImages(imageIds: string[]): Promise<SpatialImagesContract>;
1169 setAccessToken(accessToken: string): void;
1170 private _createHeaders;
1171 private _fetchGraphContract;
1172 private _makeErrorMessage;
1176 * @class S2GeometryProvider
1178 * @classdesc Geometry provider based on S2 cells.
1182 * class MyDataProvider extends DataProviderBase {
1186 * const geometryProvider = new S2GeometryProvider();
1187 * const dataProvider = new MyDataProvider(geometryProvider);
1190 declare class S2GeometryProvider extends GeometryProviderBase {
1191 private readonly _level;
1193 * Create a new S2 geometry provider instance.
1195 constructor(_level?: number);
1197 bboxToCellIds(sw: LngLat, ne: LngLat): string[];
1199 getAdjacent(cellId: string): string[];
1201 getVertices(cellId: string): LngLat[];
1203 lngLatToCellId(lngLat: LngLat): string;
1204 private _getNeighbors;
1205 private _lngLatToId;
1208 interface ComponentConfiguration {
1213 * Enumeration for render mode
1216 * @description Modes for specifying how rendering is done
1217 * in the viewer. All modes preserves the original aspect
1218 * ratio of the images.
1220 declare enum RenderMode {
1222 * Displays all content within the viewer.
1224 * @description Black bars shown on both
1225 * sides of the content. Bars are shown
1226 * either below and above or to the left
1227 * and right of the content depending on
1228 * the aspect ratio relation between the
1229 * image and the viewer.
1233 * Fills the viewer by cropping content.
1235 * @description Cropping is done either
1236 * in horizontal or vertical direction
1237 * depending on the aspect ratio relation
1238 * between the image and the viewer.
1243 interface ViewportSize {
1248 declare type CameraType = "spherical" | "fisheye" | "perspective";
1253 * @classdesc Class used for calculating coordinate transformations
1256 declare class Transform {
1260 private _orientation;
1262 private _basicWidth;
1263 private _basicHeight;
1264 private _basicAspect;
1265 private _worldToCamera;
1266 private _worldToCameraInverse;
1267 private _scaledWorldToCamera;
1268 private _scaledWorldToCameraInverse;
1269 private _basicWorldToCamera;
1270 private _textureScale;
1273 private _cameraType;
1274 private _radialPeak;
1276 * Create a new transform instance.
1277 * @param {number} orientation - Image orientation.
1278 * @param {number} width - Image height.
1279 * @param {number} height - Image width.
1280 * @param {number} focal - Focal length.
1281 * @param {number} scale - Atomic scale.
1282 * @param {Array<number>} rotation - Rotation vector in three dimensions.
1283 * @param {Array<number>} translation - Translation vector in three dimensions.
1284 * @param {HTMLImageElement} image - Image for fallback size calculations.
1286 constructor(orientation: number, width: number, height: number, scale: number, rotation: number[], translation: number[], image: HTMLImageElement, textureScale?: number[], cameraParameters?: number[], cameraType?: CameraType);
1289 get cameraType(): CameraType;
1292 * @returns {number} The orientation adjusted aspect ratio.
1294 get basicAspect(): number;
1298 * @description Does not fall back to image image height but
1299 * uses original value from API so can be faulty.
1301 * @returns {number} The height of the basic version image
1302 * (adjusted for orientation).
1304 get basicHeight(): number;
1305 get basicRt(): THREE.Matrix4;
1309 * @description Does not fall back to image image width but
1310 * uses original value from API so can be faulty.
1312 * @returns {number} The width of the basic version image
1313 * (adjusted for orientation).
1315 get basicWidth(): number;
1318 * @returns {number} The image focal length.
1320 get focal(): number;
1324 * @description Falls back to the image image height if
1325 * the API data is faulty.
1327 * @returns {number} The orientation adjusted image height.
1329 get height(): number;
1332 * @returns {number} The image orientation.
1334 get orientation(): number;
1337 * @returns {THREE.Matrix4} The extrinsic camera matrix.
1339 get rt(): THREE.Matrix4;
1342 * @returns {THREE.Matrix4} The scaled extrinsic camera matrix.
1344 get srt(): THREE.Matrix4;
1347 * @returns {THREE.Matrix4} The scaled extrinsic camera matrix.
1349 get srtInverse(): THREE.Matrix4;
1352 * @returns {number} The image atomic reconstruction scale.
1354 get scale(): number;
1356 * Get has valid scale.
1357 * @returns {boolean} Value indicating if the scale of the transform is valid.
1359 get hasValidScale(): boolean;
1362 * @returns {number} Value indicating the radius where the radial
1363 * undistortion function peaks.
1365 get radialPeak(): number;
1369 * @description Falls back to the image image width if
1370 * the API data is faulty.
1372 * @returns {number} The orientation adjusted image width.
1374 get width(): number;
1376 * Calculate the up vector for the image transform.
1378 * @returns {THREE.Vector3} Normalized and orientation adjusted up vector.
1380 upVector(): THREE.Vector3;
1382 * Calculate projector matrix for projecting 3D points to texture map
1383 * coordinates (u and v).
1385 * @returns {THREE.Matrix4} Projection matrix for 3D point to texture
1386 * map coordinate calculations.
1388 projectorMatrix(): THREE.Matrix4;
1390 * Project 3D world coordinates to basic coordinates.
1392 * @param {Array<number>} point3d - 3D world coordinates.
1393 * @return {Array<number>} 2D basic coordinates.
1395 projectBasic(point3d: number[]): number[];
1397 * Unproject basic coordinates to 3D world coordinates.
1399 * @param {Array<number>} basic - 2D basic coordinates.
1400 * @param {Array<number>} distance - Distance to unproject from camera center.
1401 * @param {boolean} [depth] - Treat the distance value as depth from camera center.
1402 * Only applicable for perspective images. Will be
1403 * ignored for spherical.
1404 * @returns {Array<number>} Unprojected 3D world coordinates.
1406 unprojectBasic(basic: number[], distance: number, depth?: boolean): number[];
1408 * Project 3D world coordinates to SfM coordinates.
1410 * @param {Array<number>} point3d - 3D world coordinates.
1411 * @return {Array<number>} 2D SfM coordinates.
1413 projectSfM(point3d: number[]): number[];
1415 * Unproject SfM coordinates to a 3D world coordinates.
1417 * @param {Array<number>} sfm - 2D SfM coordinates.
1418 * @param {Array<number>} distance - Distance to unproject
1419 * from camera center.
1420 * @param {boolean} [depth] - Treat the distance value as
1421 * depth from camera center. Only applicable for perspective
1422 * images. Will be ignored for spherical.
1423 * @returns {Array<number>} Unprojected 3D world coordinates.
1425 unprojectSfM(sfm: number[], distance: number, depth?: boolean): number[];
1427 * Transform SfM coordinates to bearing vector (3D cartesian
1428 * coordinates on the unit sphere).
1430 * @param {Array<number>} sfm - 2D SfM coordinates.
1431 * @returns {Array<number>} Bearing vector (3D cartesian coordinates
1432 * on the unit sphere).
1434 private _sfmToBearing;
1435 /** Compute distortion given the distorted radius.
1437 * Solves for d in the equation
1438 * y = d(x, k1, k2) * x
1439 * given the distorted radius, y.
1441 private _distortionFromDistortedRadius;
1443 * Transform bearing vector (3D cartesian coordiantes on the unit sphere) to
1446 * @param {Array<number>} bearing - Bearing vector (3D cartesian coordinates on the
1448 * @returns {Array<number>} 2D SfM coordinates.
1450 private _bearingToSfm;
1452 * Convert basic coordinates to SfM coordinates.
1454 * @param {Array<number>} basic - 2D basic coordinates.
1455 * @returns {Array<number>} 2D SfM coordinates.
1457 private _basicToSfm;
1459 * Convert SfM coordinates to basic coordinates.
1461 * @param {Array<number>} sfm - 2D SfM coordinates.
1462 * @returns {Array<number>} 2D basic coordinates.
1464 private _sfmToBasic;
1466 * Checks a value and returns it if it exists and is larger than 0.
1467 * Fallbacks if it is null.
1469 * @param {number} value - Value to check.
1470 * @param {number} fallback - Value to fall back to.
1471 * @returns {number} The value or its fallback value if it is not defined or negative.
1474 private _getCameraParameters;
1476 * Creates the extrinsic camera matrix [ R | t ].
1478 * @param {Array<number>} rotation - Rotation vector in angle axis representation.
1479 * @param {Array<number>} translation - Translation vector.
1480 * @returns {THREE.Matrix4} Extrisic camera matrix.
1482 private createWorldToCamera;
1484 * Calculates the scaled extrinsic camera matrix scale * [ R | t ].
1486 * @param {THREE.Matrix4} worldToCamera - Extrisic camera matrix.
1487 * @param {number} scale - Scale factor.
1488 * @returns {THREE.Matrix4} Scaled extrisic camera matrix.
1490 private _createScaledWorldToCamera;
1491 private _createBasicWorldToCamera;
1492 private _getRadialPeak;
1494 * Calculate a transformation matrix from normalized coordinates for
1495 * texture map coordinates.
1497 * @returns {THREE.Matrix4} Normalized coordinates to texture map
1498 * coordinates transformation matrix.
1500 private _normalizedToTextureMatrix;
1506 * @classdesc Holds information about a camera.
1508 declare class Camera {
1514 * Create a new camera instance.
1515 * @param {Transform} [transform] - Optional transform instance.
1517 constructor(transform?: Transform);
1520 * @returns {THREE.Vector3} The position vector.
1522 get position(): THREE.Vector3;
1525 * @returns {THREE.Vector3} The lookat vector.
1527 get lookat(): THREE.Vector3;
1530 * @returns {THREE.Vector3} The up vector.
1532 get up(): THREE.Vector3;
1535 * @returns {number} The focal length.
1537 get focal(): number;
1541 set focal(value: number);
1543 * Update this camera to the linearly interpolated value of two other cameras.
1545 * @param {Camera} a - First camera.
1546 * @param {Camera} b - Second camera.
1547 * @param {number} alpha - Interpolation value on the interval [0, 1].
1549 lerpCameras(a: Camera, b: Camera, alpha: number): void;
1551 * Copy the properties of another camera to this camera.
1553 * @param {Camera} other - Another camera.
1555 copy(other: Camera): void;
1557 * Clone this camera.
1559 * @returns {Camera} A camera with cloned properties equal to this camera.
1563 * Determine the distance between this camera and another camera.
1565 * @param {Camera} other - Another camera.
1566 * @returns {number} The distance between the cameras.
1568 diff(other: Camera): number;
1570 * Get the focal length based on the transform.
1572 * @description Returns the focal length corresponding
1573 * to a 90 degree field of view for spherical
1576 * Returns the transform focal length for other
1579 * @returns {number} Focal length.
1584 declare enum State {
1589 WaitingInteractively = 4
1593 * Enumeration for edge directions
1596 * @description Directions for edges in image graph describing
1597 * sequence, spatial and image type relations between nodes.
1599 declare enum NavigationDirection {
1601 * Next image in the sequence.
1605 * Previous image in the sequence.
1609 * Step to the left keeping viewing direction.
1613 * Step to the right keeping viewing direction.
1617 * Step forward keeping viewing direction.
1621 * Step backward keeping viewing direction.
1625 * Turn 90 degrees counter clockwise.
1629 * Turn 90 degrees clockwise.
1637 * Spherical in general direction.
1641 * Looking in roughly the same direction at rougly the same position.
1647 * Interface that describes additional properties of an edge.
1649 * @interface NavigationEdgeData
1651 interface NavigationEdgeData {
1653 * The edge direction.
1655 direction: NavigationDirection;
1657 * The counter clockwise horizontal rotation angle from
1658 * the X-axis in a spherical coordiante system of the
1659 * motion from the source image to the destination node.
1661 worldMotionAzimuth: number;
1665 * Interface that describes the properties for a
1666 * navigation edge from a source image to a
1669 * @interface NavigationEdge
1671 interface NavigationEdge {
1673 * The id of the source image.
1677 * The id of the target image.
1681 * Additional data describing properties of the edge.
1683 data: NavigationEdgeData;
1687 * Interface that indicates edge status.
1689 * @interface NavigationEdgeStatus
1691 interface NavigationEdgeStatus {
1693 * Value indicating whether the edges have been cached.
1699 * @description If the cached property is false the edges
1700 * property will always be an empty array. If the cached
1701 * property is true, there will exist edges in the the
1702 * array if the image has edges.
1704 edges: NavigationEdge[];
1710 * @classdesc Represents the cached properties of a image.
1712 declare class ImageCache {
1717 private _sequenceEdges;
1718 private _spatialEdges;
1719 private _imageAborter;
1720 private _meshAborter;
1721 private _imageChanged$;
1723 private _sequenceEdgesChanged$;
1724 private _sequenceEdges$;
1725 private _spatialEdgesChanged$;
1726 private _spatialEdges$;
1727 private _cachingAssets$;
1728 private _iamgeSubscription;
1729 private _sequenceEdgesSubscription;
1730 private _spatialEdgesSubscription;
1732 * Create a new image cache instance.
1734 constructor(provider: IDataProvider);
1738 * @description Will not be set when assets have not been cached
1739 * or when the object has been disposed.
1741 * @returns {HTMLImageElement} Cached image element of the image.
1743 get image(): HTMLImageElement;
1747 * @returns {Observable<HTMLImageElement>} Observable emitting
1748 * the cached image when it is updated.
1750 get image$(): Observable<HTMLImageElement>;
1754 * @description Will not be set when assets have not been cached
1755 * or when the object has been disposed.
1757 * @returns {MeshContract} SfM triangulated mesh of reconstructed
1760 get mesh(): MeshContract;
1762 * Get sequenceEdges.
1764 * @returns {NavigationEdgeStatus} Value describing the status of the
1767 get sequenceEdges(): NavigationEdgeStatus;
1769 * Get sequenceEdges$.
1771 * @returns {Observable<NavigationEdgeStatus>} Observable emitting
1772 * values describing the status of the sequence edges.
1774 get sequenceEdges$(): Observable<NavigationEdgeStatus>;
1778 * @returns {NavigationEdgeStatus} Value describing the status of the
1781 get spatialEdges(): NavigationEdgeStatus;
1783 * Get spatialEdges$.
1785 * @returns {Observable<NavigationEdgeStatus>} Observable emitting
1786 * values describing the status of the spatial edges.
1788 get spatialEdges$(): Observable<NavigationEdgeStatus>;
1790 * Cache the image and mesh assets.
1792 * @param {SpatialImageEnt} spatial - Spatial props of the image to cache.
1793 * @param {boolean} spherical - Value indicating whether image is a spherical.
1794 * @param {boolean} merged - Value indicating whether image is merged.
1795 * @returns {Observable<ImageCache>} Observable emitting this image
1796 * cache whenever the load status has changed and when the mesh or image
1797 * has been fully loaded.
1799 cacheAssets$(spatial: SpatialImageEnt, merged: boolean): Observable<ImageCache>;
1801 * Cache an image with a higher resolution than the current one.
1803 * @param {SpatialImageEnt} spatial - Spatial props.
1804 * @returns {Observable<ImageCache>} Observable emitting a single item,
1805 * the image cache, when the image has been cached. If supplied image
1806 * size is not larger than the current image size the image cache is
1807 * returned immediately.
1809 cacheImage$(spatial: SpatialImageEnt): Observable<ImageCache>;
1811 * Cache the sequence edges.
1813 * @param {Array<NavigationEdge>} edges - Sequence edges to cache.
1815 cacheSequenceEdges(edges: NavigationEdge[]): void;
1817 * Cache the spatial edges.
1819 * @param {Array<NavigationEdge>} edges - Spatial edges to cache.
1821 cacheSpatialEdges(edges: NavigationEdge[]): void;
1823 * Dispose the image cache.
1825 * @description Disposes all cached assets and unsubscribes to
1830 * Reset the sequence edges.
1832 resetSequenceEdges(): void;
1834 * Reset the spatial edges.
1836 resetSpatialEdges(): void;
1840 * @param {SpatialImageEnt} spatial - Spatial image.
1841 * @param {boolean} spherical - Value indicating whether image is a spherical.
1842 * @returns {Observable<ILoadStatusObject<HTMLImageElement>>} Observable
1843 * emitting a load status object every time the load status changes
1844 * and completes when the image is fully loaded.
1846 private _cacheImage$;
1850 * @param {SpatialImageEnt} spatial - Spatial props.
1851 * @param {boolean} merged - Value indicating whether image is merged.
1852 * @returns {Observable<ILoadStatusObject<MeshContract>>} Observable emitting
1853 * a load status object every time the load status changes and completes
1854 * when the mesh is fully loaded.
1856 private _cacheMesh$;
1858 * Create a load status object with an empty mesh.
1860 * @returns {ILoadStatusObject<MeshContract>} Load status object
1863 private _createEmptyMesh;
1864 private _disposeImage;
1870 * @classdesc Represents a image in the navigation graph.
1872 * Explanation of position and bearing properties:
1874 * When images are uploaded they will have GPS information in the EXIF, this is what
1875 * is called `originalLngLat` {@link Image.originalLngLat}.
1877 * When Structure from Motions has been run for a image a `computedLngLat` that
1878 * differs from the `originalLngLat` will be created. It is different because
1879 * GPS positions are not very exact and SfM aligns the camera positions according
1880 * to the 3D reconstruction {@link Image.computedLngLat}.
1882 * At last there exist a `lngLat` property which evaluates to
1883 * the `computedLngLat` from SfM if it exists but falls back
1884 * to the `originalLngLat` from the EXIF GPS otherwise {@link Image.lngLat}.
1886 * Everything that is done in in the Viewer is based on the SfM positions,
1887 * i.e. `computedLngLat`. That is why the smooth transitions go in the right
1888 * direction (nd not in strange directions because of bad GPS).
1890 * E.g. when placing a marker in the Viewer it is relative to the SfM
1891 * position i.e. the `computedLngLat`.
1893 * The same concept as above also applies to the compass angle (or bearing) properties
1894 * `originalCa`, `computedCa` and `ca`.
1896 declare class Image {
1901 * Create a new image instance.
1903 * @description Images are always created internally by the library.
1904 * Images can not be added to the library through any API method.
1906 * @param {CoreImageEnt} core- Raw core image data.
1909 constructor(core: CoreImageEnt);
1911 * Get assets cached.
1913 * @description The assets that need to be cached for this property
1914 * to report true are the following: fill properties, image and mesh.
1915 * The library ensures that the current image will always have the
1918 * @returns {boolean} Value indicating whether all assets have been
1923 get assetsCached(): boolean;
1925 * Get cameraParameters.
1927 * @description Will be undefined if SfM has
1930 * Camera type dependent parameters.
1932 * For perspective and fisheye camera types,
1933 * the camera parameters array should be
1934 * constructed according to
1938 * where focal is the camera focal length,
1939 * and k1, k2 are radial distortion parameters.
1941 * For spherical camera type the camera
1942 * parameters are unset or emtpy array.
1944 * @returns {Array<number>} The parameters
1945 * related to the camera type.
1947 get cameraParameters(): number[];
1951 * @description Will be undefined if SfM has not been run.
1953 * @returns {string} The camera type that captured the image.
1955 get cameraType(): string;
1959 * @description Timestamp of the image capture date
1960 * and time represented as a Unix epoch timestamp in milliseconds.
1962 * @returns {number} Timestamp when the image was captured.
1964 get capturedAt(): number;
1968 * @returns {string} Globally unique id of the SfM cluster to which
1969 * the image belongs.
1971 get clusterId(): string;
1975 * @returns {string} Url to the cluster reconstruction file.
1979 get clusterUrl(): string;
1983 * @description If the SfM computed compass angle exists it will
1984 * be returned, otherwise the original EXIF compass angle.
1986 * @returns {number} Compass angle, measured in degrees
1987 * clockwise with respect to north.
1989 get compassAngle(): number;
1993 * @description The library ensures that the current image will
1996 * @returns {boolean} Value indicating whether the image has all
1997 * properties filled.
2001 get complete(): boolean;
2003 * Get computedAltitude.
2005 * @description If SfM has not been run the computed altitude is
2006 * set to a default value of two meters.
2008 * @returns {number} Altitude, in meters.
2010 get computedAltitude(): number;
2012 * Get computedCompassAngle.
2014 * @description Will not be set if SfM has not been run.
2016 * @returns {number} SfM computed compass angle, measured
2017 * in degrees clockwise with respect to north.
2019 get computedCompassAngle(): number;
2021 * Get computedLngLat.
2023 * @description Will not be set if SfM has not been run.
2025 * @returns {LngLat} SfM computed longitude, latitude in WGS84 datum,
2026 * measured in degrees.
2028 get computedLngLat(): LngLat;
2032 * @description Note that the creator ID will not be set when using
2033 * the Mapillary API.
2035 * @returns {string} Globally unique id of the user who uploaded
2038 get creatorId(): string;
2040 * Get creatorUsername.
2042 * @description Note that the creator username will not be set when
2043 * using the Mapillary API.
2045 * @returns {string} Username of the creator who uploaded
2048 get creatorUsername(): string;
2050 * Get exifOrientation.
2052 * @returns {number} EXIF orientation of original image.
2054 get exifOrientation(): number;
2058 * @returns {number} Height of original image, not adjusted
2061 get height(): number;
2065 * @description The image will always be set on the current image.
2067 * @returns {HTMLImageElement} Cached image element of the image.
2069 get image(): HTMLImageElement;
2073 * @returns {Observable<HTMLImageElement>} Observable emitting
2074 * the cached image when it is updated.
2078 get image$(): Observable<HTMLImageElement>;
2082 * @returns {string} Globally unique id of the image.
2088 * @description If the SfM computed longitude, latitude exist
2089 * it will be returned, otherwise the original EXIF latitude
2092 * @returns {LngLat} Longitude, latitude in WGS84 datum,
2093 * measured in degrees.
2095 get lngLat(): LngLat;
2099 * @returns {boolean} Value indicating whether SfM has been
2100 * run on the image and the image has been merged into a
2101 * connected component.
2103 get merged(): boolean;
2107 * @description Will not be set if SfM has not yet been run on
2110 * @returns {stirng} Id of connected component to which image
2111 * belongs after the aligning merge.
2113 get mergeId(): string;
2117 * @description The mesh will always be set on the current image.
2119 * @returns {MeshContract} SfM triangulated mesh of reconstructed
2122 get mesh(): MeshContract;
2124 * Get originalAltitude.
2126 * @returns {number} EXIF altitude, in meters, if available.
2128 get originalAltitude(): number;
2130 * Get originalCompassAngle.
2132 * @returns {number} Original EXIF compass angle, measured in
2135 get originalCompassAngle(): number;
2137 * Get originalLngLat.
2139 * @returns {LngLat} Original EXIF longitude, latitude in
2140 * WGS84 datum, measured in degrees.
2142 get originalLngLat(): LngLat;
2146 * @returns {string} Globally unique id of the owner to which
2147 * the image belongs. If the image does not belong to an
2148 * owner the owner id will be undefined.
2150 get ownerId(): string;
2154 * @returns {boolean} Value specifying if image is accessible to
2155 * organization members only or to everyone.
2157 get private(): boolean;
2161 * @returns {number} A number between zero and one
2162 * determining the quality of the image. Blurriness
2163 * (motion blur / out-of-focus), occlusion (camera
2164 * mount, ego vehicle, water-drops), windshield
2165 * reflections, bad illumination (exposure, glare),
2166 * and bad weather condition (fog, rain, snow)
2167 * affect the quality score.
2169 * @description Value should be on the interval [0, 1].
2171 get qualityScore(): number;
2175 * @description Will not be set if SfM has not been run.
2177 * @returns {Array<number>} Rotation vector in angle axis representation.
2179 get rotation(): number[];
2183 * @description Will not be set if SfM has not been run.
2185 * @returns {number} Scale of reconstruction the image
2188 get scale(): number;
2192 * @returns {string} Globally unique id of the sequence
2193 * to which the image belongs.
2195 get sequenceId(): string;
2197 * Get sequenceEdges.
2199 * @returns {NavigationEdgeStatus} Value describing the status of the
2204 get sequenceEdges(): NavigationEdgeStatus;
2206 * Get sequenceEdges$.
2208 * @description Internal observable, should not be used as an API.
2210 * @returns {Observable<NavigationEdgeStatus>} Observable emitting
2211 * values describing the status of the sequence edges.
2215 get sequenceEdges$(): Observable<NavigationEdgeStatus>;
2219 * @returns {NavigationEdgeStatus} Value describing the status of the
2224 get spatialEdges(): NavigationEdgeStatus;
2226 * Get spatialEdges$.
2228 * @description Internal observable, should not be used as an API.
2230 * @returns {Observable<NavigationEdgeStatus>} Observable emitting
2231 * values describing the status of the spatial edges.
2235 get spatialEdges$(): Observable<NavigationEdgeStatus>;
2239 * @returns {number} Width of original image, not
2240 * adjusted for orientation.
2242 get width(): number;
2244 * Cache the image and mesh assets.
2246 * @description The assets are always cached internally by the
2247 * library prior to setting a image as the current image.
2249 * @returns {Observable<Image>} Observable emitting this image whenever the
2250 * load status has changed and when the mesh or image has been fully loaded.
2254 cacheAssets$(): Observable<Image>;
2256 * Cache the image asset.
2258 * @description Use for caching a differently sized image than
2259 * the one currently held by the image.
2261 * @returns {Observable<Image>} Observable emitting this image whenever the
2262 * load status has changed and when the mesh or image has been fully loaded.
2266 cacheImage$(): Observable<Image>;
2268 * Cache the sequence edges.
2270 * @description The sequence edges are cached asynchronously
2271 * internally by the library.
2273 * @param {Array<NavigationEdge>} edges - Sequence edges to cache.
2276 cacheSequenceEdges(edges: NavigationEdge[]): void;
2278 * Cache the spatial edges.
2280 * @description The spatial edges are cached asynchronously
2281 * internally by the library.
2283 * @param {Array<NavigationEdge>} edges - Spatial edges to cache.
2286 cacheSpatialEdges(edges: NavigationEdge[]): void;
2288 * Dispose the image.
2290 * @description Disposes all cached assets.
2295 * Initialize the image cache.
2297 * @description The image cache is initialized internally by
2300 * @param {ImageCache} cache - The image cache to set as cache.
2303 initializeCache(cache: ImageCache): void;
2305 * Complete an image with spatial properties.
2307 * @description The image is completed internally by
2310 * @param {SpatialImageEnt} fill - The spatial image struct.
2313 makeComplete(fill: SpatialImageEnt): void;
2315 * Reset the sequence edges.
2319 resetSequenceEdges(): void;
2321 * Reset the spatial edges.
2325 resetSpatialEdges(): void;
2327 * Clears the image and mesh assets, aborts
2328 * any outstanding requests and resets edges.
2335 interface IAnimationState {
2336 reference: LngLatAlt;
2340 currentImage: Image;
2341 currentCamera: Camera;
2342 previousImage: Image;
2343 trajectory: Image[];
2344 currentIndex: number;
2346 imagesAhead: number;
2347 currentTransform: Transform;
2348 previousTransform: Transform;
2349 motionless: boolean;
2351 stateTransitionAlpha: number;
2354 interface AnimationFrame {
2357 state: IAnimationState;
2360 interface EulerRotation {
2365 declare class RenderCamera {
2367 private _viewportCoords;
2369 private _stateTransitionAlpha;
2370 private _stateTransitionFov;
2371 private _renderMode;
2376 private _perspective;
2379 private _changedForFrame;
2380 private _currentImageId;
2381 private _previousImageId;
2382 private _currentSpherical;
2383 private _previousSpherical;
2385 private _currentProjectedPoints;
2386 private _previousProjectedPoints;
2387 private _currentFov;
2388 private _previousFov;
2389 private _initialFov;
2390 constructor(elementWidth: number, elementHeight: number, renderMode: RenderMode);
2391 get alpha(): number;
2392 get camera(): Camera;
2393 get changed(): boolean;
2394 get frameId(): number;
2395 get perspective(): THREE.PerspectiveCamera;
2396 get renderMode(): RenderMode;
2397 get rotation(): EulerRotation;
2399 get size(): ViewportSize;
2401 fovToZoom(fov: number): number;
2402 setFrame(frame: AnimationFrame): void;
2403 setProjectionMatrix(matrix: number[]): void;
2404 setRenderMode(renderMode: RenderMode): void;
2405 setSize(size: ViewportSize): void;
2406 private _computeAspect;
2407 private _computeCurrentFov;
2408 private _computeFov;
2409 private _computePreviousFov;
2410 private _computeProjectedPoints;
2411 private _computeRequiredVerticalFov;
2412 private _computeRotation;
2413 private _computeVerticalFov;
2415 private _focalToFov;
2417 private _interpolateFov;
2418 private _setFrameId;
2421 declare class RenderService {
2424 private _currentFrame$;
2425 private _projectionMatrix$;
2426 private _renderCameraOperation$;
2427 private _renderCameraHolder$;
2428 private _renderCameraFrame$;
2429 private _renderCamera$;
2433 private _renderMode$;
2434 private _subscriptions;
2435 constructor(element: HTMLElement, currentFrame$: Observable<AnimationFrame>, renderMode: RenderMode, renderCamera?: RenderCamera);
2436 get bearing$(): Observable<number>;
2437 get element(): HTMLElement;
2438 get projectionMatrix$(): Subject<number[]>;
2439 get renderCamera$(): Observable<RenderCamera>;
2440 get renderCameraFrame$(): Observable<RenderCamera>;
2441 get renderMode$(): Subject<RenderMode>;
2442 get resize$(): Subject<void>;
2443 get size$(): Observable<ViewportSize>;
2447 interface VirtualNodeHash {
2452 declare class DOMRenderer {
2453 private _renderService;
2454 private _currentFrame$;
2455 private _adaptiveOperation$;
2461 private _renderAdaptive$;
2462 private _subscriptions;
2463 constructor(element: HTMLElement, renderService: RenderService, currentFrame$: Observable<AnimationFrame>);
2464 get element$(): Observable<Element>;
2465 get render$(): Subject<VirtualNodeHash>;
2466 get renderAdaptive$(): Subject<VirtualNodeHash>;
2467 clear(name: string): void;
2471 interface GLRenderFunction extends Function {
2472 (perspectiveCamera: THREE.PerspectiveCamera, renderer: THREE.WebGLRenderer): void;
2475 declare enum RenderPass$1 {
2480 interface GLFrameRenderer {
2482 needsRender: boolean;
2483 render: GLRenderFunction;
2487 interface GLRenderHash {
2489 renderer: GLFrameRenderer;
2492 declare class GLRenderer {
2493 private _renderService;
2494 private _renderFrame$;
2495 private _renderCameraOperation$;
2496 private _renderCamera$;
2499 private _renderOperation$;
2500 private _renderCollection$;
2501 private _rendererOperation$;
2503 private _eraserOperation$;
2505 private _triggerOperation$;
2506 private _webGLRenderer$;
2507 private _renderFrameSubscription;
2508 private _subscriptions;
2509 private _opaqueRender$;
2510 constructor(canvas: HTMLCanvasElement, canvasContainer: HTMLElement, renderService: RenderService);
2511 get render$(): Subject<GLRenderHash>;
2512 get opaqueRender$(): Observable<void>;
2513 get webGLRenderer$(): Observable<THREE.WebGLRenderer>;
2514 clear(name: string): void;
2516 triggerRerender(): void;
2517 private _renderFrameSubscribe;
2521 * Enumeration for transition mode
2524 * @description Modes for specifying how transitions
2525 * between images are performed.
2527 declare enum TransitionMode {
2529 * Default transitions.
2531 * @description The viewer dynamically determines
2532 * whether transitions should be performed with or
2533 * without motion and blending for each transition
2534 * based on the underlying data.
2538 * Instantaneous transitions.
2540 * @description All transitions are performed
2541 * without motion or blending.
2546 declare class StateService {
2549 private _contextOperation$;
2552 private _currentState$;
2553 private _lastState$;
2554 private _currentImage$;
2555 private _currentImageExternal$;
2556 private _currentCamera$;
2557 private _currentId$;
2558 private _currentTransform$;
2559 private _reference$;
2560 private _inMotionOperation$;
2562 private _inTranslationOperation$;
2563 private _inTranslation$;
2564 private _appendImage$;
2565 private _frameGenerator;
2568 private _subscriptions;
2569 constructor(initialState: State, transitionMode?: TransitionMode);
2570 get currentState$(): Observable<AnimationFrame>;
2571 get currentImage$(): Observable<Image>;
2572 get currentId$(): Observable<string>;
2573 get currentImageExternal$(): Observable<Image>;
2574 get currentCamera$(): Observable<Camera>;
2575 get currentTransform$(): Observable<Transform>;
2576 get state$(): Observable<State>;
2577 get reference$(): Observable<LngLatAlt>;
2578 get inMotion$(): Observable<boolean>;
2579 get inTranslation$(): Observable<boolean>;
2580 get appendImage$(): Subject<Image>;
2586 waitInteractively(): void;
2587 appendImagess(images: Image[]): void;
2588 prependImages(images: Image[]): void;
2589 removeImages(n: number): void;
2590 clearImages(): void;
2591 clearPriorImages(): void;
2593 setImages(images: Image[]): void;
2594 setViewMatrix(matrix: number[]): void;
2595 rotate(delta: EulerRotation): void;
2596 rotateUnbounded(delta: EulerRotation): void;
2597 rotateWithoutInertia(delta: EulerRotation): void;
2598 rotateBasic(basicRotation: number[]): void;
2599 rotateBasicUnbounded(basicRotation: number[]): void;
2600 rotateBasicWithoutInertia(basicRotation: number[]): void;
2601 rotateToBasic(basic: number[]): void;
2602 move(delta: number): void;
2603 moveTo(position: number): void;
2604 dolly(delta: number): void;
2605 orbit(rotation: EulerRotation): void;
2606 truck(direction: number[]): void;
2608 * Change zoom level while keeping the reference point position approximately static.
2610 * @parameter {number} delta - Change in zoom level.
2611 * @parameter {Array<number>} reference - Reference point in basic coordinates.
2613 zoomIn(delta: number, reference: number[]): void;
2614 getCenter(): Observable<number[]>;
2615 getZoom(): Observable<number>;
2616 setCenter(center: number[]): void;
2617 setSpeed(speed: number): void;
2618 setTransitionMode(mode: TransitionMode): void;
2619 setZoom(zoom: number): void;
2622 private _invokeContextOperation;
2628 constructor(doc?: Node);
2629 get document(): HTMLDocument;
2630 createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, className?: string, container?: HTMLElement): HTMLElementTagNameMap[K];
2634 * Enumeration for component size.
2637 * @description May be used by a component to allow for resizing
2638 * of the UI elements rendered by the component.
2640 declare enum ComponentSize {
2642 * Automatic size. The size of the elements will automatically
2643 * change at a predefined threshold.
2647 * Large size. The size of the elements will be fixed until another
2648 * component size is configured.
2652 * Small size. The size of the elements will be fixed until another
2653 * component size is configured.
2658 interface BearingConfiguration extends ComponentConfiguration {
2660 * The size of the ui elements.
2662 * @default ComponentSize.Automatic
2664 size?: ComponentSize;
2668 * Interface for configuration of cache depth.
2673 * var viewer = new Viewer({
2687 interface CacheDepthConfiguration {
2689 * Cache depth in the sequence directions.
2691 * @description Max value is 4. Value will be clamped
2692 * to the interval [0, 4].
2697 * Cache depth in the spherical direction.
2699 * @description Max value is 2. Value will be clamped
2700 * to the interval [0, 2].
2705 * Cache depth in the step directions.
2707 * @description Max value is 3. Value will be clamped
2708 * to the interval [0, 3].
2713 * Cache depth in the turn directions.
2715 * @description Max value is 1. Value will be clamped
2716 * to the interval [0, 1].
2722 * Interface for configuration of cache component.
2726 interface CacheConfiguration extends ComponentConfiguration {
2728 * Cache depth struct.
2730 depth?: CacheDepthConfiguration;
2734 * Interface for configuration of direction component.
2739 * var viewer = new Viewer({
2751 interface DirectionConfiguration extends ComponentConfiguration {
2753 * Determines if the sequence arrow appearance should be different from
2754 * the non sequence arrows.
2756 * @description Needs to be set to true for the sequence suffixed classes
2757 * to be applied to the navigation elements. Additional calculations will be
2758 * performed resulting in a performance cost.
2762 distinguishSequence?: boolean;
2764 * The image id representing the direction arrow to be highlighted.
2766 * @description The arrow pointing towards the image corresponding to the
2767 * highlight id will be highlighted.
2769 * @default undefined
2771 highlightId?: string;
2773 * The min width of the non transformed container element holding
2774 * the navigation arrows.
2776 * @description Set min width of the non transformed
2777 * container element holding the navigation arrows.
2778 * If the min width is larger than the max width the
2779 * min width value will be used.
2781 * The container element is automatically resized when the resize
2782 * method on the Viewer class is called.
2788 * The max width of the non transformed container element holding
2789 * the navigation arrows.
2791 * @description Set max width of the non transformed
2792 * container element holding the navigation arrows.
2793 * If the min width is larger than the max width the
2794 * min width value will be used.
2796 * The container element is automatically resized when the resize
2797 * method on the Viewer class is called.
2805 * Interface for configuration of keyboard component.
2810 * var viewer = new Viewer({
2815 * keySequenceNavigation: false,
2816 * keySpatialNavigation: false,
2823 interface KeyboardConfiguration extends ComponentConfiguration {
2825 * Enable or disable the `KeyPlayHandler`.
2831 * Enable or disable the `KeySequenceNavigationHandler`.
2835 keySequenceNavigation?: boolean;
2837 * Enable or disable the `KeySpatialNavigationHandler`.
2841 keySpatialNavigation?: boolean;
2843 * Enable or disable the `KeyZoomHandler`.
2851 * Interface for configuration of marker component.
2856 * var viewer = new Viewer({
2860 * visibleBBoxSize: 80,
2867 interface MarkerConfiguration extends ComponentConfiguration {
2869 * The size of the bounding box for which markers will be visible.
2871 * @description Provided values will be clamped to the [1, 200]
2876 visibleBBoxSize?: number;
2880 * Interface for configuration of mouse component.
2885 * var viewer = new Viewer({
2890 * scrollZoom: false,
2898 interface PointerConfiguration extends ComponentConfiguration {
2900 * Activate or deactivate the `DragPanHandler`.
2906 * Activate or deactivate the `EarthControlHandler`.
2910 earthControl?: boolean;
2912 * Activate or deactivate the `ScrollZoomHandler`.
2916 scrollZoom?: boolean;
2918 * Activate or deactivate the `TouchZoomHandler`.
2922 touchZoom?: boolean;
2926 * Interface for configuration of sequence component.
2931 * const viewer = new Viewer({
2944 interface SequenceConfiguration extends ComponentConfiguration {
2946 * Set the direction to follow when playing.
2948 * @default EdgeDirection.Next
2950 direction?: NavigationDirection;
2952 * The node id representing the direction arrow to be highlighted.
2954 * @description When set to null no direction will be highlighted.
2955 * The arrow pointing towards the node corresponding to the
2956 * highlight id will be highlighted.
2958 * @default undefined
2962 highlightId?: string;
2964 * The max width of the sequence container.
2966 * @description Set max width of the container element holding
2967 * the sequence navigation elements. If the min width is larger than the
2968 * max width the min width value will be used.
2970 * The container element is automatically resized when the resize
2971 * method on the Viewer class is called.
2977 * The min width of the sequence container.
2979 * @description Set min width of the container element holding
2980 * the sequence navigation elements. If the min width is larger than the
2981 * max width the min width value will be used.
2983 * The container element is automatically resized when the resize
2984 * method on the Viewer class is called.
2990 * Indicating whether the component is playing.
2996 * Determine whether the sequence UI elements
2997 * should be visible.
3005 * Enumeration for slider mode.
3010 * @description Modes for specifying how transitions
3011 * between images are performed in slider mode. Only
3012 * applicable when the slider component determines
3013 * that transitions with motion is possilble. When it
3014 * is not, the stationary mode will be applied.
3016 declare enum SliderConfigurationMode {
3018 * Transitions with motion.
3020 * @description The slider component moves the
3021 * camera between the image origins.
3023 * In this mode it is not possible to zoom or pan.
3025 * The slider component falls back to stationary
3026 * mode when it determines that the pair of images
3027 * does not have a strong enough relation.
3031 * Stationary transitions.
3033 * @description The camera is stationary.
3035 * In this mode it is possible to zoom and pan.
3040 * Interface for configuration of slider ids.
3044 interface SliderConfigurationIds {
3046 * Id for the image plane in the background.
3050 * Id for the image plane in the foreground.
3055 * Interface for configuration of slider component.
3059 * var viewer = new Viewer({
3063 * initialPosition: 0.5,
3065 * background: '<background-id>',
3066 * foreground: '<foreground-id>',
3068 * sliderVisible: true,
3075 interface SliderConfiguration extends ComponentConfiguration {
3077 * Initial position of the slider on the interval [0, 1].
3079 * @description Configures the initial position of the slider.
3080 * The inital position value will be used when the component
3085 initialPosition?: number;
3089 * @description Configures the component to show the image
3090 * planes for the supplied image ids in the foreground
3091 * and the background.
3093 ids?: SliderConfigurationIds;
3095 * Value indicating whether the slider should be visible.
3097 * @description Set the value controlling if the
3098 * slider is visible.
3102 sliderVisible?: boolean;
3104 * Mode used for image pair transitions.
3106 * @description Configures the mode for transitions between
3109 mode?: SliderConfigurationMode;
3112 declare enum CameraVisualizationMode {
3114 * Cameras are hidden.
3118 * Cameras are shown, all with the same color.
3122 * Cameras are shown with colors based on the
3127 * Cameras are shown with colors based on the
3128 * their connected components.
3130 ConnectedComponent = 3,
3132 * Cameras are shown, with colors based on the
3138 declare enum OriginalPositionMode {
3140 * Original positions are hidden.
3144 * Visualize original positions with altitude change.
3148 * Visualize original positions without altitude change,
3149 * i.e. as flat lines from the camera origin.
3154 declare enum PointVisualizationMode {
3156 * Points are hidden.
3160 * Visualize points with original colors.
3164 * Paint all points belonging to a specific
3165 * cluster with the same random color.
3171 * Interface for configuration of spatial component.
3176 * var viewer = new Viewer({
3181 * cameraVisualizationMode: CameraVisualizationMode.Cluster,
3182 * cellsVisible: true,
3183 * originalPositionMode: OriginalPositionMode.Altitude,
3185 * pointVisualizationMode: PointVisualizationMode.Hidden,
3192 interface SpatialConfiguration extends ComponentConfiguration {
3194 * The camera size on the interval [0.01, 1].
3198 cameraSize?: number;
3200 * Specify the camera visualization mode.
3202 * @default CameraVisualizationMode.Homogeneous
3204 cameraVisualizationMode?: CameraVisualizationMode;
3206 * Specify if the currently rendered cells should be visualize on
3207 * an approximated ground plane.
3211 cellsVisible?: boolean;
3213 * Cell grid depth from the cell of the currently
3216 * @description Max value is 3. Value will be clamped
3217 * to the interval [1, 3].
3220 cellGridDepth?: number;
3222 * Specify the original position visualization mode.
3224 * @description The original positions are hidden
3227 * @default OriginalPositionMode.Hidden
3229 originalPositionMode?: OriginalPositionMode;
3231 * The point size on the interval [0.01, 1].
3237 * Specify if the points should be visible or not.
3239 * @deprecated `pointsVisible` will be removed in
3240 * v5.x. Use {@link pointVisualizationMode} instead.
3244 pointsVisible?: boolean;
3246 * Specify how point clouds should be visualized.
3248 * @default PointVisualizationMode.Original
3250 pointVisualizationMode?: PointVisualizationMode;
3254 * Enumeration for tag modes
3257 * @description Modes for the interaction in the tag component.
3259 declare enum TagMode {
3261 * Disables creating tags.
3265 * Create a point geometry through a click.
3269 * Create a points geometry through clicks.
3273 * Create a polygon geometry through clicks.
3277 * Create a rect geometry through clicks.
3281 * Create a rect geometry through drag.
3283 * @description Claims the mouse which results in mouse handlers like
3284 * drag pan and scroll zoom becoming inactive.
3290 * Interface for configuration of tag component.
3295 * var viewer = new Viewer({
3299 * createColor: 0xFF0000,
3300 * mode: TagMode.CreateRect,
3307 interface TagConfiguration extends ComponentConfiguration {
3309 * The color of vertices and edges for tags that
3310 * are being created.
3314 createColor?: number;
3316 * Show an indicator at the centroid of the points geometry
3317 * that creates the geometry when clicked.
3320 indicatePointsCompleter?: boolean;
3322 * The interaction mode of the tag component.
3324 * @default TagMode.Default
3329 interface ZoomConfiguration extends ComponentConfiguration {
3331 * The size of the ui elements.
3333 * @default ComponentSize.Automatic
3335 size?: ComponentSize;
3339 * Interface for configuration of navigation component.
3344 * var viewer = new Viewer({
3357 interface NavigationFallbackConfiguration extends ComponentConfiguration {
3359 * Enable or disable the sequence arrows.
3365 * Enable or disable the spatial arrows.
3373 * Interface for the fallback component options that can be
3374 * provided to the viewer when the browser does not have
3379 interface FallbackOptions {
3381 * Show static images without pan, zoom, or transitions.
3383 * @description Fallback for `image` when WebGL is not supported.
3389 * Show static navigation arrows in the corners.
3391 * @description Fallback for `direction` and `sequence` when WebGL is not supported.
3395 navigation?: boolean | NavigationFallbackConfiguration;
3399 * Interface for the component options that can be provided to the viewer.
3403 interface ComponentOptions {
3409 attribution?: boolean;
3411 * Show indicator for bearing and field of view.
3415 bearing?: boolean | BearingConfiguration;
3417 * Cache images around the current one.
3421 cache?: boolean | CacheConfiguration;
3423 * Use a cover to avoid loading data until viewer interaction.
3429 * Show spatial direction arrows for navigation.
3431 * @description Default spatial navigation when there is WebGL support.
3432 * Requires WebGL support.
3436 direction?: boolean | DirectionConfiguration;
3438 * Enable fallback component options
3439 * when the browser does not have WebGL support.
3441 * @default undefined
3443 fallback?: FallbackOptions;
3445 * Show image planes in 3D.
3447 * @description Requires WebGL support.
3453 * Enable use of keyboard commands.
3455 * @description Requires WebGL support.
3459 keyboard?: boolean | KeyboardConfiguration;
3461 * Enable an interface for showing 3D markers in the viewer.
3463 * @description Requires WebGL support.
3467 marker?: boolean | MarkerConfiguration;
3469 * Enable mouse, pen, and touch interaction for zoom and pan.
3471 * @description Requires WebGL support.
3475 pointer?: boolean | PointerConfiguration;
3477 * Show HTML popups over images.
3479 * @description Requires WebGL support.
3485 * Show sequence related navigation.
3487 * @description Default sequence navigation when there is WebGL support.
3491 sequence?: boolean | SequenceConfiguration;
3493 * Show a slider for transitioning between image planes.
3495 * @description Requires WebGL support.
3499 slider?: boolean | SliderConfiguration;
3501 * Enable an interface for showing spatial data in the viewer.
3503 * @description Requires WebGL support.
3507 spatial?: boolean | SpatialConfiguration;
3509 * Enable an interface for drawing 2D geometries on top of images.
3511 * @description Requires WebGL support.
3515 tag?: boolean | TagConfiguration;
3517 * Show buttons for zooming in and out.
3519 * @description Requires WebGL support.
3523 zoom?: boolean | ZoomConfiguration;
3527 * Interface for the URL options that can be provided to the viewer.
3531 interface UrlOptions {
3535 * @description Host used for links to the full
3536 * mapillary website.
3538 * @default {"www.mapillary.com"}
3540 exploreHost?: string;
3544 * @description Used for all hosts.
3546 * @default {"https"}
3552 * Enumeration for camera controls.
3554 * @description Specifies different modes for how the
3555 * camera is controlled through pointer, keyboard or
3556 * other modes of input.
3561 declare enum CameraControls {
3563 * Control the camera with custom logic by
3564 * attaching a custom camera controls
3565 * instance to the {@link Viewer}.
3569 * Control the camera from a birds perspective
3570 * to get an overview.
3574 * Control the camera in a first person view
3575 * from the street level perspective.
3581 * Interface for the options that can be provided to the {@link Viewer}.
3583 interface ViewerOptions {
3585 * Optional access token for API requests of
3588 * @description Can be a user access token or
3589 * a client access token.
3591 * A Mapillary client access token can be obtained
3592 * by [signing in](https://www.mapillary.com/app/?login=true) and
3593 * [registering an application](https://www.mapillary.com/dashboard/developers).
3595 * The access token can also be set through the
3596 * {@link Viewer.setAccessToken} method.
3598 accessToken?: string;
3600 * Value specifying the initial camera controls of
3603 * @default {@link CameraControls.Street}
3605 cameraControls?: CameraControls;
3607 * Value specifying if combined panning should be activated.
3611 combinedPanning?: boolean;
3613 * Component options.
3615 component?: ComponentOptions;
3617 * The HTML element in which MapillaryJS will render the
3618 * viewer, or the element's string `id`. The
3619 * specified element must have no children.
3621 container: string | HTMLElement;
3623 * Optional data provider class instance for API and static
3624 * resource requests.
3626 * @description The data provider will override the
3627 * default MapillaryJS data provider and take responsibility
3628 * for all IO handling.
3630 * The data provider takes precedence over the {@link ViewerOptions.accessToken} property.
3632 * A data provider instance must implement all members
3633 * specified in the {@link IDataProvider} interface. This can
3634 * be done by extending the {@link DataProviderBase} class or
3635 * implementing the interface directly.
3637 dataProvider?: IDataProvider;
3639 * Optional `image-id` to start from. The id
3640 * can be any Mapillary image. If a id is provided the viewer is
3641 * bound to that id until it has been fully loaded. If null is provided
3642 * no image is loaded at viewer initialization and the viewer is not
3643 * bound to any particular id. Any image can then be navigated to
3644 * with e.g. `viewer.moveTo("<my-image-id>")`.
3648 * Value indicating if the viewer should fetch high resolution
3651 * @description Can be used when extending MapillaryJS with
3652 * a custom data provider. If no image tiling server exists
3653 * the image tiling can be inactivated to avoid error
3654 * messages about non-existing tiles in the console.
3658 imageTiling?: boolean;
3660 * The render mode in the viewer.
3662 * @default {@link RenderMode.Fill}
3664 renderMode?: RenderMode;
3666 * A base URL for retrieving a PNG sprite image and json metadata file.
3667 * File name extensions will be automatically appended.
3671 * If `true`, the viewer will automatically resize when the
3672 * browser window resizes.
3676 trackResize?: boolean;
3678 * The transtion mode in the viewer.
3680 * @default {@link TransitionMode.Default}
3682 transitionMode?: TransitionMode;
3689 declare class KeyboardService {
3692 constructor(canvasContainer: HTMLElement);
3693 get keyDown$(): Observable<KeyboardEvent>;
3694 get keyUp$(): Observable<KeyboardEvent>;
3697 declare class MouseService {
3698 private _activeSubject$;
3700 private _domMouseDown$;
3701 private _domMouseMove$;
3702 private _domMouseDragStart$;
3703 private _domMouseDrag$;
3704 private _domMouseDragEnd$;
3705 private _documentMouseMove$;
3706 private _documentMouseUp$;
3707 private _mouseDown$;
3708 private _mouseEnter$;
3709 private _mouseMove$;
3710 private _mouseLeave$;
3713 private _mouseOver$;
3714 private _contextMenu$;
3715 private _consistentContextMenu$;
3718 private _deferPixelClaims$;
3719 private _deferPixels$;
3720 private _proximateClick$;
3721 private _staticClick$;
3722 private _mouseWheel$;
3723 private _mouseDragStart$;
3724 private _mouseDrag$;
3725 private _mouseDragEnd$;
3726 private _mouseRightDragStart$;
3727 private _mouseRightDrag$;
3728 private _mouseRightDragEnd$;
3729 private _claimMouse$;
3730 private _claimWheel$;
3731 private _mouseOwner$;
3732 private _wheelOwner$;
3733 private _windowBlur$;
3734 private _subscriptions;
3735 constructor(container: EventTarget, canvasContainer: EventTarget, domContainer: EventTarget, doc: EventTarget);
3736 get active$(): Observable<boolean>;
3737 get activate$(): Subject<boolean>;
3738 get documentMouseMove$(): Observable<MouseEvent>;
3739 get documentMouseUp$(): Observable<MouseEvent>;
3740 get domMouseDragStart$(): Observable<MouseEvent>;
3741 get domMouseDrag$(): Observable<MouseEvent>;
3742 get domMouseDragEnd$(): Observable<MouseEvent | FocusEvent>;
3743 get domMouseDown$(): Observable<MouseEvent>;
3744 get domMouseMove$(): Observable<MouseEvent>;
3745 get mouseOwner$(): Observable<string>;
3746 get mouseDown$(): Observable<MouseEvent>;
3747 get mouseEnter$(): Observable<MouseEvent>;
3748 get mouseMove$(): Observable<MouseEvent>;
3749 get mouseLeave$(): Observable<MouseEvent>;
3750 get mouseOut$(): Observable<MouseEvent>;
3751 get mouseOver$(): Observable<MouseEvent>;
3752 get mouseUp$(): Observable<MouseEvent>;
3753 get click$(): Observable<MouseEvent>;
3754 get dblClick$(): Observable<MouseEvent>;
3755 get contextMenu$(): Observable<MouseEvent>;
3756 get mouseWheel$(): Observable<WheelEvent>;
3757 get mouseDragStart$(): Observable<MouseEvent>;
3758 get mouseDrag$(): Observable<MouseEvent>;
3759 get mouseDragEnd$(): Observable<MouseEvent | FocusEvent>;
3760 get mouseRightDragStart$(): Observable<MouseEvent>;
3761 get mouseRightDrag$(): Observable<MouseEvent>;
3762 get mouseRightDragEnd$(): Observable<MouseEvent | FocusEvent>;
3763 get proximateClick$(): Observable<MouseEvent>;
3764 get staticClick$(): Observable<MouseEvent>;
3765 get windowBlur$(): Observable<FocusEvent>;
3767 claimMouse(name: string, zindex: number): void;
3768 unclaimMouse(name: string): void;
3769 deferPixels(name: string, deferPixels: number): void;
3770 undeferPixels(name: string): void;
3771 claimWheel(name: string, zindex: number): void;
3772 unclaimWheel(name: string): void;
3773 filtered$<T>(name: string, observable$: Observable<T>): Observable<T>;
3774 filteredWheel$<T>(name: string, observable$: Observable<T>): Observable<T>;
3775 private _createDeferredMouseMove$;
3776 private _createMouseDrag$;
3777 private _createMouseDragEnd$;
3778 private _createMouseDragStart$;
3779 private _createMouseDragInitiate$;
3780 private _createOwner$;
3782 private _mouseButton;
3783 private _buttonReleased;
3784 private _isMousePen;
3788 * Enumeration for alignments
3792 declare enum Alignment {
3798 * Align to bottom left
3802 * Align to bottom right
3826 * Align to top right
3831 interface ISpriteAtlas {
3833 getGLSprite(name: string): THREE.Object3D;
3834 getDOMSprite(name: string, float?: Alignment): vd.VNode;
3837 declare class SpriteAtlas implements ISpriteAtlas {
3841 set json(value: Sprites);
3842 set image(value: HTMLImageElement);
3843 get loaded(): boolean;
3844 getGLSprite(name: string): THREE.Object3D;
3845 getDOMSprite(name: string, float?: Alignment): vd.VNode;
3855 [key: string]: Sprite;
3857 declare class SpriteService {
3859 private _spriteAtlasOperation$;
3860 private _spriteAtlas$;
3861 private _atlasSubscription;
3862 constructor(sprite?: string);
3863 get spriteAtlas$(): Observable<SpriteAtlas>;
3867 interface TouchPinch {
3869 * X client coordinate for center of pinch.
3873 * Y client coordinate for center of pinch.
3877 * X page coordinate for center of pinch.
3881 * Y page coordinate for center of pinch.
3885 * X screen coordinate for center of pinch.
3889 * Y screen coordinate for center of pinch.
3893 * Distance change in X direction between touches
3894 * compared to previous event.
3898 * Distance change in Y direction between touches
3899 * compared to previous event.
3903 * Pixel distance between touches.
3907 * Change in pixel distance between touches compared
3908 * to previous event.
3910 distanceChange: number;
3912 * Distance in X direction between touches.
3916 * Distance in Y direction between touches.
3920 * Original touch event.
3922 originalEvent: TouchEvent;
3933 declare class TouchService {
3934 private _activeSubject$;
3936 private _touchStart$;
3937 private _touchMove$;
3939 private _touchCancel$;
3940 private _singleTouchDrag$;
3941 private _singleTouchDragStart$;
3942 private _singleTouchDragEnd$;
3943 private _singleTouchMove$;
3944 private _pinchOperation$;
3946 private _pinchStart$;
3948 private _pinchChange$;
3949 private _doubleTap$;
3950 private _subscriptions;
3951 constructor(canvasContainer: HTMLElement, domContainer: HTMLElement);
3952 get active$(): Observable<boolean>;
3953 get activate$(): Subject<boolean>;
3954 get doubleTap$(): Observable<TouchEvent>;
3955 get touchStart$(): Observable<TouchEvent>;
3956 get touchMove$(): Observable<TouchEvent>;
3957 get touchEnd$(): Observable<TouchEvent>;
3958 get touchCancel$(): Observable<TouchEvent>;
3959 get singleTouchDragStart$(): Observable<TouchEvent>;
3960 get singleTouchDrag$(): Observable<TouchEvent>;
3961 get singleTouchDragEnd$(): Observable<TouchEvent>;
3962 get pinch$(): Observable<TouchPinch>;
3963 get pinchStart$(): Observable<TouchEvent>;
3964 get pinchEnd$(): Observable<TouchEvent>;
3969 * Test whether the current browser supports the full
3970 * functionality of MapillaryJS.
3972 * @description The full functionality includes WebGL rendering.
3976 * @example `var supported = isSupported();`
3978 declare function isSupported(): boolean;
3980 * Test whether the current browser supports the fallback
3981 * functionality of MapillaryJS.
3983 * @description The fallback functionality does not include WebGL
3984 * rendering, only 2D canvas rendering.
3988 * @example `var fallbackSupported = isFallbackSupported();`
3990 declare function isFallbackSupported(): boolean;
3992 declare type ComparisonFilterOperator = "==" | "!=" | ">" | ">=" | "<" | "<=";
3993 declare type SetMembershipFilterOperator = "in" | "!in";
3994 declare type CombiningFilterOperator = "all";
3995 declare type FilterOperator = CombiningFilterOperator | ComparisonFilterOperator | SetMembershipFilterOperator;
3996 declare type FilterImage = Pick<Image, "cameraType" | "capturedAt" | "clusterId" | "creatorId" | "creatorUsername" | "exifOrientation" | "height" | "id" | "mergeId" | "merged" | "ownerId" | "private" | "qualityScore" | "sequenceId" | "width">;
3997 declare type FilterKey = keyof FilterImage;
3998 declare type FilterValue = boolean | number | string;
3999 declare type ComparisonFilterExpression = [
4000 ComparisonFilterOperator,
4004 declare type SetMembershipFilterExpression = [
4005 SetMembershipFilterOperator,
4009 declare type CombiningFilterExpression = [
4010 CombiningFilterOperator,
4011 ...(ComparisonFilterExpression | SetMembershipFilterExpression)[]
4013 declare type FilterExpression = ComparisonFilterExpression | SetMembershipFilterExpression | CombiningFilterExpression;
4018 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";
4023 * @description Interface for custom camera controls.
4024 * This is a specification for implementers to model:
4025 * it is not an exported method or class.
4027 * Custom camera controls allow the API user to freely
4028 * move the viewer's camera and define the camera
4029 * projection used. These camera properties are used
4030 * to render the viewer 3D scene directly into the
4031 * viewer's GL context.
4033 * Custom camera controls must implement the
4034 * onActivate, onAnimationFrame, onAttach, onDeactivate,
4035 * onDetach, onReference, and onResize methods.
4037 * Custom camera controls trigger rerendering
4038 * automatically when the camera pose or projection
4039 * is changed through the projectionMatrix and
4040 * viewMatrix callbacks.
4043 * [model view projection article]{@link https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection}
4044 * on MDN for an introduction to view and projection matrices.
4046 * Custom camera controls can choose to make updates on
4047 * each animation frame or only based on user input.
4048 * Invoking updates on each camera frame is more resource
4051 * Only a single custom camera control instance can be
4052 * attached to the viewer at any given time.
4054 interface ICustomCameraControls {
4056 * Method called when the camera controls have been
4057 * activated and is responsible for moving the
4058 * viewer's camera and defining its projection. This
4059 * method gives the camera controls a chance to initialize
4060 * resources, perform any transitions, and determine
4063 * @description Use the {@link Viewer.getContainer} method
4064 * to get the container for determining the viewer size
4065 * and aspect as well as for attaching event handlers.
4067 * Use the view matrix to determine initial properties such
4068 * as camera position, forward vector, and up vector.
4070 * Use the projection matrix to determine the initial
4071 * projection properties.
4073 * Store the reference coordiante translations
4074 * during future reference reference changes.
4076 * @param {IViewer} viewer - The viewer this custom
4077 * camera controls instance was just added to.
4078 * @param {Array<number>} viewMatrix - The viewer's view matrix.
4079 * @param {Array<number>} projectionMatrix - The viewers's
4080 * projection matrix.
4081 * @param {LngLatAlt} reference - The viewer's reference.
4083 onActivate(viewer: IViewer, viewMatrix: number[], projectionMatrix: number[], reference: LngLatAlt): void;
4085 * Method called for each animation frame.
4087 * @desdcription Custom camera controls can choose to
4088 * make updates on each animation frame or only based on
4089 * user input. Invoking updates on each animation frame is
4090 * more resource intensive.
4092 * @param {IViewer} viewer - The viewer this custom
4093 * camera controls instance is attached to.
4095 * @param {number} frameId - The request animation frame's id.
4097 onAnimationFrame(viewer: IViewer, frameId: number): void;
4099 * Method called when the camera controls have been
4100 * attached to the viewer.
4101 * This gives the camera controls a chance to initialize
4104 * @description Camera controls are attached to the
4105 * viewer with the with {@link Viewer.attachCustomCameraControls}
4108 * Use the matrix callback functions
4109 * to modify the camera pose and projection of the
4112 * Invoking the matrix callbacks has no effect if the
4113 * custom camera controls have not been activated.
4115 * @param {IViewer} viewer - The viewer this custom
4116 * camera controls instance was just added to.
4118 onAttach(viewer: IViewer, viewMatrixCallback: (viewMatrix: number[]) => void, projectionMatrixCallback: (projectionMatrix: number[]) => void): void;
4120 * Method called when the camera controls have been deactivated.
4121 * This gives the camera controls a chance to clean up resources
4122 * and event listeners.
4124 * @param {IViewer} viewer - The viewer this custom camera controls
4125 * instance is attached to.
4127 onDeactivate(viewer: IViewer): void;
4129 * Method called when the camera controls have been detached from
4130 * the viewer. This gives the camera controls a chance to clean
4131 * up resources and event listeners.
4133 * @description Camera controls are attached to the
4134 * viewer with the with {@link Viewer.detachCustomCameraControls}
4137 * @param {IViewer} viewer - The viewer this custom camera
4138 * controls instance was just detached from.
4140 onDetach(viewer: IViewer): void;
4142 * Method called when the viewer's reference position has changed.
4143 * This gives the custom camera controls a chance to reposition
4146 * @description Calculate the updated topocentric positions
4147 * for scene objects using the previous reference, the
4148 * new provided reference as well as the
4149 * {@link geodeticToEnu} and
4150 * {@link enuToGeodetic} functions.
4152 * @param {IViewer} viewer - The viewer this custom renderer
4154 * @param {LngLatAlt} reference - The viewer's current
4155 * reference position.
4157 onReference(viewer: IViewer, reference: LngLatAlt): void;
4159 * Method called when the viewer has been resized.
4161 * @description Use this method to modify the projection.
4163 onResize(viewer: IViewer): void;
4166 declare enum RenderPass {
4168 * Occurs after the background render pass.
4176 * @description Interface for custom renderers. This is a
4177 * specification for implementers to model: it is not
4178 * an exported method or class.
4180 * A custom renderer allows the API user to render directly
4181 * into the viewer's GL context using the viewer's camera.
4183 * Custom renderers must have a unique id. They must implement
4184 * render, onReferenceChanged, onAdd, and onRemove. They can
4185 * trigger rendering using {@link Viewer.triggerRerender}.
4187 * The viewer uses a metric topocentric
4188 * [local east, north, up coordinate system](https://en.wikipedia.org/wiki/Local_tangent_plane_coordinates).
4190 * Custom renderers can calculate the topocentric positions
4191 * of their objects using the reference parameter of the
4192 * renderer interface methods and the {@link geodeticToEnu}
4195 * During a render pass, custom renderers
4196 * are called in the order they were added.
4198 interface ICustomRenderer {
4200 * A unique renderer id.
4204 * The custom renderer's render pass.
4206 * @description The {@link ICustomRenderer.render} method
4207 * will be called during this render pass.
4209 renderPass: RenderPass;
4211 * Method called when the renderer has been added to the
4212 * viewer. This gives the
4213 * renderer a chance to initialize gl resources and
4214 * register event listeners.
4216 * @description Custom renderers are added with the
4217 * with {@link Viewer.addCustomRenderer} method.
4219 * Calculate the topocentric positions
4220 * for scene objects using the provided reference and
4221 * the {@link geodeticToEnu} function.
4223 * @param {IViewer} viewer - The viewer this custom renderer
4224 * was just added to.
4225 * @param {LngLatAlt} reference - The viewer's current
4226 * reference position.
4227 * @param {WebGLRenderingContext | WebGL2RenderingContext} context -
4228 * The viewer's gl context.
4230 onAdd(viewer: IViewer, reference: LngLatAlt, context: WebGLRenderingContext | WebGL2RenderingContext): void;
4232 * Method called when the viewer's reference position has changed.
4233 * This gives the renderer a chance to reposition its scene objects.
4235 * @description Calculate the updated topocentric positions
4236 * for scene objects using the provided reference and
4237 * the {@link geodeticToEnu} function.
4239 * @param {IViewer} viewer - The viewer this custom renderer
4241 * @param {LngLatAlt} reference - The viewer's current
4242 * reference position.
4244 onReference(viewer: IViewer, reference: LngLatAlt): void;
4246 * Method called when the renderer has been removed from the
4247 * viewer. This gives the
4248 * renderer a chance to clean up gl resources and event
4251 * @description Custom renderers are remove with the
4252 * {@link Viewer.removeCustomRenderer} method.
4254 * @param {IViewer} viewer - The viewer this custom renderer
4255 * was just removed from.
4256 * @param {WebGLRenderingContext | WebGL2RenderingContext} context -
4257 * The viewer's gl context.
4259 onRemove(viewer: IViewer, context: WebGLRenderingContext | WebGL2RenderingContext): void;
4261 * Called during an animation frame allowing the renderer to draw
4262 * into the GL context. The layer cannot make assumptions
4263 * about the current GL state.
4265 * @description Take a look at the
4266 * [WebGL model view projection article](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection)
4267 * on MDN for an introduction to the view and projection matrices.
4269 * @param {WebGLRenderingContext | WebGL2RenderingContext} context The
4270 * viewer's WebGL context.
4271 * @param {Array<number>} viewMatrix The viewer's view matrix.
4272 * @param {Array<number>} projectionMatrix The viewers's projection
4275 render(context: WebGLRenderingContext | WebGL2RenderingContext, viewMatrix: number[], projectionMatrix: number[]): void;
4279 * @interface PointOfView
4281 * Interface that represents the point of view of the viewer.
4283 interface PointOfView {
4285 * Value indicating the current bearing of the viewer
4286 * measured in degrees clockwise with respect to north.
4287 * Ranges from 0° to 360°.
4291 * The camera tilt in degrees, relative to a horizontal plane.
4292 * Ranges from 90° (directly upwards) to -90° (directly downwards).
4298 readonly dataProvider: IDataProvider;
4299 readonly isNavigable: boolean;
4300 activateCombinedPanning(): void;
4301 activateComponent(name: string): void;
4302 activateCover(): void;
4303 addCustomRenderer(renderer: ICustomRenderer): void;
4304 attachCustomCameraControls(controls: ICustomCameraControls): void;
4305 deactivateCombinedPanning(): void;
4306 deactivateComponent(name: string): void;
4307 deactivateCover(): void;
4308 detachCustomCameraControls(): Promise<ICustomCameraControls>;
4309 fire<T>(type: ViewerEventType, event: T): void;
4310 getBearing(): Promise<number>;
4311 getCameraControls(): Promise<CameraControls>;
4312 getCanvas(): HTMLCanvasElement;
4313 getCanvasContainer(): HTMLDivElement;
4314 getCenter(): Promise<number[]>;
4315 getComponent<TComponent extends Component<ComponentConfiguration>>(name: string): TComponent;
4316 getContainer(): HTMLElement;
4317 getFieldOfView(): Promise<number>;
4318 getImage(): Promise<Image>;
4319 getPointOfView(): Promise<PointOfView>;
4320 getPosition(): Promise<LngLat>;
4321 getReference(): Promise<LngLatAlt>;
4322 getZoom(): Promise<number>;
4323 hasCustomCameraControls(controls: ICustomCameraControls): boolean;
4324 hasCustomRenderer(rendererId: string): boolean;
4325 moveDir(direction: NavigationDirection): Promise<Image>;
4326 moveTo(imageId: string): Promise<Image>;
4327 off<T>(type: ViewerEventType, handler: (event: T) => void): void;
4328 on<T>(type: ViewerEventType, handler: (event: T) => void): void;
4329 project(lngLat: LngLat): Promise<number[]>;
4330 projectFromBasic(basicPoint: number[]): Promise<number[]>;
4332 removeCustomRenderer(rendererId: string): void;
4334 setCameraControls(controls: CameraControls): void;
4335 setCenter(center: number[]): void;
4336 setFieldOfView(fov: number): void;
4337 setFilter(filter?: FilterExpression): Promise<void>;
4338 setRenderMode(renderMode: RenderMode): void;
4339 setTransitionMode(transitionMode: TransitionMode): void;
4340 setAccessToken(accessToken?: string): Promise<void>;
4341 setZoom(zoom: number): void;
4342 triggerRerender(): void;
4343 unproject(pixelPoint: number[]): Promise<LngLat>;
4344 unprojectToBasic(pixelPoint: number[]): Promise<number[]>;
4348 * Interface for general viewer events.
4350 interface ViewerEvent {
4352 * The viewer object that fired the event.
4358 type: ViewerEventType;
4362 * Interface for bearing viewer events.
4364 interface ViewerBearingEvent extends ViewerEvent {
4366 * Bearing is measured in degrees
4367 * clockwise with respect to north.
4369 * @description Bearing is related to the computed
4370 * compass angle ({@link Image.computedCompassAngle})
4371 * from SfM, not the original EXIF compass angle.
4378 * Interface for viewer data loading events.
4380 * @description Fired when any viewer data (image, mesh, metadata, etc)
4381 * begins loading or changing asyncronously as a result of viewer
4384 * Also fired when the data has finished loading and the viewer
4385 * is able to perform the navigation.
4387 interface ViewerDataLoadingEvent extends ViewerEvent {
4389 * Indicates if the viewer navigation is awaiting data load.
4392 type: "dataloading";
4396 * Interface for mouse-related viewer events.
4400 * // The `click` event is an example of a `ViewerMouseEvent`.
4401 * // Set up an event listener on the viewer.
4402 * viewer.on('click', function(e) {
4403 * // The event object contains information like the
4404 * // coordinates of the point in the viewer that was clicked.
4405 * console.log('A click event has occurred at ' + e.lngLat);
4409 interface ViewerMouseEvent extends ViewerEvent {
4411 * The basic coordinates in the current image of the mouse
4414 * @description In some situations mouse events can occur outside of
4415 * the border of a image. In that case the basic coordinates will be
4418 * The basic point is only provided when the
4419 * {@link CameraControls.Street} mode is active. For all other camera
4420 * control modes, the basic point will be `null`.
4422 * Basic coordinates are 2D coordinates on the [0, 1] interval
4423 * and has the origin point, (0, 0), at the top left corner and the
4424 * maximum value, (1, 1), at the bottom right corner of the original
4427 basicPoint: number[];
4429 * The geographic location in the viewer of the mouse event target.
4431 * @description In some situations the viewer can not determine a valid
4432 * geographic location for the mouse event target. In that case the
4433 * geographic coordinates will be `null`.
4437 * The pixel coordinates of the mouse event target, relative to
4438 * the viewer and measured from the top left corner.
4440 pixelPoint: number[];
4442 * The original event that triggered the viewer event.
4444 originalEvent: MouseEvent;
4448 type: "click" | "contextmenu" | "dblclick" | "mousedown" | "mousemove" | "mouseout" | "mouseover" | "mouseup";
4452 * Interface for navigable viewer events.
4454 interface ViewerNavigableEvent extends ViewerEvent {
4456 * The navigable state indicates if the viewer supports
4457 * moving, i.e. calling the `moveTo` and `moveDir`
4458 * methods. The viewer will not be in a navigable state if the cover
4459 * is activated and the viewer has been supplied a id. When the cover
4460 * is deactivated or activated without being supplied a id it will
4468 * Interface for navigation edge viewer events.
4470 interface ViewerNavigationEdgeEvent extends ViewerEvent {
4472 * The viewer's current navigation edge status.
4474 status: NavigationEdgeStatus;
4475 type: "sequenceedges" | "spatialedges";
4479 * Interface for viewer image events.
4481 interface ViewerImageEvent extends ViewerEvent {
4483 * The viewer's current image.
4490 * Interface for viewer state events.
4494 * // The `fov` event is an example of a `ViewerStateEvent`.
4495 * // Set up an event listener on the viewer.
4496 * viewer.on('fov', function(e) {
4497 * console.log('A fov event has occured');
4501 interface ViewerStateEvent extends ViewerEvent {
4505 type: "fov" | "moveend" | "movestart" | "position" | "pov" | "remove";
4508 declare type ComponentName = "attribution" | "bearing" | "cache" | "cover" | "direction" | "image" | "keyboard" | "marker" | "pointer" | "popup" | "sequence" | "slider" | "spatial" | "tag" | "zoom";
4510 declare type FallbackComponentName = "imagefallback" | "navigationfallback";
4513 * Interface for viewer load events.
4515 * @description Fired immediately after all necessary resources
4516 * have been downloaded and the first visually complete
4517 * rendering of the viewer has occurred.
4519 * The visually complete rendering does not include custom
4522 * This event is only fired for viewer configurations where
4523 * the WebGL context is created, i.e. not when using the
4524 * fallback functionality only.
4528 * // Set up an event listener on the viewer.
4529 * viewer.on('load', function(e) {
4530 * console.log('A load event has occured');
4534 interface ViewerLoadEvent extends ViewerEvent {
4539 * Interface for viewer reference events.
4541 interface ViewerReferenceEvent extends ViewerEvent {
4543 * The viewer's current reference.
4545 reference: LngLatAlt;
4552 * @classdesc The Viewer object represents the navigable image viewer.
4553 * Create a Viewer by specifying a container, client ID, image ID and
4554 * other options. The viewer exposes methods and events for programmatic
4557 * In the case of asynchronous methods, MapillaryJS returns promises to
4558 * the results. Notifications are always emitted through JavaScript events.
4560 declare class Viewer extends EventEmitter implements IViewer {
4562 * Private component controller object which manages component states.
4564 private _componentController;
4566 * Private container object which maintains the DOM Element,
4567 * renderers and relevant services.
4571 * Private observer object which observes the viewer state and
4572 * fires events on behalf of the viewer.
4576 * Private navigator object which controls navigation.
4580 * Private custom camera controls object which handles
4581 * custom control subscriptions.
4583 private _customCameraControls;
4585 * Private custom renderer object which controls WebGL custom
4586 * rendering subscriptions.
4588 private _customRenderer;
4590 * Create a new viewer instance.
4592 * @description The `Viewer` object represents the street imagery
4593 * viewer on your web page. It exposes methods and properties that
4594 * you can use to programatically change the view, and fires
4595 * events as users interact with it.
4597 * It is possible to initialize the viewer with or
4600 * When you want to show a specific image in the viewer from
4601 * the start you should initialize it with a ID.
4603 * When you do not know the first image ID at implementation
4604 * time, e.g. in a map-viewer application you should initialize
4605 * the viewer without a ID and call `moveTo` instead.
4607 * When initializing with an ID the viewer is bound to that ID
4608 * until the image for that ID has been successfully loaded.
4609 * Also, a cover with the image of the ID will be shown.
4610 * If the data for that ID can not be loaded because the ID is
4611 * faulty or other errors occur it is not possible to navigate
4612 * to another ID because the viewer is not navigable. The viewer
4613 * becomes navigable when the data for the ID has been loaded and
4614 * the image is shown in the viewer. This way of initializing
4615 * the viewer is mostly for embedding in blog posts and similar
4616 * where one wants to show a specific image initially.
4618 * If the viewer is initialized without a ID (with null or
4619 * undefined) it is not bound to any particular ID and it is
4620 * possible to move to any ID with `viewer.moveTo("<my-image-id>")`.
4621 * If the first move to a ID fails it is possible to move to another
4622 * ID. The viewer will show a black background until a move
4623 * succeeds. This way of intitializing is suited for a map-viewer
4624 * application when the initial ID is not known at implementation
4627 * @param {ViewerOptions} options - Optional configuration object
4628 * specifying Viewer's and the components' initial setup.
4632 * var viewer = new Viewer({
4633 * accessToken: "<my-access-token>",
4634 * container: "<my-container-id>",
4638 constructor(options: ViewerOptions);
4640 * Returns the data provider used by the viewer to fetch
4641 * all contracts, ents, and buffers.
4643 * @description The viewer's data provider can be set
4644 * upon initialization through the {@link ViewerOptions.dataProvider}
4647 * @returns {IDataProvider} The viewer's data provider.
4649 get dataProvider(): IDataProvider;
4651 * Return a boolean indicating if the viewer is in a navigable state.
4653 * @description The navigable state indicates if the viewer supports
4654 * moving, i.e. calling the {@link moveTo} and {@link moveDir}
4655 * methods or changing the authentication state,
4656 * i.e. calling {@link setAccessToken}. The viewer will not be in a navigable
4657 * state if the cover is activated and the viewer has been supplied a ID.
4658 * When the cover is deactivated or the viewer is activated without being
4659 * supplied a ID it will be navigable.
4661 * @returns {boolean} Boolean indicating whether the viewer is navigable.
4663 get isNavigable(): boolean;
4665 * Activate the combined panning functionality.
4667 * @description The combined panning functionality is active by default.
4669 activateCombinedPanning(): void;
4671 * Activate a component.
4673 * @param {ComponentName | FallbackComponentName} name - Name of
4674 * the component which will become active.
4678 * viewer.activateComponent("marker");
4681 activateComponent(name: ComponentName | FallbackComponentName): void;
4683 * Activate the cover (deactivates all other components).
4685 activateCover(): void;
4687 * Add a custom renderer to the viewer's rendering pipeline.
4689 * @description During a render pass, custom renderers
4690 * are called in the order they were added.
4692 * @param renderer - The custom renderer implementation.
4694 addCustomRenderer(renderer: ICustomRenderer): void;
4696 * Attach custom camera controls to control the viewer's
4697 * camera pose and projection.
4699 * @description Custom camera controls allow the API user
4700 * to move the viewer's camera freely and define the camera
4701 * projection. These camera properties are used
4702 * to render the viewer 3D scene directly into the
4703 * viewer's GL context.
4705 * Only a single custom camera control instance can be
4706 * attached to the viewer. A new custom camera control
4707 * instance can be attached after detaching a previous
4710 * Set the viewer's camera controls to
4711 * {@link CameraControls.Custom} to activate attached
4712 * camera controls. If {@link CameraControls.Custom}
4713 * has already been set when a custom camera control
4714 * instance is attached, it will be activated immediately.
4716 * Set the viewer's camera controls to any other
4717 * {@link CameraControls} mode to deactivate the
4718 * custom camera controls.
4720 * @param controls - The custom camera controls implementation.
4722 * @throws {MapillaryError} When camera controls attached
4723 * are already attached to the viewer.
4725 attachCustomCameraControls(controls: ICustomCameraControls): void;
4727 * Deactivate the combined panning functionality.
4729 * @description Deactivating the combined panning functionality
4730 * could be needed in scenarios involving sequence only navigation.
4732 deactivateCombinedPanning(): void;
4734 * Deactivate a component.
4736 * @param {ComponentName | FallbackComponentName} name - Name
4737 * of component which become inactive.
4741 * viewer.deactivateComponent("pointer");
4744 deactivateComponent(name: ComponentName | FallbackComponentName): void;
4746 * Deactivate the cover (activates all components marked as active).
4748 deactivateCover(): void;
4750 * Detach a previously attached custom camera control
4751 * instance from the viewer.
4753 * @description If no custom camera control instance
4754 * has previously been attached, calling this method
4757 * Already attached custom camera controls need to
4758 * be detached before attaching another custom camera
4761 detachCustomCameraControls(): Promise<ICustomCameraControls>;
4762 fire(type: ViewerBearingEvent["type"], event: ViewerBearingEvent): void;
4763 fire(type: ViewerDataLoadingEvent["type"], event: ViewerDataLoadingEvent): void;
4764 fire(type: ViewerNavigableEvent["type"], event: ViewerNavigableEvent): void;
4765 fire(type: ViewerImageEvent["type"], event: ViewerImageEvent): void;
4766 fire(type: ViewerNavigationEdgeEvent["type"], event: ViewerNavigationEdgeEvent): void;
4767 fire(type: ViewerReferenceEvent["type"], event: ViewerReferenceEvent): void;
4768 fire(type: ViewerStateEvent["type"], event: ViewerStateEvent): void;
4769 fire(type: ViewerMouseEvent["type"], event: ViewerMouseEvent): void;
4771 * Get the bearing of the current viewer camera.
4773 * @description The bearing depends on how the camera
4774 * is currently rotated and does not correspond
4775 * to the compass angle of the current image if the view
4778 * Bearing is measured in degrees clockwise with respect to
4781 * @returns {Promise<number>} Promise to the bearing
4782 * of the current viewer camera.
4786 * viewer.getBearing().then(b => { console.log(b); });
4789 getBearing(): Promise<number>;
4791 * Get the viewer's camera control mode.
4793 * @description The camera control mode determines
4794 * how the camera is controlled when the viewer
4795 * receives pointer and keyboard input.
4797 * @returns {CameraControls} controls - Camera control mode.
4801 * viewer.getCameraControls().then(c => { console.log(c); });
4804 getCameraControls(): Promise<CameraControls>;
4806 * Returns the viewer's canvas element.
4808 * @description This is the element onto which the viewer renders
4809 * the WebGL content.
4811 * @returns {HTMLCanvasElement} The viewer's canvas element, or
4812 * null or not initialized.
4814 getCanvas(): HTMLCanvasElement;
4816 * Returns the HTML element containing the viewer's canvas element.
4818 * @description This is the element to which event bindings for viewer
4819 * interactivity (such as panning and zooming) are attached.
4821 * @returns {HTMLDivElement} The container for the viewer's
4824 getCanvasContainer(): HTMLDivElement;
4826 * Get the basic coordinates of the current image that is
4827 * at the center of the viewport.
4829 * @description Basic coordinates are 2D coordinates on the [0, 1] interval
4830 * and have the origin point, (0, 0), at the top left corner and the
4831 * maximum value, (1, 1), at the bottom right corner of the original
4834 * @returns {Promise<number[]>} Promise to the basic coordinates
4835 * of the current image at the center for the viewport.
4839 * viewer.getCenter().then(c => { console.log(c); });
4842 getCenter(): Promise<number[]>;
4846 * @param {string} name - Name of component.
4847 * @returns {Component} The requested component.
4851 * var pointerComponent = viewer.getComponent("pointer");
4854 getComponent<TComponent extends Component<ComponentConfiguration>>(name: ComponentName | FallbackComponentName): TComponent;
4856 * Returns the viewer's containing HTML element.
4858 * @returns {HTMLElement} The viewer's container.
4860 getContainer(): HTMLElement;
4862 * Get the viewer's current vertical field of view.
4864 * @description The vertical field of view rendered on the viewer canvas
4865 * measured in degrees.
4867 * @returns {Promise<number>} Promise to the current field of view
4868 * of the viewer camera.
4872 * viewer.getFieldOfView().then(fov => { console.log(fov); });
4875 getFieldOfView(): Promise<number>;
4877 * Get the viewer's current image.
4879 * @returns {Promise<Image>} Promise to the current image.
4883 * viewer.getImage().then(image => { console.log(image.id); });
4886 getImage(): Promise<Image>;
4888 * Get the viewer's current point of view.
4890 * @returns {Promise<PointOfView>} Promise to the current point of view
4891 * of the viewer camera.
4895 * viewer.getPointOfView().then(pov => { console.log(pov); });
4898 getPointOfView(): Promise<PointOfView>;
4900 * Get the viewer's current position
4902 * @returns {Promise<LngLat>} Promise to the viewers's current
4907 * viewer.getPosition().then(pos => { console.log(pos); });
4910 getPosition(): Promise<LngLat>;
4912 * Get the viewer's current reference position.
4914 * @description The reference position specifies the origin in
4915 * the viewer's topocentric coordinate system.
4917 * @returns {Promise<LngLatAlt>} Promise to the reference position.
4921 * viewer.getReference().then(reference => { console.log(reference); });
4924 getReference(): Promise<LngLatAlt>;
4926 * Get the image's current zoom level.
4928 * @returns {Promise<number>} Promise to the viewers's current
4933 * viewer.getZoom().then(z => { console.log(z); });
4936 getZoom(): Promise<number>;
4938 * Check if a controls instance is the camera controls that are
4939 * currently attached to the viewer.
4941 * @param {ICustomCameraControls} controls - Camera controls instance.
4942 * @returns {boolean} Value indicating whether the controls instance
4943 * is currently attached.
4945 hasCustomCameraControls(controls: ICustomCameraControls): boolean;
4947 * Check if a custom renderer has been added to the viewer's
4948 * rendering pipeline.
4950 * @param {string} id - Unique ID of the custom renderer.
4951 * @returns {boolean} Value indicating whether the customer
4952 * renderer has been added.
4954 hasCustomRenderer(rendererId: string): boolean;
4956 * Navigate in a given direction.
4958 * @param {NavigationDirection} direction - Direction in which which to move.
4959 * @returns {Promise<Image>} Promise to the image that was navigated to.
4960 * @throws If the current image does not have the edge direction
4961 * or the edges has not yet been cached.
4962 * @throws Propagates any IO errors to the caller.
4963 * @throws When viewer is not navigable.
4964 * @throws {@link CancelMapillaryError} When a subsequent move request
4965 * is made before the move dir call has completed.
4969 * viewer.moveDir(NavigationDirection.Next).then(
4970 * image => { console.log(image); },
4971 * error => { console.error(error); });
4974 moveDir(direction: NavigationDirection): Promise<Image>;
4976 * Navigate to a given image ID.
4978 * @param {string} imageId - Id of the image to move to.
4979 * @returns {Promise<Image>} Promise to the image that was navigated to.
4980 * @throws Propagates any IO errors to the caller.
4981 * @throws When viewer is not navigable.
4982 * @throws {@link CancelMapillaryError} When a subsequent
4983 * move request is made before the move to ID call has completed.
4987 * viewer.moveTo("<my-image-id>").then(
4988 * image => { console.log(image); },
4989 * error => { console.error(error); });
4992 moveTo(imageId: string): Promise<Image>;
4993 off(type: ViewerBearingEvent["type"], handler: (event: ViewerBearingEvent) => void): void;
4994 off(type: ViewerDataLoadingEvent["type"], handler: (event: ViewerDataLoadingEvent) => void): void;
4995 off(type: ViewerNavigableEvent["type"], handler: (event: ViewerNavigableEvent) => void): void;
4996 off(type: ViewerImageEvent["type"], handler: (event: ViewerImageEvent) => void): void;
4997 off(type: ViewerNavigationEdgeEvent["type"], handler: (event: ViewerNavigationEdgeEvent) => void): void;
4998 off(type: ViewerReferenceEvent["type"], handler: (event: ViewerReferenceEvent) => void): void;
4999 off(type: ViewerStateEvent["type"], handler: (event: ViewerStateEvent) => void): void;
5000 off(type: ViewerMouseEvent["type"], handler: (event: ViewerMouseEvent) => void): void;
5002 * Fired when the viewing direction of the camera changes.
5007 * // Initialize the viewer
5008 * var viewer = new Viewer({ // viewer options });
5009 * // Set an event listener
5010 * viewer.on("bearing", function() {
5011 * console.log("A bearing event has occurred.");
5015 on(type: "bearing", handler: (event: ViewerBearingEvent) => void): void;
5017 * Fired when a pointing device (usually a mouse) is
5018 * pressed and released at the same point in the viewer.
5023 * // Initialize the viewer
5024 * var viewer = new Viewer({ // viewer options });
5025 * // Set an event listener
5026 * viewer.on("click", function() {
5027 * console.log("A click event has occurred.");
5031 on(type: "click", handler: (event: ViewerMouseEvent) => void): void;
5033 * Fired when the right button of the mouse is clicked
5034 * within the viewer.
5036 * @event contextmenu
5039 * // Initialize the viewer
5040 * var viewer = new Viewer({ // viewer options });
5041 * // Set an event listener
5042 * viewer.on("contextmenu", function() {
5043 * console.log("A contextmenu event has occurred.");
5047 on(type: "contextmenu", handler: (event: ViewerMouseEvent) => void): void;
5049 * Fired when the viewer is loading data.
5054 * // Initialize the viewer
5055 * var viewer = new Viewer({ // viewer options });
5056 * // Set an event listener
5057 * viewer.on("dataloading", function() {
5058 * console.log("A loading event has occurred.");
5062 on(type: "dataloading", handler: (event: ViewerDataLoadingEvent) => void): void;
5064 * Fired when a pointing device (usually a mouse) is clicked twice at
5065 * the same point in the viewer.
5070 * // Initialize the viewer
5071 * var viewer = new Viewer({ // viewer options });
5072 * // Set an event listener
5073 * viewer.on("dblclick", function() {
5074 * console.log("A dblclick event has occurred.");
5078 on(type: "dblclick", handler: (event: ViewerMouseEvent) => void): void;
5080 * Fired when the viewer's vertical field of view changes.
5085 * // Initialize the viewer
5086 * var viewer = new Viewer({ // viewer options });
5087 * // Set an event listener
5088 * viewer.on("fov", function() {
5089 * console.log("A fov event has occurred.");
5093 on(type: "fov", handler: (event: ViewerStateEvent) => void): void;
5095 * Fired immediately after all necessary resources
5096 * have been downloaded and the first visually complete
5097 * rendering of the viewer has occurred.
5099 * This event is only fired for viewer configurations where
5100 * the WebGL context is created, i.e. not when using the
5101 * fallback functionality only.
5107 * // Set an event listener
5108 * viewer.on('load', function(event) {
5109 * console.log('A load event has occured');
5113 on(type: "load", handler: (event: ViewerLoadEvent) => void): void;
5115 * Fired when a pointing device (usually a mouse) is pressed
5116 * within the viewer.
5121 * // Initialize the viewer
5122 * var viewer = new Viewer({ // viewer options });
5123 * // Set an event listener
5124 * viewer.on("mousedown", function() {
5125 * console.log("A mousedown event has occurred.");
5129 on(type: "mousedown", handler: (event: ViewerMouseEvent) => void): void;
5131 * Fired when a pointing device (usually a mouse)
5132 * is moved within the viewer.
5137 * // Initialize the viewer
5138 * var viewer = new Viewer({ // viewer options });
5139 * // Set an event listener
5140 * viewer.on("mousemove", function() {
5141 * console.log("A mousemove event has occurred.");
5145 on(type: "mousemove", handler: (event: ViewerMouseEvent) => void): void;
5147 * Fired when a pointing device (usually a mouse)
5148 * leaves the viewer's canvas.
5153 * // Initialize the viewer
5154 * var viewer = new Viewer({ // viewer options });
5155 * // Set an event listener
5156 * viewer.on("mouseout", function() {
5157 * console.log("A mouseout event has occurred.");
5161 on(type: "mouseout", handler: (event: ViewerMouseEvent) => void): void;
5163 * Fired when a pointing device (usually a mouse)
5164 * is moved onto the viewer's canvas.
5169 * // Initialize the viewer
5170 * var viewer = new Viewer({ // viewer options });
5171 * // Set an event listener
5172 * viewer.on("mouseover", function() {
5173 * console.log("A mouseover event has occurred.");
5177 on(type: "mouseover", handler: (event: ViewerMouseEvent) => void): void;
5179 * Fired when a pointing device (usually a mouse)
5180 * is released within the viewer.
5185 * // Initialize the viewer
5186 * var viewer = new Viewer({ // viewer options });
5187 * // Set an event listener
5188 * viewer.on("mouseup", function() {
5189 * console.log("A mouseup event has occurred.");
5193 on(type: "mouseup", handler: (event: ViewerMouseEvent) => void): void;
5195 * Fired when the viewer motion stops and it is in a fixed
5196 * position with a fixed point of view.
5201 * // Initialize the viewer
5202 * var viewer = new Viewer({ // viewer options });
5203 * // Set an event listener
5204 * viewer.on("moveend", function() {
5205 * console.log("A moveend event has occurred.");
5209 on(type: "moveend", handler: (event: ViewerStateEvent) => void): void;
5211 * Fired when the motion from one view to another start,
5212 * either by changing the position (e.g. when changing image)
5213 * or when changing point of view
5214 * (e.g. by interaction such as pan and zoom).
5219 * // Initialize the viewer
5220 * var viewer = new Viewer({ // viewer options });
5221 * // Set an event listener
5222 * viewer.on("movestart", function() {
5223 * console.log("A movestart event has occurred.");
5227 on(type: "movestart", handler: (event: ViewerStateEvent) => void): void;
5229 * Fired when the navigable state of the viewer changes.
5234 * // Initialize the viewer
5235 * var viewer = new Viewer({ // viewer options });
5236 * // Set an event listener
5237 * viewer.on("navigable", function() {
5238 * console.log("A navigable event has occurred.");
5242 on(type: "navigable", handler: (event: ViewerNavigableEvent) => void): void;
5244 * Fired every time the viewer navigates to a new image.
5249 * // Initialize the viewer
5250 * var viewer = new Viewer({ // viewer options });
5251 * // Set an event listener
5252 * viewer.on("image", function() {
5253 * console.log("A image event has occurred.");
5257 on(type: "image", handler: (event: ViewerImageEvent) => void): void;
5259 * Fired when the viewer's position changes.
5261 * @description The viewer's position changes when transitioning
5267 * // Initialize the viewer
5268 * var viewer = new Viewer({ // viewer options });
5269 * // Set an event listener
5270 * viewer.on("position", function() {
5271 * console.log("A position event has occurred.");
5275 on(type: "position", handler: (event: ViewerStateEvent) => void): void;
5277 * Fired when the viewer's point of view changes. The
5278 * point of view changes when the bearing, or tilt changes.
5283 * // Initialize the viewer
5284 * var viewer = new Viewer({ // viewer options });
5285 * // Set an event listener
5286 * viewer.on("pov", function() {
5287 * console.log("A pov event has occurred.");
5291 on(type: "pov", handler: (event: ViewerStateEvent) => void): void;
5293 * Fired when the viewer's reference position changes.
5295 * The reference position specifies the origin in
5296 * the viewer's topocentric coordinate system.
5301 * // Initialize the viewer
5302 * var viewer = new Viewer({ // viewer options });
5303 * // Set an event listener
5304 * viewer.on("reference", function(reference) {
5305 * console.log("A reference event has occurred.");
5309 on(type: "reference", handler: (event: ViewerReferenceEvent) => void): void;
5311 * Fired when the viewer is removed. After this event is emitted
5312 * you must not call any methods on the viewer.
5317 * // Initialize the viewer
5318 * var viewer = new Viewer({ // viewer options });
5319 * // Set an event listener
5320 * viewer.on("remove", function() {
5321 * console.log("A remove event has occurred.");
5325 on(type: "remove", handler: (event: ViewerStateEvent) => void): void;
5327 * Fired every time the sequence edges of the current image changes.
5329 * @event sequenceedges
5332 * // Initialize the viewer
5333 * var viewer = new Viewer({ // viewer options });
5334 * // Set an event listener
5335 * viewer.on("sequenceedges", function() {
5336 * console.log("A sequenceedges event has occurred.");
5340 on(type: "sequenceedges", handler: (event: ViewerNavigationEdgeEvent) => void): void;
5342 * Fired every time the spatial edges of the current image changes.
5344 * @event spatialedges
5347 * // Initialize the viewer
5348 * var viewer = new Viewer({ // viewer options });
5349 * // Set an event listener
5350 * viewer.on("spatialedges", function() {
5351 * console.log("A spatialedges event has occurred.");
5355 on(type: "spatialedges", handler: (event: ViewerNavigationEdgeEvent) => void): void;
5357 * Project geodetic coordinates to canvas pixel coordinates.
5359 * @description The geodetic coordinates may not always correspond to pixel
5360 * coordinates, e.g. if the geodetic coordinates have a position behind the
5361 * viewer camera. In the case of no correspondence the returned value will
5364 * If the distance from the viewer camera position to the provided
5365 * longitude-latitude is more than 1000 meters `null` will be returned.
5367 * The projection is performed from the ground plane, i.e.
5368 * the altitude with respect to the ground plane for the geodetic
5371 * Note that whenever the camera moves, the result of the method will be
5374 * @param {LngLat} lngLat - Geographical coordinates to project.
5375 * @returns {Promise<Array<number>>} Promise to the pixel coordinates corresponding
5380 * viewer.project({ lat: 0, lng: 0 })
5381 * .then(pixelPoint => {
5382 * if (!pixelPoint) {
5383 * console.log("no correspondence");
5386 * console.log(pixelPoint);
5390 project(lngLat: LngLat): Promise<number[]>;
5392 * Project basic image coordinates for the current image to canvas pixel
5395 * @description The basic image coordinates may not always correspond to a
5396 * pixel point that lies in the visible area of the viewer container. In the
5397 * case of no correspondence the returned value can be `null`.
5400 * @param {Array<number>} basicPoint - Basic images coordinates to project.
5401 * @returns {Promise<Array<number>>} Promise to the pixel coordinates corresponding
5402 * to the basic image point.
5406 * viewer.projectFromBasic([0.3, 0.7])
5407 * .then(pixelPoint => { console.log(pixelPoint); });
5410 projectFromBasic(basicPoint: number[]): Promise<number[]>;
5412 * Clean up and release all internal resources associated with
5415 * @description This includes DOM elements, event bindings, and
5418 * Use this method when you are done using the viewer and wish to
5419 * ensure that it no longer consumes browser resources. Afterwards,
5420 * you must not call any other methods on the viewer.
5431 * Remove a custom renderer from the viewer's rendering pipeline.
5433 * @param id - Unique ID of the custom renderer.
5435 removeCustomRenderer(rendererId: string): void;
5437 * Detect the viewer's new width and height and resize it
5440 * @description The components will also detect the viewer's
5441 * new size and resize their rendered elements if needed.
5443 * When the {@link ViewerOptions.trackResize} option is
5444 * set to true, the viewer will automatically resize
5445 * when the browser window is resized. If any other
5446 * custom behavior is preferred, the option should be set
5447 * to false and the {@link Viewer.resize} method should
5448 * be called on demand.
5457 * Set the viewer's camera control mode.
5459 * @description The camera control mode determines
5460 * how the camera is controlled when the viewer
5461 * receives pointer and keyboard input.
5463 * Changing the camera control mode is not possible
5464 * when the slider component is active and attempts
5465 * to do so will be ignored.
5467 * @param {CameraControls} controls - Camera control mode.
5471 * viewer.setCameraControls(CameraControls.Street);
5474 setCameraControls(controls: CameraControls): void;
5476 * Set the basic coordinates of the current image to be in the
5477 * center of the viewport.
5479 * @description Basic coordinates are 2D coordinates on the [0, 1] interval
5480 * and has the origin point, (0, 0), at the top left corner and the
5481 * maximum value, (1, 1), at the bottom right corner of the original
5484 * @param {number[]} The basic coordinates of the current
5485 * image to be at the center for the viewport.
5489 * viewer.setCenter([0.5, 0.5]);
5492 setCenter(center: number[]): void;
5494 * Set the viewer's current vertical field of view.
5496 * @description Sets the vertical field of view rendered
5497 * on the viewer canvas measured in degrees. The value
5498 * will be clamped to be able to set a valid zoom level
5499 * based on the projection model of the current image and
5500 * the viewer's current render mode.
5502 * @param {number} fov - Vertical field of view in degrees.
5506 * viewer.setFieldOfView(45);
5509 setFieldOfView(fov: number): void;
5511 * Set the filter selecting images to use when calculating
5512 * the spatial edges.
5514 * @description The following filter types are supported:
5518 * `["==", key, value]` equality: `image[key] = value`
5520 * `["!=", key, value]` inequality: `image[key] ≠value`
5522 * `["<", key, value]` less than: `image[key] < value`
5524 * `["<=", key, value]` less than or equal: `image[key] ≤ value`
5526 * `[">", key, value]` greater than: `image[key] > value`
5528 * `[">=", key, value]` greater than or equal: `image[key] ≥ value`
5532 * `["in", key, v0, ..., vn]` set inclusion: `image[key] ∈ {v0, ..., vn}`
5534 * `["!in", key, v0, ..., vn]` set exclusion: `image[key] ∉ {v0, ..., vn}`
5538 * `["all", f0, ..., fn]` logical `AND`: `f0 ∧ ... ∧ fn`
5540 * A key must be a string that identifies a property name of a
5541 * simple {@link Image} property, i.e. a key of the {@link FilterKey}
5542 * type. A value must be a string, number, or
5543 * boolean. Strictly-typed comparisons are used. The values
5544 * `f0, ..., fn` of the combining filter must be filter expressions.
5546 * Clear the filter by setting it to null or empty array.
5548 * Commonly used filter properties (see the {@link Image} class
5549 * documentation for a full list of properties that can be used
5550 * in a filter) are shown the the example code.
5552 * @param {FilterExpression} [filter] - The filter expression.
5553 * Applied filter is cleared if omitted.
5554 * @returns {Promise<void>} Promise that resolves after filter is applied.
5559 * viewer.setFilter(["==", "cameraType", "spherical"]);
5560 * viewer.setFilter([">=", "capturedAt", <my-time-stamp>]);
5561 * viewer.setFilter(["in", "sequenceId", "<sequence-id-1>", "<sequence-id-2>"]);
5564 setFilter(filter?: FilterExpression): Promise<void>;
5566 * Set the viewer's render mode.
5568 * @param {RenderMode} renderMode - Render mode.
5572 * viewer.setRenderMode(RenderMode.Letterbox);
5575 setRenderMode(renderMode: RenderMode): void;
5577 * Set the viewer's transition mode.
5579 * @param {TransitionMode} transitionMode - Transition mode.
5583 * viewer.setTransitionMode(TransitionMode.Instantaneous);
5586 setTransitionMode(transitionMode: TransitionMode): void;
5588 * Set an access token for authenticated API requests of protected
5591 * The token may be a user access token or a client access token.
5593 * @description When the supplied user token is null or undefined,
5594 * any previously set user bearer token will be cleared and the
5595 * viewer will make unauthenticated requests.
5597 * Calling setAccessToken aborts all outstanding move requests.
5598 * The promises of those move requests will be rejected with a
5599 * {@link CancelMapillaryError} the rejections need to be caught.
5601 * Calling setAccessToken also resets the complete viewer cache
5602 * so it should not be called repeatedly.
5604 * @param {string} [accessToken] accessToken - Optional user
5605 * access token or client access token.
5606 * @returns {Promise<void>} Promise that resolves after token
5609 * @throws When viewer is not navigable.
5613 * viewer.setAccessToken("<my access token>")
5614 * .then(() => { console.log("user token set"); });
5617 setAccessToken(accessToken?: string): Promise<void>;
5619 * Set the image's current zoom level.
5621 * @description Possible zoom level values are on the [0, 3] interval.
5622 * Zero means zooming out to fit the image to the view whereas three
5623 * shows the highest level of detail.
5625 * @param {number} The image's current zoom level.
5629 * viewer.setZoom(2);
5632 setZoom(zoom: number): void;
5634 * Trigger the rendering of a single frame.
5636 * @description Use this method with custom renderers to
5637 * force the viewer to rerender when the custom content
5638 * changes. Calling this multiple times before the next
5639 * frame is rendered will still result in only a single
5640 * frame being rendered.
5642 triggerRerender(): void;
5644 * Unproject canvas pixel coordinates to geodetic
5647 * @description The pixel point may not always correspond to geodetic
5648 * coordinates. In the case of no correspondence the returned value will
5651 * The unprojection to a lngLat will be performed towards the ground plane, i.e.
5652 * the altitude with respect to the ground plane for the returned lngLat is zero.
5654 * @param {Array<number>} pixelPoint - Pixel coordinates to unproject.
5655 * @returns {Promise<LngLat>} Promise to the lngLat corresponding to the pixel point.
5659 * viewer.unproject([100, 100])
5660 * .then(lngLat => { console.log(lngLat); });
5663 unproject(pixelPoint: number[]): Promise<LngLat>;
5665 * Unproject canvas pixel coordinates to basic image coordinates for the
5668 * @description The pixel point may not always correspond to basic image
5669 * coordinates. In the case of no correspondence the returned value will
5672 * @param {Array<number>} pixelPoint - Pixel coordinates to unproject.
5673 * @returns {Promise<LngLat>} Promise to the basic coordinates corresponding
5674 * to the pixel point.
5678 * viewer.unprojectToBasic([100, 100])
5679 * .then(basicPoint => { console.log(basicPoint); });
5682 unprojectToBasic(pixelPoint: number[]): Promise<number[]>;
5686 * @class MapillaryError
5688 * @classdesc Generic Mapillary error.
5690 declare class MapillaryError extends Error {
5691 constructor(message?: string);
5695 * @class CancelMapillaryError
5697 * @classdesc Error thrown when a move to request has been
5698 * cancelled before completing because of a subsequent request.
5700 declare class CancelMapillaryError extends MapillaryError {
5701 constructor(message?: string);
5704 declare class ArgumentMapillaryError extends MapillaryError {
5705 constructor(message?: string);
5708 declare class GraphMapillaryError extends MapillaryError {
5709 constructor(message: string);
5712 declare class ConfigurationService {
5713 private _imageTiling$;
5714 private _exploreUrl$;
5715 constructor(options: ViewerOptions);
5716 get exploreUrl$(): Observable<string>;
5717 get imageTiling$(): Observable<boolean>;
5720 declare class Container {
5722 renderService: RenderService;
5723 glRenderer: GLRenderer;
5724 domRenderer: DOMRenderer;
5725 keyboardService: KeyboardService;
5726 mouseService: MouseService;
5727 touchService: TouchService;
5728 spriteService: SpriteService;
5729 readonly configurationService: ConfigurationService;
5730 private _canvasContainer;
5733 private _domContainer;
5735 private readonly _trackResize;
5736 constructor(options: ViewerOptions, stateService: StateService, dom?: DOM);
5737 get canvas(): HTMLCanvasElement;
5738 get canvasContainer(): HTMLDivElement;
5739 get container(): HTMLElement;
5740 get domContainer(): HTMLDivElement;
5742 private _onWindowResize;
5743 private _removeNode;
5746 declare type Func<T, TResult> = (item: T) => TResult;
5748 declare type FilterFunction = Func<Image, boolean>;
5752 * @classdesc Represents a class for creating image filters. Implementation and
5753 * definitions based on https://github.com/mapbox/feature-filter.
5755 declare class FilterCreator {
5757 * Create a filter from a filter expression.
5759 * @description The following filters are supported:
5776 * @param {FilterExpression} filter - Comparison, set membership or combinding filter
5778 * @returns {FilterFunction} Function taking a image and returning a boolean that
5779 * indicates whether the image passed the test or not.
5781 createFilter(filter: FilterExpression): FilterFunction;
5784 private _compileComparisonOp;
5785 private _compileInOp;
5786 private _compileLogicalOp;
5787 private _compileNegation;
5788 private _compilePropertyReference;
5792 * @class GraphCalculator
5794 * @classdesc Represents a calculator for graph entities.
5796 declare class GraphCalculator {
5798 * Get the bounding box corners for a circle with radius of a threshold
5799 * with center in a geodetic position.
5801 * @param {LngLat} lngLat - Longitude, latitude to encode.
5802 * @param {number} threshold - Threshold distance from the position in meters.
5804 * @returns {Array<LngLat>} The south west and north east corners of the
5807 boundingBoxCorners(lngLat: LngLat, threshold: number): [LngLat, LngLat];
5809 * Convert a compass angle to an angle axis rotation vector.
5811 * @param {number} compassAngle - The compass angle in degrees.
5812 * @param {number} orientation - The orientation of the original image.
5814 * @returns {Array<number>} Angle axis rotation vector.
5816 rotationFromCompass(compassAngle: number, orientation: number): number[];
5822 * @classdesc Represents a sequence of ordered images.
5824 declare class Sequence {
5828 * Create a new sequene instance.
5830 * @param {SequenceEnt} sequence - Raw sequence data.
5832 constructor(sequence: SequenceEnt);
5836 * @returns {string} Unique sequence id.
5842 * @returns {Array<string>} Array of ordered image ids in the sequence.
5844 get imageIds(): string[];
5846 * Dispose the sequence.
5848 * @description Disposes all cached assets.
5852 * Find the next image id in the sequence with respect to
5853 * the provided image id.
5855 * @param {string} id - Reference image id.
5856 * @returns {string} Next id in sequence if it exists, null otherwise.
5858 findNext(id: string): string;
5860 * Find the previous image id in the sequence with respect to
5861 * the provided image id.
5863 * @param {string} id - Reference image id.
5864 * @returns {string} Previous id in sequence if it exists, null otherwise.
5866 findPrev(id: string): string;
5870 * Interface for graph configuration.
5872 * @interface GraphConfiguration
5874 interface GraphConfiguration {
5876 * The maximum number of cached sequences left
5879 maxSequences: number;
5881 * The maximum number of unused cached images left
5884 maxUnusedImages: number;
5886 * The maximum number of unused pre-stored cached images left
5889 maxUnusedPreStoredImages: number;
5891 * The maximum number of unused cached tiles left
5894 maxUnusedTiles: number;
5897 declare class EdgeCalculatorCoefficients {
5898 sphericalPreferredDistance: number;
5899 sphericalMotion: number;
5900 sphericalSequencePenalty: number;
5901 sphericalMergeCCPenalty: number;
5902 stepPreferredDistance: number;
5904 stepRotation: number;
5905 stepSequencePenalty: number;
5906 stepMergeCCPenalty: number;
5907 similarDistance: number;
5908 similarRotation: number;
5909 turnDistance: number;
5911 turnSequencePenalty: number;
5912 turnMergeCCPenalty: number;
5916 interface SphericalDirection {
5917 direction: NavigationDirection;
5918 prev: NavigationDirection;
5919 next: NavigationDirection;
5920 directionChange: number;
5923 interface StepDirection {
5924 direction: NavigationDirection;
5925 motionChange: number;
5926 useFallback: boolean;
5929 interface TurnDirection {
5930 direction: NavigationDirection;
5931 directionChange: number;
5932 motionChange?: number;
5935 declare class EdgeCalculatorDirections {
5937 [direction: string]: StepDirection;
5940 [direction: string]: TurnDirection;
5943 [direction: string]: SphericalDirection;
5948 declare class EdgeCalculatorSettings {
5949 sphericalMinDistance: number;
5950 sphericalMaxDistance: number;
5951 sphericalPreferredDistance: number;
5952 sphericalMaxItems: number;
5953 sphericalMaxStepTurnChange: number;
5954 rotationMaxDistance: number;
5955 rotationMaxDirectionChange: number;
5956 rotationMaxVerticalDirectionChange: number;
5957 similarMaxDirectionChange: number;
5958 similarMaxDistance: number;
5959 similarMinTimeDifference: number;
5960 stepMaxDistance: number;
5961 stepMaxDirectionChange: number;
5962 stepMaxDrift: number;
5963 stepPreferredDistance: number;
5964 turnMaxDistance: number;
5965 turnMaxDirectionChange: number;
5966 turnMaxRigDistance: number;
5967 turnMinRigDirectionChange: number;
5969 get maxDistance(): number;
5973 * Interface that describes the properties for a image that is the destination of a
5974 * potential edge from an origin image.
5976 * @interface PotentialEdge
5978 interface PotentialEdge {
5980 * Timestamp when the image was captured.
5981 * @property {number} capturedAt
5985 * Change in viewing direction with respect to the origin image.
5986 * @property {number} directionChange
5988 directionChange: number;
5990 * Distance to the origin image.
5991 * @property {number} distance
5995 * Determines if the destination image is spherical.
5996 * @property {boolean} spherical
6001 * @property {string} id
6005 * Change in motion with respect to the viewing direction
6006 * of the origin image.
6007 * @property {number} motionChange
6009 motionChange: number;
6011 * General camera rotation with respect to the origin image.
6012 * @property {number} rotation
6016 * Determines if the origin and destination image are considered
6017 * to be in the same merge connected component.
6018 * @property {boolean} sameMergeCC
6020 sameMergeCC: boolean;
6022 * Determines if the origin and destination image are in the
6024 * @property {boolean} sameSequence
6026 sameSequence: boolean;
6028 * Determines if the origin and destination image have been captured
6030 * @property {boolean} sameUser
6034 * Determines which sequence the destination image of the potential edge
6036 * @property {string} sequenceId
6040 * Change in viewing direction with respect to the XY-plane.
6041 * @property {number} verticalDirectionChange
6043 verticalDirectionChange: number;
6045 * The angle between motion vector and the XY-plane
6046 * @property {number} verticalMotion
6048 verticalMotion: number;
6050 * The counter clockwise horizontal rotation angle from
6051 * the X-axis in a spherical coordiante system.
6052 * @property {number} worldMotionAzimuth
6054 worldMotionAzimuth: number;
6058 * @class EdgeCalculator
6060 * @classdesc Represents a class for calculating node edges.
6062 declare class EdgeCalculator {
6065 private _directions;
6066 private _coefficients;
6068 * Create a new edge calculator instance.
6070 * @param {EdgeCalculatorSettings} settings - Settings struct.
6071 * @param {EdgeCalculatorDirections} directions - Directions struct.
6072 * @param {EdgeCalculatorCoefficients} coefficients - Coefficients struct.
6074 constructor(settings?: EdgeCalculatorSettings, directions?: EdgeCalculatorDirections, coefficients?: EdgeCalculatorCoefficients);
6076 * Returns the potential edges to destination nodes for a set
6077 * of nodes with respect to a source node.
6079 * @param {Image} node - Source node.
6080 * @param {Array<Image>} nodes - Potential destination nodes.
6081 * @param {Array<string>} fallbackIds - Ids for destination nodes
6082 * that should be returned even if they do not meet the
6083 * criteria for a potential edge.
6084 * @throws {ArgumentMapillaryError} If node is not full.
6086 getPotentialEdges(node: Image, potentialImages: Image[], fallbackIds: string[]): PotentialEdge[];
6088 * Computes the sequence edges for a node.
6090 * @param {Image} node - Source node.
6091 * @throws {ArgumentMapillaryError} If node is not full.
6093 computeSequenceEdges(node: Image, sequence: Sequence): NavigationEdge[];
6095 * Computes the similar edges for a node.
6097 * @description Similar edges for perspective images
6098 * look roughly in the same direction and are positioned closed to the node.
6099 * Similar edges for spherical only target other spherical.
6101 * @param {Image} node - Source node.
6102 * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
6103 * @throws {ArgumentMapillaryError} If node is not full.
6105 computeSimilarEdges(node: Image, potentialEdges: PotentialEdge[]): NavigationEdge[];
6107 * Computes the step edges for a perspective node.
6109 * @description Step edge targets can only be other perspective nodes.
6110 * Returns an empty array for spherical.
6112 * @param {Image} node - Source node.
6113 * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
6114 * @param {string} prevId - Id of previous node in sequence.
6115 * @param {string} nextId - Id of next node in sequence.
6116 * @throws {ArgumentMapillaryError} If node is not full.
6118 computeStepEdges(node: Image, potentialEdges: PotentialEdge[], prevId: string, nextId: string): NavigationEdge[];
6120 * Computes the turn edges for a perspective node.
6122 * @description Turn edge targets can only be other perspective images.
6123 * Returns an empty array for spherical.
6125 * @param {Image} node - Source node.
6126 * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
6127 * @throws {ArgumentMapillaryError} If node is not full.
6129 computeTurnEdges(node: Image, potentialEdges: PotentialEdge[]): NavigationEdge[];
6131 * Computes the spherical edges for a perspective node.
6133 * @description Perspective to spherical edge targets can only be
6134 * spherical nodes. Returns an empty array for spherical.
6136 * @param {Image} node - Source node.
6137 * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
6138 * @throws {ArgumentMapillaryError} If node is not full.
6140 computePerspectiveToSphericalEdges(node: Image, potentialEdges: PotentialEdge[]): NavigationEdge[];
6142 * Computes the spherical and step edges for a spherical node.
6144 * @description Spherical to spherical edge targets can only be
6145 * spherical nodes. spherical to step edge targets can only be perspective
6148 * @param {Image} node - Source node.
6149 * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
6150 * @throws {ArgumentMapillaryError} If node is not full.
6152 computeSphericalEdges(node: Image, potentialEdges: PotentialEdge[]): NavigationEdge[];
6158 * @classdesc Provides methods for access to the API.
6160 declare class APIWrapper {
6161 private readonly _data;
6162 constructor(_data: IDataProvider);
6163 get data(): IDataProvider;
6164 getCoreImages$(cellId: string): Observable<CoreImagesContract>;
6165 getImages$(imageIds: string[]): Observable<ImagesContract>;
6166 getImageTiles$(tiles: ImageTilesRequestContract): Observable<ImageTilesContract>;
6167 getSequence$(sequenceId: string): Observable<SequenceContract>;
6168 getSpatialImages$(imageIds: string[]): Observable<SpatialImagesContract>;
6169 setAccessToken(accessToken?: string): void;
6176 * @classdesc Represents a graph of nodes with edges.
6178 declare class Graph {
6179 private static _spatialIndex;
6182 * Nodes that have initialized cache with a timestamp of last access.
6184 private _cachedNodes;
6186 * Nodes for which the required tiles are cached.
6188 private _cachedNodeTiles;
6190 * Sequences for which the nodes are cached.
6192 private _cachedSequenceNodes;
6194 * Nodes for which the spatial edges are cached.
6196 private _cachedSpatialEdges;
6198 * Cached tiles with a timestamp of last access.
6200 private _cachedTiles;
6202 * Nodes for which fill properties are being retreived.
6204 private _cachingFill$;
6206 * Nodes for which full properties are being retrieved.
6208 private _cachingFull$;
6210 * Sequences for which the nodes are being retrieved.
6212 private _cachingSequenceNodes$;
6214 * Sequences that are being retrieved.
6216 private _cachingSequences$;
6218 * Nodes for which the spatial area fill properties are being retrieved.
6220 private _cachingSpatialArea$;
6222 * Tiles that are being retrieved.
6224 private _cachingTiles$;
6226 private _defaultAlt;
6227 private _edgeCalculator;
6228 private _graphCalculator;
6229 private _configuration;
6231 private _filterCreator;
6232 private _filterSubject$;
6234 private _filterSubscription;
6236 * All nodes in the graph.
6240 * Contains all nodes in the graph. Used for fast spatial lookups.
6244 * All node index items sorted in tiles for easy uncache.
6246 private _nodeIndexTiles;
6248 * Node to tile dictionary for easy tile access updates.
6250 private _nodeToTile;
6252 * Nodes retrieved before tiles, stored on tile level.
6256 * Tiles required for a node to retrive spatial area.
6258 private _requiredNodeTiles;
6260 * Other nodes required for node to calculate spatial edges.
6262 private _requiredSpatialArea;
6264 * All sequences in graph with a timestamp of last access.
6267 private _tileThreshold;
6269 * Create a new graph instance.
6271 * @param {APIWrapper} [api] - API instance for retrieving data.
6272 * @param {rbush.RBush<NodeIndexItem>} [nodeIndex] - Node index for fast spatial retreival.
6273 * @param {GraphCalculator} [graphCalculator] - Instance for graph calculations.
6274 * @param {EdgeCalculator} [edgeCalculator] - Instance for edge calculations.
6275 * @param {FilterCreator} [filterCreator] - Instance for filter creation.
6276 * @param {GraphConfiguration} [configuration] - Configuration struct.
6278 constructor(api: APIWrapper, nodeIndex?: any, graphCalculator?: GraphCalculator, edgeCalculator?: EdgeCalculator, filterCreator?: FilterCreator, configuration?: GraphConfiguration);
6279 static register(spatialIndex: new (...args: any[]) => any): void;
6283 * @returns {APIWrapper} The API instance used by
6286 get api(): APIWrapper;
6290 * @returns {Observable<Graph>} Observable emitting
6291 * the graph every time it has changed.
6293 get changed$(): Observable<Graph>;
6297 * @returns {Observable<FilterFunction>} Observable emitting
6298 * the filter every time it has changed.
6300 get filter$(): Observable<FilterFunction>;
6302 * Caches the full node data for all images within a bounding
6305 * @description The node assets are not cached.
6307 * @param {LngLat} sw - South west corner of bounding box.
6308 * @param {LngLat} ne - North east corner of bounding box.
6309 * @returns {Observable<Array<Image>>} Observable emitting
6310 * the full nodes in the bounding box.
6312 cacheBoundingBox$(sw: LngLat, ne: LngLat): Observable<Image[]>;
6314 * Caches the full node data for all images of a cell.
6316 * @description The node assets are not cached.
6318 * @param {string} cellId - Cell id.
6319 * @returns {Observable<Array<Image>>} Observable
6320 * emitting the full nodes of the cell.
6322 cacheCell$(cellId: string): Observable<Image[]>;
6324 * Retrieve and cache node fill properties.
6326 * @param {string} key - Key of node to fill.
6327 * @returns {Observable<Graph>} Observable emitting the graph
6328 * when the node has been updated.
6329 * @throws {GraphMapillaryError} When the operation is not valid on the
6332 cacheFill$(key: string): Observable<Graph>;
6334 * Retrieve and cache full node properties.
6336 * @param {string} key - Key of node to fill.
6337 * @returns {Observable<Graph>} Observable emitting the graph
6338 * when the node has been updated.
6339 * @throws {GraphMapillaryError} When the operation is not valid on the
6342 cacheFull$(key: string): Observable<Graph>;
6344 * Retrieve and cache a node sequence.
6346 * @param {string} key - Key of node for which to retrieve sequence.
6347 * @returns {Observable<Graph>} Observable emitting the graph
6348 * when the sequence has been retrieved.
6349 * @throws {GraphMapillaryError} When the operation is not valid on the
6352 cacheNodeSequence$(key: string): Observable<Graph>;
6354 * Retrieve and cache a sequence.
6356 * @param {string} sequenceKey - Key of sequence to cache.
6357 * @returns {Observable<Graph>} Observable emitting the graph
6358 * when the sequence has been retrieved.
6359 * @throws {GraphMapillaryError} When the operation is not valid on the
6362 cacheSequence$(sequenceKey: string): Observable<Graph>;
6364 * Cache sequence edges for a node.
6366 * @param {string} key - Key of node.
6367 * @throws {GraphMapillaryError} When the operation is not valid on the
6370 cacheSequenceEdges(key: string): void;
6372 * Retrieve and cache full nodes for all keys in a sequence.
6374 * @param {string} sequenceKey - Key of sequence.
6375 * @param {string} referenceNodeKey - Key of node to use as reference
6376 * for optimized caching.
6377 * @returns {Observable<Graph>} Observable emitting the graph
6378 * when the nodes of the sequence has been cached.
6380 cacheSequenceNodes$(sequenceKey: string, referenceNodeKey?: string): Observable<Graph>;
6382 * Retrieve and cache full nodes for a node spatial area.
6384 * @param {string} key - Key of node for which to retrieve sequence.
6385 * @returns {Observable<Graph>} Observable emitting the graph
6386 * when the nodes in the spatial area has been made full.
6387 * @throws {GraphMapillaryError} When the operation is not valid on the
6390 cacheSpatialArea$(key: string): Observable<Graph>[];
6392 * Cache spatial edges for a node.
6394 * @param {string} key - Key of node.
6395 * @throws {GraphMapillaryError} When the operation is not valid on the
6398 cacheSpatialEdges(key: string): void;
6400 * Retrieve and cache tiles for a node.
6402 * @param {string} key - Key of node for which to retrieve tiles.
6403 * @returns {Array<Observable<Graph>>} Array of observables emitting
6404 * the graph for each tile required for the node has been cached.
6405 * @throws {GraphMapillaryError} When the operation is not valid on the
6408 cacheTiles$(key: string): Observable<Graph>[];
6410 * Initialize the cache for a node.
6412 * @param {string} key - Key of node.
6413 * @throws {GraphMapillaryError} When the operation is not valid on the
6416 initializeCache(key: string): void;
6418 * Get a value indicating if the graph is fill caching a node.
6420 * @param {string} key - Key of node.
6421 * @returns {boolean} Value indicating if the node is being fill cached.
6423 isCachingFill(key: string): boolean;
6425 * Get a value indicating if the graph is fully caching a node.
6427 * @param {string} key - Key of node.
6428 * @returns {boolean} Value indicating if the node is being fully cached.
6430 isCachingFull(key: string): boolean;
6432 * Get a value indicating if the graph is caching a sequence of a node.
6434 * @param {string} key - Key of node.
6435 * @returns {boolean} Value indicating if the sequence of a node is
6438 isCachingNodeSequence(key: string): boolean;
6440 * Get a value indicating if the graph is caching a sequence.
6442 * @param {string} sequenceKey - Key of sequence.
6443 * @returns {boolean} Value indicating if the sequence is
6446 isCachingSequence(sequenceKey: string): boolean;
6448 * Get a value indicating if the graph is caching sequence nodes.
6450 * @param {string} sequenceKey - Key of sequence.
6451 * @returns {boolean} Value indicating if the sequence nodes are
6454 isCachingSequenceNodes(sequenceKey: string): boolean;
6456 * Get a value indicating if the graph is caching the tiles
6457 * required for calculating spatial edges of a node.
6459 * @param {string} key - Key of node.
6460 * @returns {boolean} Value indicating if the tiles of
6461 * a node are being cached.
6463 isCachingTiles(key: string): boolean;
6465 * Get a value indicating if the cache has been initialized
6468 * @param {string} key - Key of node.
6469 * @returns {boolean} Value indicating if the cache has been
6470 * initialized for a node.
6472 hasInitializedCache(key: string): boolean;
6474 * Get a value indicating if a node exist in the graph.
6476 * @param {string} key - Key of node.
6477 * @returns {boolean} Value indicating if a node exist in the graph.
6479 hasNode(key: string): boolean;
6481 * Get a value indicating if a node sequence exist in the graph.
6483 * @param {string} key - Key of node.
6484 * @returns {boolean} Value indicating if a node sequence exist
6487 hasNodeSequence(key: string): boolean;
6489 * Get a value indicating if a sequence exist in the graph.
6491 * @param {string} sequenceKey - Key of sequence.
6492 * @returns {boolean} Value indicating if a sequence exist
6495 hasSequence(sequenceKey: string): boolean;
6497 * Get a value indicating if sequence nodes has been cached in the graph.
6499 * @param {string} sequenceKey - Key of sequence.
6500 * @returns {boolean} Value indicating if a sequence nodes has been
6501 * cached in the graph.
6503 hasSequenceNodes(sequenceKey: string): boolean;
6505 * Get a value indicating if the graph has fully cached
6506 * all nodes in the spatial area of a node.
6508 * @param {string} key - Key of node.
6509 * @returns {boolean} Value indicating if the spatial area
6510 * of a node has been cached.
6512 hasSpatialArea(key: string): boolean;
6514 * Get a value indicating if the graph has a tiles required
6517 * @param {string} key - Key of node.
6518 * @returns {boolean} Value indicating if the the tiles required
6519 * by a node has been cached.
6521 hasTiles(key: string): boolean;
6525 * @param {string} key - Key of node.
6526 * @returns {Image} Retrieved node.
6528 getNode(key: string): Image;
6532 * @param {string} sequenceKey - Key of sequence.
6533 * @returns {Image} Retrieved sequence.
6535 getSequence(sequenceKey: string): Sequence;
6537 * Reset all spatial edges of the graph nodes.
6539 resetSpatialEdges(): void;
6541 * Reset the complete graph but keep the nodes corresponding
6542 * to the supplied keys. All other nodes will be disposed.
6544 * @param {Array<string>} keepKeys - Keys for nodes to keep
6545 * in graph after reset.
6547 reset(keepKeys: string[]): void;
6549 * Set the spatial node filter.
6551 * @emits FilterFunction The filter function to the {@link Graph.filter$}
6554 * @param {FilterExpression} filter - Filter expression to be applied
6555 * when calculating spatial edges.
6557 setFilter(filter: FilterExpression): void;
6559 * Uncache the graph according to the graph configuration.
6561 * @description Uncaches unused tiles, unused nodes and
6562 * sequences according to the numbers specified in the
6563 * graph configuration. Sequences does not have a direct
6564 * reference to either tiles or nodes and may be uncached
6565 * even if they are related to the nodes that should be kept.
6567 * @param {Array<string>} keepIds - Ids of nodes to keep in
6568 * graph unrelated to last access. Tiles related to those keys
6569 * will also be kept in graph.
6570 * @param {Array<string>} keepCellIds - Ids of cells to keep in
6571 * graph unrelated to last access. The nodes of the cells may
6572 * still be uncached if not specified in the keep ids param
6573 * but are guaranteed to not be disposed.
6574 * @param {string} keepSequenceId - Optional id of sequence
6575 * for which the belonging nodes should not be disposed or
6576 * removed from the graph. These nodes may still be uncached if
6577 * not specified in keep ids param but are guaranteed to not
6580 uncache(keepIds: string[], keepCellIds: string[], keepSequenceId?: string): void;
6582 * Updates existing cells with new core nodes.
6584 * @description Non-existing cells are discarded
6585 * and not requested at all.
6587 * Existing nodes are not changed.
6589 * New nodes are not made full or getting assets
6592 * @param {Array<string>} cellIds - Cell ids.
6593 * @returns {Observable<Array<Image>>} Observable
6594 * emitting the updated cells.
6596 updateCells$(cellIds: string[]): Observable<string>;
6598 * Unsubscribes all subscriptions.
6600 * @description Afterwards, you must not call any other methods
6601 * on the graph instance.
6603 unsubscribe(): void;
6604 private _addNewKeys;
6605 private _cacheSequence$;
6606 private _cacheTile$;
6609 private _removeFromPreStore;
6611 private _uncacheTile;
6612 private _uncachePreStored;
6613 private _updateCachedTileAccess;
6614 private _updateCachedNodeAccess;
6615 private _updateCell$;
6619 * Enumeration for graph modes.
6622 * @description Modes for the retrieval and caching performed
6623 * by the graph service on the graph.
6625 declare enum GraphMode {
6627 * Caching is performed on sequences only and sequence edges are
6628 * calculated. Spatial tiles
6629 * are not retrieved and spatial edges are not calculated when
6630 * caching nodes. Complete sequences are being cached for requested
6631 * nodes within the graph.
6635 * Caching is performed with emphasis on spatial data. Sequence edges
6636 * as well as spatial edges are cached. Sequence data
6637 * is still requested but complete sequences are not being cached
6638 * for requested nodes.
6640 * This is the initial mode of the graph service.
6646 * @class GraphService
6648 * @classdesc Represents a service for graph operations.
6650 declare class GraphService {
6653 private _graphMode$;
6654 private _graphModeSubject$;
6655 private _firstGraphSubjects$;
6656 private _dataAdded$;
6657 private _initializeCacheSubscriptions;
6658 private _sequenceSubscriptions;
6659 private _spatialSubscriptions;
6660 private _subscriptions;
6662 * Create a new graph service instance.
6664 * @param {Graph} graph - Graph instance to be operated on.
6666 constructor(graph: Graph);
6670 * @returns {Observable<string>} Observable emitting
6671 * a cell id every time data has been added to a cell.
6673 get dataAdded$(): Observable<string>;
6675 * Get filter observable.
6677 * @desciption Emits the filter every time it has changed.
6679 * @returns {Observable<FilterFunction>} Observable
6680 * emitting the filter function every time it is set.
6682 get filter$(): Observable<FilterFunction>;
6684 * Get graph mode observable.
6686 * @description Emits the current graph mode.
6688 * @returns {Observable<GraphMode>} Observable
6689 * emitting the current graph mode when it changes.
6691 get graphMode$(): Observable<GraphMode>;
6693 * Cache full images in a bounding box.
6695 * @description When called, the full properties of
6696 * the image are retrieved. The image cache is not initialized
6697 * for any new images retrieved and the image assets are not
6698 * retrieved, {@link cacheImage$} needs to be called for caching
6701 * @param {LngLat} sw - South west corner of bounding box.
6702 * @param {LngLat} ne - North east corner of bounding box.
6703 * @return {Observable<Array<Image>>} Observable emitting a single item,
6704 * the images of the bounding box, when they have all been retrieved.
6705 * @throws {Error} Propagates any IO image caching errors to the caller.
6707 cacheBoundingBox$(sw: LngLat, ne: LngLat): Observable<Image[]>;
6709 * Cache full images in a cell.
6711 * @description When called, the full properties of
6712 * the image are retrieved. The image cache is not initialized
6713 * for any new images retrieved and the image assets are not
6714 * retrieved, {@link cacheImage$} needs to be called for caching
6717 * @param {string} cellId - Id of the cell.
6718 * @return {Observable<Array<Image>>} Observable emitting a single item,
6719 * the images of the cell, when they have all been retrieved.
6720 * @throws {Error} Propagates any IO image caching errors to the caller.
6722 cacheCell$(cellId: string): Observable<Image[]>;
6724 * Cache a image in the graph and retrieve it.
6726 * @description When called, the full properties of
6727 * the image are retrieved and the image cache is initialized.
6728 * After that the image assets are cached and the image
6729 * is emitted to the observable when.
6730 * In parallel to caching the image assets, the sequence and
6731 * spatial edges of the image are cached. For this, the sequence
6732 * of the image and the required tiles and spatial images are
6733 * retrieved. The sequence and spatial edges may be set before
6734 * or after the image is returned.
6736 * @param {string} id - Id of the image to cache.
6737 * @return {Observable<Image>} Observable emitting a single item,
6738 * the image, when it has been retrieved and its assets are cached.
6739 * @throws {Error} Propagates any IO image caching errors to the caller.
6741 cacheImage$(id: string): Observable<Image>;
6743 * Cache a sequence in the graph and retrieve it.
6745 * @param {string} sequenceId - Sequence id.
6746 * @returns {Observable<Sequence>} Observable emitting a single item,
6747 * the sequence, when it has been retrieved and its assets are cached.
6748 * @throws {Error} Propagates any IO image caching errors to the caller.
6750 cacheSequence$(sequenceId: string): Observable<Sequence>;
6752 * Cache a sequence and its images in the graph and retrieve the sequence.
6754 * @description Caches a sequence and its assets are cached and
6755 * retrieves all images belonging to the sequence. The image assets
6756 * or edges will not be cached.
6758 * @param {string} sequenceId - Sequence id.
6759 * @param {string} referenceImageId - Id of image to use as reference
6760 * for optimized caching.
6761 * @returns {Observable<Sequence>} Observable emitting a single item,
6762 * the sequence, when it has been retrieved, its assets are cached and
6763 * all images belonging to the sequence has been retrieved.
6764 * @throws {Error} Propagates any IO image caching errors to the caller.
6766 cacheSequenceImages$(sequenceId: string, referenceImageId?: string): Observable<Sequence>;
6768 * Dispose the graph service and its children.
6772 * Set a spatial edge filter on the graph.
6774 * @description Resets the spatial edges of all cached images.
6776 * @param {FilterExpression} filter - Filter expression to be applied.
6777 * @return {Observable<Graph>} Observable emitting a single item,
6778 * the graph, when the spatial edges have been reset.
6780 setFilter$(filter: FilterExpression): Observable<void>;
6782 * Set the graph mode.
6784 * @description If graph mode is set to spatial, caching
6785 * is performed with emphasis on spatial edges. If graph
6786 * mode is set to sequence no tile data is requested and
6787 * no spatial edges are computed.
6789 * When setting graph mode to sequence all spatial
6790 * subscriptions are aborted.
6792 * @param {GraphMode} mode - Graph mode to set.
6794 setGraphMode(mode: GraphMode): void;
6798 * @description Resets the graph but keeps the images of the
6801 * @param {Array<string>} keepIds - Ids of images to keep in graph.
6802 * @return {Observable<Image>} Observable emitting a single item,
6803 * the graph, when it has been reset.
6805 reset$(keepIds: string[]): Observable<void>;
6807 * Uncache the graph.
6809 * @description Uncaches the graph by removing tiles, images and
6810 * sequences. Keeps the images of the supplied ids and the tiles
6811 * related to those images.
6813 * @param {Array<string>} keepIds - Ids of images to keep in graph.
6814 * @param {Array<string>} keepCellIds - Ids of cells to keep in graph.
6815 * @param {string} keepSequenceId - Optional id of sequence
6816 * for which the belonging images should not be disposed or
6817 * removed from the graph. These images may still be uncached if
6818 * not specified in keep ids param.
6819 * @return {Observable<Graph>} Observable emitting a single item,
6820 * the graph, when the graph has been uncached.
6822 uncache$(keepIds: string[], keepCellIds: string[], keepSequenceId?: string): Observable<void>;
6823 private _abortSubjects;
6824 private _onDataAdded;
6825 private _removeFromArray;
6826 private _resetSubscriptions;
6829 interface CacheServiceConfiguration {
6832 declare class CacheService {
6833 private readonly _graphService;
6834 private readonly _stateService;
6835 private readonly _api;
6836 private _subscriptions;
6839 constructor(_graphService: GraphService, _stateService: StateService, _api: APIWrapper);
6840 get started(): boolean;
6841 configure(configuration?: CacheServiceConfiguration): void;
6844 private _keyToEdges;
6847 declare class LoadingService {
6849 private _loadersSubject$;
6851 get loading$(): Observable<boolean>;
6852 taskLoading$(task: string): Observable<boolean>;
6853 startLoading(task: string): void;
6854 stopLoading(task: string): void;
6860 * @classdesc Provides methods for scalar, vector and matrix calculations.
6862 declare class Spatial {
6865 * Converts azimuthal phi rotation (counter-clockwise with origin on X-axis) to
6866 * bearing (clockwise with origin at north or Y-axis).
6868 * @param {number} phi - Azimuthal phi angle in radians.
6869 * @returns {number} Bearing in radians.
6871 azimuthalToBearing(phi: number): number;
6873 * Converts degrees to radians.
6875 * @param {number} deg - Degrees.
6876 * @returns {number} Radians.
6878 degToRad(deg: number): number;
6880 * Converts radians to degrees.
6882 * @param {number} rad - Radians.
6883 * @returns {number} Degrees.
6885 radToDeg(rad: number): number;
6887 * Creates a rotation matrix from an angle-axis vector.
6889 * @param {Array<number>} angleAxis - Angle-axis representation of a rotation.
6890 * @returns {THREE.Matrix4} Rotation matrix.
6892 rotationMatrix(angleAxis: number[]): THREE.Matrix4;
6894 * Rotates a vector according to a angle-axis rotation vector.
6896 * @param {Array<number>} vector - Vector to rotate.
6897 * @param {Array<number>} angleAxis - Angle-axis representation of a rotation.
6898 * @returns {THREE.Vector3} Rotated vector.
6900 rotate(vector: number[], angleAxis: number[]): THREE.Vector3;
6902 * Calculates the optical center from a rotation vector
6903 * on the angle-axis representation and a translation vector
6904 * according to C = -R^T t.
6906 * @param {Array<number>} rotation - Angle-axis representation of a rotation.
6907 * @param {Array<number>} translation - Translation vector.
6908 * @returns {THREE.Vector3} Optical center.
6910 opticalCenter(rotation: number[], translation: number[]): THREE.Vector3;
6912 * Calculates the viewing direction from a rotation vector
6913 * on the angle-axis representation.
6915 * @param {number[]} rotation - Angle-axis representation of a rotation.
6916 * @returns {THREE.Vector3} Viewing direction.
6918 viewingDirection(rotation: number[]): THREE.Vector3;
6920 * Wrap a number on the interval [min, max].
6922 * @param {number} value - Value to wrap.
6923 * @param {number} min - Lower endpoint of interval.
6924 * @param {number} max - Upper endpoint of interval.
6925 * @returns {number} The wrapped number.
6927 wrap(value: number, min: number, max: number): number;
6929 * Wrap an angle on the interval [-Pi, Pi].
6931 * @param {number} angle - Value to wrap.
6932 * @returns {number} Wrapped angle.
6934 wrapAngle(angle: number): number;
6936 * Limit the value to the interval [min, max] by changing the value to
6937 * the nearest available one when it is outside the interval.
6939 * @param {number} value - Value to clamp.
6940 * @param {number} min - Minimum of the interval.
6941 * @param {number} max - Maximum of the interval.
6942 * @returns {number} Clamped value.
6944 clamp(value: number, min: number, max: number): number;
6946 * Calculates the counter-clockwise angle from the first
6947 * vector (x1, y1)^T to the second (x2, y2)^T.
6949 * @param {number} x1 - X coordinate of first vector.
6950 * @param {number} y1 - Y coordinate of first vector.
6951 * @param {number} x2 - X coordinate of second vector.
6952 * @param {number} y2 - Y coordinate of second vector.
6953 * @returns {number} Counter clockwise angle between the vectors.
6955 angleBetweenVector2(x1: number, y1: number, x2: number, y2: number): number;
6957 * Calculates the minimum (absolute) angle change for rotation
6958 * from one angle to another on the [-Pi, Pi] interval.
6960 * @param {number} angle1 - Start angle.
6961 * @param {number} angle2 - Destination angle.
6962 * @returns {number} Absolute angle change between angles.
6964 angleDifference(angle1: number, angle2: number): number;
6966 * Calculates the relative rotation angle between two
6967 * angle-axis vectors.
6969 * @param {number} rotation1 - First angle-axis vector.
6970 * @param {number} rotation2 - Second angle-axis vector.
6971 * @returns {number} Relative rotation angle.
6973 relativeRotationAngle(rotation1: number[], rotation2: number[]): number;
6975 * Calculates the angle from a vector to a plane.
6977 * @param {Array<number>} vector - The vector.
6978 * @param {Array<number>} planeNormal - Normal of the plane.
6979 * @returns {number} Angle from between plane and vector.
6981 angleToPlane(vector: number[], planeNormal: number[]): number;
6982 azimuthal(direction: number[], up: number[]): number;
6984 * Calculates the distance between two coordinates
6985 * (longitude, latitude pairs) in meters according to
6986 * the haversine formula.
6988 * @param {number} lat1 - Latitude of the first coordinate in degrees.
6989 * @param {number} lng1 - Longitude of the first coordinate in degrees.
6990 * @param {number} lat2 - Latitude of the second coordinate in degrees.
6991 * @param {number} lng2 - Longitude of the second coordinate in degrees.
6992 * @returns {number} Distance between lat lon positions in meters.
6994 distanceFromLngLat(lng1: number, lat1: number, lng2: number, lat2: number): number;
6998 * @class ViewportCoords
7000 * @classdesc Provides methods for calculating 2D coordinate conversions
7001 * as well as 3D projection and unprojection.
7003 * Basic coordinates are 2D coordinates on the [0, 1] interval and
7004 * have the origin point, (0, 0), at the top left corner and the
7005 * maximum value, (1, 1), at the bottom right corner of the original
7008 * Viewport coordinates are 2D coordinates on the [-1, 1] interval and
7009 * have the origin point in the center. The bottom left corner point is
7010 * (-1, -1) and the top right corner point is (1, 1).
7012 * Canvas coordiantes are 2D pixel coordinates on the [0, canvasWidth] and
7013 * [0, canvasHeight] intervals. The origin point (0, 0) is in the top left
7014 * corner and the maximum value is (canvasWidth, canvasHeight) is in the
7015 * bottom right corner.
7017 * 3D coordinates are in the topocentric world reference frame.
7019 declare class ViewportCoords {
7020 private _unprojectDepth;
7022 * Convert basic coordinates to canvas coordinates.
7024 * @description Transform origin and camera position needs to be the
7025 * equal for reliable return value.
7027 * @param {number} basicX - Basic X coordinate.
7028 * @param {number} basicY - Basic Y coordinate.
7029 * @param {HTMLElement} container - The viewer container.
7030 * @param {Transform} transform - Transform of the image to unproject from.
7031 * @param {THREE.Camera} camera - Camera used in rendering.
7032 * @returns {Array<number>} 2D canvas coordinates.
7034 basicToCanvas(basicX: number, basicY: number, container: {
7035 offsetHeight: number;
7036 offsetWidth: number;
7037 }, transform: Transform, camera: THREE.Camera): number[];
7039 * Convert basic coordinates to canvas coordinates safely. If 3D point is
7040 * behind camera null will be returned.
7042 * @description Transform origin and camera position needs to be the
7043 * equal for reliable return value.
7045 * @param {number} basicX - Basic X coordinate.
7046 * @param {number} basicY - Basic Y coordinate.
7047 * @param {HTMLElement} container - The viewer container.
7048 * @param {Transform} transform - Transform of the image to unproject from.
7049 * @param {THREE.Camera} camera - Camera used in rendering.
7050 * @returns {Array<number>} 2D canvas coordinates if the basic point represents a 3D point
7051 * in front of the camera, otherwise null.
7053 basicToCanvasSafe(basicX: number, basicY: number, container: {
7054 offsetHeight: number;
7055 offsetWidth: number;
7056 }, transform: Transform, camera: THREE.Camera): number[];
7058 * Convert basic coordinates to viewport coordinates.
7060 * @description Transform origin and camera position needs to be the
7061 * equal for reliable return value.
7063 * @param {number} basicX - Basic X coordinate.
7064 * @param {number} basicY - Basic Y coordinate.
7065 * @param {Transform} transform - Transform of the image to unproject from.
7066 * @param {THREE.Camera} camera - Camera used in rendering.
7067 * @returns {Array<number>} 2D viewport coordinates.
7069 basicToViewport(basicX: number, basicY: number, transform: Transform, camera: THREE.Camera): number[];
7071 * Convert basic coordinates to viewport coordinates safely. If 3D point is
7072 * behind camera null will be returned.
7074 * @description Transform origin and camera position needs to be the
7075 * equal for reliable return value.
7077 * @param {number} basicX - Basic X coordinate.
7078 * @param {number} basicY - Basic Y coordinate.
7079 * @param {Transform} transform - Transform of the image to unproject from.
7080 * @param {THREE.Camera} camera - Camera used in rendering.
7081 * @returns {Array<number>} 2D viewport coordinates.
7083 basicToViewportSafe(basicX: number, basicY: number, transform: Transform, camera: THREE.Camera): number[];
7085 * Convert camera 3D coordinates to viewport coordinates.
7087 * @param {number} pointCamera - 3D point in camera coordinate system.
7088 * @param {THREE.Camera} camera - Camera used in rendering.
7089 * @returns {Array<number>} 2D viewport coordinates.
7091 cameraToViewport(pointCamera: number[], camera: THREE.Camera): number[];
7093 * Get canvas pixel position from event.
7095 * @param {Event} event - Event containing clientX and clientY properties.
7096 * @param {HTMLElement} element - HTML element.
7097 * @returns {Array<number>} 2D canvas coordinates.
7099 canvasPosition(event: {
7102 }, element: HTMLElement): number[];
7104 * Convert canvas coordinates to basic coordinates.
7106 * @description Transform origin and camera position needs to be the
7107 * equal for reliable return value.
7109 * @param {number} canvasX - Canvas X coordinate.
7110 * @param {number} canvasY - Canvas Y coordinate.
7111 * @param {HTMLElement} container - The viewer container.
7112 * @param {Transform} transform - Transform of the image to unproject from.
7113 * @param {THREE.Camera} camera - Camera used in rendering.
7114 * @returns {Array<number>} 2D basic coordinates.
7116 canvasToBasic(canvasX: number, canvasY: number, container: {
7117 offsetHeight: number;
7118 offsetWidth: number;
7119 }, transform: Transform, camera: THREE.Camera): number[];
7121 * Convert canvas coordinates to viewport coordinates.
7123 * @param {number} canvasX - Canvas X coordinate.
7124 * @param {number} canvasY - Canvas Y coordinate.
7125 * @param {HTMLElement} container - The viewer container.
7126 * @returns {Array<number>} 2D viewport coordinates.
7128 canvasToViewport(canvasX: number, canvasY: number, container: {
7129 offsetHeight: number;
7130 offsetWidth: number;
7133 * Determines the width and height of the container in canvas coordinates.
7135 * @param {HTMLElement} container - The viewer container.
7136 * @returns {Array<number>} 2D canvas coordinates.
7138 containerToCanvas(container: {
7139 offsetHeight: number;
7140 offsetWidth: number;
7143 * Determine basic distances from image to canvas corners.
7145 * @description Transform origin and camera position needs to be the
7146 * equal for reliable return value.
7148 * Determines the smallest basic distance for every side of the canvas.
7150 * @param {Transform} transform - Transform of the image to unproject from.
7151 * @param {THREE.Camera} camera - Camera used in rendering.
7152 * @returns {Array<number>} Array of basic distances as [top, right, bottom, left].
7154 getBasicDistances(transform: Transform, camera: THREE.Camera): number[];
7156 * Determine pixel distances from image to canvas corners.
7158 * @description Transform origin and camera position needs to be the
7159 * equal for reliable return value.
7161 * Determines the smallest pixel distance for every side of the canvas.
7163 * @param {HTMLElement} container - The viewer container.
7164 * @param {Transform} transform - Transform of the image to unproject from.
7165 * @param {THREE.Camera} camera - Camera used in rendering.
7166 * @returns {Array<number>} Array of pixel distances as [top, right, bottom, left].
7168 getPixelDistances(container: {
7169 offsetHeight: number;
7170 offsetWidth: number;
7171 }, transform: Transform, camera: THREE.Camera): number[];
7173 * Determine if an event occured inside an element.
7175 * @param {Event} event - Event containing clientX and clientY properties.
7176 * @param {HTMLElement} element - HTML element.
7177 * @returns {boolean} Value indicating if the event occured inside the element or not.
7179 insideElement(event: {
7182 }, element: HTMLElement): boolean;
7184 * Project 3D world coordinates to canvas coordinates.
7186 * @param {Array<number>} point3D - 3D world coordinates.
7187 * @param {HTMLElement} container - The viewer container.
7188 * @param {THREE.Camera} camera - Camera used in rendering.
7189 * @returns {Array<number>} 2D canvas coordinates.
7191 projectToCanvas(point3d: number[], container: {
7192 offsetHeight: number;
7193 offsetWidth: number;
7194 }, camera: THREE.Camera): number[];
7196 * Project 3D world coordinates to canvas coordinates safely. If 3D
7197 * point is behind camera null will be returned.
7199 * @param {Array<number>} point3D - 3D world coordinates.
7200 * @param {HTMLElement} container - The viewer container.
7201 * @param {THREE.Camera} camera - Camera used in rendering.
7202 * @returns {Array<number>} 2D canvas coordinates.
7204 projectToCanvasSafe(point3d: number[], container: {
7205 offsetHeight: number;
7206 offsetWidth: number;
7207 }, camera: THREE.Camera): number[];
7209 * Project 3D world coordinates to viewport coordinates.
7211 * @param {Array<number>} point3D - 3D world coordinates.
7212 * @param {THREE.Camera} camera - Camera used in rendering.
7213 * @returns {Array<number>} 2D viewport coordinates.
7215 projectToViewport(point3d: number[], camera: THREE.Camera): number[];
7217 * Uproject canvas coordinates to 3D world coordinates.
7219 * @param {number} canvasX - Canvas X coordinate.
7220 * @param {number} canvasY - Canvas Y coordinate.
7221 * @param {HTMLElement} container - The viewer container.
7222 * @param {THREE.Camera} camera - Camera used in rendering.
7223 * @returns {Array<number>} 3D world coordinates.
7225 unprojectFromCanvas(canvasX: number, canvasY: number, container: {
7226 offsetHeight: number;
7227 offsetWidth: number;
7228 }, camera: THREE.Camera): THREE.Vector3;
7230 * Unproject viewport coordinates to 3D world coordinates.
7232 * @param {number} viewportX - Viewport X coordinate.
7233 * @param {number} viewportY - Viewport Y coordinate.
7234 * @param {THREE.Camera} camera - Camera used in rendering.
7235 * @returns {Array<number>} 3D world coordinates.
7237 unprojectFromViewport(viewportX: number, viewportY: number, camera: THREE.Camera): THREE.Vector3;
7239 * Convert viewport coordinates to basic coordinates.
7241 * @description Transform origin and camera position needs to be the
7242 * equal for reliable return value.
7244 * @param {number} viewportX - Viewport X coordinate.
7245 * @param {number} viewportY - Viewport Y coordinate.
7246 * @param {Transform} transform - Transform of the image to unproject from.
7247 * @param {THREE.Camera} camera - Camera used in rendering.
7248 * @returns {Array<number>} 2D basic coordinates.
7250 viewportToBasic(viewportX: number, viewportY: number, transform: Transform, camera: THREE.Camera): number[];
7252 * Convert viewport coordinates to canvas coordinates.
7254 * @param {number} viewportX - Viewport X coordinate.
7255 * @param {number} viewportY - Viewport Y coordinate.
7256 * @param {HTMLElement} container - The viewer container.
7257 * @returns {Array<number>} 2D canvas coordinates.
7259 viewportToCanvas(viewportX: number, viewportY: number, container: {
7260 offsetHeight: number;
7261 offsetWidth: number;
7264 * Convert 3D world coordinates to 3D camera coordinates.
7266 * @param {number} point3D - 3D point in world coordinate system.
7267 * @param {THREE.Camera} camera - Camera used in rendering.
7268 * @returns {Array<number>} 3D camera coordinates.
7270 worldToCamera(point3d: number[], camera: THREE.Camera): number[];
7273 declare class PanService {
7274 private _graphService;
7275 private _stateService;
7276 private _graphCalculator;
7278 private _viewportCoords;
7279 private _panImagesSubject$;
7280 private _panImages$;
7281 private _panImagesSubscription;
7282 private _subscriptions;
7284 constructor(graphService: GraphService, stateService: StateService, enabled?: boolean, graphCalculator?: GraphCalculator, spatial?: Spatial, viewportCoords?: ViewportCoords);
7285 get panImages$(): Observable<[Image, Transform, number][]>;
7292 private _timeDifference;
7293 private _createTransform;
7294 private _computeProjectedPoints;
7295 private _computeHorizontalFov;
7296 private _coordToFov;
7299 declare class PlayService {
7300 static readonly sequenceSpeed: number;
7301 private _graphService;
7302 private _stateService;
7303 private _imagesAhead;
7306 private _direction$;
7307 private _directionSubject$;
7309 private _playingSubject$;
7311 private _speedSubject$;
7312 private _playingSubscription;
7313 private _cacheSubscription;
7314 private _clearSubscription;
7315 private _earthSubscription;
7316 private _graphModeSubscription;
7317 private _stopSubscription;
7318 private _subscriptions;
7320 constructor(graphService: GraphService, stateService: StateService);
7321 get playing(): boolean;
7322 get direction$(): Observable<NavigationDirection>;
7323 get playing$(): Observable<boolean>;
7324 get speed$(): Observable<number>;
7327 setDirection(direction: NavigationDirection): void;
7328 setSpeed(speed: number): void;
7331 private _mapImagesAhead;
7332 private _setPlaying;
7336 declare class Navigator {
7338 private _cacheService;
7339 private _graphService;
7340 private _loadingService;
7341 private _loadingName;
7342 private _panService;
7343 private _playService;
7344 private _stateService;
7345 private _idRequested$;
7346 private _movedToId$;
7348 private _requestSubscription;
7349 private _imageRequestSubscription;
7350 constructor(options: ViewerOptions, api?: APIWrapper, graphService?: GraphService, loadingService?: LoadingService, stateService?: StateService, cacheService?: CacheService, playService?: PlayService, panService?: PanService);
7351 get api(): APIWrapper;
7352 get cacheService(): CacheService;
7353 get graphService(): GraphService;
7354 get loadingService(): LoadingService;
7355 get movedToId$(): Observable<string>;
7356 get panService(): PanService;
7357 get playService(): PlayService;
7358 get stateService(): StateService;
7360 moveTo$(id: string): Observable<Image>;
7361 moveDir$(direction: NavigationDirection): Observable<Image>;
7362 setFilter$(filter: FilterExpression): Observable<void>;
7363 setAccessToken$(accessToken?: string): Observable<void>;
7365 private _abortRequest;
7366 private _makeRequest$;
7368 private _trajectoryIds$;
7371 declare class SubscriptionHolder {
7372 private _subscriptions;
7373 push(subscription: Subscription): void;
7374 unsubscribe(): void;
7377 interface IComponent {
7379 * Value indicating if the component is currently active.
7381 readonly activated: boolean;
7383 * Default configuration for the component.
7385 readonly defaultConfiguration: ComponentConfiguration;
7387 * The name of the component. Used when interacting with the
7388 * component through the Viewer's API.
7390 readonly name: string;
7392 * Configure the component.
7394 configure(configuration: ComponentConfiguration): void;
7400 declare type ComponentEventType = "geometrycreate" | "hover" | "markerdragend" | "markerdragstart" | "markerposition" | "playing" | "tagcreateend" | "tagcreatestart" | "tagmode" | "tags";
7402 declare abstract class Component<TConfiguration extends ComponentConfiguration> extends EventEmitter implements IComponent {
7403 static componentName: ComponentName | FallbackComponentName;
7404 protected _activated: boolean;
7405 protected _container: Container;
7406 protected _name: string;
7407 protected _navigator: Navigator;
7408 protected readonly _subscriptions: SubscriptionHolder;
7409 protected _activated$: BehaviorSubject<boolean>;
7410 protected _configuration$: Observable<TConfiguration>;
7411 protected _configurationSubject$: Subject<TConfiguration>;
7412 constructor(name: string, container: Container, navigator: Navigator);
7416 * @returns {boolean} Value indicating if the component is
7419 get activated(): boolean;
7421 get activated$(): Observable<boolean>;
7423 * Get default configuration.
7425 * @returns {TConfiguration} Default configuration for component.
7427 get defaultConfiguration(): TConfiguration;
7429 get configuration$(): Observable<TConfiguration>;
7433 * @description The name of the component. Used when interacting with the
7434 * component through the Viewer's API.
7438 activate(conf?: TConfiguration): void;
7440 * Configure the component.
7442 * @param configuration Component configuration.
7444 configure(configuration: TConfiguration): void;
7448 fire<T>(type: ComponentEventType, event: T): void;
7450 off<T>(type: ComponentEventType, handler: (event: T) => void): void;
7452 on<T>(type: ComponentEventType, handler: (event: T) => void): void;
7454 * Detect the viewer's new width and height and resize the component's
7455 * rendered elements accordingly if applicable.
7460 protected abstract _activate(): void;
7461 protected abstract _deactivate(): void;
7462 protected abstract _getDefaultConfiguration(): TConfiguration;
7466 * @class BearingComponent
7468 * @classdesc Component for indicating bearing and field of view.
7472 * var viewer = new Viewer({ ... });
7473 * var bearingComponent = viewer.getComponent("bearing");
7474 * bearingComponent.configure({ size: ComponentSize.Small });
7477 declare class BearingComponent extends Component<BearingConfiguration> {
7478 static componentName: ComponentName;
7480 private _viewportCoords;
7481 private _svgNamespace;
7482 private _distinctThreshold;
7483 private _animationSpeed;
7485 constructor(name: string, container: Container, navigator: Navigator);
7486 protected _activate(): void;
7487 protected _deactivate(): void;
7488 protected _getDefaultConfiguration(): BearingConfiguration;
7489 private _createFovIndicator;
7490 private _createFovArc;
7491 private _createCircleSectorCompass;
7492 private _createCircleSector;
7493 private _createNorth;
7494 private _createBackground;
7495 private _computeProjectedPoints;
7496 private _computeHorizontalFov;
7497 private _coordToFov;
7498 private _interpolate;
7501 declare class CacheComponent extends Component<CacheConfiguration> {
7502 static componentName: ComponentName;
7504 constructor(name: string, container: Container, navigator: Navigator);
7505 protected _activate(): void;
7506 protected _deactivate(): void;
7507 protected _getDefaultConfiguration(): CacheConfiguration;
7509 private _imageToEdges$;
7513 * Interface for general component events.
7515 interface ComponentEvent {
7517 * The component object that fired the event.
7523 type: ComponentEventType;
7527 * Interface for component hover events.
7529 interface ComponentHoverEvent extends ComponentEvent {
7531 * The image id corresponding to the element or object that
7532 * is being hovered. When the mouse leaves the element or
7533 * object the id will be null.
7542 * @classdesc Represents a geometry.
7544 declare abstract class Geometry {
7545 protected _notifyChanged$: Subject<Geometry>;
7547 * Create a geometry.
7554 * Get changed observable.
7556 * @description Emits the geometry itself every time the geometry
7559 * @returns {Observable<Geometry>} Observable emitting the geometry instance.
7562 get changed$(): Observable<Geometry>;
7564 * Get the 2D basic coordinates for the centroid of the geometry.
7566 * @returns {Array<number>} 2D basic coordinates representing the centroid.
7569 abstract getCentroid2d(): number[];
7571 * Get the 3D world coordinates for the centroid of the geometry.
7573 * @param {Transform} transform - The transform of the image related to the geometry.
7574 * @returns {Array<number>} 3D world coordinates representing the centroid.
7577 abstract getCentroid3d(transform: Transform): number[];
7579 * Set the 2D centroid of the geometry.
7581 * @param {Array<number>} value - The new value of the centroid in basic coordinates.
7582 * @param {Transform} transform - The transform of the image related to the geometry.
7585 abstract setCentroid2d(value: number[], transform: Transform): void;
7589 * Interface for component geometry events.
7591 interface ComponentGeometryEvent extends ComponentEvent {
7593 * Geometry related to the event.
7596 type: "geometrycreate";
7602 * @classdesc Represents an abstract marker class that should be extended
7603 * by marker implementations used in the marker component.
7605 declare abstract class Marker {
7606 protected _id: string;
7607 protected _geometry: THREE.Object3D;
7608 protected _lngLat: LngLat;
7609 constructor(id: string, lngLat: LngLat);
7612 * @returns {string} The id of the marker.
7620 get geometry(): THREE.Object3D;
7623 * @returns {LngLat} The geographic coordinates of the marker.
7625 get lngLat(): LngLat;
7627 createGeometry(position: number[]): void;
7629 disposeGeometry(): void;
7631 getInteractiveObjects(): THREE.Object3D[];
7633 lerpAltitude(alt: number, alpha: number): void;
7635 updatePosition(position: number[], lngLat?: LngLat): void;
7636 protected abstract _createGeometry(position: number[]): void;
7637 protected abstract _disposeGeometry(): void;
7638 protected abstract _getInteractiveObjects(): THREE.Object3D[];
7642 * Interface for component marker events.
7644 interface ComponentMarkerEvent extends ComponentEvent {
7646 * The marker that was affected by the event.
7649 type: "markerdragend" | "markerdragstart" | "markerposition";
7653 * Interface for component play events.
7655 interface ComponentPlayEvent extends ComponentEvent {
7657 * Value indiciating if the component is playing or not.
7664 * Interface for component state events.
7668 * // The `hover` event is an example of a `ComponentStateEvent`.
7669 * // Set up an event listener on the direction component.
7670 * var directionComponent = viewer.getComponent('direction');
7671 * directionComponent.on('hover', function(e) {
7672 * console.log('A hover event has occured');
7676 interface ComponentStateEvent extends ComponentEvent {
7677 type: "tagcreateend" | "tagcreatestart" | "tags";
7681 * Interface for component tag mode events.
7683 interface ComponentTagModeEvent extends ComponentEvent {
7685 * Value indicating the current tag mode of the component.
7692 * @class DirectionDOMRenderer
7693 * @classdesc DOM renderer for direction arrows.
7695 declare class DirectionDOMRenderer {
7697 private _calculator;
7701 private _highlightKey;
7702 private _distinguishSequence;
7703 private _needsRender;
7706 private _sphericalEdges;
7707 private _sequenceEdgeKeys;
7708 private _stepDirections;
7709 private _turnDirections;
7712 constructor(configuration: DirectionConfiguration, size: ViewportSize);
7716 * @returns {boolean} Value indicating whether render should be called.
7718 get needsRender(): boolean;
7720 * Renders virtual DOM elements.
7722 * @description Calling render resets the needs render property.
7724 render(navigator: Navigator): vd.VNode;
7725 setEdges(edgeStatus: NavigationEdgeStatus, sequence: Sequence): void;
7727 * Set image for which to show edges.
7729 * @param {Image} image
7731 setImage(image: Image): void;
7733 * Set the render camera to use for calculating rotations.
7735 * @param {RenderCamera} renderCamera
7737 setRenderCamera(renderCamera: RenderCamera): void;
7739 * Set configuration values.
7741 * @param {DirectionConfiguration} configuration
7743 setConfiguration(configuration: DirectionConfiguration): void;
7745 * Detect the element's width and height and resize
7746 * elements accordingly.
7748 * @param {ViewportSize} size Size of vßiewer container element.
7750 resize(size: ViewportSize): void;
7751 private _setNeedsRender;
7752 private _clearEdges;
7754 private _createSphericalArrows;
7755 private _createSphericalToPerspectiveArrow;
7756 private _createPerspectiveToSphericalArrows;
7757 private _createStepArrows;
7758 private _createTurnArrows;
7759 private _createVNodeByKey;
7760 private _createVNodeByDirection;
7761 private _createVNodeByTurn;
7762 private _createVNodeInactive;
7763 private _createVNode;
7764 private _getContainer;
7768 * @class DirectionComponent
7769 * @classdesc Component showing navigation arrows for steps and turns.
7771 declare class DirectionComponent extends Component<DirectionConfiguration> {
7773 static componentName: ComponentName;
7775 private _hoveredIdSubject$;
7776 private _hoveredId$;
7778 constructor(name: string, container: Container, navigator: Navigator, directionDOMRenderer?: DirectionDOMRenderer);
7779 fire(type: "hover", event: ComponentHoverEvent): void;
7781 fire(type: ComponentEventType, event: ComponentStateEvent): void;
7782 off(type: "hover", handler: (event: ComponentHoverEvent) => void): void;
7784 off(type: ComponentEventType, handler: (event: ComponentStateEvent) => void): void;
7786 * Fired when the hovered element of a component changes.
7791 * // Initialize the viewer
7792 * var viewer = new Viewer({ // viewer options });
7793 * var component = viewer.getComponent('<component-name>');
7794 * // Set an event listener
7795 * component.on('hover', function() {
7796 * console.log("A hover event has occurred.");
7800 on(type: "hover", handler: (event: ComponentHoverEvent) => void): void;
7802 on(type: ComponentEventType, handler: (event: ComponentStateEvent) => void): void;
7803 protected _activate(): void;
7804 protected _deactivate(): void;
7805 protected _getDefaultConfiguration(): DirectionConfiguration;
7808 declare abstract class HandlerBase<TConfiguration extends ComponentConfiguration> {
7809 protected _component: Component<TConfiguration>;
7810 protected _container: Container;
7811 protected _navigator: Navigator;
7812 protected _enabled: boolean;
7814 constructor(component: Component<TConfiguration>, container: Container, navigator: Navigator);
7816 * Returns a Boolean indicating whether the interaction is enabled.
7818 * @returns {boolean} `true` if the interaction is enabled.
7820 get isEnabled(): boolean;
7822 * Enables the interaction.
7826 * <component-name>.<handler-name>.enable();
7831 * Disables the interaction.
7835 * <component-name>.<handler-name>.disable();
7839 protected abstract _enable(): void;
7840 protected abstract _disable(): void;
7841 protected abstract _getConfiguration(enable: boolean): TConfiguration;
7845 * The `KeySequenceNavigationHandler` allows the user to navigate through a sequence using the
7846 * following key commands:
7848 * `ALT` + `Up Arrow`: Navigate to next image in the sequence.
7849 * `ALT` + `Down Arrow`: Navigate to previous image in sequence.
7853 * var keyboardComponent = viewer.getComponent("keyboard");
7855 * keyboardComponent.keySequenceNavigation.disable();
7856 * keyboardComponent.keySequenceNavigation.enable();
7858 * var isEnabled = keyboardComponent.keySequenceNavigation.isEnabled;
7861 declare class KeySequenceNavigationHandler extends HandlerBase<KeyboardConfiguration> {
7862 private _keyDownSubscription;
7863 protected _enable(): void;
7864 protected _disable(): void;
7865 protected _getConfiguration(enable: boolean): KeyboardConfiguration;
7869 * The `KeySpatialNavigationHandler` allows the user to navigate through a sequence using the
7870 * following key commands:
7872 * `Up Arrow`: Step forward.
7873 * `Down Arrow`: Step backward.
7874 * `Left Arrow`: Step to the left.
7875 * `Rigth Arrow`: Step to the right.
7876 * `SHIFT` + `Down Arrow`: Turn around.
7877 * `SHIFT` + `Left Arrow`: Turn to the left.
7878 * `SHIFT` + `Rigth Arrow`: Turn to the right.
7882 * var keyboardComponent = viewer.getComponent("keyboard");
7884 * keyboardComponent.keySpatialNavigation.disable();
7885 * keyboardComponent.keySpatialNavigation.enable();
7887 * var isEnabled = keyboardComponent.keySpatialNavigation.isEnabled;
7890 declare class KeySpatialNavigationHandler extends HandlerBase<KeyboardConfiguration> {
7892 private _keyDownSubscription;
7894 constructor(component: Component<KeyboardConfiguration>, container: Container, navigator: Navigator, spatial: Spatial);
7895 protected _enable(): void;
7896 protected _disable(): void;
7897 protected _getConfiguration(enable: boolean): KeyboardConfiguration;
7900 private _rotationFromCamera;
7904 * The `KeyZoomHandler` allows the user to zoom in and out using the
7905 * following key commands:
7912 * var keyboardComponent = viewer.getComponent("keyboard");
7914 * keyboardComponent.keyZoom.disable();
7915 * keyboardComponent.keyZoom.enable();
7917 * var isEnabled = keyboardComponent.keyZoom.isEnabled;
7920 declare class KeyZoomHandler extends HandlerBase<KeyboardConfiguration> {
7921 private _keyDownSubscription;
7922 private _viewportCoords;
7924 constructor(component: Component<KeyboardConfiguration>, container: Container, navigator: Navigator, viewportCoords: ViewportCoords);
7925 protected _enable(): void;
7926 protected _disable(): void;
7927 protected _getConfiguration(enable: boolean): KeyboardConfiguration;
7931 * The `KeyPlayHandler` allows the user to control the play behavior
7932 * using the following key commands:
7934 * `Spacebar`: Start or stop playing.
7935 * `SHIFT` + `D`: Switch direction.
7936 * `<`: Decrease speed.
7937 * `>`: Increase speed.
7941 * var keyboardComponent = viewer.getComponent("keyboard");
7943 * keyboardComponent.keyPlay.disable();
7944 * keyboardComponent.keyPlay.enable();
7946 * var isEnabled = keyboardComponent.keyPlay.isEnabled;
7949 declare class KeyPlayHandler extends HandlerBase<KeyboardConfiguration> {
7950 private _keyDownSubscription;
7951 protected _enable(): void;
7952 protected _disable(): void;
7953 protected _getConfiguration(enable: boolean): KeyboardConfiguration;
7957 * @class KeyboardComponent
7959 * @classdesc Component for keyboard event handling.
7961 * To retrive and use the keyboard component
7965 * var viewer = new Viewer({ ... });
7967 * var keyboardComponent = viewer.getComponent("keyboard");
7970 declare class KeyboardComponent extends Component<KeyboardConfiguration> {
7971 static componentName: ComponentName;
7972 private _keyPlayHandler;
7973 private _keySequenceNavigationHandler;
7974 private _keySpatialNavigationHandler;
7975 private _keyZoomHandler;
7977 constructor(name: string, container: Container, navigator: Navigator);
7981 * @returns {KeyPlayHandler} The key play handler.
7983 get keyPlay(): KeyPlayHandler;
7985 * Get key sequence navigation.
7987 * @returns {KeySequenceNavigationHandler} The key sequence navigation handler.
7989 get keySequenceNavigation(): KeySequenceNavigationHandler;
7993 * @returns {KeySpatialNavigationHandler} The spatial handler.
7995 get keySpatialNavigation(): KeySpatialNavigationHandler;
7999 * @returns {KeyZoomHandler} The key zoom handler.
8001 get keyZoom(): KeyZoomHandler;
8002 protected _activate(): void;
8003 protected _deactivate(): void;
8004 protected _getDefaultConfiguration(): KeyboardConfiguration;
8008 * @interface CircleMarkerOptions
8010 * Interface that represents the options for configuring a `CircleMarker`.
8012 interface CircleMarkerOptions {
8014 * The color of the marker.
8018 color?: number | string;
8020 * The opacity of the marker.
8026 * The radius of the circle in meters.
8034 * @class CircleMarker
8036 * @classdesc Non-interactive marker with a flat circle shape. The circle
8037 * marker can not be configured to be interactive.
8039 * Circle marker properties can not be updated after creation.
8041 * To create and add one `CircleMarker` with default configuration
8042 * and one with configuration use
8046 * var defaultMarker = new CircleMarker(
8048 * { lat: 0, lng: 0, });
8050 * var configuredMarker = new CircleMarker(
8052 * { lat: 0, lng: 0, },
8059 * markerComponent.add([defaultMarker, configuredMarker]);
8062 declare class CircleMarker extends Marker {
8066 constructor(id: string, lngLat: LngLat, options?: CircleMarkerOptions);
8067 protected _createGeometry(position: number[]): void;
8068 protected _disposeGeometry(): void;
8069 protected _getInteractiveObjects(): THREE.Object3D[];
8073 * @class MarkerComponent
8075 * @classdesc Component for showing and editing 3D marker objects.
8077 * The `add` method is used for adding new markers or replacing
8078 * markers already in the set.
8080 * If a marker already in the set has the same
8081 * id as one of the markers added, the old marker will be removed and
8082 * the added marker will take its place.
8084 * It is not possible to update markers in the set by updating any properties
8085 * directly on the marker object. Markers need to be replaced by
8086 * re-adding them for updates to geographic position or configuration
8089 * Markers added to the marker component can be either interactive
8090 * or non-interactive. Different marker types define their behavior.
8091 * Markers with interaction support can be configured with options
8092 * to respond to dragging inside the viewer and be detected when
8093 * retrieving markers from pixel points with the `getMarkerIdAt` method.
8095 * To retrive and use the marker component
8099 * var viewer = new Viewer({ component: { marker: true }, ... });
8101 * var markerComponent = viewer.getComponent("marker");
8104 declare class MarkerComponent extends Component<MarkerConfiguration> {
8105 static componentName: ComponentName;
8106 private _graphCalculator;
8107 private _markerScene;
8109 private _viewportCoords;
8110 private _relativeGroundAltitude;
8112 constructor(name: string, container: Container, navigator: Navigator);
8114 * Add markers to the marker set or replace markers in the marker set.
8116 * @description If a marker already in the set has the same
8117 * id as one of the markers added, the old marker will be removed
8118 * the added marker will take its place.
8120 * Any marker inside the visible bounding bbox
8121 * will be initialized and placed in the viewer.
8123 * @param {Array<Marker>} markers - Markers to add.
8127 * markerComponent.add([marker1, marker2]);
8130 add(markers: Marker[]): void;
8131 fire(type: "markerdragend" | "markerdragstart" | "markerposition", event: ComponentMarkerEvent): void;
8133 fire(type: ComponentEventType, event: ComponentEvent): void;
8135 * Returns the marker in the marker set with the specified id, or
8136 * undefined if the id matches no marker.
8138 * @param {string} markerId - Id of the marker.
8142 * var marker = markerComponent.get("markerId");
8146 get(markerId: string): Marker;
8148 * Returns an array of all markers.
8152 * var markers = markerComponent.getAll();
8157 * Returns the id of the interactive marker closest to the current camera
8158 * position at the specified point.
8160 * @description Notice that the pixelPoint argument requires x, y
8161 * coordinates from pixel space.
8163 * With this function, you can use the coordinates provided by mouse
8164 * events to get information out of the marker component.
8166 * If no interactive geometry of an interactive marker exist at the pixel
8167 * point, `null` will be returned.
8169 * @param {Array<number>} pixelPoint - Pixel coordinates on the viewer element.
8170 * @returns {string} Id of the interactive marker closest to the camera. If no
8171 * interactive marker exist at the pixel point, `null` will be returned.
8175 * markerComponent.getMarkerIdAt([100, 100])
8176 * .then((markerId) => { console.log(markerId); });
8179 getMarkerIdAt(pixelPoint: number[]): Promise<string>;
8181 * Check if a marker exist in the marker set.
8183 * @param {string} markerId - Id of the marker.
8187 * var markerExists = markerComponent.has("markerId");
8190 has(markerId: string): boolean;
8191 off(type: "markerdragend" | "markerdragstart" | "markerposition", handler: (event: ComponentMarkerEvent) => void): void;
8193 off(type: ComponentEventType, handler: (event: ComponentEvent) => void): void;
8195 * Fired when a marker drag interaction ends.
8197 * @event markerdragend
8200 * // Initialize the viewer
8201 * var viewer = new Viewer({ // viewer options });
8202 * var component = viewer.getComponent('<component-name>');
8203 * // Set an event listener
8204 * component.on('markerdragend', function() {
8205 * console.log("A markerdragend event has occurred.");
8209 on(type: "markerdragend", handler: (event: ComponentMarkerEvent) => void): void;
8211 * Fired when a marker drag interaction starts.
8213 * @event markerdragstart
8216 * // Initialize the viewer
8217 * var viewer = new Viewer({ // viewer options });
8218 * var component = viewer.getComponent('<component-name>');
8219 * // Set an event listener
8220 * component.on('markerdragstart', function() {
8221 * console.log("A markerdragstart event has occurred.");
8225 on(type: "markerdragstart", handler: (event: ComponentMarkerEvent) => void): void;
8227 * Fired when the position of a marker is changed.
8229 * @event markerposition
8232 * // Initialize the viewer
8233 * var viewer = new Viewer({ // viewer options });
8234 * var component = viewer.getComponent('<component-name>');
8235 * // Set an event listener
8236 * component.on('markerposition', function() {
8237 * console.log("A markerposition event has occurred.");
8241 on(type: "markerposition", handler: (event: ComponentMarkerEvent) => void): void;
8243 * Remove markers with the specified ids from the marker set.
8245 * @param {Array<string>} markerIds - Ids for markers to remove.
8249 * markerComponent.remove(["id-1", "id-2"]);
8252 remove(markerIds: string[]): void;
8254 * Remove all markers from the marker set.
8258 * markerComponent.removeAll();
8262 protected _activate(): void;
8263 protected _deactivate(): void;
8264 protected _getDefaultConfiguration(): MarkerConfiguration;
8268 * @interface SimpleMarkerOptions
8270 * Interface that represents the options for configuring a `SimpleMarker`.
8272 interface SimpleMarkerOptions {
8274 * The color of the ball inside the marker.
8278 ballColor?: number | string;
8280 * The opacity of the ball inside the marker.
8284 ballOpacity?: number;
8286 * The color of the ice creame shape.
8290 color?: number | string;
8292 * Value indicating if the marker should be interactive or not.
8294 * @description If the marker is configured to be interactive
8295 * it will be draggable in the viewer and retrievable with the
8296 * `getMarkerIdAt` method on the `MarkerComponent`.
8300 interactive?: boolean;
8302 * The opacity of the ice creame shape.
8308 * The radius of the ice cream shape in meters.
8316 * @class SimpleMarker
8318 * @classdesc Interactive marker with ice cream shape. The sphere
8319 * inside the ice cream can be configured to be interactive.
8321 * Simple marker properties can not be updated after creation.
8323 * To create and add one `SimpleMarker` with default configuration
8324 * (non-interactive) and one interactive with configuration use
8328 * var defaultMarker = new SimpleMarker(
8330 * { lat: 0, lng: 0, });
8332 * var interactiveMarker = new SimpleMarker(
8334 * { lat: 0, lng: 0, },
8336 * ballColor: "#00f",
8339 * interactive: true,
8344 * markerComponent.add([defaultMarker, interactiveMarker]);
8347 declare class SimpleMarker extends Marker {
8349 private _ballOpacity;
8350 private _circleToRayAngle;
8352 private _interactive;
8355 constructor(id: string, lngLat: LngLat, options?: SimpleMarkerOptions);
8356 protected _createGeometry(position: number[]): void;
8357 protected _disposeGeometry(): void;
8358 protected _getInteractiveObjects(): THREE.Object3D[];
8359 private _markerHeight;
8360 private _createMarkerGeometry;
8364 * The `DragPanHandler` allows the user to pan the viewer image by clicking and dragging the cursor.
8368 * var pointerComponent = viewer.getComponent("pointer");
8370 * pointerComponent.dragPan.disable();
8371 * pointerComponent.dragPan.enable();
8373 * var isEnabled = pointerComponent.dragPan.isEnabled;
8376 declare class DragPanHandler extends HandlerBase<PointerConfiguration> {
8378 private _viewportCoords;
8379 private _activeMouseSubscription;
8380 private _activeTouchSubscription;
8381 private _preventDefaultSubscription;
8382 private _rotateSubscription;
8383 private _rotateWithoutInertiaSubscription;
8385 constructor(component: Component<PointerConfiguration>, container: Container, navigator: Navigator, viewportCoords: ViewportCoords, spatial: Spatial);
8386 protected _enable(): void;
8387 protected _disable(): void;
8388 protected _getConfiguration(enable: boolean): PointerConfiguration;
8389 private _drainBuffer;
8392 declare class EarthControlHandler extends HandlerBase<PointerConfiguration> {
8393 private _viewportCoords;
8395 private _subscriptions;
8397 constructor(component: Component<PointerConfiguration>, container: Container, navigator: Navigator, viewportCoords: ViewportCoords, spatial: Spatial);
8398 protected _enable(): void;
8399 protected _disable(): void;
8400 protected _getConfiguration(): PointerConfiguration;
8401 private _eventToViewport;
8402 private _mousePairToRotation;
8403 private _planeIntersection;
8407 * The `ScrollZoomHandler` allows the user to zoom the viewer image by scrolling.
8411 * var pointerComponent = viewer.getComponent("pointer");
8413 * pointerComponent.scrollZoom.disable();
8414 * pointerComponent.scrollZoom.enable();
8416 * var isEnabled = pointerComponent.scrollZoom.isEnabled;
8419 declare class ScrollZoomHandler extends HandlerBase<PointerConfiguration> {
8420 private _viewportCoords;
8421 private _preventDefaultSubscription;
8422 private _zoomSubscription;
8424 constructor(component: Component<PointerConfiguration>, container: Container, navigator: Navigator, viewportCoords: ViewportCoords);
8425 protected _enable(): void;
8426 protected _disable(): void;
8427 protected _getConfiguration(enable: boolean): PointerConfiguration;
8431 * The `TouchZoomHandler` allows the user to zoom the viewer image by pinching on a touchscreen.
8435 * var pointerComponent = viewer.getComponent("pointer");
8437 * pointerComponent.touchZoom.disable();
8438 * pointerComponent.touchZoom.enable();
8440 * var isEnabled = pointerComponent.touchZoom.isEnabled;
8443 declare class TouchZoomHandler extends HandlerBase<PointerConfiguration> {
8444 private _viewportCoords;
8445 private _activeSubscription;
8446 private _preventDefaultSubscription;
8447 private _zoomSubscription;
8449 constructor(component: Component<PointerConfiguration>, container: Container, navigator: Navigator, viewportCoords: ViewportCoords);
8450 protected _enable(): void;
8451 protected _disable(): void;
8452 protected _getConfiguration(enable: boolean): PointerConfiguration;
8456 * @class PointerComponent
8458 * @classdesc Component handling mouse, pen, and touch events for camera movement.
8460 * To retrive and use the mouse component
8464 * var viewer = new Viewer({ ... });
8466 * var pointerComponent = viewer.getComponent("pointer");
8469 declare class PointerComponent extends Component<PointerConfiguration> {
8471 static componentName: ComponentName;
8472 private _bounceHandler;
8473 private _dragPanHandler;
8474 private _earthControlHandler;
8475 private _scrollZoomHandler;
8476 private _touchZoomHandler;
8478 constructor(name: string, container: Container, navigator: Navigator);
8482 * @returns {DragPanHandler} The drag pan handler.
8484 get dragPan(): DragPanHandler;
8486 * Get earth control.
8488 * @returns {EarthControlHandler} The earth control handler.
8490 get earthControl(): EarthControlHandler;
8494 * @returns {ScrollZoomHandler} The scroll zoom handler.
8496 get scrollZoom(): ScrollZoomHandler;
8500 * @returns {TouchZoomHandler} The touch zoom handler.
8502 get touchZoom(): TouchZoomHandler;
8503 protected _activate(): void;
8504 protected _deactivate(): void;
8505 protected _getDefaultConfiguration(): PointerConfiguration;
8509 * Interface for the popup offset with respect to its anchor point.
8511 * @description An object of number arrays specifying an offset for
8512 * each float direction. Negative offsets indicate left and up.
8520 * bottomLeft: [-10, 10],
8521 * bottomRight: [10, 10],
8526 * topLeft: [-10, -10],
8527 * topRight: [10, -10],
8530 * var popup = new Popup({ offset: offset });
8533 interface PopupOffset {
8535 bottomLeft: number[];
8536 bottomRight: number[];
8546 * Interface for the options that define behavior and
8547 * appearance of a popup.
8551 interface PopupOptions {
8553 * Specify if the popup should capture pointer events.
8555 * @description If the popup is specified to not capture
8556 * pointer events the provided content can still override
8557 * this behavior for the individual content HTML elements
8558 * by specifying the appropriate CSS.
8562 capturePointer?: boolean;
8564 * Specify that the popup should not have any tooltip
8565 * like visuals around the provided content.
8571 * The direction in which the popup floats with respect to the
8572 * anchor point or points. If no value is supplied the popup
8573 * will change float automatically based on the its position
8574 * in the viewport so that as much of its area as possible is
8577 * @description For automatic floating (undefined) the popup
8578 * will float in eight directions around a point or a position
8579 * in a rect. When a rectangle is set without a position option
8580 * specified, the popup will float outward from the rectangle
8581 * center based on the side it is currently rendered in. The
8582 * default floating direction is to the bottom for both points
8585 * @default undefined
8589 * A pixel offset applied to the popup's location specfied as:
8591 * - A single number in pixels in the float direction that the popup
8592 * will be translated with respect to the current anchor point.
8594 * - An object of number arrays specifying an offset for
8595 * each float direction. Negative offsets indicate left and up.
8599 offset?: number | PopupOffset;
8601 * Opacity of the popup visuals.
8607 * The popup position in a rectangle (does not apply to points).
8608 * When not set the popup will change position automatically
8609 * based on the viewport so that as much of it as possible is
8612 * @default undefined
8614 position?: Alignment;
8620 * @classdesc Popup instance for rendering custom HTML content
8621 * on top of images. Popups are based on 2D basic image coordinates
8622 * (see the {@link Viewer} class documentation for more information about coordinate
8623 * systems) and a certain popup is therefore only relevant to a single image.
8624 * Popups related to a certain image should be removed when moving
8627 * A popup must have both its content and its point or rect set to be
8628 * rendered. Popup options can not be updated after creation but the
8629 * basic point or rect as well as its content can be changed by calling
8630 * the appropriate methods.
8632 * To create and add one `Popup` with default configuration
8633 * (tooltip visuals and automatic float) and one with specific options
8638 * var defaultSpan = document.createElement('span');
8639 * defaultSpan.innerHTML = 'hello default';
8641 * var defaultPopup = new Popup();
8642 * defaultPopup.setDOMContent(defaultSpan);
8643 * defaultPopup.setBasicPoint([0.3, 0.3]);
8645 * var cleanSpan = document.createElement('span');
8646 * cleanSpan.innerHTML = 'hello clean';
8648 * var cleanPopup = new Popup({
8650 * float: Alignment.Top,
8655 * cleanPopup.setDOMContent(cleanSpan);
8656 * cleanPopup.setBasicPoint([0.6, 0.6]);
8658 * popupComponent.add([defaultPopup, cleanPopup]);
8661 * @description Implementation of API methods and API documentation inspired
8662 * by/used from https://github.com/mapbox/mapbox-gl-js/blob/v0.38.0/src/ui/popup.js
8664 declare class Popup {
8665 protected _notifyChanged$: Subject<Popup>;
8668 private _parentContainer;
8674 private _viewportCoords;
8675 constructor(options?: PopupOptions, viewportCoords?: ViewportCoords, dom?: DOM);
8677 * @description Internal observable used by the component to
8678 * render the popup when its position or content has changed.
8681 get changed$(): Observable<Popup>;
8683 * @description Internal method used by the component to
8684 * remove all references to the popup.
8689 * Sets a 2D basic image coordinates point to the popup's anchor, and
8690 * moves the popup to it.
8692 * @description Overwrites any previously set point or rect.
8694 * @param {Array<number>} basicPoint - Point in 2D basic image coordinates.
8698 * var popup = new Popup();
8699 * popup.setText('hello image');
8700 * popup.setBasicPoint([0.3, 0.3]);
8702 * popupComponent.add([popup]);
8705 setBasicPoint(basicPoint: number[]): void;
8707 * Sets a 2D basic image coordinates rect to the popup's anchor, and
8708 * moves the popup to it.
8710 * @description Overwrites any previously set point or rect.
8712 * @param {Array<number>} basicRect - Rect in 2D basic image
8713 * coordinates ([topLeftX, topLeftY, bottomRightX, bottomRightY]) .
8717 * var popup = new Popup();
8718 * popup.setText('hello image');
8719 * popup.setBasicRect([0.3, 0.3, 0.5, 0.6]);
8721 * popupComponent.add([popup]);
8724 setBasicRect(basicRect: number[]): void;
8726 * Sets the popup's content to the element provided as a DOM node.
8728 * @param {Node} htmlNode - A DOM node to be used as content for the popup.
8732 * var div = document.createElement('div');
8733 * div.innerHTML = 'hello image';
8735 * var popup = new Popup();
8736 * popup.setDOMContent(div);
8737 * popup.setBasicPoint([0.3, 0.3]);
8739 * popupComponent.add([popup]);
8742 setDOMContent(htmlNode: Node): void;
8744 * Sets the popup's content to the HTML provided as a string.
8746 * @description This method does not perform HTML filtering or sanitization,
8747 * and must be used only with trusted content. Consider
8748 * {@link Popup.setText} if the
8749 * content is an untrusted text string.
8751 * @param {string} html - A string representing HTML content for the popup.
8755 * var popup = new Popup();
8756 * popup.setHTML('<div>hello image</div>');
8757 * popup.setBasicPoint([0.3, 0.3]);
8759 * popupComponent.add([popup]);
8762 setHTML(html: string): void;
8764 * Sets the popup's content to a string of text.
8766 * @description This function creates a Text node in the DOM, so it cannot insert raw HTML.
8767 * Use this method for security against XSS if the popup content is user-provided.
8769 * @param {string} text - Textual content for the popup.
8773 * var popup = new Popup();
8774 * popup.setText('hello image');
8775 * popup.setBasicPoint([0.3, 0.3]);
8777 * popupComponent.add([popup]);
8780 setText(text: string): void;
8782 * @description Internal method for attaching the popup to
8783 * its parent container so that it is rendered in the DOM tree.
8786 setParentContainer(parentContainer: HTMLElement): void;
8788 * @description Internal method for updating the rendered
8789 * position of the popup called by the popup component.
8792 update(renderCamera: RenderCamera, size: ViewportSize, transform: Transform): void;
8793 private _rectToPixel;
8794 private _alignmentToPopupAligment;
8795 private _normalizeOffset;
8796 private _pixelToFloats;
8797 private _pointFromRectPosition;
8801 * @class PopupComponent
8803 * @classdesc Component for showing HTML popup objects.
8805 * The `add` method is used for adding new popups. Popups are removed by reference.
8807 * It is not possible to update popups in the set by updating any properties
8808 * directly on the popup object. Popups need to be replaced by
8809 * removing them and creating new ones with relevant changed properties and
8810 * adding those instead.
8812 * Popups are only relevant to a single image because they are based on
8813 * 2D basic image coordinates. Popups related to a certain image should
8814 * be removed when the viewer is moved to another image.
8816 * To retrive and use the popup component
8820 * var viewer = new Viewer({ component: { popup: true }, ... });
8822 * var popupComponent = viewer.getComponent("popup");
8825 declare class PopupComponent extends Component<ComponentConfiguration> {
8826 static componentName: ComponentName;
8828 private _popupContainer;
8833 constructor(name: string, container: Container, navigator: Navigator, dom?: DOM);
8835 * Add popups to the popups set.
8837 * @description Adding a new popup never replaces an old one
8838 * because they are stored by reference. Adding an already
8839 * existing popup has no effect.
8841 * @param {Array<Popup>} popups - Popups to add.
8845 * popupComponent.add([popup1, popup2]);
8848 add(popups: Popup[]): void;
8850 * Returns an array of all popups.
8854 * var popups = popupComponent.getAll();
8859 * Remove popups based on reference from the popup set.
8861 * @param {Array<Popup>} popups - Popups to remove.
8865 * popupComponent.remove([popup1, popup2]);
8868 remove(popups: Popup[]): void;
8870 * Remove all popups from the popup set.
8874 * popupComponent.removeAll();
8878 protected _activate(): void;
8879 protected _deactivate(): void;
8880 protected _getDefaultConfiguration(): ComponentConfiguration;
8884 declare class SequenceDOMRenderer {
8886 private _minThresholdWidth;
8887 private _maxThresholdWidth;
8888 private _minThresholdHeight;
8889 private _maxThresholdHeight;
8890 private _stepperDefaultWidth;
8891 private _controlsDefaultWidth;
8892 private _defaultHeight;
8893 private _expandControls;
8896 private _changingSpeed;
8898 private _changingPosition;
8899 private _mouseEnterDirection$;
8900 private _mouseLeaveDirection$;
8901 private _notifyChanged$;
8902 private _notifyChangingPositionChanged$;
8903 private _notifySpeedChanged$;
8904 private _notifyIndexChanged$;
8905 private _changingSubscription;
8906 constructor(container: Container);
8907 get changed$(): Observable<SequenceDOMRenderer>;
8908 get changingPositionChanged$(): Observable<boolean>;
8909 get speed$(): Observable<number>;
8910 get index$(): Observable<number>;
8911 get mouseEnterDirection$(): Observable<NavigationDirection>;
8912 get mouseLeaveDirection$(): Observable<NavigationDirection>;
8915 render(edgeStatus: NavigationEdgeStatus, configuration: SequenceConfiguration, containerWidth: number, speed: number, index: number, max: number, playEnabled: boolean, component: SequenceComponent, navigator: Navigator): vd.VNode;
8916 getContainerWidth(size: ViewportSize, configuration: SequenceConfiguration): number;
8917 private _createPositionInput;
8918 private _createSpeedInput;
8919 private _createPlaybackControls;
8920 private _createPlayingButton;
8921 private _createSequenceControls;
8922 private _createSequenceArrows;
8923 private _createStepper;
8924 private _createTimelineControls;
8925 private _getStepClassName;
8926 private _setChangingPosition;
8930 * @class SequenceComponent
8931 * @classdesc Component showing navigation arrows for sequence directions
8932 * as well as playing button. Exposes an API to start and stop play.
8934 declare class SequenceComponent extends Component<SequenceConfiguration> {
8936 static componentName: ComponentName;
8937 private _sequenceDOMRenderer;
8939 private _hoveredIdSubject$;
8940 private _hoveredId$;
8941 private _containerWidth$;
8942 constructor(name: string, container: Container, navigator: Navigator, renderer?: SequenceDOMRenderer, scheduler?: Scheduler);
8943 fire(type: "hover", event: ComponentHoverEvent): void;
8944 fire(type: "playing", event: ComponentPlayEvent): void;
8945 off(type: "hover", handler: (event: ComponentHoverEvent) => void): void;
8946 off(type: "playing", handler: (event: ComponentPlayEvent) => void): void;
8948 * Fired when the hovered element of a component changes.
8953 * // Initialize the viewer
8954 * var viewer = new Viewer({ // viewer options });
8955 * var component = viewer.getComponent('<component-name>');
8956 * // Set an event listener
8957 * component.on('hover', function() {
8958 * console.log("A hover event has occurred.");
8962 on(type: "hover", handler: (event: ComponentHoverEvent) => void): void;
8964 * Event fired when playing starts or stops.
8969 * // Initialize the viewer
8970 * var viewer = new Viewer({ // viewer options });
8971 * var component = viewer.getComponent('<component-name>');
8972 * // Set an event listener
8973 * component.on('playing', function() {
8974 * console.log("A playing event has occurred.");
8978 on(type: "playing", handler: (event: ComponentPlayEvent) => void): void;
8991 protected _activate(): void;
8992 protected _deactivate(): void;
8993 protected _getDefaultConfiguration(): SequenceConfiguration;
8997 * @class SliderComponent
8999 * @classdesc Component for comparing pairs of images. Renders
9000 * a slider for adjusting the curtain of the first image.
9002 * Deactivate the sequence, direction and image plane
9003 * components when activating the slider component to avoid
9004 * interfering UI elements.
9006 * To retrive and use the slider component
9010 * var viewer = new Viewer({ ... });
9012 * viewer.deactivateComponent("image");
9013 * viewer.deactivateComponent("direction");
9014 * viewer.deactivateComponent("sequence");
9016 * viewer.activateComponent("slider");
9018 * var sliderComponent = viewer.getComponent("slider");
9021 declare class SliderComponent extends Component<SliderConfiguration> {
9022 static componentName: ComponentName;
9023 private _viewportCoords;
9024 private _domRenderer;
9025 private _imageTileLoader;
9026 private _roiCalculator;
9028 private _glRendererOperation$;
9029 private _glRenderer$;
9030 private _glRendererCreator$;
9031 private _glRendererDisposer$;
9032 private _waitSubscription;
9034 constructor(name: string, container: Container, navigator: Navigator, viewportCoords?: ViewportCoords);
9035 protected _activate(): void;
9036 protected _deactivate(): void;
9037 protected _getDefaultConfiguration(): SliderConfiguration;
9038 private _catchCacheImage$;
9039 private _getBasicCorners;
9040 private _clipBoundingBox;
9043 declare class SpatialComponent extends Component<SpatialConfiguration> {
9044 static componentName: ComponentName;
9047 private _viewportCoords;
9050 constructor(name: string, container: Container, navigator: Navigator);
9052 * Returns the image id of the camera frame closest to the current
9053 * render camera position at the specified point.
9055 * @description Notice that the pixelPoint argument requires x, y
9056 * coordinates from pixel space.
9058 * With this function, you can use the coordinates provided by mouse
9059 * events to get information out of the spatial component.
9061 * If no camera frame exist at the pixel
9062 * point, `null` will be returned.
9064 * @param {Array<number>} pixelPoint - Pixel coordinates on
9065 * the viewer element.
9066 * @returns {string} Image id of the camera frame closest to
9067 * the camera. If no camera frame is intersected at the
9068 * pixel point, `null` will be returned.
9072 * spatialComponent.getFrameIdAt([100, 125])
9073 * .then((imageId) => { console.log(imageId); });
9076 getFrameIdAt(pixelPoint: number[]): Promise<string>;
9077 protected _activate(): void;
9078 protected _deactivate(): void;
9079 protected _getDefaultConfiguration(): SpatialConfiguration;
9080 private _addSceneImages;
9081 private _cellsInFov;
9082 private _computeOriginalPosition;
9083 private _cellToTopocentric;
9084 private _computeTranslation;
9085 private _createTransform;
9088 declare class GeometryTagError extends MapillaryError {
9089 constructor(message?: string);
9093 * @class PointGeometry
9095 * @classdesc Represents a point geometry in the 2D basic image coordinate system.
9099 * var basicPoint = [0.5, 0.7];
9100 * var pointGeometry = new PointGeometry(basicPoint);
9103 declare class PointGeometry extends Geometry {
9106 * Create a point geometry.
9109 * @param {Array<number>} point - An array representing the basic coordinates of
9112 * @throws {GeometryTagError} Point coordinates must be valid basic coordinates.
9114 constructor(point: number[]);
9116 * Get point property.
9117 * @returns {Array<number>} Array representing the basic coordinates of the point.
9119 get point(): number[];
9121 * Get the 2D basic coordinates for the centroid of the point, i.e. the 2D
9122 * basic coordinates of the point itself.
9124 * @returns {Array<number>} 2D basic coordinates representing the centroid.
9127 getCentroid2d(): number[];
9129 * Get the 3D world coordinates for the centroid of the point, i.e. the 3D
9130 * world coordinates of the point itself.
9132 * @param {Transform} transform - The transform of the image related to the point.
9133 * @returns {Array<number>} 3D world coordinates representing the centroid.
9136 getCentroid3d(transform: Transform): number[];
9138 * Set the centroid of the point, i.e. the point coordinates.
9140 * @param {Array<number>} value - The new value of the centroid.
9141 * @param {Transform} transform - The transform of the image related to the point.
9144 setCentroid2d(value: number[], transform: Transform): void;
9148 * @class PointsGeometry
9150 * @classdesc Represents a point set in the 2D basic image coordinate system.
9154 * var points = [[0.5, 0.3], [0.7, 0.3], [0.6, 0.5]];
9155 * var pointsGeometry = new PointsGeometry(points);
9158 declare class PointsGeometry extends Geometry {
9161 * Create a points geometry.
9164 * @param {Array<Array<number>>} points - Array of 2D points on the basic coordinate
9165 * system. The number of points must be greater than or equal to two.
9167 * @throws {GeometryTagError} Point coordinates must be valid basic coordinates.
9169 constructor(points: number[][]);
9171 * Get points property.
9172 * @returns {Array<Array<number>>} Array of 2d points.
9174 get points(): number[][];
9176 * Add a point to the point set.
9178 * @param {Array<number>} point - Point to add.
9181 addPoint2d(point: number[]): void;
9183 * Get the coordinates of a point from the point set representation of the geometry.
9185 * @param {number} index - Point index.
9186 * @returns {Array<number>} Array representing the 2D basic coordinates of the point.
9189 getPoint2d(index: number): number[];
9191 * Remove a point from the point set.
9193 * @param {number} index - The index of the point to remove.
9196 removePoint2d(index: number): void;
9198 setVertex2d(index: number, value: number[], transform: Transform): void;
9200 setPoint2d(index: number, value: number[], transform: Transform): void;
9202 getPoints3d(transform: Transform): number[][];
9204 getPoint3d(index: number, transform: Transform): number[];
9206 getPoints2d(): number[][];
9208 getCentroid2d(transform?: Transform): number[];
9210 getCentroid3d(transform: Transform): number[];
9212 getRect2d(transform: Transform): number[];
9214 setCentroid2d(value: number[], transform: Transform): void;
9215 private _getPoints3d;
9219 * @class VertexGeometry
9221 * @classdesc Represents a vertex geometry.
9223 declare abstract class VertexGeometry extends Geometry {
9224 private _subsampleThreshold;
9226 * Create a vertex geometry.
9233 * Get the 3D coordinates for the vertices of the geometry with possibly
9234 * subsampled points along the lines.
9236 * @param {Transform} transform - The transform of the image related to
9238 * @returns {Array<Array<number>>} Polygon array of 3D world coordinates
9239 * representing the geometry.
9242 abstract getPoints3d(transform: Transform): number[][];
9244 * Get the polygon pole of inaccessibility, the most
9245 * distant internal point from the polygon outline.
9247 * @returns {Array<number>} 2D basic coordinates for the pole of inaccessibility.
9250 abstract getPoleOfInaccessibility2d(): number[];
9252 * Get the polygon pole of inaccessibility, the most
9253 * distant internal point from the polygon outline.
9255 * @param transform - The transform of the image related to
9257 * @returns {Array<number>} 3D world coordinates for the pole of inaccessibility.
9260 abstract getPoleOfInaccessibility3d(transform: Transform): number[];
9262 * Get the coordinates of a vertex from the polygon representation of the geometry.
9264 * @param {number} index - Vertex index.
9265 * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
9268 abstract getVertex2d(index: number): number[];
9270 * Get a vertex from the polygon representation of the 3D coordinates for the
9271 * vertices of the geometry.
9273 * @param {number} index - Vertex index.
9274 * @param {Transform} transform - The transform of the image related to the geometry.
9275 * @returns {Array<number>} Array representing the 3D world coordinates of the vertex.
9278 abstract getVertex3d(index: number, transform: Transform): number[];
9280 * Get a polygon representation of the 2D basic coordinates for the vertices of the geometry.
9282 * @returns {Array<Array<number>>} Polygon array of 2D basic coordinates representing
9283 * the vertices of the geometry.
9286 abstract getVertices2d(): number[][];
9288 * Get a polygon representation of the 3D world coordinates for the vertices of the geometry.
9290 * @param {Transform} transform - The transform of the image related to the geometry.
9291 * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
9292 * the vertices of the geometry.
9295 abstract getVertices3d(transform: Transform): number[][];
9297 * Get a flattend array of the 3D world coordinates for the
9298 * triangles filling the geometry.
9300 * @param {Transform} transform - The transform of the image related to the geometry.
9301 * @returns {Array<number>} Flattened array of 3D world coordinates of the triangles.
9304 abstract getTriangles3d(transform: Transform): number[];
9306 * Set the value of a vertex in the polygon representation of the geometry.
9308 * @description The polygon is defined to have the first vertex at the
9309 * bottom-left corner with the rest of the vertices following in clockwise order.
9311 * @param {number} index - The index of the vertex to be set.
9312 * @param {Array<number>} value - The new value of the vertex.
9313 * @param {Transform} transform - The transform of the image related to the geometry.
9316 abstract setVertex2d(index: number, value: number[], transform: Transform): void;
9318 * Finds the polygon pole of inaccessibility, the most distant internal
9319 * point from the polygon outline.
9321 * @param {Array<Array<number>>} points2d - 2d points of outline to triangulate.
9322 * @returns {Array<number>} Point of inaccessibility.
9325 protected _getPoleOfInaccessibility2d(points2d: number[][]): number[];
9326 protected _project(points2d: number[][], transform: Transform): number[][];
9327 protected _subsample(points2d: number[][], threshold?: number): number[][];
9329 * Triangulates a 2d polygon and returns the triangle
9330 * representation as a flattened array of 3d points.
9332 * @param {Array<Array<number>>} points2d - 2d points of outline to triangulate.
9333 * @param {Array<Array<number>>} points3d - 3d points of outline corresponding to the 2d points.
9334 * @param {Array<Array<Array<number>>>} [holes2d] - 2d points of holes to triangulate.
9335 * @param {Array<Array<Array<number>>>} [holes3d] - 3d points of holes corresponding to the 2d points.
9336 * @returns {Array<number>} Flattened array of 3d points ordered based on the triangles.
9339 protected _triangulate(points2d: number[][], points3d: number[][], holes2d?: number[][][], holes3d?: number[][][]): number[];
9340 protected _triangulateSpherical(points2d: number[][], holes2d: number[][][], transform: Transform): number[];
9341 protected _unproject(points2d: number[][], transform: Transform, distance?: number): number[][];
9342 private _createCamera;
9343 private _deunproject;
9344 private _triangulateSubarea;
9348 * @class PolygonGeometry
9350 * @classdesc Represents a polygon geometry in the 2D basic image coordinate system.
9351 * All polygons and holes provided to the constructor needs to be closed.
9355 * var basicPolygon = [[0.5, 0.3], [0.7, 0.3], [0.6, 0.5], [0.5, 0.3]];
9356 * var polygonGeometry = new PolygonGeometry(basicPolygon);
9359 declare class PolygonGeometry extends VertexGeometry {
9363 * Create a polygon geometry.
9366 * @param {Array<Array<number>>} polygon - Array of polygon vertices. Must be closed.
9367 * @param {Array<Array<Array<number>>>} [holes] - Array of arrays of hole vertices.
9368 * Each array of holes vertices must be closed.
9370 * @throws {GeometryTagError} Polygon coordinates must be valid basic coordinates.
9372 constructor(polygon: number[][], holes?: number[][][]);
9374 * Get polygon property.
9375 * @returns {Array<Array<number>>} Closed 2d polygon.
9377 get polygon(): number[][];
9379 * Get holes property.
9380 * @returns {Array<Array<Array<number>>>} Holes of 2d polygon.
9382 get holes(): number[][][];
9384 * Add a vertex to the polygon by appending it after the last vertex.
9386 * @param {Array<number>} vertex - Vertex to add.
9389 addVertex2d(vertex: number[]): void;
9391 * Get the coordinates of a vertex from the polygon representation of the geometry.
9393 * @param {number} index - Vertex index.
9394 * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
9397 getVertex2d(index: number): number[];
9399 * Remove a vertex from the polygon.
9401 * @param {number} index - The index of the vertex to remove.
9404 removeVertex2d(index: number): void;
9406 setVertex2d(index: number, value: number[], transform: Transform): void;
9408 setCentroid2d(value: number[], transform: Transform): void;
9410 getPoints3d(transform: Transform): number[][];
9412 getVertex3d(index: number, transform: Transform): number[];
9414 getVertices2d(): number[][];
9416 getVertices3d(transform: Transform): number[][];
9418 * Get a polygon representation of the 3D coordinates for the vertices of each hole
9419 * of the geometry. Line segments between vertices will possibly be subsampled
9420 * resulting in a larger number of points than the total number of vertices.
9422 * @param {Transform} transform - The transform of the image related to the geometry.
9423 * @returns {Array<Array<Array<number>>>} Array of hole polygons in 3D world coordinates
9424 * representing the vertices of each hole of the geometry.
9427 getHolePoints3d(transform: Transform): number[][][];
9429 * Get a polygon representation of the 3D coordinates for the vertices of each hole
9432 * @param {Transform} transform - The transform of the image related to the geometry.
9433 * @returns {Array<Array<Array<number>>>} Array of hole polygons in 3D world coordinates
9434 * representing the vertices of each hole of the geometry.
9437 getHoleVertices3d(transform: Transform): number[][][];
9439 getCentroid2d(): number[];
9441 getCentroid3d(transform: Transform): number[];
9443 get3dDomainTriangles3d(transform: Transform): number[];
9445 getTriangles3d(transform: Transform): number[];
9447 getPoleOfInaccessibility2d(): number[];
9449 getPoleOfInaccessibility3d(transform: Transform): number[];
9450 private _getPoints3d;
9454 * @class RectGeometry
9456 * @classdesc Represents a rectangle geometry in the 2D basic image coordinate system.
9460 * var basicRect = [0.5, 0.3, 0.7, 0.4];
9461 * var rectGeometry = new RectGeometry(basicRect);
9464 declare class RectGeometry extends VertexGeometry {
9465 private _anchorIndex;
9469 * Create a rectangle geometry.
9472 * @param {Array<number>} rect - An array representing the top-left and bottom-right
9473 * corners of the rectangle in basic coordinates. Ordered according to [x0, y0, x1, y1].
9475 * @throws {GeometryTagError} Rectangle coordinates must be valid basic coordinates.
9477 constructor(rect: number[]);
9479 * Get anchor index property.
9481 * @returns {number} Index representing the current anchor property if
9482 * achoring indexing has been initialized. If anchor indexing has not been
9483 * initialized or has been terminated undefined will be returned.
9486 get anchorIndex(): number;
9488 * Get inverted property.
9490 * @returns {boolean} Boolean determining whether the rect geometry is
9491 * inverted. For spherical the rect geometrye may be inverted.
9494 get inverted(): boolean;
9496 * Get rect property.
9498 * @returns {Array<number>} Array representing the top-left and bottom-right
9499 * corners of the rectangle in basic coordinates.
9501 get rect(): number[];
9503 * Initialize anchor indexing to enable setting opposite vertex.
9505 * @param {number} [index] - The index of the vertex to use as anchor.
9507 * @throws {GeometryTagError} If anchor indexing has already been initialized.
9508 * @throws {GeometryTagError} If index is not valid (0 to 3).
9511 initializeAnchorIndexing(index?: number): void;
9513 * Terminate anchor indexing to disable setting pposite vertex.
9516 terminateAnchorIndexing(): void;
9518 * Set the value of the vertex opposite to the anchor in the polygon
9519 * representation of the rectangle.
9521 * @description Setting the opposite vertex may change the anchor index.
9523 * @param {Array<number>} opposite - The new value of the vertex opposite to the anchor.
9524 * @param {Transform} transform - The transform of the image related to the rectangle.
9526 * @throws {GeometryTagError} When anchor indexing has not been initialized.
9529 setOppositeVertex2d(opposite: number[], transform: Transform): void;
9531 * Set the value of a vertex in the polygon representation of the rectangle.
9533 * @description The polygon is defined to have the first vertex at the
9534 * bottom-left corner with the rest of the vertices following in clockwise order.
9536 * @param {number} index - The index of the vertex to be set.
9537 * @param {Array<number>} value - The new value of the vertex.
9538 * @param {Transform} transform - The transform of the image related to the rectangle.
9541 setVertex2d(index: number, value: number[], transform: Transform): void;
9543 setCentroid2d(value: number[], transform: Transform): void;
9545 * Get the 3D coordinates for the vertices of the rectangle with
9546 * interpolated points along the lines.
9548 * @param {Transform} transform - The transform of the image related to
9550 * @returns {Array<Array<number>>} Polygon array of 3D world coordinates
9551 * representing the rectangle.
9554 getPoints3d(transform: Transform): number[][];
9556 * Get the coordinates of a vertex from the polygon representation of the geometry.
9558 * @description The first vertex represents the bottom-left corner with the rest of
9559 * the vertices following in clockwise order. The method shifts the right side
9560 * coordinates of the rectangle by one unit to ensure that the vertices are ordered
9563 * @param {number} index - Vertex index.
9564 * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
9567 getVertex2d(index: number): number[];
9569 * Get the coordinates of a vertex from the polygon representation of the geometry.
9571 * @description The first vertex represents the bottom-left corner with the rest of
9572 * the vertices following in clockwise order. The coordinates will not be shifted
9573 * so they may not appear in clockwise order when layed out on the plane.
9575 * @param {number} index - Vertex index.
9576 * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
9579 getNonAdjustedVertex2d(index: number): number[];
9581 * Get a vertex from the polygon representation of the 3D coordinates for the
9582 * vertices of the geometry.
9584 * @description The first vertex represents the bottom-left corner with the rest of
9585 * the vertices following in clockwise order.
9587 * @param {number} index - Vertex index.
9588 * @param {Transform} transform - The transform of the image related to the geometry.
9589 * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
9590 * the vertices of the geometry.
9593 getVertex3d(index: number, transform: Transform): number[];
9595 * Get a polygon representation of the 2D basic coordinates for the vertices of the rectangle.
9597 * @description The first vertex represents the bottom-left corner with the rest of
9598 * the vertices following in clockwise order.
9600 * @returns {Array<Array<number>>} Polygon array of 2D basic coordinates representing
9601 * the rectangle vertices.
9604 getVertices2d(): number[][];
9606 * Get a polygon representation of the 3D coordinates for the vertices of the rectangle.
9608 * @description The first vertex represents the bottom-left corner with the rest of
9609 * the vertices following in clockwise order.
9611 * @param {Transform} transform - The transform of the image related to the rectangle.
9612 * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
9613 * the rectangle vertices.
9616 getVertices3d(transform: Transform): number[][];
9618 getCentroid2d(): number[];
9620 getCentroid3d(transform: Transform): number[];
9624 getPoleOfInaccessibility2d(): number[];
9626 getPoleOfInaccessibility3d(transform: Transform): number[];
9628 getTriangles3d(transform: Transform): number[];
9630 * Check if a particular bottom-right value is valid according to the current
9631 * rectangle coordinates.
9633 * @param {Array<number>} bottomRight - The bottom-right coordinates to validate
9634 * @returns {boolean} Value indicating whether the provided bottom-right coordinates
9638 validate(bottomRight: number[]): boolean;
9640 * Get the 2D coordinates for the vertices of the rectangle with
9641 * interpolated points along the lines.
9643 * @returns {Array<Array<number>>} Polygon array of 2D basic coordinates
9644 * representing the rectangle.
9646 private _getPoints2d;
9648 * Convert the top-left, bottom-right representation of a rectangle to a polygon
9649 * representation of the vertices starting at the bottom-left corner going
9652 * @description The method shifts the right side coordinates of the rectangle
9653 * by one unit to ensure that the vertices are ordered clockwise.
9655 * @param {Array<number>} rect - Top-left, bottom-right representation of a
9657 * @returns {Array<Array<number>>} Polygon representation of the vertices of the
9660 private _rectToVertices2d;
9662 * Convert the top-left, bottom-right representation of a rectangle to a polygon
9663 * representation of the vertices starting at the bottom-left corner going
9666 * @description The first vertex represents the bottom-left corner with the rest of
9667 * the vertices following in clockwise order. The coordinates will not be shifted
9668 * to ensure that the vertices are ordered clockwise when layed out on the plane.
9670 * @param {Array<number>} rect - Top-left, bottom-right representation of a
9672 * @returns {Array<Array<number>>} Polygon representation of the vertices of the
9675 private _rectToNonAdjustedVertices2d;
9681 declare type TagEventType = "click" | "geometry" | "tag";
9684 * Interface for tag state events.
9688 * var tag = new OutlineTag({ // tag options });
9689 * // Set an event listener
9690 * tag.on('tag', function() {
9691 * console.log("A tag event has occurred.");
9695 interface TagStateEvent {
9697 * The component object that fired the event.
9709 * @classdesc Abstract class representing the basic functionality of for a tag.
9711 declare abstract class Tag extends EventEmitter {
9712 protected _id: string;
9713 protected _geometry: Geometry;
9714 protected _notifyChanged$: Subject<Tag>;
9719 * @param {string} id
9720 * @param {Geometry} geometry
9722 constructor(id: string, geometry: Geometry);
9729 * Get geometry property.
9730 * @returns {Geometry} The geometry of the tag.
9732 get geometry(): Geometry;
9734 * Get changed observable.
9735 * @returns {Observable<Tag>}
9738 get changed$(): Observable<Tag>;
9740 * Get geometry changed observable.
9741 * @returns {Observable<Tag>}
9744 get geometryChanged$(): Observable<Tag>;
9745 fire(type: "tag" | "geometry", event: TagStateEvent): void;
9747 fire(type: TagEventType, event: TagStateEvent): void;
9748 off(type: "tag" | "geometry", handler: (event: TagStateEvent) => void): void;
9750 off(type: TagEventType, handler: (event: TagStateEvent) => void): void;
9752 * Event fired when the geometry of the tag has changed.
9757 * var tag = new OutlineTag({ // tag options });
9758 * // Set an event listener
9759 * tag.on('geometry', function() {
9760 * console.log("A geometry event has occurred.");
9764 on(type: "geometry", handler: (event: TagStateEvent) => void): void;
9766 * Event fired when a tag has been updated.
9771 * var tag = new OutlineTag({ // tag options });
9772 * // Set an event listener
9773 * tag.on('tag', function() {
9774 * console.log("A tag event has occurred.");
9778 on(type: "tag", handler: (event: TagStateEvent) => void): void;
9780 on(type: TagEventType, handler: (event: TagStateEvent) => void): void;
9784 * Interface for the options that define the behavior and
9785 * appearance of the outline tag.
9789 interface ExtremePointTagOptions {
9791 * Indicate whether the tag geometry should be editable.
9793 * @description Polygon tags with two dimensional domain
9794 * are never editable.
9800 * Color for the interior fill as a hexadecimal number.
9805 * Opacity of the interior fill between 0 and 1.
9808 fillOpacity?: number;
9810 * Determines whether vertices should be indicated by points
9811 * when tag is editable.
9815 indicateVertices?: boolean;
9817 * Color for the edge lines as a hexadecimal number.
9822 * Opacity of the edge lines on [0, 1].
9825 lineOpacity?: number;
9827 * Line width in pixels.
9834 * @class ExtremePointTag
9836 * @classdesc Tag holding properties for visualizing a extreme points
9837 * and their outline.
9841 * var geometry = new PointsGeometry([[0.3, 0.3], [0.5, 0.4]]);
9842 * var tag = new ExtremePointTag(
9845 * { editable: true, lineColor: 0xff0000 });
9847 * tagComponent.add([tag]);
9850 declare class ExtremePointTag extends Tag {
9851 protected _geometry: PointsGeometry;
9853 private _indicateVertices;
9855 private _lineOpacity;
9858 private _fillOpacity;
9860 * Create an extreme point tag.
9864 * @param {string} id - Unique identifier of the tag.
9865 * @param {PointsGeometry} geometry - Geometry defining points of tag.
9866 * @param {ExtremePointTagOptions} options - Options defining the visual appearance and
9867 * behavior of the extreme point tag.
9869 constructor(id: string, geometry: PointsGeometry, options?: ExtremePointTagOptions);
9871 * Get editable property.
9872 * @returns {boolean} Value indicating if tag is editable.
9874 get editable(): boolean;
9876 * Set editable property.
9881 set editable(value: boolean);
9883 * Get fill color property.
9886 get fillColor(): number;
9888 * Set fill color property.
9893 set fillColor(value: number);
9895 * Get fill opacity property.
9898 get fillOpacity(): number;
9900 * Set fill opacity property.
9905 set fillOpacity(value: number);
9907 get geometry(): PointsGeometry;
9909 * Get indicate vertices property.
9910 * @returns {boolean} Value indicating if vertices should be indicated
9911 * when tag is editable.
9913 get indicateVertices(): boolean;
9915 * Set indicate vertices property.
9920 set indicateVertices(value: boolean);
9922 * Get line color property.
9925 get lineColor(): number;
9927 * Set line color property.
9932 set lineColor(value: number);
9934 * Get line opacity property.
9937 get lineOpacity(): number;
9939 * Set line opacity property.
9944 set lineOpacity(value: number);
9946 * Get line width property.
9949 get lineWidth(): number;
9951 * Set line width property.
9956 set lineWidth(value: number);
9958 * Set options for tag.
9960 * @description Sets all the option properties provided and keeps
9961 * the rest of the values as is.
9963 * @param {ExtremePointTagOptions} options - Extreme point tag options
9967 setOptions(options: ExtremePointTagOptions): void;
9971 * Enumeration for tag domains.
9974 * @description Defines where lines between two vertices are treated
9977 * Only applicable for polygons. For rectangles lines between
9978 * vertices are always treated as straight in the distorted 2D
9979 * projection and bended in the undistorted 3D space.
9981 declare enum TagDomain {
9983 * Treats lines between two vertices as straight in the
9984 * distorted 2D projection, i.e. on the image. If the image
9985 * is distorted this will result in bended lines when rendered
9986 * in the undistorted 3D space.
9990 * Treats lines as straight in the undistorted 3D space. If the
9991 * image is distorted this will result in bended lines when rendered
9992 * on the distorted 2D projection of the image.
9994 ThreeDimensional = 1
9998 * Interface for the options that define the behavior and
9999 * appearance of the outline tag.
10003 interface OutlineTagOptions {
10005 * The domain where lines between vertices are treated as straight.
10007 * @description Only applicable for tags that renders polygons.
10009 * If the domain is specified as two dimensional, editing of the
10010 * polygon will be disabled.
10012 * @default {TagDomain.TwoDimensional}
10014 domain?: TagDomain;
10016 * Indicate whether the tag geometry should be editable.
10018 * @description Polygon tags with two dimensional domain
10019 * are never editable.
10023 editable?: boolean;
10025 * Color for the interior fill as a hexadecimal number.
10026 * @default 0xFFFFFF
10028 fillColor?: number;
10030 * Opacity of the interior fill between 0 and 1.
10033 fillOpacity?: number;
10035 * A string referencing the sprite data property to pull from.
10037 * @description Icon is not shown for tags with polygon
10038 * geometries in spherical.
10042 * Value determining how the icon will float with respect to its anchor
10043 * position when rendering.
10045 * @default {Alignment.Center}
10047 iconFloat?: Alignment;
10049 * Number representing the index for where to show the icon or
10050 * text for a rectangle geometry.
10052 * @description The default index corresponds to the bottom right corner.
10056 iconIndex?: number;
10058 * Determines whether vertices should be indicated by points
10059 * when tag is editable.
10063 indicateVertices?: boolean;
10065 * Color for the edge lines as a hexadecimal number.
10066 * @default 0xFFFFFF
10068 lineColor?: number;
10070 * Opacity of the edge lines on [0, 1].
10073 lineOpacity?: number;
10075 * Line width in pixels.
10078 lineWidth?: number;
10080 * Text shown as label if no icon is provided.
10082 * @description Text is not shown for tags with
10083 * polygon geometries in spherical.
10087 * Text color as hexadecimal number.
10088 * @default 0xFFFFFF
10090 textColor?: number;
10094 * Interface for the options that define the behavior and
10095 * appearance of the spot tag.
10099 interface SpotTagOptions {
10101 * Color for the spot specified as a hexadecimal number.
10102 * @default 0xFFFFFF
10106 * Indicate whether the tag geometry should be editable.
10109 editable?: boolean;
10111 * A string referencing the sprite data property to pull from.
10115 * Text shown as label if no icon is provided.
10119 * Text color as hexadecimal number.
10120 * @default 0xFFFFFF
10122 textColor?: number;
10126 * @class OutlineTag
10128 * @classdesc Tag holding properties for visualizing a geometry outline.
10132 * var geometry = new RectGeometry([0.3, 0.3, 0.5, 0.4]);
10133 * var tag = new OutlineTag(
10136 * { editable: true, lineColor: 0xff0000 });
10138 * tagComponent.add([tag]);
10141 declare class OutlineTag extends Tag {
10142 protected _geometry: VertexGeometry;
10146 private _iconFloat;
10147 private _iconIndex;
10148 private _indicateVertices;
10149 private _lineColor;
10150 private _lineOpacity;
10151 private _lineWidth;
10152 private _fillColor;
10153 private _fillOpacity;
10155 private _textColor;
10158 * Create an outline tag.
10162 * @param {string} id - Unique identifier of the tag.
10163 * @param {VertexGeometry} geometry - Geometry defining vertices of tag.
10164 * @param {OutlineTagOptions} options - Options defining the visual appearance and
10165 * behavior of the outline tag.
10167 constructor(id: string, geometry: VertexGeometry, options?: OutlineTagOptions);
10169 * Click observable.
10171 * @description An observable emitting the tag when the icon of the
10172 * tag has been clicked.
10174 * @returns {Observable<Tag>}
10176 get click$(): Subject<OutlineTag>;
10178 * Get domain property.
10180 * @description Readonly property that can only be set in constructor.
10182 * @returns Value indicating the domain of the tag.
10184 get domain(): TagDomain;
10186 * Get editable property.
10187 * @returns {boolean} Value indicating if tag is editable.
10189 get editable(): boolean;
10191 * Set editable property.
10196 set editable(value: boolean);
10198 * Get fill color property.
10199 * @returns {number}
10201 get fillColor(): number;
10203 * Set fill color property.
10208 set fillColor(value: number);
10210 * Get fill opacity property.
10211 * @returns {number}
10213 get fillOpacity(): number;
10215 * Set fill opacity property.
10220 set fillOpacity(value: number);
10222 get geometry(): VertexGeometry;
10224 * Get icon property.
10225 * @returns {string}
10227 get icon(): string;
10229 * Set icon property.
10234 set icon(value: string);
10236 * Get icon float property.
10237 * @returns {Alignment}
10239 get iconFloat(): Alignment;
10241 * Set icon float property.
10242 * @param {Alignment}
10246 set iconFloat(value: Alignment);
10248 * Get icon index property.
10249 * @returns {number}
10251 get iconIndex(): number;
10253 * Set icon index property.
10258 set iconIndex(value: number);
10260 * Get indicate vertices property.
10261 * @returns {boolean} Value indicating if vertices should be indicated
10262 * when tag is editable.
10264 get indicateVertices(): boolean;
10266 * Set indicate vertices property.
10271 set indicateVertices(value: boolean);
10273 * Get line color property.
10274 * @returns {number}
10276 get lineColor(): number;
10278 * Set line color property.
10283 set lineColor(value: number);
10285 * Get line opacity property.
10286 * @returns {number}
10288 get lineOpacity(): number;
10290 * Set line opacity property.
10295 set lineOpacity(value: number);
10297 * Get line width property.
10298 * @returns {number}
10300 get lineWidth(): number;
10302 * Set line width property.
10307 set lineWidth(value: number);
10309 * Get text property.
10310 * @returns {string}
10312 get text(): string;
10314 * Set text property.
10319 set text(value: string);
10321 * Get text color property.
10322 * @returns {number}
10324 get textColor(): number;
10326 * Set text color property.
10331 set textColor(value: number);
10332 fire(type: TagStateEvent["type"], event: TagStateEvent): void;
10334 fire(type: TagEventType, event: TagStateEvent): void;
10335 off(type: TagStateEvent["type"], handler: (event: TagStateEvent) => void): void;
10337 off(type: TagEventType, handler: (event: TagStateEvent) => void): void;
10339 * Event fired when the icon of the outline tag is clicked.
10344 * var tag = new OutlineTag({ // tag options });
10345 * // Set an event listener
10346 * tag.on('click', function() {
10347 * console.log("A click event has occurred.");
10351 on(type: "click", handler: (event: TagStateEvent) => void): void;
10353 * Event fired when the geometry of the tag has changed.
10358 * var tag = new OutlineTag({ // tag options });
10359 * // Set an event listener
10360 * tag.on('geometry', function() {
10361 * console.log("A geometry event has occurred.");
10365 on(type: "geometry", handler: (event: TagStateEvent) => void): void;
10367 * Event fired when a tag has been updated.
10372 * var tag = new OutlineTag({ // tag options });
10373 * // Set an event listener
10374 * tag.on('tag', function() {
10375 * console.log("A tag event has occurred.");
10379 on(type: "tag", handler: (event: TagStateEvent) => void): void;
10381 * Set options for tag.
10383 * @description Sets all the option properties provided and keeps
10384 * the rest of the values as is.
10386 * @param {OutlineTagOptions} options - Outline tag options
10390 setOptions(options: OutlineTagOptions): void;
10391 private _twoDimensionalPolygon;
10397 * @classdesc Tag holding properties for visualizing the centroid of a geometry.
10401 * var geometry = new PointGeometry([0.3, 0.3]);
10402 * var tag = new SpotTag(
10405 * { editable: true, color: 0xff0000 });
10407 * tagComponent.add([tag]);
10410 declare class SpotTag extends Tag {
10411 protected _geometry: Geometry;
10416 private _textColor;
10418 * Create a spot tag.
10422 * @param {string} id
10423 * @param {Geometry} geometry
10424 * @param {IOutlineTagOptions} options - Options defining the visual appearance and
10425 * behavior of the spot tag.
10427 constructor(id: string, geometry: Geometry, options?: SpotTagOptions);
10429 * Get color property.
10430 * @returns {number} The color of the spot as a hexagonal number;
10432 get color(): number;
10434 * Set color property.
10439 set color(value: number);
10441 * Get editable property.
10442 * @returns {boolean} Value indicating if tag is editable.
10444 get editable(): boolean;
10446 * Set editable property.
10451 set editable(value: boolean);
10453 * Get icon property.
10454 * @returns {string}
10456 get icon(): string;
10458 * Set icon property.
10463 set icon(value: string);
10465 * Get text property.
10466 * @returns {string}
10468 get text(): string;
10470 * Set text property.
10475 set text(value: string);
10477 * Get text color property.
10478 * @returns {number}
10480 get textColor(): number;
10482 * Set text color property.
10487 set textColor(value: number);
10489 * Set options for tag.
10491 * @description Sets all the option properties provided and keps
10492 * the rest of the values as is.
10494 * @param {SpotTagOptions} options - Spot tag options
10498 setOptions(options: SpotTagOptions): void;
10502 * @class TagComponent
10504 * @classdesc Component for showing and editing tags with different
10505 * geometries composed from 2D basic image coordinates (see the
10506 * {@link Viewer} class documentation for more information about coordinate
10509 * The `add` method is used for adding new tags or replacing
10510 * tags already in the set. Tags are removed by id.
10512 * If a tag already in the set has the same
10513 * id as one of the tags added, the old tag will be removed and
10514 * the added tag will take its place.
10516 * The tag component mode can be set to either be non interactive or
10517 * to be in creating mode of a certain geometry type.
10519 * The tag properties can be updated at any time and the change will
10520 * be visibile immediately.
10522 * Tags are only relevant to a single image because they are based on
10523 * 2D basic image coordinates. Tags related to a certain image should
10524 * be removed when the viewer is moved to another image.
10526 * To retrive and use the tag component
10530 * var viewer = new Viewer({ component: { tag: true } }, ...);
10532 * var tagComponent = viewer.getComponent("tag");
10535 declare class TagComponent extends Component<TagConfiguration> {
10537 static componentName: ComponentName;
10538 private _tagDomRenderer;
10541 private _tagCreator;
10542 private _viewportCoords;
10543 private _renderTags$;
10544 private _tagChanged$;
10545 private _renderTagGLChanged$;
10546 private _createGeometryChanged$;
10547 private _createGLObjectsChanged$;
10548 private _creatingConfiguration$;
10549 private _createHandlers;
10550 private _editVertexHandler;
10552 constructor(name: string, container: Container, navigator: Navigator);
10554 * Add tags to the tag set or replace tags in the tag set.
10556 * @description If a tag already in the set has the same
10557 * id as one of the tags added, the old tag will be removed
10558 * the added tag will take its place.
10560 * @param {Array<Tag>} tags - Tags to add.
10564 * tagComponent.add([tag1, tag2]);
10567 add(tags: Tag[]): void;
10569 * Calculate the smallest rectangle containing all the points
10570 * in the points geometry.
10572 * @description The result may be different depending on if the
10573 * current image is an spherical or not. If the
10574 * current image is an spherical the rectangle may
10575 * wrap the horizontal border of the image.
10577 * @returns {Promise<Array<number>>} Promise to the rectangle
10578 * on the format specified for the {@link RectGeometry} in basic
10581 calculateRect(geometry: PointsGeometry): Promise<number[]>;
10583 * Force the creation of a geometry programatically using its
10584 * current vertices.
10586 * @description The method only has an effect when the tag
10587 * mode is either of the following modes:
10589 * {@link TagMode.CreatePoints}
10590 * {@link TagMode.CreatePolygon}
10591 * {@link TagMode.CreateRect}
10592 * {@link TagMode.CreateRectDrag}
10594 * In the case of points or polygon creation, only the created
10595 * vertices are used, i.e. the mouse position is disregarded.
10597 * In the case of rectangle creation the position of the mouse
10598 * at the time of the method call is used as one of the vertices
10599 * defining the rectangle.
10601 * @fires geometrycreate
10605 * tagComponent.on("geometrycreate", function(geometry) {
10606 * console.log(geometry);
10609 * tagComponent.create();
10614 * Change the current tag mode.
10616 * @description Change the tag mode to one of the create modes for creating new geometries.
10618 * @param {TagMode} mode - New tag mode.
10624 * tagComponent.changeMode(TagMode.CreateRect);
10627 changeMode(mode: TagMode): void;
10628 fire(type: "geometrycreate", event: ComponentGeometryEvent): void;
10629 fire(type: "tagmode", event: ComponentTagModeEvent): void;
10631 fire(type: "tagcreateend" | "tagcreatestart" | "tags", event: ComponentStateEvent): void;
10633 * Returns the tag in the tag set with the specified id, or
10634 * undefined if the id matches no tag.
10636 * @param {string} tagId - Id of the tag.
10640 * var tag = tagComponent.get("tagId");
10643 get(tagId: string): Tag;
10645 * Returns an array of all tags.
10649 * var tags = tagComponent.getAll();
10654 * Returns an array of tag ids for tags that contain the specified point.
10656 * @description The pixel point must lie inside the polygon or rectangle
10657 * of an added tag for the tag id to be returned. Tag ids for
10658 * tags that do not have a fill will also be returned if the point is inside
10659 * the geometry of the tag. Tags with point geometries can not be retrieved.
10661 * No tag ids will be returned for polygons rendered in cropped spherical or
10662 * rectangles rendered in spherical.
10664 * Notice that the pixelPoint argument requires x, y coordinates from pixel space.
10666 * With this function, you can use the coordinates provided by mouse
10667 * events to get information out of the tag component.
10669 * If no tag at exist the pixel point, an empty array will be returned.
10671 * @param {Array<number>} pixelPoint - Pixel coordinates on the viewer element.
10672 * @returns {Promise<Array<string>>} Promise to the ids of the tags that
10673 * contain the specified pixel point.
10677 * tagComponent.getTagIdsAt([100, 100])
10678 * .then((tagIds) => { console.log(tagIds); });
10681 getTagIdsAt(pixelPoint: number[]): Promise<string[]>;
10683 * Check if a tag exist in the tag set.
10685 * @param {string} tagId - Id of the tag.
10689 * var tagExists = tagComponent.has("tagId");
10692 has(tagId: string): boolean;
10693 off(type: "geometrycreate", handler: (event: ComponentGeometryEvent) => void): void;
10694 off(type: "tagmode", handler: (event: ComponentTagModeEvent) => void): void;
10695 off(type: "tagcreateend" | "tagcreatestart" | "tags", handler: (event: ComponentStateEvent) => void): void;
10697 * Event fired when a geometry has been created.
10699 * @event geometrycreated
10702 * // Initialize the viewer
10703 * var viewer = new Viewer({ // viewer options });
10704 * var component = viewer.getComponent('<component-name>');
10705 * // Set an event listener
10706 * component.on('geometrycreated', function() {
10707 * console.log("A geometrycreated event has occurred.");
10711 on(type: "geometrycreate", handler: (event: ComponentGeometryEvent) => void): void;
10713 * Event fired when an interaction to create a geometry ends.
10715 * @description A create interaction can by a geometry being created
10716 * or by the creation being aborted.
10718 * @event tagcreateend
10721 * // Initialize the viewer
10722 * var viewer = new Viewer({ // viewer options });
10723 * var component = viewer.getComponent('<component-name>');
10724 * // Set an event listener
10725 * component.on('tagcreateend', function() {
10726 * console.log("A tagcreateend event has occurred.");
10730 on(type: "tagcreateend", handler: (event: ComponentStateEvent) => void): void;
10732 * Event fired when an interaction to create a geometry starts.
10734 * @description A create interaction starts when the first vertex
10735 * is created in the geometry.
10737 * @event tagcreatestart
10740 * // Initialize the viewer
10741 * var viewer = new Viewer({ // viewer options });
10742 * var component = viewer.getComponent('<component-name>');
10743 * // Set an event listener
10744 * component.on('tagcreatestart', function() {
10745 * console.log("A tagcreatestart event has occurred.");
10749 on(type: "tagcreatestart", handler: (event: ComponentStateEvent) => void): void;
10751 * Event fired when the create mode is changed.
10756 * // Initialize the viewer
10757 * var viewer = new Viewer({ // viewer options });
10758 * var component = viewer.getComponent('<component-name>');
10759 * // Set an event listener
10760 * component.on('tagmode', function() {
10761 * console.log("A tagmode event has occurred.");
10765 on(type: "tagmode", handler: (event: ComponentTagModeEvent) => void): void;
10767 * Event fired when the tags collection has changed.
10772 * // Initialize the viewer
10773 * var viewer = new Viewer({ // viewer options });
10774 * var component = viewer.getComponent('<component-name>');
10775 * // Set an event listener
10776 * component.on('tags', function() {
10777 * console.log("A tags event has occurred.");
10781 on(type: "tags", handler: (event: ComponentStateEvent) => void): void;
10783 * Remove tags with the specified ids from the tag set.
10785 * @param {Array<string>} tagIds - Ids for tags to remove.
10789 * tagComponent.remove(["id-1", "id-2"]);
10792 remove(tagIds: string[]): void;
10794 * Remove all tags from the tag set.
10798 * tagComponent.removeAll();
10802 protected _activate(): void;
10803 protected _deactivate(): void;
10804 protected _getDefaultConfiguration(): TagConfiguration;
10805 private _disableCreateHandlers;
10809 * @class ZoomComponent
10811 * @classdesc Component rendering UI elements used for zooming.
10815 * var viewer = new Viewer({ ... });
10817 * var zoomComponent = viewer.getComponent("zoom");
10818 * zoomComponent.configure({ size: ComponentSize.Small });
10821 declare class ZoomComponent extends Component<ZoomConfiguration> {
10822 static componentName: ComponentName;
10823 private _viewportCoords;
10824 private _zoomDelta$;
10825 constructor(name: string, container: Container, navigator: Navigator);
10826 protected _activate(): void;
10827 protected _deactivate(): void;
10828 protected _getDefaultConfiguration(): ZoomConfiguration;
10831 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 };