1 import { Observable, Subject, Subscription, BehaviorSubject, Scheduler } from 'rxjs';
2 import { Matrix4, Vector3, PerspectiveCamera, WebGLRenderer, Object3D, Camera as Camera$1 } from 'three';
3 import { VNode } 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[];
34 * Contract describing triangulated meshes.
36 interface MeshContract {
38 * Flattened array of faces for the mesh. Each face consist
39 * three vertex indices.
43 * Flattened array of vertices for the mesh. Each vertex
44 * consists of X, Y and Z coordinates in the camera
51 * Decompress and parse an array buffer containing zipped
52 * json data and return as a json object.
54 * @description Handles array buffers continaing zipped json
57 * @param {ArrayBuffer} buffer - Array buffer to decompress.
58 * @returns {Object} Parsed object.
60 declare function decompress<T>(buffer: ArrayBuffer): T;
62 * Retrieves a resource as an array buffer and returns a promise
65 * @description Rejects the promise on request failure.
67 * @param {string} url - URL for resource to retrieve.
68 * @param {Promise} [abort] - Optional promise for aborting
69 * the request through rejection.
70 * @returns {Promise<ArrayBuffer>} Promise to the array buffer
73 declare function fetchArrayBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer>;
75 * Read the fields of a protobuf array buffer into a mesh
78 * @param {ArrayBuffer} buffer - Protobuf array buffer
80 * @returns {MeshContract} Mesh object.
82 declare function readMeshPbf(buffer: ArrayBuffer): MeshContract;
84 declare class EventEmitter {
88 * Subscribe to an event by its name.
89 * @param {string} type - The name of the event
91 * @param {(event: T) => void} handler - The
92 * handler called when the event occurs.
94 on<T>(type: string, handler: (event: T) => void): void;
96 * Unsubscribe from an event by its name.
97 * @param {string} type - The name of the event
98 * to unsubscribe from.
99 * @param {(event: T) => void} handler - The
102 off<T>(type: string, handler: (event: T) => void): void;
106 fire<T>(type: string, event: T): void;
111 * Interface that represents a longitude, latitude coordinate,
112 * measured in degrees. Coordinates are defined in the WGS84 datum.
116 * Latitude, measured in degrees.
120 * Longitude, measured in degrees.
126 * Interface that represents longitude-latitude-altitude
127 * coordinates. Longitude and latitude are measured in degrees
128 * and altitude in meters. Coordinates are defined in the WGS84 datum.
132 interface LngLatAlt extends LngLat {
134 * Altitude, measured in meters.
140 * Contract describing a reconstruction point.
142 interface PointContract {
144 * RGB color vector of the point, normalized to floats
145 * on the interval [0, 1];
149 * Coordinates in metric scale in topocentric ENU
150 * reference frame with respect to a geo reference.
152 coordinates: number[];
156 * Contract describing cluster reconstruction data.
158 interface ClusterContract {
160 * The unique id of the cluster.
164 * The points of the reconstruction.
167 [pointId: string]: PointContract;
170 * The reference longitude, latitude, altitude of
171 * the reconstruction. Determines the
172 * position of the reconstruction in world reference
175 reference: LngLatAlt;
179 * @class GeometryProviderBase
181 * @classdesc Base class to extend if implementing a geometry
186 * class MyGeometryProvider extends GeometryProviderBase {
191 declare abstract class GeometryProviderBase {
193 * Create a new geometry provider base instance.
197 * Convert a geodetic bounding box to the the minimum set
198 * of cell ids containing the bounding box.
200 * @description The bounding box needs
201 * to be sufficiently small to be contained in an area with the size
202 * of maximally four tiles. Up to nine adjacent tiles may be returned.
204 * @param {LngLat} sw - South west corner of bounding box.
205 * @param {LngLat} ne - North east corner of bounding box.
207 * @returns {Array<string>} Array of cell ids.
209 bboxToCellIds(sw: LngLat, ne: LngLat): string[];
211 * Get the cell ids of all adjacent cells.
213 * @description In the case of approximately rectangular cells
214 * this is typically the eight orthogonally and diagonally adjacent
217 * @param {string} cellId - Id of cell.
218 * @returns {Array<string>} Array of cell ids. No specific
219 * order is guaranteed.
221 getAdjacent(cellId: string): string[];
223 * Get the vertices of a cell.
225 * @description The vertices form an unclosed
226 * clockwise polygon in the 2D longitude, latitude
227 * space. No assumption on the position of the first
228 * vertex relative to the others can be made.
230 * @param {string} cellId - Id of cell.
231 * @returns {Array<LngLat>} Unclosed clockwise polygon.
233 getVertices(cellId: string): LngLat[];
235 * Convert geodetic coordinates to a cell id.
237 * @param {LngLat} lngLat - Longitude, latitude to convert.
238 * @returns {string} Cell id for the longitude, latitude.
240 lngLatToCellId(lngLat: LngLat): string;
242 protected _approxBboxToCellIds(sw: LngLat, ne: LngLat): string[];
244 private _enuToGeodetic;
246 private _getLngLatBoundingBoxCorners;
248 * Convert a geodetic square to cell ids.
250 * The square is specified as a longitude, latitude
251 * and a threshold from the position using Manhattan distance.
253 * @param {LngLat} lngLat - Longitude, latitude.
254 * @param {number} threshold - Threshold of the conversion in meters.
256 * @returns {Array<string>} Array of cell ids reachable within
261 private _lngLatToCellIds;
265 * Ent representing an entity with a unique ID.
277 * Ent representing core image properties.
279 interface CoreImageEnt extends IDEnt {
281 * SfM computed longitude, latitude in WGS84 datum, measured in degrees.
283 * @description Optional - no 3D interaction available
286 computed_geometry?: LngLat;
288 * Original EXIF longitude, latitude in WGS84 datum, measured in degrees.
292 * Sequence that the image is part of.
298 * Contract describing core image results.
300 interface CoreImagesContract {
306 * Array of core image ents.
308 images: CoreImageEnt[];
312 * Ent representing camera properties.
314 interface CameraEnt {
316 * Camera type dependent camera parameters.
318 * For perspective and fisheye camera types,
319 * the camera parameters array should be
320 * constructed according to
324 * where focal is the camera focal length,
325 * and k1, k2 are radial distortion parameters.
327 * For spherical camera type the camera
328 * parameters should be an emtpy array.
330 camera_parameters: number[];
332 * Projection type of the camera.
334 * @description Supported camera types are:
342 * Other camera types will be treated as
343 * perspective images.
349 * Ent representing URL properties.
351 interface URLEnt extends IDEnt {
353 * URL for fetching ent data.
359 * Ent representing image creator properties.
361 interface CreatorEnt extends IDEnt {
363 * The username of the creator.
369 * Ent representing spatial image properties.
371 interface SpatialImageEnt extends CameraEnt, IDEnt {
373 * Original EXIF altitude above sea level, in meters.
377 * Scale of atomic reconstruction.
379 * @description Optional - no 3D interaction available
382 atomic_scale?: number;
384 * Timestamp representing the capture date and time.
386 * @description Unix epoch timestamp in milliseconds.
390 * Original EXIF compass angle, measured in degrees.
392 compass_angle: number;
394 * Computed altitude, in meters.
396 * @description Optional - no 3D interaction available
399 computed_altitude?: number;
401 * SfM computed compass angle, measured in degrees.
403 * @description Optional - no 3D interaction available
406 computed_compass_angle?: number;
408 * Rotation vector in angle axis representation.
410 * @description Optional - no 3D interaction available
413 computed_rotation?: number[];
415 * Cluster reconstruction to which the image belongs.
423 * EXIF orientation of original image.
425 exif_orientation: number;
427 * Height of original image, not adjusted for orientation.
431 * SfM connected component id to which the image belongs.
433 * @description Optional - no 3D interaction available
442 * Owner to which the image belongs.
446 * Value specifying if image is accessible to organization members only
451 * Image quality score on the interval [0, 1].
453 quality_score?: number;
455 * Image thumbnail resource.
459 * Width of original image, not adjusted for orientation.
465 * Contract describing ent results.
467 interface EntContract<T> {
479 * Contract describing spatial image results.
481 declare type SpatialImagesContract = EntContract<SpatialImageEnt>[];
484 * Ent representing image properties.
486 interface ImageEnt extends CoreImageEnt, SpatialImageEnt {
490 * Contract describing image results.
492 declare type ImagesContract = EntContract<ImageEnt>[];
495 * Ent representing sequence properties.
497 * @interface SequenceEnt
499 interface SequenceEnt extends IDEnt {
501 * The image IDs of the sequence sorted in
502 * acsending order based on capture time.
508 * Contract describing sequence results.
510 declare type SequenceContract = SequenceEnt;
513 * Ent representing image tile properties.
515 interface ImageTileEnt {
517 * URL for fetching image tile pixel data.
535 * Contract describing image tile results.
537 declare type ImageTilesContract = EntContract<ImageTileEnt[]>;
540 * Contract describing image tile requests.
542 interface ImageTilesRequestContract {
544 * ID of the tile's image.
556 declare type ProviderEventType = "datacreate";
559 * Interface for general provider events.
561 interface ProviderEvent {
563 * Data provider target that emitted the event.
565 target: DataProviderBase;
567 * Provider event type.
569 type: ProviderEventType;
574 * Interface for data provider cell events.
576 interface ProviderCellEvent extends ProviderEvent {
578 * Cell ids for cells where data have been created.
582 * Provider event type.
588 * @class DataProviderBase
590 * @classdesc Base class to extend if implementing a data provider
597 * class MyDataProvider extends DataProviderBase {
599 * super(new S2GeometryProvider());
605 declare abstract class DataProviderBase extends EventEmitter {
606 protected _geometry: GeometryProviderBase;
608 * Create a new data provider base instance.
610 * @param {GeometryProviderBase} geometry - Geometry
613 constructor(_geometry: GeometryProviderBase);
615 * Get geometry property.
617 * @returns {GeometryProviderBase} Geometry provider instance.
619 get geometry(): GeometryProviderBase;
621 * Fire when data has been created in the data provider
622 * after initial load.
624 * @param type datacreate
625 * @param event Provider cell event
629 * // Initialize the data provider
630 * class MyDataProvider extends DataProviderBase {
631 * // Class implementation
633 * var provider = new MyDataProvider();
634 * // Create the event
635 * var cellIds = [ // Determine updated cells ];
636 * var target = provider;
637 * var type = "datacreate";
644 * provider.fire(type, event);
647 fire(type: "datacreate", event: ProviderCellEvent): void;
649 fire(type: ProviderEventType, event: ProviderEvent): void;
651 * Get core images in a geometry cell.
653 * @param {string} cellId - The id of the geometry cell.
654 * @returns {Promise<CoreImagesContract>} Promise to
655 * the core images of the requested geometry cell id.
656 * @throws Rejects the promise on errors.
658 getCoreImages(cellId: string): Promise<CoreImagesContract>;
660 * Get a cluster reconstruction.
662 * @param {string} url - URL for the cluster reconstruction
664 * @param {Promise} [abort] - Optional promise for aborting
665 * the request through rejection.
666 * @returns {Promise<ClusterContract>} Promise to the
667 * cluster reconstruction.
668 * @throws Rejects the promise on errors.
670 getCluster(url: string, abort?: Promise<void>): Promise<ClusterContract>;
672 * Get spatial images.
674 * @param {Array<string>} imageIds - The ids for the
675 * images to retrieve.
676 * @returns {Promise<SpatialImagesContract>} Promise to
677 * the spatial images of the requested image ids.
678 * @throws Rejects the promise on errors.
680 getSpatialImages(imageIds: string[]): Promise<SpatialImagesContract>;
682 * Get complete images.
684 * @param {Array<string>} imageIds - The ids for the
685 * images to retrieve.
686 * @returns {Promise<ImagesContract>} Promise to the images of the
687 * requested image ids.
688 * @throws Rejects the promise on errors.
690 getImages(imageIds: string[]): Promise<ImagesContract>;
692 * Get an image as an array buffer.
694 * @param {string} url - URL for image to retrieve.
695 * @param {Promise<void>} [abort] - Optional promise for aborting
696 * the request through rejection.
697 * @returns {Promise<ArrayBuffer>} Promise to the array
698 * buffer containing the image.
699 * @throws Rejects the promise on errors.
701 getImageBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer>;
703 * Get image tiles urls for a tile level.
705 * @param {ImageTilesRequestContract} tiles - Tiles to request
706 * @returns {Promise<ImageTilesContract>} Promise to the
707 * image tiles response contract
709 * @throws Rejects the promise on errors.
713 * var tileRequest = { imageId: 'image-id', z: 12 };
714 * provider.getImageTiles(tileRequest)
715 * .then((response) => console.log(response));
718 getImageTiles(tiles: ImageTilesRequestContract): Promise<ImageTilesContract>;
722 * @param {string} url - URL for mesh to retrieve.
723 * @param {Promise<void>} [abort] - Optional promise for aborting
724 * the request through rejection.
725 * @returns {Promise<MeshContract>} Promise to the mesh.
726 * @throws Rejects the promise on errors.
728 getMesh(url: string, abort?: Promise<void>): Promise<MeshContract>;
732 * @param {Array<string>} sequenceId - The id for the
733 * sequence to retrieve.
734 * @returns {Promise} Promise to the sequences of the
735 * requested image ids.
736 * @throws Rejects the promise on errors.
738 getSequence(sequenceId: string): Promise<SequenceContract>;
739 off(type: ProviderCellEvent["type"], handler: (event: ProviderCellEvent) => void): void;
741 off(type: ProviderEventType, handler: (event: ProviderEvent) => void): void;
743 * Fired when data has been created in the data provider
744 * after initial load.
749 * // Initialize the data provider
750 * class MyDataProvider extends DataProviderBase {
753 * var provider = new MyDataProvider();
754 * // Set an event listener
755 * provider.on("datacreate", function() {
756 * console.log("A datacreate event has occurred.");
760 on(type: "datacreate", handler: (event: ProviderCellEvent) => void): void;
762 on(type: ProviderEventType, handler: (event: ProviderEvent) => void): void;
764 * Set an access token for authenticated API requests of
765 * protected resources.
767 * @param {string} [accessToken] accessToken - User access
768 * token or client access token.
770 setAccessToken(accessToken?: string): void;
773 interface GraphCameraContract {
777 projection_type: string;
779 interface GraphCameraShotContract {
782 translation: number[];
784 interface GraphReferenceContract {
789 interface GraphPointContract {
791 coordinates: number[];
793 interface GraphClusterContract {
795 [cameraId: string]: GraphCameraContract;
798 [pointId: string]: GraphPointContract;
800 reference_lla: GraphReferenceContract;
802 [imageKey: string]: GraphCameraShotContract;
806 interface GraphGeometry {
807 coordinates: [number, number];
809 interface GraphCoreImageEnt extends IDEnt {
810 computed_geometry: GraphGeometry;
811 geometry: GraphGeometry;
814 interface GraphSpatialImageEnt extends SpatialImageEnt {
817 thumb_1024_url: string;
818 thumb_2048_url: string;
821 declare class GraphConverter {
822 clusterReconstruction(source: GraphClusterContract): ClusterContract;
823 coreImage(source: GraphCoreImageEnt): CoreImageEnt;
824 spatialImage(source: GraphSpatialImageEnt): SpatialImageEnt;
828 interface GraphDataProviderOptions {
830 accessToken?: string;
833 declare class GraphQueryCreator {
834 readonly imagesPath: string;
835 readonly sequencePath: string;
836 readonly coreFields: string[];
837 readonly idFields: string[];
838 readonly spatialFields: string[];
839 readonly imageTileFields: string[];
840 private readonly _imageTilesPath;
842 images(imageIds: string[], fields: string[]): string;
843 imagesS2(cellId: string, fields: string[]): string;
844 imageTiles(z: number, fields: string[]): string;
845 imageTilesPath(imageId: string): string;
846 sequence(sequenceId: string): string;
849 declare class GraphDataProvider extends DataProviderBase {
850 private readonly _method;
851 private readonly _endpoint;
852 private readonly _convert;
853 private readonly _query;
854 private _accessToken;
855 constructor(options?: GraphDataProviderOptions, geometry?: GeometryProviderBase, converter?: GraphConverter, queryCreator?: GraphQueryCreator);
856 getCluster(url: string, abort?: Promise<void>): Promise<ClusterContract>;
857 getCoreImages(cellId: string): Promise<CoreImagesContract>;
858 getImageBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer>;
859 getImages(imageIds: string[]): Promise<ImagesContract>;
860 getImageTiles(request: ImageTilesRequestContract): Promise<ImageTilesContract>;
861 getMesh(url: string, abort?: Promise<void>): Promise<MeshContract>;
862 getSequence(sequenceId: string): Promise<SequenceContract>;
863 getSpatialImages(imageIds: string[]): Promise<SpatialImagesContract>;
864 setAccessToken(accessToken: string): void;
865 private _createHeaders;
866 private _fetchGraphContract;
867 private _makeErrorMessage;
871 * @class S2GeometryProvider
873 * @classdesc Geometry provider based on S2 cells.
877 * class MyDataProvider extends DataProviderBase {
881 * const geometryProvider = new S2GeometryProvider();
882 * const dataProvider = new MyDataProvider(geometryProvider);
885 declare class S2GeometryProvider extends GeometryProviderBase {
886 private readonly _level;
888 * Create a new S2 geometry provider instance.
890 constructor(_level?: number);
892 bboxToCellIds(sw: LngLat, ne: LngLat): string[];
894 getAdjacent(cellId: string): string[];
896 getVertices(cellId: string): LngLat[];
898 lngLatToCellId(lngLat: LngLat): string;
899 private _getNeighbors;
903 interface ComponentConfiguration {
908 * Enumeration for render mode
911 * @description Modes for specifying how rendering is done
912 * in the viewer. All modes preserves the original aspect
913 * ratio of the images.
915 declare enum RenderMode {
917 * Displays all content within the viewer.
919 * @description Black bars shown on both
920 * sides of the content. Bars are shown
921 * either below and above or to the left
922 * and right of the content depending on
923 * the aspect ratio relation between the
924 * image and the viewer.
928 * Fills the viewer by cropping content.
930 * @description Cropping is done either
931 * in horizontal or vertical direction
932 * depending on the aspect ratio relation
933 * between the image and the viewer.
938 interface ViewportSize {
943 declare type CameraType = "spherical" | "fisheye" | "perspective";
948 * @classdesc Class used for calculating coordinate transformations
951 declare class Transform {
955 private _orientation;
958 private _basicHeight;
959 private _basicAspect;
960 private _worldToCamera;
961 private _worldToCameraInverse;
962 private _scaledWorldToCamera;
963 private _scaledWorldToCameraInverse;
964 private _basicWorldToCamera;
965 private _textureScale;
971 * Create a new transform instance.
972 * @param {number} orientation - Image orientation.
973 * @param {number} width - Image height.
974 * @param {number} height - Image width.
975 * @param {number} focal - Focal length.
976 * @param {number} scale - Atomic scale.
977 * @param {Array<number>} rotation - Rotation vector in three dimensions.
978 * @param {Array<number>} translation - Translation vector in three dimensions.
979 * @param {HTMLImageElement} image - Image for fallback size calculations.
981 constructor(orientation: number, width: number, height: number, scale: number, rotation: number[], translation: number[], image: HTMLImageElement, textureScale?: number[], cameraParameters?: number[], cameraType?: CameraType);
984 get cameraType(): CameraType;
987 * @returns {number} The orientation adjusted aspect ratio.
989 get basicAspect(): number;
993 * @description Does not fall back to image image height but
994 * uses original value from API so can be faulty.
996 * @returns {number} The height of the basic version image
997 * (adjusted for orientation).
999 get basicHeight(): number;
1000 get basicRt(): Matrix4;
1004 * @description Does not fall back to image image width but
1005 * uses original value from API so can be faulty.
1007 * @returns {number} The width of the basic version image
1008 * (adjusted for orientation).
1010 get basicWidth(): number;
1013 * @returns {number} The image focal length.
1015 get focal(): number;
1019 * @description Falls back to the image image height if
1020 * the API data is faulty.
1022 * @returns {number} The orientation adjusted image height.
1024 get height(): number;
1027 * @returns {number} The image orientation.
1029 get orientation(): number;
1032 * @returns {THREE.Matrix4} The extrinsic camera matrix.
1037 * @returns {THREE.Matrix4} The scaled extrinsic camera matrix.
1042 * @returns {THREE.Matrix4} The scaled extrinsic camera matrix.
1044 get srtInverse(): Matrix4;
1047 * @returns {number} The image atomic reconstruction scale.
1049 get scale(): number;
1051 * Get has valid scale.
1052 * @returns {boolean} Value indicating if the scale of the transform is valid.
1054 get hasValidScale(): boolean;
1057 * @returns {number} Value indicating the radius where the radial
1058 * undistortion function peaks.
1060 get radialPeak(): number;
1064 * @description Falls back to the image image width if
1065 * the API data is faulty.
1067 * @returns {number} The orientation adjusted image width.
1069 get width(): number;
1071 * Calculate the up vector for the image transform.
1073 * @returns {THREE.Vector3} Normalized and orientation adjusted up vector.
1075 upVector(): Vector3;
1077 * Calculate projector matrix for projecting 3D points to texture map
1078 * coordinates (u and v).
1080 * @returns {THREE.Matrix4} Projection matrix for 3D point to texture
1081 * map coordinate calculations.
1083 projectorMatrix(): Matrix4;
1085 * Project 3D world coordinates to basic coordinates.
1087 * @param {Array<number>} point3d - 3D world coordinates.
1088 * @return {Array<number>} 2D basic coordinates.
1090 projectBasic(point3d: number[]): number[];
1092 * Unproject basic coordinates to 3D world coordinates.
1094 * @param {Array<number>} basic - 2D basic coordinates.
1095 * @param {Array<number>} distance - Distance to unproject from camera center.
1096 * @param {boolean} [depth] - Treat the distance value as depth from camera center.
1097 * Only applicable for perspective images. Will be
1098 * ignored for spherical.
1099 * @returns {Array<number>} Unprojected 3D world coordinates.
1101 unprojectBasic(basic: number[], distance: number, depth?: boolean): number[];
1103 * Project 3D world coordinates to SfM coordinates.
1105 * @param {Array<number>} point3d - 3D world coordinates.
1106 * @return {Array<number>} 2D SfM coordinates.
1108 projectSfM(point3d: number[]): number[];
1110 * Unproject SfM coordinates to a 3D world coordinates.
1112 * @param {Array<number>} sfm - 2D SfM coordinates.
1113 * @param {Array<number>} distance - Distance to unproject
1114 * from camera center.
1115 * @param {boolean} [depth] - Treat the distance value as
1116 * depth from camera center. Only applicable for perspective
1117 * images. Will be ignored for spherical.
1118 * @returns {Array<number>} Unprojected 3D world coordinates.
1120 unprojectSfM(sfm: number[], distance: number, depth?: boolean): number[];
1122 * Transform SfM coordinates to bearing vector (3D cartesian
1123 * coordinates on the unit sphere).
1125 * @param {Array<number>} sfm - 2D SfM coordinates.
1126 * @returns {Array<number>} Bearing vector (3D cartesian coordinates
1127 * on the unit sphere).
1129 private _sfmToBearing;
1130 /** Compute distortion given the distorted radius.
1132 * Solves for d in the equation
1133 * y = d(x, k1, k2) * x
1134 * given the distorted radius, y.
1136 private _distortionFromDistortedRadius;
1138 * Transform bearing vector (3D cartesian coordiantes on the unit sphere) to
1141 * @param {Array<number>} bearing - Bearing vector (3D cartesian coordinates on the
1143 * @returns {Array<number>} 2D SfM coordinates.
1145 private _bearingToSfm;
1147 * Convert basic coordinates to SfM coordinates.
1149 * @param {Array<number>} basic - 2D basic coordinates.
1150 * @returns {Array<number>} 2D SfM coordinates.
1152 private _basicToSfm;
1154 * Convert SfM coordinates to basic coordinates.
1156 * @param {Array<number>} sfm - 2D SfM coordinates.
1157 * @returns {Array<number>} 2D basic coordinates.
1159 private _sfmToBasic;
1161 * Checks a value and returns it if it exists and is larger than 0.
1162 * Fallbacks if it is null.
1164 * @param {number} value - Value to check.
1165 * @param {number} fallback - Value to fall back to.
1166 * @returns {number} The value or its fallback value if it is not defined or negative.
1169 private _getCameraParameters;
1171 * Creates the extrinsic camera matrix [ R | t ].
1173 * @param {Array<number>} rotation - Rotation vector in angle axis representation.
1174 * @param {Array<number>} translation - Translation vector.
1175 * @returns {THREE.Matrix4} Extrisic camera matrix.
1177 private createWorldToCamera;
1179 * Calculates the scaled extrinsic camera matrix scale * [ R | t ].
1181 * @param {THREE.Matrix4} worldToCamera - Extrisic camera matrix.
1182 * @param {number} scale - Scale factor.
1183 * @returns {THREE.Matrix4} Scaled extrisic camera matrix.
1185 private _createScaledWorldToCamera;
1186 private _createBasicWorldToCamera;
1187 private _getRadialPeak;
1189 * Calculate a transformation matrix from normalized coordinates for
1190 * texture map coordinates.
1192 * @returns {THREE.Matrix4} Normalized coordinates to texture map
1193 * coordinates transformation matrix.
1195 private _normalizedToTextureMatrix;
1201 * @classdesc Holds information about a camera.
1203 declare class Camera {
1209 * Create a new camera instance.
1210 * @param {Transform} [transform] - Optional transform instance.
1212 constructor(transform?: Transform);
1215 * @returns {THREE.Vector3} The position vector.
1217 get position(): Vector3;
1220 * @returns {THREE.Vector3} The lookat vector.
1222 get lookat(): Vector3;
1225 * @returns {THREE.Vector3} The up vector.
1230 * @returns {number} The focal length.
1232 get focal(): number;
1236 set focal(value: number);
1238 * Update this camera to the linearly interpolated value of two other cameras.
1240 * @param {Camera} a - First camera.
1241 * @param {Camera} b - Second camera.
1242 * @param {number} alpha - Interpolation value on the interval [0, 1].
1244 lerpCameras(a: Camera, b: Camera, alpha: number): void;
1246 * Copy the properties of another camera to this camera.
1248 * @param {Camera} other - Another camera.
1250 copy(other: Camera): void;
1252 * Clone this camera.
1254 * @returns {Camera} A camera with cloned properties equal to this camera.
1258 * Determine the distance between this camera and another camera.
1260 * @param {Camera} other - Another camera.
1261 * @returns {number} The distance between the cameras.
1263 diff(other: Camera): number;
1265 * Get the focal length based on the transform.
1267 * @description Returns the focal length corresponding
1268 * to a 90 degree field of view for spherical
1271 * Returns the transform focal length for other
1274 * @returns {number} Focal length.
1279 declare enum State {
1284 WaitingInteractively = 4
1288 * Enumeration for edge directions
1291 * @description Directions for edges in image graph describing
1292 * sequence, spatial and image type relations between nodes.
1294 declare enum NavigationDirection {
1296 * Next image in the sequence.
1300 * Previous image in the sequence.
1304 * Step to the left keeping viewing direction.
1308 * Step to the right keeping viewing direction.
1312 * Step forward keeping viewing direction.
1316 * Step backward keeping viewing direction.
1320 * Turn 90 degrees counter clockwise.
1324 * Turn 90 degrees clockwise.
1332 * Spherical in general direction.
1336 * Looking in roughly the same direction at rougly the same position.
1342 * Interface that describes additional properties of an edge.
1344 * @interface NavigationEdgeData
1346 interface NavigationEdgeData {
1348 * The edge direction.
1350 direction: NavigationDirection;
1352 * The counter clockwise horizontal rotation angle from
1353 * the X-axis in a spherical coordiante system of the
1354 * motion from the source image to the destination node.
1356 worldMotionAzimuth: number;
1360 * Interface that describes the properties for a
1361 * navigation edge from a source image to a
1364 * @interface NavigationEdge
1366 interface NavigationEdge {
1368 * The id of the source image.
1372 * The id of the target image.
1376 * Additional data describing properties of the edge.
1378 data: NavigationEdgeData;
1382 * Interface that indicates edge status.
1384 * @interface NavigationEdgeStatus
1386 interface NavigationEdgeStatus {
1388 * Value indicating whether the edges have been cached.
1394 * @description If the cached property is false the edges
1395 * property will always be an empty array. If the cached
1396 * property is true, there will exist edges in the the
1397 * array if the image has edges.
1399 edges: NavigationEdge[];
1405 * @classdesc Represents the cached properties of a image.
1407 declare class ImageCache {
1412 private _sequenceEdges;
1413 private _spatialEdges;
1414 private _imageAborter;
1415 private _meshAborter;
1416 private _imageChanged$;
1418 private _sequenceEdgesChanged$;
1419 private _sequenceEdges$;
1420 private _spatialEdgesChanged$;
1421 private _spatialEdges$;
1422 private _cachingAssets$;
1423 private _iamgeSubscription;
1424 private _sequenceEdgesSubscription;
1425 private _spatialEdgesSubscription;
1427 * Create a new image cache instance.
1429 constructor(provider: DataProviderBase);
1433 * @description Will not be set when assets have not been cached
1434 * or when the object has been disposed.
1436 * @returns {HTMLImageElement} Cached image element of the image.
1438 get image(): HTMLImageElement;
1442 * @returns {Observable<HTMLImageElement>} Observable emitting
1443 * the cached image when it is updated.
1445 get image$(): Observable<HTMLImageElement>;
1449 * @description Will not be set when assets have not been cached
1450 * or when the object has been disposed.
1452 * @returns {MeshContract} SfM triangulated mesh of reconstructed
1455 get mesh(): MeshContract;
1457 * Get sequenceEdges.
1459 * @returns {NavigationEdgeStatus} Value describing the status of the
1462 get sequenceEdges(): NavigationEdgeStatus;
1464 * Get sequenceEdges$.
1466 * @returns {Observable<NavigationEdgeStatus>} Observable emitting
1467 * values describing the status of the sequence edges.
1469 get sequenceEdges$(): Observable<NavigationEdgeStatus>;
1473 * @returns {NavigationEdgeStatus} Value describing the status of the
1476 get spatialEdges(): NavigationEdgeStatus;
1478 * Get spatialEdges$.
1480 * @returns {Observable<NavigationEdgeStatus>} Observable emitting
1481 * values describing the status of the spatial edges.
1483 get spatialEdges$(): Observable<NavigationEdgeStatus>;
1485 * Cache the image and mesh assets.
1487 * @param {SpatialImageEnt} spatial - Spatial props of the image to cache.
1488 * @param {boolean} spherical - Value indicating whether image is a spherical.
1489 * @param {boolean} merged - Value indicating whether image is merged.
1490 * @returns {Observable<ImageCache>} Observable emitting this image
1491 * cache whenever the load status has changed and when the mesh or image
1492 * has been fully loaded.
1494 cacheAssets$(spatial: SpatialImageEnt, merged: boolean): Observable<ImageCache>;
1496 * Cache an image with a higher resolution than the current one.
1498 * @param {SpatialImageEnt} spatial - Spatial props.
1499 * @returns {Observable<ImageCache>} Observable emitting a single item,
1500 * the image cache, when the image has been cached. If supplied image
1501 * size is not larger than the current image size the image cache is
1502 * returned immediately.
1504 cacheImage$(spatial: SpatialImageEnt): Observable<ImageCache>;
1506 * Cache the sequence edges.
1508 * @param {Array<NavigationEdge>} edges - Sequence edges to cache.
1510 cacheSequenceEdges(edges: NavigationEdge[]): void;
1512 * Cache the spatial edges.
1514 * @param {Array<NavigationEdge>} edges - Spatial edges to cache.
1516 cacheSpatialEdges(edges: NavigationEdge[]): void;
1518 * Dispose the image cache.
1520 * @description Disposes all cached assets and unsubscribes to
1525 * Reset the sequence edges.
1527 resetSequenceEdges(): void;
1529 * Reset the spatial edges.
1531 resetSpatialEdges(): void;
1535 * @param {SpatialImageEnt} spatial - Spatial image.
1536 * @param {boolean} spherical - Value indicating whether image is a spherical.
1537 * @returns {Observable<ILoadStatusObject<HTMLImageElement>>} Observable
1538 * emitting a load status object every time the load status changes
1539 * and completes when the image is fully loaded.
1541 private _cacheImage$;
1545 * @param {SpatialImageEnt} spatial - Spatial props.
1546 * @param {boolean} merged - Value indicating whether image is merged.
1547 * @returns {Observable<ILoadStatusObject<MeshContract>>} Observable emitting
1548 * a load status object every time the load status changes and completes
1549 * when the mesh is fully loaded.
1551 private _cacheMesh$;
1553 * Create a load status object with an empty mesh.
1555 * @returns {ILoadStatusObject<MeshContract>} Load status object
1558 private _createEmptyMesh;
1559 private _disposeImage;
1565 * @classdesc Represents a image in the navigation graph.
1567 * Explanation of position and bearing properties:
1569 * When images are uploaded they will have GPS information in the EXIF, this is what
1570 * is called `originalLngLat` {@link Image.originalLngLat}.
1572 * When Structure from Motions has been run for a image a `computedLngLat` that
1573 * differs from the `originalLngLat` will be created. It is different because
1574 * GPS positions are not very exact and SfM aligns the camera positions according
1575 * to the 3D reconstruction {@link Image.computedLngLat}.
1577 * At last there exist a `lngLat` property which evaluates to
1578 * the `computedLngLat` from SfM if it exists but falls back
1579 * to the `originalLngLat` from the EXIF GPS otherwise {@link Image.lngLat}.
1581 * Everything that is done in in the Viewer is based on the SfM positions,
1582 * i.e. `computedLngLat`. That is why the smooth transitions go in the right
1583 * direction (nd not in strange directions because of bad GPS).
1585 * E.g. when placing a marker in the Viewer it is relative to the SfM
1586 * position i.e. the `computedLngLat`.
1588 * The same concept as above also applies to the compass angle (or bearing) properties
1589 * `originalCa`, `computedCa` and `ca`.
1591 declare class Image {
1596 * Create a new image instance.
1598 * @description Images are always created internally by the library.
1599 * Images can not be added to the library through any API method.
1601 * @param {CoreImageEnt} core- Raw core image data.
1604 constructor(core: CoreImageEnt);
1606 * Get assets cached.
1608 * @description The assets that need to be cached for this property
1609 * to report true are the following: fill properties, image and mesh.
1610 * The library ensures that the current image will always have the
1613 * @returns {boolean} Value indicating whether all assets have been
1618 get assetsCached(): boolean;
1620 * Get cameraParameters.
1622 * @description Will be undefined if SfM has
1625 * Camera type dependent parameters.
1627 * For perspective and fisheye camera types,
1628 * the camera parameters array should be
1629 * constructed according to
1633 * where focal is the camera focal length,
1634 * and k1, k2 are radial distortion parameters.
1636 * For spherical camera type the camera
1637 * parameters are unset or emtpy array.
1639 * @returns {Array<number>} The parameters
1640 * related to the camera type.
1642 get cameraParameters(): number[];
1646 * @description Will be undefined if SfM has not been run.
1648 * @returns {string} The camera type that captured the image.
1650 get cameraType(): string;
1654 * @description Timestamp of the image capture date
1655 * and time represented as a Unix epoch timestamp in milliseconds.
1657 * @returns {number} Timestamp when the image was captured.
1659 get capturedAt(): number;
1663 * @returns {string} Globally unique id of the SfM cluster to which
1664 * the image belongs.
1666 get clusterId(): string;
1670 * @returns {string} Url to the cluster reconstruction file.
1674 get clusterUrl(): string;
1678 * @description If the SfM computed compass angle exists it will
1679 * be returned, otherwise the original EXIF compass angle.
1681 * @returns {number} Compass angle, measured in degrees
1682 * clockwise with respect to north.
1684 get compassAngle(): number;
1688 * @description The library ensures that the current image will
1691 * @returns {boolean} Value indicating whether the image has all
1692 * properties filled.
1696 get complete(): boolean;
1698 * Get computedAltitude.
1700 * @description If SfM has not been run the computed altitude is
1701 * set to a default value of two meters.
1703 * @returns {number} Altitude, in meters.
1705 get computedAltitude(): number;
1707 * Get computedCompassAngle.
1709 * @description Will not be set if SfM has not been run.
1711 * @returns {number} SfM computed compass angle, measured
1712 * in degrees clockwise with respect to north.
1714 get computedCompassAngle(): number;
1716 * Get computedLngLat.
1718 * @description Will not be set if SfM has not been run.
1720 * @returns {LngLat} SfM computed longitude, latitude in WGS84 datum,
1721 * measured in degrees.
1723 get computedLngLat(): LngLat;
1727 * @description Note that the creator ID will not be set when using
1728 * the Mapillary API.
1730 * @returns {string} Globally unique id of the user who uploaded
1733 get creatorId(): string;
1735 * Get creatorUsername.
1737 * @description Note that the creator username will not be set when
1738 * using the Mapillary API.
1740 * @returns {string} Username of the creator who uploaded
1743 get creatorUsername(): string;
1745 * Get exifOrientation.
1747 * @returns {number} EXIF orientation of original image.
1749 get exifOrientation(): number;
1753 * @returns {number} Height of original image, not adjusted
1756 get height(): number;
1760 * @description The image will always be set on the current image.
1762 * @returns {HTMLImageElement} Cached image element of the image.
1764 get image(): HTMLImageElement;
1768 * @returns {Observable<HTMLImageElement>} Observable emitting
1769 * the cached image when it is updated.
1773 get image$(): Observable<HTMLImageElement>;
1777 * @returns {string} Globally unique id of the image.
1783 * @description If the SfM computed longitude, latitude exist
1784 * it will be returned, otherwise the original EXIF latitude
1787 * @returns {LngLat} Longitude, latitude in WGS84 datum,
1788 * measured in degrees.
1790 get lngLat(): LngLat;
1794 * @returns {boolean} Value indicating whether SfM has been
1795 * run on the image and the image has been merged into a
1796 * connected component.
1798 get merged(): boolean;
1802 * @description Will not be set if SfM has not yet been run on
1805 * @returns {stirng} Id of connected component to which image
1806 * belongs after the aligning merge.
1808 get mergeId(): string;
1812 * @description The mesh will always be set on the current image.
1814 * @returns {MeshContract} SfM triangulated mesh of reconstructed
1817 get mesh(): MeshContract;
1819 * Get originalAltitude.
1821 * @returns {number} EXIF altitude, in meters, if available.
1823 get originalAltitude(): number;
1825 * Get originalCompassAngle.
1827 * @returns {number} Original EXIF compass angle, measured in
1830 get originalCompassAngle(): number;
1832 * Get originalLngLat.
1834 * @returns {LngLat} Original EXIF longitude, latitude in
1835 * WGS84 datum, measured in degrees.
1837 get originalLngLat(): LngLat;
1841 * @returns {string} Globally unique id of the owner to which
1842 * the image belongs. If the image does not belong to an
1843 * owner the owner id will be undefined.
1845 get ownerId(): string;
1849 * @returns {boolean} Value specifying if image is accessible to
1850 * organization members only or to everyone.
1852 get private(): boolean;
1856 * @returns {number} A number between zero and one
1857 * determining the quality of the image. Blurriness
1858 * (motion blur / out-of-focus), occlusion (camera
1859 * mount, ego vehicle, water-drops), windshield
1860 * reflections, bad illumination (exposure, glare),
1861 * and bad weather condition (fog, rain, snow)
1862 * affect the quality score.
1864 * @description Value should be on the interval [0, 1].
1866 get qualityScore(): number;
1870 * @description Will not be set if SfM has not been run.
1872 * @returns {Array<number>} Rotation vector in angle axis representation.
1874 get rotation(): number[];
1878 * @description Will not be set if SfM has not been run.
1880 * @returns {number} Scale of reconstruction the image
1883 get scale(): number;
1887 * @returns {string} Globally unique id of the sequence
1888 * to which the image belongs.
1890 get sequenceId(): string;
1892 * Get sequenceEdges.
1894 * @returns {NavigationEdgeStatus} Value describing the status of the
1899 get sequenceEdges(): NavigationEdgeStatus;
1901 * Get sequenceEdges$.
1903 * @description Internal observable, should not be used as an API.
1905 * @returns {Observable<NavigationEdgeStatus>} Observable emitting
1906 * values describing the status of the sequence edges.
1910 get sequenceEdges$(): Observable<NavigationEdgeStatus>;
1914 * @returns {NavigationEdgeStatus} Value describing the status of the
1919 get spatialEdges(): NavigationEdgeStatus;
1921 * Get spatialEdges$.
1923 * @description Internal observable, should not be used as an API.
1925 * @returns {Observable<NavigationEdgeStatus>} Observable emitting
1926 * values describing the status of the spatial edges.
1930 get spatialEdges$(): Observable<NavigationEdgeStatus>;
1934 * @returns {number} Width of original image, not
1935 * adjusted for orientation.
1937 get width(): number;
1939 * Cache the image and mesh assets.
1941 * @description The assets are always cached internally by the
1942 * library prior to setting a image as the current image.
1944 * @returns {Observable<Image>} Observable emitting this image whenever the
1945 * load status has changed and when the mesh or image has been fully loaded.
1949 cacheAssets$(): Observable<Image>;
1951 * Cache the image asset.
1953 * @description Use for caching a differently sized image than
1954 * the one currently held by the image.
1956 * @returns {Observable<Image>} Observable emitting this image whenever the
1957 * load status has changed and when the mesh or image has been fully loaded.
1961 cacheImage$(): Observable<Image>;
1963 * Cache the sequence edges.
1965 * @description The sequence edges are cached asynchronously
1966 * internally by the library.
1968 * @param {Array<NavigationEdge>} edges - Sequence edges to cache.
1971 cacheSequenceEdges(edges: NavigationEdge[]): void;
1973 * Cache the spatial edges.
1975 * @description The spatial edges are cached asynchronously
1976 * internally by the library.
1978 * @param {Array<NavigationEdge>} edges - Spatial edges to cache.
1981 cacheSpatialEdges(edges: NavigationEdge[]): void;
1983 * Dispose the image.
1985 * @description Disposes all cached assets.
1990 * Initialize the image cache.
1992 * @description The image cache is initialized internally by
1995 * @param {ImageCache} cache - The image cache to set as cache.
1998 initializeCache(cache: ImageCache): void;
2000 * Complete an image with spatial properties.
2002 * @description The image is completed internally by
2005 * @param {SpatialImageEnt} fill - The spatial image struct.
2008 makeComplete(fill: SpatialImageEnt): void;
2010 * Reset the sequence edges.
2014 resetSequenceEdges(): void;
2016 * Reset the spatial edges.
2020 resetSpatialEdges(): void;
2022 * Clears the image and mesh assets, aborts
2023 * any outstanding requests and resets edges.
2030 interface IAnimationState {
2031 reference: LngLatAlt;
2035 currentImage: Image;
2036 currentCamera: Camera;
2037 previousImage: Image;
2038 trajectory: Image[];
2039 currentIndex: number;
2041 imagesAhead: number;
2042 currentTransform: Transform;
2043 previousTransform: Transform;
2044 motionless: boolean;
2048 interface AnimationFrame {
2051 state: IAnimationState;
2054 interface EulerRotation {
2059 declare class RenderCamera {
2061 private _viewportCoords;
2063 private _renderMode;
2068 private _perspective;
2071 private _changedForFrame;
2072 private _currentImageId;
2073 private _previousImageId;
2074 private _currentSpherical;
2075 private _previousSpherical;
2077 private _currentProjectedPoints;
2078 private _previousProjectedPoints;
2079 private _currentFov;
2080 private _previousFov;
2081 private _initialFov;
2082 constructor(elementWidth: number, elementHeight: number, renderMode: RenderMode);
2083 get alpha(): number;
2084 get camera(): Camera;
2085 get changed(): boolean;
2086 get frameId(): number;
2087 get perspective(): PerspectiveCamera;
2088 get renderMode(): RenderMode;
2089 get rotation(): EulerRotation;
2091 get size(): ViewportSize;
2093 fovToZoom(fov: number): number;
2094 setFrame(frame: AnimationFrame): void;
2095 setProjectionMatrix(matrix: number[]): void;
2096 setRenderMode(renderMode: RenderMode): void;
2097 setSize(size: ViewportSize): void;
2098 private _computeAspect;
2099 private _computeCurrentFov;
2100 private _computeFov;
2101 private _computePreviousFov;
2102 private _computeProjectedPoints;
2103 private _computeRequiredVerticalFov;
2104 private _computeRotation;
2105 private _computeVerticalFov;
2107 private _interpolateFov;
2108 private _setFrameId;
2111 declare class RenderService {
2114 private _currentFrame$;
2115 private _projectionMatrix$;
2116 private _renderCameraOperation$;
2117 private _renderCameraHolder$;
2118 private _renderCameraFrame$;
2119 private _renderCamera$;
2123 private _renderMode$;
2124 private _subscriptions;
2125 constructor(element: HTMLElement, currentFrame$: Observable<AnimationFrame>, renderMode: RenderMode, renderCamera?: RenderCamera);
2126 get bearing$(): Observable<number>;
2127 get element(): HTMLElement;
2128 get projectionMatrix$(): Subject<number[]>;
2129 get renderCamera$(): Observable<RenderCamera>;
2130 get renderCameraFrame$(): Observable<RenderCamera>;
2131 get renderMode$(): Subject<RenderMode>;
2132 get resize$(): Subject<void>;
2133 get size$(): Observable<ViewportSize>;
2137 interface VirtualNodeHash {
2142 declare class DOMRenderer {
2143 private _renderService;
2144 private _currentFrame$;
2145 private _adaptiveOperation$;
2151 private _renderAdaptive$;
2152 private _subscriptions;
2153 constructor(element: HTMLElement, renderService: RenderService, currentFrame$: Observable<AnimationFrame>);
2154 get element$(): Observable<Element>;
2155 get render$(): Subject<VirtualNodeHash>;
2156 get renderAdaptive$(): Subject<VirtualNodeHash>;
2157 clear(name: string): void;
2161 interface GLRenderFunction extends Function {
2162 (perspectiveCamera: PerspectiveCamera, renderer: WebGLRenderer): void;
2165 declare enum RenderPass$1 {
2170 interface GLFrameRenderer {
2172 needsRender: boolean;
2173 render: GLRenderFunction;
2177 interface GLRenderHash {
2179 renderer: GLFrameRenderer;
2182 declare class GLRenderer {
2183 private _renderService;
2184 private _renderFrame$;
2185 private _renderCameraOperation$;
2186 private _renderCamera$;
2189 private _renderOperation$;
2190 private _renderCollection$;
2191 private _rendererOperation$;
2193 private _eraserOperation$;
2195 private _triggerOperation$;
2196 private _webGLRenderer$;
2197 private _renderFrameSubscription;
2198 private _subscriptions;
2199 private _opaqueRender$;
2200 constructor(canvas: HTMLCanvasElement, canvasContainer: HTMLElement, renderService: RenderService);
2201 get render$(): Subject<GLRenderHash>;
2202 get opaqueRender$(): Observable<void>;
2203 get webGLRenderer$(): Observable<WebGLRenderer>;
2204 clear(name: string): void;
2206 triggerRerender(): void;
2207 private _renderFrameSubscribe;
2211 * Enumeration for transition mode
2214 * @description Modes for specifying how transitions
2215 * between images are performed.
2217 declare enum TransitionMode {
2219 * Default transitions.
2221 * @description The viewer dynamically determines
2222 * whether transitions should be performed with or
2223 * without motion and blending for each transition
2224 * based on the underlying data.
2228 * Instantaneous transitions.
2230 * @description All transitions are performed
2231 * without motion or blending.
2236 declare class StateService {
2239 private _contextOperation$;
2243 private _currentState$;
2244 private _lastState$;
2245 private _currentImage$;
2246 private _currentImageExternal$;
2247 private _currentCamera$;
2248 private _currentId$;
2249 private _currentTransform$;
2250 private _reference$;
2251 private _inMotionOperation$;
2253 private _inTranslationOperation$;
2254 private _inTranslation$;
2255 private _appendImage$;
2256 private _frameGenerator;
2258 private _fpsSampleRate;
2259 private _subscriptions;
2260 constructor(initialState: State, transitionMode?: TransitionMode);
2261 get currentState$(): Observable<AnimationFrame>;
2262 get currentImage$(): Observable<Image>;
2263 get currentId$(): Observable<string>;
2264 get currentImageExternal$(): Observable<Image>;
2265 get currentCamera$(): Observable<Camera>;
2266 get currentTransform$(): Observable<Transform>;
2267 get state$(): Observable<State>;
2268 get reference$(): Observable<LngLatAlt>;
2269 get inMotion$(): Observable<boolean>;
2270 get inTranslation$(): Observable<boolean>;
2271 get appendImage$(): Subject<Image>;
2277 waitInteractively(): void;
2278 appendImagess(images: Image[]): void;
2279 prependImages(images: Image[]): void;
2280 removeImages(n: number): void;
2281 clearImages(): void;
2282 clearPriorImages(): void;
2284 setImages(images: Image[]): void;
2285 setViewMatrix(matrix: number[]): void;
2286 rotate(delta: EulerRotation): void;
2287 rotateUnbounded(delta: EulerRotation): void;
2288 rotateWithoutInertia(delta: EulerRotation): void;
2289 rotateBasic(basicRotation: number[]): void;
2290 rotateBasicUnbounded(basicRotation: number[]): void;
2291 rotateBasicWithoutInertia(basicRotation: number[]): void;
2292 rotateToBasic(basic: number[]): void;
2293 move(delta: number): void;
2294 moveTo(position: number): void;
2295 dolly(delta: number): void;
2296 orbit(rotation: EulerRotation): void;
2297 truck(direction: number[]): void;
2299 * Change zoom level while keeping the reference point position approximately static.
2301 * @parameter {number} delta - Change in zoom level.
2302 * @parameter {Array<number>} reference - Reference point in basic coordinates.
2304 zoomIn(delta: number, reference: number[]): void;
2305 getCenter(): Observable<number[]>;
2306 getZoom(): Observable<number>;
2307 setCenter(center: number[]): void;
2308 setSpeed(speed: number): void;
2309 setTransitionMode(mode: TransitionMode): void;
2310 setZoom(zoom: number): void;
2313 private _invokeContextOperation;
2319 constructor(doc?: Node);
2320 get document(): HTMLDocument;
2321 createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, className?: string, container?: HTMLElement): HTMLElementTagNameMap[K];
2325 * Enumeration for component size.
2328 * @description May be used by a component to allow for resizing
2329 * of the UI elements rendered by the component.
2331 declare enum ComponentSize {
2333 * Automatic size. The size of the elements will automatically
2334 * change at a predefined threshold.
2338 * Large size. The size of the elements will be fixed until another
2339 * component size is configured.
2343 * Small size. The size of the elements will be fixed until another
2344 * component size is configured.
2349 interface BearingConfiguration extends ComponentConfiguration {
2351 * The size of the ui elements.
2353 * @default ComponentSize.Automatic
2355 size?: ComponentSize;
2359 * Interface for configuration of cache depth.
2364 * var viewer = new Viewer({
2378 interface CacheDepthConfiguration {
2380 * Cache depth in the sequence directions.
2382 * @description Max value is 4. Value will be clamped
2383 * to the interval [0, 4].
2388 * Cache depth in the spherical direction.
2390 * @description Max value is 2. Value will be clamped
2391 * to the interval [0, 2].
2396 * Cache depth in the step directions.
2398 * @description Max value is 3. Value will be clamped
2399 * to the interval [0, 3].
2404 * Cache depth in the turn directions.
2406 * @description Max value is 1. Value will be clamped
2407 * to the interval [0, 1].
2413 * Interface for configuration of cache component.
2417 interface CacheConfiguration extends ComponentConfiguration {
2419 * Cache depth struct.
2421 depth?: CacheDepthConfiguration;
2425 * Interface for configuration of direction component.
2430 * var viewer = new Viewer({
2442 interface DirectionConfiguration extends ComponentConfiguration {
2444 * Determines if the sequence arrow appearance should be different from
2445 * the non sequence arrows.
2447 * @description Needs to be set to true for the sequence suffixed classes
2448 * to be applied to the navigation elements. Additional calculations will be
2449 * performed resulting in a performance cost.
2453 distinguishSequence?: boolean;
2455 * The image id representing the direction arrow to be highlighted.
2457 * @description The arrow pointing towards the image corresponding to the
2458 * highlight id will be highlighted.
2460 * @default undefined
2462 highlightId?: string;
2464 * The min width of the non transformed container element holding
2465 * the navigation arrows.
2467 * @description Set min width of the non transformed
2468 * container element holding the navigation arrows.
2469 * If the min width is larger than the max width the
2470 * min width value will be used.
2472 * The container element is automatically resized when the resize
2473 * method on the Viewer class is called.
2479 * The max width of the non transformed container element holding
2480 * the navigation arrows.
2482 * @description Set max width of the non transformed
2483 * container element holding the navigation arrows.
2484 * If the min width is larger than the max width the
2485 * min width value will be used.
2487 * The container element is automatically resized when the resize
2488 * method on the Viewer class is called.
2496 * Interface for configuration of keyboard component.
2501 * var viewer = new Viewer({
2506 * keySequenceNavigation: false,
2507 * keySpatialNavigation: false,
2514 interface KeyboardConfiguration extends ComponentConfiguration {
2516 * Enable or disable the `KeyPlayHandler`.
2522 * Enable or disable the `KeySequenceNavigationHandler`.
2526 keySequenceNavigation?: boolean;
2528 * Enable or disable the `KeySpatialNavigationHandler`.
2532 keySpatialNavigation?: boolean;
2534 * Enable or disable the `KeyZoomHandler`.
2542 * Interface for configuration of marker component.
2547 * var viewer = new Viewer({
2551 * visibleBBoxSize: 80,
2558 interface MarkerConfiguration extends ComponentConfiguration {
2560 * The size of the bounding box for which markers will be visible.
2562 * @description Provided values will be clamped to the [1, 200]
2567 visibleBBoxSize?: number;
2571 * Interface for configuration of mouse component.
2576 * var viewer = new Viewer({
2581 * scrollZoom: false,
2589 interface PointerConfiguration extends ComponentConfiguration {
2591 * Activate or deactivate the `DragPanHandler`.
2597 * Activate or deactivate the `EarthControlHandler`.
2601 earthControl?: boolean;
2603 * Activate or deactivate the `ScrollZoomHandler`.
2607 scrollZoom?: boolean;
2609 * Activate or deactivate the `TouchZoomHandler`.
2613 touchZoom?: boolean;
2617 * Interface for configuration of sequence component.
2622 * const viewer = new Viewer({
2635 interface SequenceConfiguration extends ComponentConfiguration {
2637 * Set the direction to follow when playing.
2639 * @default EdgeDirection.Next
2641 direction?: NavigationDirection;
2643 * The node id representing the direction arrow to be highlighted.
2645 * @description When set to null no direction will be highlighted.
2646 * The arrow pointing towards the node corresponding to the
2647 * highlight id will be highlighted.
2649 * @default undefined
2653 highlightId?: string;
2655 * The max width of the sequence container.
2657 * @description Set max width of the container element holding
2658 * the sequence navigation elements. If the min width is larger than the
2659 * max width the min width value will be used.
2661 * The container element is automatically resized when the resize
2662 * method on the Viewer class is called.
2668 * The min width of the sequence container.
2670 * @description Set min width of the container element holding
2671 * the sequence navigation elements. If the min width is larger than the
2672 * max width the min width value will be used.
2674 * The container element is automatically resized when the resize
2675 * method on the Viewer class is called.
2681 * Indicating wheter the component is playing.
2687 * Determine whether the sequence UI elements
2688 * should be visible.
2696 * Enumeration for slider mode.
2701 * @description Modes for specifying how transitions
2702 * between images are performed in slider mode. Only
2703 * applicable when the slider component determines
2704 * that transitions with motion is possilble. When it
2705 * is not, the stationary mode will be applied.
2707 declare enum SliderConfigurationMode {
2709 * Transitions with motion.
2711 * @description The slider component moves the
2712 * camera between the image origins.
2714 * In this mode it is not possible to zoom or pan.
2716 * The slider component falls back to stationary
2717 * mode when it determines that the pair of images
2718 * does not have a strong enough relation.
2722 * Stationary transitions.
2724 * @description The camera is stationary.
2726 * In this mode it is possible to zoom and pan.
2731 * Interface for configuration of slider ids.
2735 interface SliderConfigurationIds {
2737 * Id for the image plane in the background.
2741 * Id for the image plane in the foreground.
2746 * Interface for configuration of slider component.
2750 * var viewer = new Viewer({
2754 * initialPosition: 0.5,
2756 * background: '<background-id>',
2757 * foreground: '<foreground-id>',
2759 * sliderVisible: true,
2766 interface SliderConfiguration extends ComponentConfiguration {
2768 * Initial position of the slider on the interval [0, 1].
2770 * @description Configures the intial position of the slider.
2771 * The inital position value will be used when the component
2776 initialPosition?: number;
2780 * @description Configures the component to show the image
2781 * planes for the supplied image ids in the foreground
2782 * and the background.
2784 ids?: SliderConfigurationIds;
2786 * Value indicating whether the slider should be visible.
2788 * @description Set the value controlling if the
2789 * slider is visible.
2793 sliderVisible?: boolean;
2795 * Mode used for image pair transitions.
2797 * @description Configures the mode for transitions between
2800 mode?: SliderConfigurationMode;
2803 declare enum CameraVisualizationMode {
2805 * Cameras are hidden.
2809 * Cameras are shown, all with the same color.
2813 * Cameras are shown with colors based on the
2818 * Cameras are shown with colors based on the
2819 * their connected components.
2821 ConnectedComponent = 3,
2823 * Cameras are shown, with colors based on the
2829 declare enum OriginalPositionMode {
2831 * Original positions are hidden.
2835 * Visualize original positions with altitude change.
2839 * Visualize original positions without altitude change,
2840 * i.e. as flat lines from the camera origin.
2846 * Interface for configuration of spatial component.
2851 * var viewer = new Viewer({
2856 * cameraVisualizationMode: CameraVisualizationMode.Cluster,
2857 * cellsVisible: true,
2858 * originalPositionMode: OriginalPositionMode.Altitude,
2860 * pointsVisible: false,
2867 interface SpatialConfiguration extends ComponentConfiguration {
2869 * The camera size on the interval [0.01, 1].
2873 cameraSize?: number;
2875 * Specify the camera visualization mode.
2877 * @default CameraVisualizationMode.Homogeneous
2879 cameraVisualizationMode?: CameraVisualizationMode;
2881 * Specify if the currently rendered cells should be visualize on
2882 * an approximated ground plane.
2886 cellsVisible?: boolean;
2888 * Cell grid depth from the cell of the currently
2891 * @description Max value is 3. Value will be clamped
2892 * to the interval [1, 3].
2895 cellGridDepth?: number;
2897 * Specify the original position visualization mode.
2899 * @description The original positions are hidden
2902 * @default OriginalPositionMode.Hidden
2904 originalPositionMode?: OriginalPositionMode;
2906 * The point size on the interval [0.01, 1].
2912 * Specify if the points should be visible or not.
2916 pointsVisible?: boolean;
2920 * Enumeration for tag modes
2923 * @description Modes for the interaction in the tag component.
2925 declare enum TagMode {
2927 * Disables creating tags.
2931 * Create a point geometry through a click.
2935 * Create a points geometry through clicks.
2939 * Create a polygon geometry through clicks.
2943 * Create a rect geometry through clicks.
2947 * Create a rect geometry through drag.
2949 * @description Claims the mouse which results in mouse handlers like
2950 * drag pan and scroll zoom becoming inactive.
2956 * Interface for configuration of tag component.
2961 * var viewer = new Viewer({
2965 * createColor: 0xFF0000,
2966 * mode: TagMode.CreateRect,
2973 interface TagConfiguration extends ComponentConfiguration {
2975 * The color of vertices and edges for tags that
2976 * are being created.
2980 createColor?: number;
2982 * Show an indicator at the centroid of the points geometry
2983 * that creates the geometry when clicked.
2986 indicatePointsCompleter?: boolean;
2988 * The interaction mode of the tag component.
2990 * @default TagMode.Default
2995 interface ZoomConfiguration extends ComponentConfiguration {
2997 * The size of the ui elements.
2999 * @default ComponentSize.Automatic
3001 size?: ComponentSize;
3005 * Interface for configuration of navigation component.
3010 * var viewer = new Viewer({
3023 interface NavigationFallbackConfiguration extends ComponentConfiguration {
3025 * Enable or disable the sequence arrows.
3031 * Enable or disable the spatial arrows.
3039 * Interface for the fallback component options that can be
3040 * provided to the viewer when the browser does not have
3045 interface FallbackOptions {
3047 * Show static images without pan, zoom, or transitions.
3049 * @description Fallback for `image` when WebGL is not supported.
3055 * Show static navigation arrows in the corners.
3057 * @description Fallback for `direction` and `sequence` when WebGL is not supported.
3061 navigation?: boolean | NavigationFallbackConfiguration;
3065 * Interface for the component options that can be provided to the viewer.
3069 interface ComponentOptions {
3075 attribution?: boolean;
3077 * Show indicator for bearing and field of view.
3081 bearing?: boolean | BearingConfiguration;
3083 * Cache images around the current one.
3087 cache?: boolean | CacheConfiguration;
3089 * Use a cover to avoid loading data until viewer interaction.
3095 * Show spatial direction arrows for navigation.
3097 * @description Default spatial navigation when there is WebGL support.
3098 * Requires WebGL support.
3102 direction?: boolean | DirectionConfiguration;
3104 * Enable fallback component options
3105 * when the browser does not have WebGL support.
3107 * @default undefined
3109 fallback?: FallbackOptions;
3111 * Show image planes in 3D.
3113 * @description Requires WebGL support.
3119 * Enable use of keyboard commands.
3121 * @description Requires WebGL support.
3125 keyboard?: boolean | KeyboardConfiguration;
3127 * Enable an interface for showing 3D markers in the viewer.
3129 * @description Requires WebGL support.
3133 marker?: boolean | MarkerConfiguration;
3135 * Enable mouse, pen, and touch interaction for zoom and pan.
3137 * @description Requires WebGL support.
3141 pointer?: boolean | PointerConfiguration;
3143 * Show HTML popups over images.
3145 * @description Requires WebGL support.
3151 * Show sequence related navigation.
3153 * @description Default sequence navigation when there is WebGL support.
3157 sequence?: boolean | SequenceConfiguration;
3159 * Show a slider for transitioning between image planes.
3161 * @description Requires WebGL support.
3165 slider?: boolean | SliderConfiguration;
3167 * Enable an interface for showing spatial data in the viewer.
3169 * @description Requires WebGL support.
3173 spatial?: boolean | SpatialConfiguration;
3175 * Enable an interface for drawing 2D geometries on top of images.
3177 * @description Requires WebGL support.
3181 tag?: boolean | TagConfiguration;
3183 * Show buttons for zooming in and out.
3185 * @description Requires WebGL support.
3189 zoom?: boolean | ZoomConfiguration;
3193 * Interface for the URL options that can be provided to the viewer.
3197 interface UrlOptions {
3201 * @description Host used for links to the full
3202 * mapillary website.
3204 * @default {"www.mapillary.com"}
3206 exploreHost?: string;
3210 * @description Used for all hosts.
3212 * @default {"https"}
3218 * Enumeration for camera controls.
3220 * @description Specifies different modes for how the
3221 * camera is controlled through pointer, keyboard or
3222 * other modes of input.
3227 declare enum CameraControls {
3229 * Control the camera with custom logic by
3230 * attaching a custom camera controls
3231 * instance to the {@link Viewer}.
3235 * Control the camera from a birds perspective
3236 * to get an overview.
3240 * Control the camera in a first person view
3241 * from the street level perspective.
3247 * Interface for the options that can be provided to the {@link Viewer}.
3249 interface ViewerOptions {
3251 * Optional access token for API requests of
3254 * @description Can be a user access token or
3255 * a client access token.
3257 * A Mapillary client access token can be obtained
3258 * by [registering an application](https://www.mapillary.com/dashboard/developers).
3260 * The access token can also be set through the
3261 * {@link Viewer.setAccessToken} method.
3263 accessToken?: string;
3265 * Value specifying the initial camera controls of
3268 * @default {@link CameraControls.Street}
3270 cameraControls?: CameraControls;
3272 * Value specifying if combined panning should be activated.
3276 combinedPanning?: boolean;
3278 * Component options.
3280 component?: ComponentOptions;
3282 * The HTML element in which MapillaryJS will render the
3283 * viewer, or the element's string `id`. The
3284 * specified element must have no children.
3286 container: string | HTMLElement;
3288 * Optional data provider class instance for API and static
3289 * resource requests.
3291 * @description The data provider will override the
3292 * default MapillaryJS data provider and take responsibility
3293 * for all IO handling.
3295 * The data provider takes precedance over the {@link }
3297 * A data provider instance must extend
3298 * the data provider base class.
3300 dataProvider?: DataProviderBase;
3302 * Optional `image-id` to start from. The id
3303 * can be any Mapillary image. If a id is provided the viewer is
3304 * bound to that id until it has been fully loaded. If null is provided
3305 * no image is loaded at viewer initialization and the viewer is not
3306 * bound to any particular id. Any image can then be navigated to
3307 * with e.g. `viewer.moveTo("<my-image-id>")`.
3311 * Value indicating if the viewer should fetch high resolution
3314 * @description Can be used when extending MapillaryJS with
3315 * a custom data provider. If no image tiling server exists
3316 * the image tiling can be inactivated to avoid error
3317 * messages about non-existing tiles in the console.
3321 imageTiling?: boolean;
3323 * The render mode in the viewer.
3325 * @default {@link RenderMode.Fill}
3327 renderMode?: RenderMode;
3329 * A base URL for retrieving a PNG sprite image and json metadata file.
3330 * File name extensions will be automatically appended.
3334 * If `true`, the viewer will automatically resize when the
3335 * browser window resizes.
3339 trackResize?: boolean;
3341 * The transtion mode in the viewer.
3343 * @default {@link TransitionMode.Default}
3345 transitionMode?: TransitionMode;
3352 declare class KeyboardService {
3355 constructor(canvasContainer: HTMLElement);
3356 get keyDown$(): Observable<KeyboardEvent>;
3357 get keyUp$(): Observable<KeyboardEvent>;
3360 declare class MouseService {
3361 private _activeSubject$;
3363 private _domMouseDown$;
3364 private _domMouseMove$;
3365 private _domMouseDragStart$;
3366 private _domMouseDrag$;
3367 private _domMouseDragEnd$;
3368 private _documentMouseMove$;
3369 private _documentMouseUp$;
3370 private _mouseDown$;
3371 private _mouseEnter$;
3372 private _mouseMove$;
3373 private _mouseLeave$;
3376 private _mouseOver$;
3377 private _contextMenu$;
3378 private _consistentContextMenu$;
3381 private _deferPixelClaims$;
3382 private _deferPixels$;
3383 private _proximateClick$;
3384 private _staticClick$;
3385 private _mouseWheel$;
3386 private _mouseDragStart$;
3387 private _mouseDrag$;
3388 private _mouseDragEnd$;
3389 private _mouseRightDragStart$;
3390 private _mouseRightDrag$;
3391 private _mouseRightDragEnd$;
3392 private _claimMouse$;
3393 private _claimWheel$;
3394 private _mouseOwner$;
3395 private _wheelOwner$;
3396 private _windowBlur$;
3397 private _subscriptions;
3398 constructor(container: EventTarget, canvasContainer: EventTarget, domContainer: EventTarget, doc: EventTarget);
3399 get active$(): Observable<boolean>;
3400 get activate$(): Subject<boolean>;
3401 get documentMouseMove$(): Observable<MouseEvent>;
3402 get documentMouseUp$(): Observable<MouseEvent>;
3403 get domMouseDragStart$(): Observable<MouseEvent>;
3404 get domMouseDrag$(): Observable<MouseEvent>;
3405 get domMouseDragEnd$(): Observable<MouseEvent | FocusEvent>;
3406 get domMouseDown$(): Observable<MouseEvent>;
3407 get domMouseMove$(): Observable<MouseEvent>;
3408 get mouseOwner$(): Observable<string>;
3409 get mouseDown$(): Observable<MouseEvent>;
3410 get mouseEnter$(): Observable<MouseEvent>;
3411 get mouseMove$(): Observable<MouseEvent>;
3412 get mouseLeave$(): Observable<MouseEvent>;
3413 get mouseOut$(): Observable<MouseEvent>;
3414 get mouseOver$(): Observable<MouseEvent>;
3415 get mouseUp$(): Observable<MouseEvent>;
3416 get click$(): Observable<MouseEvent>;
3417 get dblClick$(): Observable<MouseEvent>;
3418 get contextMenu$(): Observable<MouseEvent>;
3419 get mouseWheel$(): Observable<WheelEvent>;
3420 get mouseDragStart$(): Observable<MouseEvent>;
3421 get mouseDrag$(): Observable<MouseEvent>;
3422 get mouseDragEnd$(): Observable<MouseEvent | FocusEvent>;
3423 get mouseRightDragStart$(): Observable<MouseEvent>;
3424 get mouseRightDrag$(): Observable<MouseEvent>;
3425 get mouseRightDragEnd$(): Observable<MouseEvent | FocusEvent>;
3426 get proximateClick$(): Observable<MouseEvent>;
3427 get staticClick$(): Observable<MouseEvent>;
3428 get windowBlur$(): Observable<FocusEvent>;
3430 claimMouse(name: string, zindex: number): void;
3431 unclaimMouse(name: string): void;
3432 deferPixels(name: string, deferPixels: number): void;
3433 undeferPixels(name: string): void;
3434 claimWheel(name: string, zindex: number): void;
3435 unclaimWheel(name: string): void;
3436 filtered$<T>(name: string, observable$: Observable<T>): Observable<T>;
3437 filteredWheel$<T>(name: string, observable$: Observable<T>): Observable<T>;
3438 private _createDeferredMouseMove$;
3439 private _createMouseDrag$;
3440 private _createMouseDragEnd$;
3441 private _createMouseDragStart$;
3442 private _createMouseDragInitiate$;
3443 private _createOwner$;
3445 private _mouseButton;
3446 private _buttonReleased;
3447 private _isMousePen;
3451 * Enumeration for alignments
3455 declare enum Alignment {
3461 * Align to bottom left
3465 * Align to bottom right
3489 * Align to top right
3494 interface ISpriteAtlas {
3496 getGLSprite(name: string): Object3D;
3497 getDOMSprite(name: string, float?: Alignment): VNode;
3500 declare class SpriteAtlas implements ISpriteAtlas {
3504 set json(value: Sprites);
3505 set image(value: HTMLImageElement);
3506 get loaded(): boolean;
3507 getGLSprite(name: string): Object3D;
3508 getDOMSprite(name: string, float?: Alignment): VNode;
3518 [key: string]: Sprite;
3520 declare class SpriteService {
3522 private _spriteAtlasOperation$;
3523 private _spriteAtlas$;
3524 private _atlasSubscription;
3525 constructor(sprite?: string);
3526 get spriteAtlas$(): Observable<SpriteAtlas>;
3530 interface TouchPinch {
3532 * X client coordinate for center of pinch.
3536 * Y client coordinate for center of pinch.
3540 * X page coordinate for center of pinch.
3544 * Y page coordinate for center of pinch.
3548 * X screen coordinate for center of pinch.
3552 * Y screen coordinate for center of pinch.
3556 * Distance change in X direction between touches
3557 * compared to previous event.
3561 * Distance change in Y direction between touches
3562 * compared to previous event.
3566 * Pixel distance between touches.
3570 * Change in pixel distance between touches compared
3571 * to previous event.
3573 distanceChange: number;
3575 * Distance in X direction between touches.
3579 * Distance in Y direction between touches.
3583 * Original touch event.
3585 originalEvent: TouchEvent;
3596 declare class TouchService {
3597 private _activeSubject$;
3599 private _touchStart$;
3600 private _touchMove$;
3602 private _touchCancel$;
3603 private _singleTouchDrag$;
3604 private _singleTouchDragStart$;
3605 private _singleTouchDragEnd$;
3606 private _singleTouchMove$;
3607 private _pinchOperation$;
3609 private _pinchStart$;
3611 private _pinchChange$;
3612 private _doubleTap$;
3613 private _subscriptions;
3614 constructor(canvasContainer: HTMLElement, domContainer: HTMLElement);
3615 get active$(): Observable<boolean>;
3616 get activate$(): Subject<boolean>;
3617 get doubleTap$(): Observable<TouchEvent>;
3618 get touchStart$(): Observable<TouchEvent>;
3619 get touchMove$(): Observable<TouchEvent>;
3620 get touchEnd$(): Observable<TouchEvent>;
3621 get touchCancel$(): Observable<TouchEvent>;
3622 get singleTouchDragStart$(): Observable<TouchEvent>;
3623 get singleTouchDrag$(): Observable<TouchEvent>;
3624 get singleTouchDragEnd$(): Observable<TouchEvent>;
3625 get pinch$(): Observable<TouchPinch>;
3626 get pinchStart$(): Observable<TouchEvent>;
3627 get pinchEnd$(): Observable<TouchEvent>;
3632 * Test whether the current browser supports the full
3633 * functionality of MapillaryJS.
3635 * @description The full functionality includes WebGL rendering.
3639 * @example `var supported = isSupported();`
3641 declare function isSupported(): boolean;
3643 * Test whether the current browser supports the fallback
3644 * functionality of MapillaryJS.
3646 * @description The fallback functionality does not include WebGL
3647 * rendering, only 2D canvas rendering.
3651 * @example `var fallbackSupported = isFallbackSupported();`
3653 declare function isFallbackSupported(): boolean;
3655 declare type ComparisonFilterOperator = "==" | "!=" | ">" | ">=" | "<" | "<=";
3656 declare type SetMembershipFilterOperator = "in" | "!in";
3657 declare type CombiningFilterOperator = "all";
3658 declare type FilterOperator = CombiningFilterOperator | ComparisonFilterOperator | SetMembershipFilterOperator;
3659 declare type FilterImage = Pick<Image, "cameraType" | "capturedAt" | "clusterId" | "creatorId" | "creatorUsername" | "exifOrientation" | "height" | "id" | "mergeId" | "merged" | "ownerId" | "private" | "qualityScore" | "sequenceId" | "width">;
3660 declare type FilterKey = keyof FilterImage;
3661 declare type FilterValue = boolean | number | string;
3662 declare type ComparisonFilterExpression = [
3663 ComparisonFilterOperator,
3667 declare type SetMembershipFilterExpression = [
3668 SetMembershipFilterOperator,
3672 declare type CombiningFilterExpression = [
3673 CombiningFilterOperator,
3674 ...(ComparisonFilterExpression | SetMembershipFilterExpression)[]
3676 declare type FilterExpression = ComparisonFilterExpression | SetMembershipFilterExpression | CombiningFilterExpression;
3681 declare type ViewerEventType = "bearing" | "click" | "contextmenu" | "dblclick" | "fov" | "dataloading" | "load" | "mousedown" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "moveend" | "movestart" | "navigable" | "image" | "position" | "pov" | "remove" | "sequenceedges" | "spatialedges";
3683 declare enum RenderPass {
3685 * Occurs after the background render pass.
3693 * @description Interface for custom renderers. This is a
3694 * specification for implementers to model: it is not
3695 * an exported method or class.
3697 * A custom renderer allows the API user to render directly
3698 * into the viewer's GL context using the viewer's camera.
3700 * Custom renderers must have a unique id. They must implement
3701 * render, onReferenceChanged, onAdd, and onRemove. They can
3702 * trigger rendering using {@link Viewer.triggerRerender}.
3704 * The viewer uses a metric topocentric
3705 * [local east, north, up coordinate system](https://en.wikipedia.org/wiki/Local_tangent_plane_coordinates).
3707 * Custom renderers can calculate the topocentric positions
3708 * of their objects using the reference parameter of the
3709 * renderer interface methods and the {@link geodeticToEnu}
3712 * During a render pass, custom renderers
3713 * are called in the order they were added.
3715 interface ICustomRenderer {
3717 * A unique renderer id.
3721 * The custom renderer's render pass.
3723 * @description The {@link ICustomRenderer.render} method
3724 * will be called during this render pass.
3726 renderPass: RenderPass;
3728 * Method called when the renderer has been added to the
3729 * viewer. This gives the
3730 * renderer a chance to initialize gl resources and
3731 * register event listeners.
3733 * @description Custom renderers are added with the
3734 * with {@link Viewer.addCustomRenderer} method.
3736 * Calculate the topocentric positions
3737 * for scene objects using the provided reference and
3738 * the {@link geodeticToEnu} function.
3740 * @param {IViewer} viewer - The viewer this custom renderer
3741 * was just added to.
3742 * @param {LngLatAlt} reference - The viewer's current
3743 * reference position.
3744 * @param {WebGLRenderingContext | WebGL2RenderingContext} context -
3745 * The viewer's gl context.
3747 onAdd(viewer: IViewer, reference: LngLatAlt, context: WebGLRenderingContext | WebGL2RenderingContext): void;
3749 * Method called when the viewer's reference position has changed.
3750 * This gives the renderer a chance to reposition its scene objects.
3752 * @description Calculate the updated topocentric positions
3753 * for scene objects using the provided reference and
3754 * the {@link geodeticToEnu} function.
3756 * @param {IViewer} viewer - The viewer this custom renderer
3758 * @param {LngLatAlt} reference - The viewer's current
3759 * reference position.
3761 onReference(viewer: IViewer, reference: LngLatAlt): void;
3763 * Method called when the renderer has been removed from the
3764 * viewer. This gives the
3765 * renderer a chance to clean up gl resources and event
3768 * @description Custom renderers are remove with the
3769 * {@link Viewer.removeCustomRenderer} method.
3771 * @param {IViewer} viewer - The viewer this custom renderer
3772 * was just removed from.
3773 * @param {WebGLRenderingContext | WebGL2RenderingContext} context -
3774 * The viewer's gl context.
3776 onRemove(viewer: IViewer, context: WebGLRenderingContext | WebGL2RenderingContext): void;
3778 * Called during an animation frame allowing the renderer to draw
3779 * into the GL context. The layer cannot make assumptions
3780 * about the current GL state.
3782 * @description Take a look at the
3783 * [WebGL model view projection article](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection)
3784 * on MDN for an introduction to the view and projection matrices.
3786 * @param {WebGLRenderingContext | WebGL2RenderingContext} context The
3787 * viewer's WebGL context.
3788 * @param {Array<number>} viewMatrix The viewer's view matrix.
3789 * @param {Array<number>} projectionMatrix The viewers's projection
3792 render(context: WebGLRenderingContext | WebGL2RenderingContext, viewMatrix: number[], projectionMatrix: number[]): void;
3796 * @interface PointOfView
3798 * Interface that represents the point of view of the viewer.
3800 interface PointOfView {
3802 * Value indicating the current bearing of the viewer
3803 * measured in degrees clockwise with respect to north.
3804 * Ranges from 0° to 360°.
3808 * The camera tilt in degrees, relative to a horizontal plane.
3809 * Ranges from 90° (directly upwards) to -90° (directly downwards).
3815 readonly isNavigable: boolean;
3816 activateCombinedPanning(): void;
3817 activateComponent(name: string): void;
3818 activateCover(): void;
3819 addCustomRenderer(renderer: ICustomRenderer): void;
3820 deactivateCombinedPanning(): void;
3821 deactivateComponent(name: string): void;
3822 deactivateCover(): void;
3823 fire<T>(type: ViewerEventType, event: T): void;
3824 getBearing(): Promise<number>;
3825 getCanvas(): HTMLCanvasElement;
3826 getCanvasContainer(): HTMLDivElement;
3827 getCenter(): Promise<number[]>;
3828 getComponent<TComponent extends Component<ComponentConfiguration>>(name: string): TComponent;
3829 getContainer(): HTMLElement;
3830 getFieldOfView(): Promise<number>;
3831 getPointOfView(): Promise<PointOfView>;
3832 getPosition(): Promise<LngLat>;
3833 getZoom(): Promise<number>;
3834 hasCustomRenderer(rendererId: string): boolean;
3835 moveDir(direction: NavigationDirection): Promise<Image>;
3836 moveTo(imageId: string): Promise<Image>;
3837 off<T>(type: ViewerEventType, handler: (event: T) => void): void;
3838 on<T>(type: ViewerEventType, handler: (event: T) => void): void;
3839 project(lngLat: LngLat): Promise<number[]>;
3840 projectFromBasic(basicPoint: number[]): Promise<number[]>;
3842 removeCustomRenderer(rendererId: string): void;
3844 setCenter(center: number[]): void;
3845 setFieldOfView(fov: number): void;
3846 setFilter(filter: FilterExpression): Promise<void>;
3847 setRenderMode(renderMode: RenderMode): void;
3848 setTransitionMode(transitionMode: TransitionMode): void;
3849 setAccessToken(accessToken?: string): Promise<void>;
3850 setZoom(zoom: number): void;
3851 triggerRerender(): void;
3852 unproject(pixelPoint: number[]): Promise<LngLat>;
3853 unprojectToBasic(pixelPoint: number[]): Promise<number[]>;
3859 * @description Interface for custom camera controls.
3860 * This is a specification for implementers to model:
3861 * it is not an exported method or class.
3863 * Custom camera controls allow the API user to freely
3864 * move the viewer's camera and define the camera
3865 * projection used. These camera properties are used
3866 * to render the viewer 3D scene directly into the
3867 * viewer's GL context.
3869 * Custom camera controls must implement the
3870 * onActivate, onAnimationFrame, onAttach, onDeactivate,
3871 * onDetach, onReference, and onResize methods.
3873 * Custom camera controls trigger rerendering
3874 * automatically when the camera pose or projection
3875 * is changed through the projectionMatrix and
3876 * viewMatrix callbacks.
3879 * [model view projection article]{@link https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection}
3880 * on MDN for an introduction to view and projection matrices.
3882 * Custom camera controls can choose to make updates on
3883 * each animation frame or only based on user input.
3884 * Invoking updates on each camera frame is more resource
3887 * Only a single custom camera control instance can be
3888 * attached to the viewer at any given time.
3890 interface ICustomCameraControls {
3892 * Method called when the camera controls have been
3893 * activated and is responsible for moving the
3894 * viewer's camera and defining its projection. This
3895 * method gives the camera controls a chance to initialize
3896 * resources, perform any transitions, and determine
3899 * @description Use the {@link Viewer.getContainer} method
3900 * to get the container for determining the viewer size
3901 * and aspect as well as for attaching event handlers.
3903 * Use the view matrix to determine initial properties such
3904 * as camera position, forward vector, and up vector.
3906 * Use the projection matrix to determine the initial
3907 * projection properties.
3909 * Store the reference coordiante translations
3910 * during future reference reference changes.
3912 * @param {IViewer} viewer - The viewer this custom
3913 * camera controls instance was just added to.
3914 * @param {Array<number>} viewMatrix - The viewer's view matrix.
3915 * @param {Array<number>} projectionMatrix - The viewers's
3916 * projection matrix.
3917 * @param {LngLatAlt} reference - The viewer's reference.
3919 onActivate(viewer: IViewer, viewMatrix: number[], projectionMatrix: number[], reference: LngLatAlt): void;
3921 * Method called for each animation frame.
3923 * @desdcription Custom camera controls can choose to
3924 * make updates on each animation frame or only based on
3925 * user input. Invoking updates on each animation frame is
3926 * more resource intensive.
3928 * @param {IViewer} viewer - The viewer this custom
3929 * camera controls instance is attached to.
3931 * @param {number} frameId - The request animation frame's id.
3933 onAnimationFrame(viewer: IViewer, frameId: number): void;
3935 * Method called when the camera controls have been
3936 * attached to the viewer.
3937 * This gives the camera controls a chance to initialize
3940 * @description Camera controls are attached to the
3941 * viewer with the with {@link Viewer.attachCustomCameraControls}
3944 * Use the matrix callback functions
3945 * to modify the camera pose and projection of the
3948 * Invoking the matrix callbacks has no effect if the
3949 * custom camera controls have not been activated.
3951 * @param {IViewer} viewer - The viewer this custom
3952 * camera controls instance was just added to.
3954 onAttach(viewer: IViewer, viewMatrixCallback: (viewMatrix: number[]) => void, projectionMatrixCallback: (projectionMatrix: number[]) => void): void;
3956 * Method called when the camera controls have been deactivated.
3957 * This gives the camera controls a chance to clean up resources
3958 * and event listeners.
3960 * @param {IViewer} viewer - The viewer this custom camera controls
3961 * instance is attached to.
3963 onDeactivate(viewer: IViewer): void;
3965 * Method called when the camera controls have been detached from
3966 * the viewer. This gives the camera controls a chance to clean
3967 * up resources and event listeners.
3969 * @description Camera controls are attached to the
3970 * viewer with the with {@link Viewer.detachCustomCameraControls}
3973 * @param {IViewer} viewer - The viewer this custom camera
3974 * controls instance was just detached from.
3976 onDetach(viewer: IViewer): void;
3978 * Method called when the viewer's reference position has changed.
3979 * This gives the custom camera controls a chance to reposition
3982 * @description Calculate the updated topocentric positions
3983 * for scene objects using the previous reference, the
3984 * new provided reference as well as the
3985 * {@link geodeticToEnu} and
3986 * {@link enuToGeodetic} functions.
3988 * @param {IViewer} viewer - The viewer this custom renderer
3990 * @param {LngLatAlt} reference - The viewer's current
3991 * reference position.
3993 onReference(viewer: IViewer, reference: LngLatAlt): void;
3995 * Method called when the viewer has been resized.
3997 * @description Use this method to modify the projection.
3999 onResize(viewer: IViewer): void;
4003 * Interface for general viewer events.
4005 interface ViewerEvent {
4007 * The viewer object that fired the event.
4013 type: ViewerEventType;
4017 * Interface for bearing viewer events.
4019 interface ViewerBearingEvent extends ViewerEvent {
4021 * Bearing is measured in degrees
4022 * clockwise with respect to north.
4024 * @description Bearing is related to the computed
4025 * compass angle ({@link Image.computedCompassAngle})
4026 * from SfM, not the original EXIF compass angle.
4033 * Interface for viewer data loading events.
4035 * @description Fired when any viewer data (image, mesh, metadata, etc)
4036 * begins loading or changing asyncronously as a result of viewer
4039 * Also fired when the data has finished loading and the viewer
4040 * is able to perform the navigation.
4042 interface ViewerDataLoadingEvent extends ViewerEvent {
4044 * Indicates if the viewer navigation is awaiting data load.
4047 type: "dataloading";
4051 * Interface for mouse-related viewer events.
4055 * // The `click` event is an example of a `ViewerMouseEvent`.
4056 * // Set up an event listener on the viewer.
4057 * viewer.on('click', function(e) {
4058 * // The event object contains information like the
4059 * // coordinates of the point in the viewer that was clicked.
4060 * console.log('A click event has occurred at ' + e.lngLat);
4064 interface ViewerMouseEvent extends ViewerEvent {
4066 * The basic coordinates in the current image of the mouse
4069 * @description In some situations mouse events can occur outside of
4070 * the border of a image. In that case the basic coordinates will be
4073 * The basic point is only provided when the
4074 * {@link CameraControls.Street} mode is active. For all other camera
4075 * control modes, the basic point will be `null`.
4077 * Basic coordinates are 2D coordinates on the [0, 1] interval
4078 * and has the origin point, (0, 0), at the top left corner and the
4079 * maximum value, (1, 1), at the bottom right corner of the original
4082 basicPoint: number[];
4084 * The geographic location in the viewer of the mouse event target.
4086 * @description In some situations the viewer can not determine a valid
4087 * geographic location for the mouse event target. In that case the
4088 * geographic coordinates will be `null`.
4092 * The pixel coordinates of the mouse event target, relative to
4093 * the viewer and measured from the top left corner.
4095 pixelPoint: number[];
4097 * The original event that triggered the viewer event.
4099 originalEvent: MouseEvent;
4103 type: "click" | "contextmenu" | "dblclick" | "mousedown" | "mousemove" | "mouseout" | "mouseover" | "mouseup";
4107 * Interface for navigable viewer events.
4109 interface ViewerNavigableEvent extends ViewerEvent {
4111 * The navigable state indicates if the viewer supports
4112 * moving, i.e. calling the `moveTo` and `moveDir`
4113 * methods. The viewer will not be in a navigable state if the cover
4114 * is activated and the viewer has been supplied a id. When the cover
4115 * is deactivated or activated without being supplied a id it will
4123 * Interface for navigation edge viewer events.
4125 interface ViewerNavigationEdgeEvent extends ViewerEvent {
4127 * The viewer's current navigation edge status.
4129 status: NavigationEdgeStatus;
4130 type: "sequenceedges" | "spatialedges";
4134 * Interface for viewer image events.
4136 interface ViewerImageEvent extends ViewerEvent {
4138 * The viewer's current image.
4145 * Interface for viewer state events.
4149 * // The `fov` event is an example of a `ViewerStateEvent`.
4150 * // Set up an event listener on the viewer.
4151 * viewer.on('fov', function(e) {
4152 * console.log('A fov event has occured');
4156 interface ViewerStateEvent extends ViewerEvent {
4160 type: "fov" | "moveend" | "movestart" | "position" | "pov" | "remove";
4163 declare type ComponentName = "attribution" | "bearing" | "cache" | "cover" | "direction" | "image" | "keyboard" | "marker" | "pointer" | "popup" | "sequence" | "slider" | "spatial" | "tag" | "zoom";
4165 declare type FallbackComponentName = "imagefallback" | "navigationfallback";
4168 * Interface for viewer load events.
4170 * @description Fired immediately after all necessary resources
4171 * have been downloaded and the first visually complete
4172 * rendering of the viewer has occurred.
4174 * The visually complete rendering does not include custom
4177 * This event is only fired for viewer configurations where
4178 * the WebGL context is created, i.e. not when using the
4179 * fallback functionality only.
4183 * // Set up an event listener on the viewer.
4184 * viewer.on('load', function(e) {
4185 * console.log('A load event has occured');
4189 interface ViewerLoadEvent extends ViewerEvent {
4196 * @classdesc The Viewer object represents the navigable image viewer.
4197 * Create a Viewer by specifying a container, client ID, image id and
4198 * other options. The viewer exposes methods and events for programmatic
4201 * In the case of asynchronous methods, MapillaryJS returns promises to
4202 * the results. Notifications are always emitted through JavaScript events.
4204 declare class Viewer extends EventEmitter implements IViewer {
4206 * Private component controller object which manages component states.
4208 private _componentController;
4210 * Private container object which maintains the DOM Element,
4211 * renderers and relevant services.
4215 * Private observer object which observes the viewer state and
4216 * fires events on behalf of the viewer.
4220 * Private navigator object which controls navigation.
4224 * Private custom camera controls object which handles
4225 * custom control subscriptions.
4227 private _customCameraControls;
4229 * Private custom renderer object which controls WebGL custom
4230 * rendering subscriptions.
4232 private _customRenderer;
4234 * Create a new viewer instance.
4236 * @description It is possible to initialize the viewer with or
4239 * When you want to show a specific image in the viewer from
4240 * the start you should initialize it with a id.
4242 * When you do not know the first image id at implementation
4243 * time, e.g. in a map-viewer application you should initialize
4244 * the viewer without a id and call `moveTo` instead.
4246 * When initializing with a id the viewer is bound to that id
4247 * until the image for that id has been successfully loaded.
4248 * Also, a cover with the image of the id will be shown.
4249 * If the data for that id can not be loaded because the id is
4250 * faulty or other errors occur it is not possible to navigate
4251 * to another id because the viewer is not navigable. The viewer
4252 * becomes navigable when the data for the id has been loaded and
4253 * the image is shown in the viewer. This way of initializing
4254 * the viewer is mostly for embedding in blog posts and similar
4255 * where one wants to show a specific image initially.
4257 * If the viewer is initialized without a id (with null or
4258 * undefined) it is not bound to any particular id and it is
4259 * possible to move to any id with `viewer.moveTo("<my-image-id>")`.
4260 * If the first move to a id fails it is possible to move to another
4261 * id. The viewer will show a black background until a move
4262 * succeeds. This way of intitializing is suited for a map-viewer
4263 * application when the initial id is not known at implementation
4266 * @param {ViewerOptions} options - Optional configuration object
4267 * specifing Viewer's and the components' initial setup.
4271 * var viewer = new Viewer({
4272 * accessToken: "<my-access-token>",
4273 * container: "<my-container-id>",
4277 constructor(options: ViewerOptions);
4279 * Return a boolean indicating if the viewer is in a navigable state.
4281 * @description The navigable state indicates if the viewer supports
4282 * moving, i.e. calling the {@link moveTo} and {@link moveDir}
4283 * methods or changing the authentication state,
4284 * i.e. calling {@link setAccessToken}. The viewer will not be in a navigable
4285 * state if the cover is activated and the viewer has been supplied a id.
4286 * When the cover is deactivated or the viewer is activated without being
4287 * supplied a id it will be navigable.
4289 * @returns {boolean} Boolean indicating whether the viewer is navigable.
4291 get isNavigable(): boolean;
4293 * Activate the combined panning functionality.
4295 * @description The combined panning functionality is active by default.
4297 activateCombinedPanning(): void;
4299 * Activate a component.
4301 * @param {ComponentName | FallbackComponentName} name - Name of
4302 * the component which will become active.
4306 * viewer.activateComponent("marker");
4309 activateComponent(name: ComponentName | FallbackComponentName): void;
4311 * Activate the cover (deactivates all other components).
4313 activateCover(): void;
4315 * Add a custom renderer to the viewer's rendering pipeline.
4317 * @description During a render pass, custom renderers
4318 * are called in the order they were added.
4320 * @param renderer - The custom renderer implementation.
4322 addCustomRenderer(renderer: ICustomRenderer): void;
4324 * Attach custom camera controls to control the viewer's
4325 * camera pose and projection.
4327 * @description Custom camera controls allow the API user
4328 * to move the viewer's camera freely and define the camera
4329 * projection. These camera properties are used
4330 * to render the viewer 3D scene directly into the
4331 * viewer's GL context.
4333 * Only a single custom camera control instance can be
4334 * attached to the viewer. A new custom camera control
4335 * instance can be attached after detaching a previous
4338 * Set the viewer's camera controls to
4339 * {@link CameraControls.Custom} to activate attached
4340 * camera controls. If {@link CameraControls.Custom}
4341 * has already been set when a custom camera control
4342 * instance is attached, it will be activated immediately.
4344 * Set the viewer's camera controls to any other
4345 * {@link CameraControls} mode to deactivate the
4346 * custom camera controls.
4348 * @param controls - The custom camera controls implementation.
4350 * @throws {MapillaryError} When camera controls attached
4351 * are already attached to the viewer.
4353 attachCustomCameraControls(controls: ICustomCameraControls): void;
4355 * Deactivate the combined panning functionality.
4357 * @description Deactivating the combined panning functionality
4358 * could be needed in scenarios involving sequence only navigation.
4360 deactivateCombinedPanning(): void;
4362 * Deactivate a component.
4364 * @param {ComponentName | FallbackComponentName} name - Name
4365 * of component which become inactive.
4369 * viewer.deactivateComponent("pointer");
4372 deactivateComponent(name: ComponentName | FallbackComponentName): void;
4374 * Deactivate the cover (activates all components marked as active).
4376 deactivateCover(): void;
4378 * Detach a previously attached custom camera control
4379 * instance from the viewer.
4381 * @description If no custom camera control instance
4382 * has previously been attached, calling this method
4385 * Already attached custom camera controls need to
4386 * be detached before attaching another custom camera
4389 detachCustomCameraControls(): void;
4390 fire(type: ViewerBearingEvent["type"], event: ViewerBearingEvent): void;
4391 fire(type: ViewerDataLoadingEvent["type"], event: ViewerDataLoadingEvent): void;
4392 fire(type: ViewerNavigableEvent["type"], event: ViewerNavigableEvent): void;
4393 fire(type: ViewerImageEvent["type"], event: ViewerImageEvent): void;
4394 fire(type: ViewerNavigationEdgeEvent["type"], event: ViewerNavigationEdgeEvent): void;
4395 fire(type: ViewerStateEvent["type"], event: ViewerStateEvent): void;
4396 fire(type: ViewerMouseEvent["type"], event: ViewerMouseEvent): void;
4398 * Get the bearing of the current viewer camera.
4400 * @description The bearing depends on how the camera
4401 * is currently rotated and does not correspond
4402 * to the compass angle of the current image if the view
4405 * Bearing is measured in degrees clockwise with respect to
4408 * @returns {Promise<number>} Promise to the bearing
4409 * of the current viewer camera.
4413 * viewer.getBearing().then(b => { console.log(b); });
4416 getBearing(): Promise<number>;
4418 * Get the viewer's camera control mode.
4420 * @description The camera control mode determines
4421 * how the camera is controlled when the viewer
4422 * recieves pointer and keyboard input.
4424 * @returns {CameraControls} controls - Camera control mode.
4428 * viewer.getCameraControls().then(c => { console.log(c); });
4431 getCameraControls(): Promise<CameraControls>;
4433 * Returns the viewer's canvas element.
4435 * @description This is the element onto which the viewer renders
4436 * the WebGL content.
4438 * @returns {HTMLCanvasElement} The viewer's canvas element, or
4439 * null or not initialized.
4441 getCanvas(): HTMLCanvasElement;
4443 * Returns the HTML element containing the viewer's canvas element.
4445 * @description This is the element to which event bindings for viewer
4446 * interactivity (such as panning and zooming) are attached.
4448 * @returns {HTMLDivElement} The container for the viewer's
4451 getCanvasContainer(): HTMLDivElement;
4453 * Get the basic coordinates of the current image that is
4454 * at the center of the viewport.
4456 * @description Basic coordinates are 2D coordinates on the [0, 1] interval
4457 * and have the origin point, (0, 0), at the top left corner and the
4458 * maximum value, (1, 1), at the bottom right corner of the original
4461 * @returns {Promise<number[]>} Promise to the basic coordinates
4462 * of the current image at the center for the viewport.
4466 * viewer.getCenter().then(c => { console.log(c); });
4469 getCenter(): Promise<number[]>;
4473 * @param {string} name - Name of component.
4474 * @returns {Component} The requested component.
4478 * var pointerComponent = viewer.getComponent("pointer");
4481 getComponent<TComponent extends Component<ComponentConfiguration>>(name: ComponentName | FallbackComponentName): TComponent;
4483 * Returns the viewer's containing HTML element.
4485 * @returns {HTMLElement} The viewer's container.
4487 getContainer(): HTMLElement;
4489 * Get the viewer's current vertical field of view.
4491 * @description The vertical field of view rendered on the viewer canvas
4492 * measured in degrees.
4494 * @returns {Promise<number>} Promise to the current field of view
4495 * of the viewer camera.
4499 * viewer.getFieldOfView().then(fov => { console.log(fov); });
4502 getFieldOfView(): Promise<number>;
4504 * Get the viewer's current image.
4506 * @returns {Promise<Image>} Promise to the current image.
4510 * viewer.getImage().then(image => { console.log(image.id); });
4513 getImage(): Promise<Image>;
4515 * Get the viewer's current point of view.
4517 * @returns {Promise<PointOfView>} Promise to the current point of view
4518 * of the viewer camera.
4522 * viewer.getPointOfView().then(pov => { console.log(pov); });
4525 getPointOfView(): Promise<PointOfView>;
4527 * Get the viewer's current position
4529 * @returns {Promise<LngLat>} Promise to the viewers's current
4534 * viewer.getPosition().then(pos => { console.log(pos); });
4537 getPosition(): Promise<LngLat>;
4539 * Get the image's current zoom level.
4541 * @returns {Promise<number>} Promise to the viewers's current
4546 * viewer.getZoom().then(z => { console.log(z); });
4549 getZoom(): Promise<number>;
4551 * Check if a custom renderer has been added to the viewer's
4552 * rendering pipeline.
4554 * @param {string} id - Unique id of the custom renderer.
4555 * @returns {boolean} Value indicating whether the customer
4556 * renderer has been added.
4558 hasCustomRenderer(rendererId: string): boolean;
4560 * Navigate in a given direction.
4562 * @param {NavigationDirection} direction - Direction in which which to move.
4563 * @returns {Promise<Image>} Promise to the image that was navigated to.
4564 * @throws If the current image does not have the edge direction
4565 * or the edges has not yet been cached.
4566 * @throws Propagates any IO errors to the caller.
4567 * @throws When viewer is not navigable.
4568 * @throws {@link CancelMapillaryError} When a subsequent move request
4569 * is made before the move dir call has completed.
4573 * viewer.moveDir(NavigationDirection.Next).then(
4574 * image => { console.log(image); },
4575 * error => { console.error(error); });
4578 moveDir(direction: NavigationDirection): Promise<Image>;
4580 * Navigate to a given image id.
4582 * @param {string} imageId - Id of the image to move to.
4583 * @returns {Promise<Image>} Promise to the image that was navigated to.
4584 * @throws Propagates any IO errors to the caller.
4585 * @throws When viewer is not navigable.
4586 * @throws {@link CancelMapillaryError} When a subsequent
4587 * move request is made before the move to id call has completed.
4591 * viewer.moveTo("<my-image-id>").then(
4592 * image => { console.log(image); },
4593 * error => { console.error(error); });
4596 moveTo(imageId: string): Promise<Image>;
4597 off(type: ViewerBearingEvent["type"], handler: (event: ViewerBearingEvent) => void): void;
4598 off(type: ViewerDataLoadingEvent["type"], handler: (event: ViewerDataLoadingEvent) => void): void;
4599 off(type: ViewerNavigableEvent["type"], handler: (event: ViewerNavigableEvent) => void): void;
4600 off(type: ViewerImageEvent["type"], handler: (event: ViewerImageEvent) => void): void;
4601 off(type: ViewerNavigationEdgeEvent["type"], handler: (event: ViewerNavigationEdgeEvent) => void): void;
4602 off(type: ViewerStateEvent["type"], handler: (event: ViewerStateEvent) => void): void;
4603 off(type: ViewerMouseEvent["type"], handler: (event: ViewerMouseEvent) => void): void;
4605 * Fired when the viewing direction of the camera changes.
4610 * // Initialize the viewer
4611 * var viewer = new Viewer({ // viewer options });
4612 * // Set an event listener
4613 * viewer.on("bearing", function() {
4614 * console.log("A bearing event has occurred.");
4618 on(type: "bearing", handler: (event: ViewerBearingEvent) => void): void;
4620 * Fired when a pointing device (usually a mouse) is
4621 * pressed and released at the same point in the viewer.
4626 * // Initialize the viewer
4627 * var viewer = new Viewer({ // viewer options });
4628 * // Set an event listener
4629 * viewer.on("click", function() {
4630 * console.log("A click event has occurred.");
4634 on(type: "click", handler: (event: ViewerMouseEvent) => void): void;
4636 * Fired when the right button of the mouse is clicked
4637 * within the viewer.
4639 * @event contextmenu
4642 * // Initialize the viewer
4643 * var viewer = new Viewer({ // viewer options });
4644 * // Set an event listener
4645 * viewer.on("contextmenu", function() {
4646 * console.log("A contextmenu event has occurred.");
4650 on(type: "contextmenu", handler: (event: ViewerMouseEvent) => void): void;
4652 * Fired when the viewer is loading data.
4657 * // Initialize the viewer
4658 * var viewer = new Viewer({ // viewer options });
4659 * // Set an event listener
4660 * viewer.on("dataloading", function() {
4661 * console.log("A loading event has occurred.");
4665 on(type: "dataloading", handler: (event: ViewerDataLoadingEvent) => void): void;
4667 * Fired when a pointing device (usually a mouse) is clicked twice at
4668 * the same point in the viewer.
4673 * // Initialize the viewer
4674 * var viewer = new Viewer({ // viewer options });
4675 * // Set an event listener
4676 * viewer.on("dblclick", function() {
4677 * console.log("A dblclick event has occurred.");
4681 on(type: "dblclick", handler: (event: ViewerMouseEvent) => void): void;
4683 * Fired when the viewer's vertical field of view changes.
4688 * // Initialize the viewer
4689 * var viewer = new Viewer({ // viewer options });
4690 * // Set an event listener
4691 * viewer.on("fov", function() {
4692 * console.log("A fov event has occurred.");
4696 on(type: "fov", handler: (event: ViewerStateEvent) => void): void;
4698 * Fired immediately after all necessary resources
4699 * have been downloaded and the first visually complete
4700 * rendering of the viewer has occurred.
4702 * This event is only fired for viewer configurations where
4703 * the WebGL context is created, i.e. not when using the
4704 * fallback functionality only.
4710 * // Set an event listener
4711 * viewer.on('load', function(event) {
4712 * console.log('A load event has occured');
4716 on(type: "load", handler: (event: ViewerLoadEvent) => void): void;
4718 * Fired when a pointing device (usually a mouse) is pressed
4719 * within the viewer.
4724 * // Initialize the viewer
4725 * var viewer = new Viewer({ // viewer options });
4726 * // Set an event listener
4727 * viewer.on("mousedown", function() {
4728 * console.log("A mousedown event has occurred.");
4732 on(type: "mousedown", handler: (event: ViewerMouseEvent) => void): void;
4734 * Fired when a pointing device (usually a mouse)
4735 * is moved within the viewer.
4740 * // Initialize the viewer
4741 * var viewer = new Viewer({ // viewer options });
4742 * // Set an event listener
4743 * viewer.on("mousemove", function() {
4744 * console.log("A mousemove event has occurred.");
4748 on(type: "mousemove", handler: (event: ViewerMouseEvent) => void): void;
4750 * Fired when a pointing device (usually a mouse)
4751 * leaves the viewer's canvas.
4756 * // Initialize the viewer
4757 * var viewer = new Viewer({ // viewer options });
4758 * // Set an event listener
4759 * viewer.on("mouseout", function() {
4760 * console.log("A mouseout event has occurred.");
4764 on(type: "mouseout", handler: (event: ViewerMouseEvent) => void): void;
4766 * Fired when a pointing device (usually a mouse)
4767 * is moved onto the viewer's canvas.
4772 * // Initialize the viewer
4773 * var viewer = new Viewer({ // viewer options });
4774 * // Set an event listener
4775 * viewer.on("mouseover", function() {
4776 * console.log("A mouseover event has occurred.");
4780 on(type: "mouseover", handler: (event: ViewerMouseEvent) => void): void;
4782 * Fired when a pointing device (usually a mouse)
4783 * is released within the viewer.
4788 * // Initialize the viewer
4789 * var viewer = new Viewer({ // viewer options });
4790 * // Set an event listener
4791 * viewer.on("mouseup", function() {
4792 * console.log("A mouseup event has occurred.");
4796 on(type: "mouseup", handler: (event: ViewerMouseEvent) => void): void;
4798 * Fired when the viewer motion stops and it is in a fixed
4799 * position with a fixed point of view.
4804 * // Initialize the viewer
4805 * var viewer = new Viewer({ // viewer options });
4806 * // Set an event listener
4807 * viewer.on("moveend", function() {
4808 * console.log("A moveend event has occurred.");
4812 on(type: "moveend", handler: (event: ViewerStateEvent) => void): void;
4814 * Fired when the motion from one view to another start,
4815 * either by changing the position (e.g. when changing image)
4816 * or when changing point of view
4817 * (e.g. by interaction such as pan and zoom).
4822 * // Initialize the viewer
4823 * var viewer = new Viewer({ // viewer options });
4824 * // Set an event listener
4825 * viewer.on("movestart", function() {
4826 * console.log("A movestart event has occurred.");
4830 on(type: "movestart", handler: (event: ViewerStateEvent) => void): void;
4832 * Fired when the navigable state of the viewer changes.
4837 * // Initialize the viewer
4838 * var viewer = new Viewer({ // viewer options });
4839 * // Set an event listener
4840 * viewer.on("navigable", function() {
4841 * console.log("A navigable event has occurred.");
4845 on(type: "navigable", handler: (event: ViewerNavigableEvent) => void): void;
4847 * Fired every time the viewer navigates to a new image.
4852 * // Initialize the viewer
4853 * var viewer = new Viewer({ // viewer options });
4854 * // Set an event listener
4855 * viewer.on("image", function() {
4856 * console.log("A image event has occurred.");
4860 on(type: "image", handler: (event: ViewerImageEvent) => void): void;
4862 * Fired when the viewer's position changes.
4864 * @description The viewer's position changes when transitioning
4870 * // Initialize the viewer
4871 * var viewer = new Viewer({ // viewer options });
4872 * // Set an event listener
4873 * viewer.on("position", function() {
4874 * console.log("A position event has occurred.");
4878 on(type: "position", handler: (event: ViewerStateEvent) => void): void;
4880 * Fired when the viewer's point of view changes. The
4881 * point of view changes when the bearing, or tilt changes.
4886 * // Initialize the viewer
4887 * var viewer = new Viewer({ // viewer options });
4888 * // Set an event listener
4889 * viewer.on("pov", function() {
4890 * console.log("A pov event has occurred.");
4894 on(type: "pov", handler: (event: ViewerStateEvent) => void): void;
4896 * Fired when the viewer is removed. After this event is emitted
4897 * you must not call any methods on the viewer.
4902 * // Initialize the viewer
4903 * var viewer = new Viewer({ // viewer options });
4904 * // Set an event listener
4905 * viewer.on("remove", function() {
4906 * console.log("A remove event has occurred.");
4910 on(type: "remove", handler: (event: ViewerStateEvent) => void): void;
4912 * Fired every time the sequence edges of the current image changes.
4914 * @event sequenceedges
4917 * // Initialize the viewer
4918 * var viewer = new Viewer({ // viewer options });
4919 * // Set an event listener
4920 * viewer.on("sequenceedges", function() {
4921 * console.log("A sequenceedges event has occurred.");
4925 on(type: "sequenceedges", handler: (event: ViewerNavigationEdgeEvent) => void): void;
4927 * Fired every time the spatial edges of the current image changes.
4929 * @event spatialedges
4932 * // Initialize the viewer
4933 * var viewer = new Viewer({ // viewer options });
4934 * // Set an event listener
4935 * viewer.on("spatialedges", function() {
4936 * console.log("A spatialedges event has occurred.");
4940 on(type: "spatialedges", handler: (event: ViewerNavigationEdgeEvent) => void): void;
4942 * Project geodetic coordinates to canvas pixel coordinates.
4944 * @description The geodetic coordinates may not always correspond to pixel
4945 * coordinates, e.g. if the geodetic coordinates have a position behind the
4946 * viewer camera. In the case of no correspondence the returned value will
4949 * If the distance from the viewer camera position to the provided
4950 * longitude-latitude is more than 1000 meters `null` will be returned.
4952 * The projection is performed from the ground plane, i.e.
4953 * the altitude with respect to the ground plane for the geodetic
4956 * Note that whenever the camera moves, the result of the method will be
4959 * @param {LngLat} lngLat - Geographical coordinates to project.
4960 * @returns {Promise<Array<number>>} Promise to the pixel coordinates corresponding
4965 * viewer.project({ lat: 0, lng: 0 })
4966 * .then(pixelPoint => {
4967 * if (!pixelPoint) {
4968 * console.log("no correspondence");
4971 * console.log(pixelPoint);
4975 project(lngLat: LngLat): Promise<number[]>;
4977 * Project basic image coordinates for the current image to canvas pixel
4980 * @description The basic image coordinates may not always correspond to a
4981 * pixel point that lies in the visible area of the viewer container. In the
4982 * case of no correspondence the returned value can be `null`.
4985 * @param {Array<number>} basicPoint - Basic images coordinates to project.
4986 * @returns {Promise<Array<number>>} Promise to the pixel coordinates corresponding
4987 * to the basic image point.
4991 * viewer.projectFromBasic([0.3, 0.7])
4992 * .then(pixelPoint => { console.log(pixelPoint); });
4995 projectFromBasic(basicPoint: number[]): Promise<number[]>;
4997 * Clean up and release all internal resources associated with
5000 * @description This includes DOM elements, event bindings, and
5003 * Use this method when you are done using the viewer and wish to
5004 * ensure that it no longer consumes browser resources. Afterwards,
5005 * you must not call any other methods on the viewer.
5016 * Remove a custom renderer from the viewer's rendering pipeline.
5018 * @param id - Unique id of the custom renderer.
5020 removeCustomRenderer(rendererId: string): void;
5022 * Detect the viewer's new width and height and resize it
5025 * @description The components will also detect the viewer's
5026 * new size and resize their rendered elements if needed.
5028 * When the {@link ViewerOptions.trackResize} option is
5029 * set to true, the viewer will automatically resize
5030 * when the browser window is resized. If any other
5031 * custom behavior is preferred, the option should be set
5032 * to false and the {@link Viewer.resize} method should
5033 * be called on demand.
5042 * Set the viewer's camera control mode.
5044 * @description The camera control mode determines
5045 * how the camera is controlled when the viewer
5046 * recieves pointer and keyboard input.
5048 * Changing the camera control mode is not possible
5049 * when the slider component is active and attempts
5050 * to do so will be ignored.
5052 * @param {CameraControls} controls - Camera control mode.
5056 * viewer.setCameraControls(CameraControls.Street);
5059 setCameraControls(controls: CameraControls): void;
5061 * Set the basic coordinates of the current image to be in the
5062 * center of the viewport.
5064 * @description Basic coordinates are 2D coordinates on the [0, 1] interval
5065 * and has the origin point, (0, 0), at the top left corner and the
5066 * maximum value, (1, 1), at the bottom right corner of the original
5069 * @param {number[]} The basic coordinates of the current
5070 * image to be at the center for the viewport.
5074 * viewer.setCenter([0.5, 0.5]);
5077 setCenter(center: number[]): void;
5079 * Set the viewer's current vertical field of view.
5081 * @description Sets the vertical field of view rendered
5082 * on the viewer canvas measured in degrees. The value
5083 * will be clamped to be able to set a valid zoom level
5084 * based on the projection model of the current image and
5085 * the viewer's current render mode.
5087 * @param {number} fov - Vertical field of view in degrees.
5091 * viewer.setFieldOfView(45);
5094 setFieldOfView(fov: number): void;
5096 * Set the filter selecting images to use when calculating
5097 * the spatial edges.
5099 * @description The following filter types are supported:
5103 * `["==", key, value]` equality: `image[key] = value`
5105 * `["!=", key, value]` inequality: `image[key] ≠value`
5107 * `["<", key, value]` less than: `image[key] < value`
5109 * `["<=", key, value]` less than or equal: `image[key] ≤ value`
5111 * `[">", key, value]` greater than: `image[key] > value`
5113 * `[">=", key, value]` greater than or equal: `image[key] ≥ value`
5117 * `["in", key, v0, ..., vn]` set inclusion: `image[key] ∈ {v0, ..., vn}`
5119 * `["!in", key, v0, ..., vn]` set exclusion: `image[key] ∉ {v0, ..., vn}`
5123 * `["all", f0, ..., fn]` logical `AND`: `f0 ∧ ... ∧ fn`
5125 * A key must be a string that identifies a property name of a
5126 * simple {@link Image} property, i.e. a key of the {@link FilterKey}
5127 * type. A value must be a string, number, or
5128 * boolean. Strictly-typed comparisons are used. The values
5129 * `f0, ..., fn` of the combining filter must be filter expressions.
5131 * Clear the filter by setting it to null or empty array.
5133 * Commonly used filter properties (see the {@link Image} class
5134 * documentation for a full list of properties that can be used
5135 * in a filter) are shown the the example code.
5137 * @param {FilterExpression} filter - The filter expression.
5138 * @returns {Promise<void>} Promise that resolves after filter is applied.
5143 * viewer.setFilter(["==", "cameraType", "spherical"]);
5144 * viewer.setFilter([">=", "capturedAt", <my-time-stamp>]);
5145 * viewer.setFilter(["in", "sequenceId", "<sequence-id-1>", "<sequence-id-2>"]);
5148 setFilter(filter: FilterExpression): Promise<void>;
5150 * Set the viewer's render mode.
5152 * @param {RenderMode} renderMode - Render mode.
5156 * viewer.setRenderMode(RenderMode.Letterbox);
5159 setRenderMode(renderMode: RenderMode): void;
5161 * Set the viewer's transition mode.
5163 * @param {TransitionMode} transitionMode - Transition mode.
5167 * viewer.setTransitionMode(TransitionMode.Instantaneous);
5170 setTransitionMode(transitionMode: TransitionMode): void;
5172 * Set an access token for authenticated API requests of protected
5175 * The token may be a user access token or a client access token.
5177 * @description When the supplied user token is null or undefined,
5178 * any previously set user bearer token will be cleared and the
5179 * viewer will make unauthenticated requests.
5181 * Calling setAccessToken aborts all outstanding move requests.
5182 * The promises of those move requests will be rejected with a
5183 * {@link CancelMapillaryError} the rejections need to be caught.
5185 * Calling setAccessToken also resets the complete viewer cache
5186 * so it should not be called repeatedly.
5188 * @param {string} [accessToken] accessToken - Optional user
5189 * access token or client access token.
5190 * @returns {Promise<void>} Promise that resolves after token
5193 * @throws When viewer is not navigable.
5197 * viewer.setAccessToken("<my access token>")
5198 * .then(() => { console.log("user token set"); });
5201 setAccessToken(accessToken?: string): Promise<void>;
5203 * Set the image's current zoom level.
5205 * @description Possible zoom level values are on the [0, 3] interval.
5206 * Zero means zooming out to fit the image to the view whereas three
5207 * shows the highest level of detail.
5209 * @param {number} The image's current zoom level.
5213 * viewer.setZoom(2);
5216 setZoom(zoom: number): void;
5218 * Trigger the rendering of a single frame.
5220 * @description Use this method with custom renderers to
5221 * force the viewer to rerender when the custom content
5222 * changes. Calling this multiple times before the next
5223 * frame is rendered will still result in only a single
5224 * frame being rendered.
5226 triggerRerender(): void;
5228 * Unproject canvas pixel coordinates to geodetic
5231 * @description The pixel point may not always correspond to geodetic
5232 * coordinates. In the case of no correspondence the returned value will
5235 * The unprojection to a lngLat will be performed towards the ground plane, i.e.
5236 * the altitude with respect to the ground plane for the returned lngLat is zero.
5238 * @param {Array<number>} pixelPoint - Pixel coordinates to unproject.
5239 * @returns {Promise<LngLat>} Promise to the lngLat corresponding to the pixel point.
5243 * viewer.unproject([100, 100])
5244 * .then(lngLat => { console.log(lngLat); });
5247 unproject(pixelPoint: number[]): Promise<LngLat>;
5249 * Unproject canvas pixel coordinates to basic image coordinates for the
5252 * @description The pixel point may not always correspond to basic image
5253 * coordinates. In the case of no correspondence the returned value will
5256 * @param {Array<number>} pixelPoint - Pixel coordinates to unproject.
5257 * @returns {Promise<LngLat>} Promise to the basic coordinates corresponding
5258 * to the pixel point.
5262 * viewer.unprojectToBasic([100, 100])
5263 * .then(basicPoint => { console.log(basicPoint); });
5266 unprojectToBasic(pixelPoint: number[]): Promise<number[]>;
5270 * @class MapillaryError
5272 * @classdesc Generic Mapillary error.
5274 declare class MapillaryError extends Error {
5275 constructor(message?: string);
5279 * @class CancelMapillaryError
5281 * @classdesc Error thrown when a move to request has been
5282 * cancelled before completing because of a subsequent request.
5284 declare class CancelMapillaryError extends MapillaryError {
5285 constructor(message?: string);
5288 declare class ArgumentMapillaryError extends MapillaryError {
5289 constructor(message?: string);
5292 declare class GraphMapillaryError extends MapillaryError {
5293 constructor(message: string);
5296 declare class ConfigurationService {
5297 private _imageTiling$;
5298 private _exploreUrl$;
5299 constructor(options: ViewerOptions);
5300 get exploreUrl$(): Observable<string>;
5301 get imageTiling$(): Observable<boolean>;
5304 declare class Container {
5306 renderService: RenderService;
5307 glRenderer: GLRenderer;
5308 domRenderer: DOMRenderer;
5309 keyboardService: KeyboardService;
5310 mouseService: MouseService;
5311 touchService: TouchService;
5312 spriteService: SpriteService;
5313 readonly configurationService: ConfigurationService;
5314 private _canvasContainer;
5317 private _domContainer;
5319 private readonly _trackResize;
5320 constructor(options: ViewerOptions, stateService: StateService, dom?: DOM);
5321 get canvas(): HTMLCanvasElement;
5322 get canvasContainer(): HTMLDivElement;
5323 get container(): HTMLElement;
5324 get domContainer(): HTMLDivElement;
5326 private _onWindowResize;
5327 private _removeNode;
5330 declare type Func<T, TResult> = (item: T) => TResult;
5332 declare type FilterFunction = Func<Image, boolean>;
5336 * @classdesc Represents a class for creating image filters. Implementation and
5337 * definitions based on https://github.com/mapbox/feature-filter.
5339 declare class FilterCreator {
5341 * Create a filter from a filter expression.
5343 * @description The following filters are supported:
5360 * @param {FilterExpression} filter - Comparison, set membership or combinding filter
5362 * @returns {FilterFunction} Function taking a image and returning a boolean that
5363 * indicates whether the image passed the test or not.
5365 createFilter(filter: FilterExpression): FilterFunction;
5368 private _compileComparisonOp;
5369 private _compileInOp;
5370 private _compileLogicalOp;
5371 private _compileNegation;
5372 private _compilePropertyReference;
5376 * @class GraphCalculator
5378 * @classdesc Represents a calculator for graph entities.
5380 declare class GraphCalculator {
5382 * Get the bounding box corners for a circle with radius of a threshold
5383 * with center in a geodetic position.
5385 * @param {LngLat} lngLat - Longitude, latitude to encode.
5386 * @param {number} threshold - Threshold distance from the position in meters.
5388 * @returns {Array<LngLat>} The south west and north east corners of the
5391 boundingBoxCorners(lngLat: LngLat, threshold: number): [LngLat, LngLat];
5393 * Convert a compass angle to an angle axis rotation vector.
5395 * @param {number} compassAngle - The compass angle in degrees.
5396 * @param {number} orientation - The orientation of the original image.
5398 * @returns {Array<number>} Angle axis rotation vector.
5400 rotationFromCompass(compassAngle: number, orientation: number): number[];
5406 * @classdesc Represents a sequence of ordered images.
5408 declare class Sequence {
5412 * Create a new sequene instance.
5414 * @param {SequenceEnt} sequence - Raw sequence data.
5416 constructor(sequence: SequenceEnt);
5420 * @returns {string} Unique sequence id.
5426 * @returns {Array<string>} Array of ordered image ids in the sequence.
5428 get imageIds(): string[];
5430 * Dispose the sequence.
5432 * @description Disposes all cached assets.
5436 * Find the next image id in the sequence with respect to
5437 * the provided image id.
5439 * @param {string} id - Reference image id.
5440 * @returns {string} Next id in sequence if it exists, null otherwise.
5442 findNext(id: string): string;
5444 * Find the previous image id in the sequence with respect to
5445 * the provided image id.
5447 * @param {string} id - Reference image id.
5448 * @returns {string} Previous id in sequence if it exists, null otherwise.
5450 findPrev(id: string): string;
5454 * Interface for graph configuration.
5456 * @interface GraphConfiguration
5458 interface GraphConfiguration {
5460 * The maximum number of cached sequences left
5463 maxSequences: number;
5465 * The maximum number of unused cached images left
5468 maxUnusedImages: number;
5470 * The maximum number of unused pre-stored cached images left
5473 maxUnusedPreStoredImages: number;
5475 * The maximum number of unused cached tiles left
5478 maxUnusedTiles: number;
5481 declare class EdgeCalculatorCoefficients {
5482 sphericalPreferredDistance: number;
5483 sphericalMotion: number;
5484 sphericalSequencePenalty: number;
5485 sphericalMergeCCPenalty: number;
5486 stepPreferredDistance: number;
5488 stepRotation: number;
5489 stepSequencePenalty: number;
5490 stepMergeCCPenalty: number;
5491 similarDistance: number;
5492 similarRotation: number;
5493 turnDistance: number;
5495 turnSequencePenalty: number;
5496 turnMergeCCPenalty: number;
5500 interface SphericalDirection {
5501 direction: NavigationDirection;
5502 prev: NavigationDirection;
5503 next: NavigationDirection;
5504 directionChange: number;
5507 interface StepDirection {
5508 direction: NavigationDirection;
5509 motionChange: number;
5510 useFallback: boolean;
5513 interface TurnDirection {
5514 direction: NavigationDirection;
5515 directionChange: number;
5516 motionChange?: number;
5519 declare class EdgeCalculatorDirections {
5521 [direction: string]: StepDirection;
5524 [direction: string]: TurnDirection;
5527 [direction: string]: SphericalDirection;
5532 declare class EdgeCalculatorSettings {
5533 sphericalMinDistance: number;
5534 sphericalMaxDistance: number;
5535 sphericalPreferredDistance: number;
5536 sphericalMaxItems: number;
5537 sphericalMaxStepTurnChange: number;
5538 rotationMaxDistance: number;
5539 rotationMaxDirectionChange: number;
5540 rotationMaxVerticalDirectionChange: number;
5541 similarMaxDirectionChange: number;
5542 similarMaxDistance: number;
5543 similarMinTimeDifference: number;
5544 stepMaxDistance: number;
5545 stepMaxDirectionChange: number;
5546 stepMaxDrift: number;
5547 stepPreferredDistance: number;
5548 turnMaxDistance: number;
5549 turnMaxDirectionChange: number;
5550 turnMaxRigDistance: number;
5551 turnMinRigDirectionChange: number;
5553 get maxDistance(): number;
5557 * Interface that describes the properties for a image that is the destination of a
5558 * potential edge from an origin image.
5560 * @interface PotentialEdge
5562 interface PotentialEdge {
5564 * Timestamp when the image was captured.
5565 * @property {number} capturedAt
5569 * Change in viewing direction with respect to the origin image.
5570 * @property {number} directionChange
5572 directionChange: number;
5574 * Distance to the origin image.
5575 * @property {number} distance
5579 * Determines if the destination image is spherical.
5580 * @property {boolean} spherical
5585 * @property {string} id
5589 * Change in motion with respect to the viewing direction
5590 * of the origin image.
5591 * @property {number} motionChange
5593 motionChange: number;
5595 * General camera rotation with respect to the origin image.
5596 * @property {number} rotation
5600 * Determines if the origin and destination image are considered
5601 * to be in the same merge connected component.
5602 * @property {boolean} sameMergeCC
5604 sameMergeCC: boolean;
5606 * Determines if the origin and destination image are in the
5608 * @property {boolean} sameSequence
5610 sameSequence: boolean;
5612 * Determines if the origin and destination image have been captured
5614 * @property {boolean} sameUser
5618 * Determines which sequence the destination image of the potential edge
5620 * @property {string} sequenceId
5624 * Change in viewing direction with respect to the XY-plane.
5625 * @property {number} verticalDirectionChange
5627 verticalDirectionChange: number;
5629 * The angle between motion vector and the XY-plane
5630 * @property {number} verticalMotion
5632 verticalMotion: number;
5634 * The counter clockwise horizontal rotation angle from
5635 * the X-axis in a spherical coordiante system.
5636 * @propery {number} worldMotionAzimuth
5638 worldMotionAzimuth: number;
5642 * @class EdgeCalculator
5644 * @classdesc Represents a class for calculating node edges.
5646 declare class EdgeCalculator {
5649 private _directions;
5650 private _coefficients;
5652 * Create a new edge calculator instance.
5654 * @param {EdgeCalculatorSettings} settings - Settings struct.
5655 * @param {EdgeCalculatorDirections} directions - Directions struct.
5656 * @param {EdgeCalculatorCoefficients} coefficients - Coefficients struct.
5658 constructor(settings?: EdgeCalculatorSettings, directions?: EdgeCalculatorDirections, coefficients?: EdgeCalculatorCoefficients);
5660 * Returns the potential edges to destination nodes for a set
5661 * of nodes with respect to a source node.
5663 * @param {Image} node - Source node.
5664 * @param {Array<Image>} nodes - Potential destination nodes.
5665 * @param {Array<string>} fallbackIds - Ids for destination nodes
5666 * that should be returned even if they do not meet the
5667 * criteria for a potential edge.
5668 * @throws {ArgumentMapillaryError} If node is not full.
5670 getPotentialEdges(node: Image, potentialImages: Image[], fallbackIds: string[]): PotentialEdge[];
5672 * Computes the sequence edges for a node.
5674 * @param {Image} node - Source node.
5675 * @throws {ArgumentMapillaryError} If node is not full.
5677 computeSequenceEdges(node: Image, sequence: Sequence): NavigationEdge[];
5679 * Computes the similar edges for a node.
5681 * @description Similar edges for perspective images
5682 * look roughly in the same direction and are positioned closed to the node.
5683 * Similar edges for spherical only target other spherical.
5685 * @param {Image} node - Source node.
5686 * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
5687 * @throws {ArgumentMapillaryError} If node is not full.
5689 computeSimilarEdges(node: Image, potentialEdges: PotentialEdge[]): NavigationEdge[];
5691 * Computes the step edges for a perspective node.
5693 * @description Step edge targets can only be other perspective nodes.
5694 * Returns an empty array for spherical.
5696 * @param {Image} node - Source node.
5697 * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
5698 * @param {string} prevId - Id of previous node in sequence.
5699 * @param {string} nextId - Id of next node in sequence.
5700 * @throws {ArgumentMapillaryError} If node is not full.
5702 computeStepEdges(node: Image, potentialEdges: PotentialEdge[], prevId: string, nextId: string): NavigationEdge[];
5704 * Computes the turn edges for a perspective node.
5706 * @description Turn edge targets can only be other perspective images.
5707 * Returns an empty array for spherical.
5709 * @param {Image} node - Source node.
5710 * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
5711 * @throws {ArgumentMapillaryError} If node is not full.
5713 computeTurnEdges(node: Image, potentialEdges: PotentialEdge[]): NavigationEdge[];
5715 * Computes the spherical edges for a perspective node.
5717 * @description Perspective to spherical edge targets can only be
5718 * spherical nodes. Returns an empty array for spherical.
5720 * @param {Image} node - Source node.
5721 * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
5722 * @throws {ArgumentMapillaryError} If node is not full.
5724 computePerspectiveToSphericalEdges(node: Image, potentialEdges: PotentialEdge[]): NavigationEdge[];
5726 * Computes the spherical and step edges for a spherical node.
5728 * @description Spherical to spherical edge targets can only be
5729 * spherical nodes. spherical to step edge targets can only be perspective
5732 * @param {Image} node - Source node.
5733 * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
5734 * @throws {ArgumentMapillaryError} If node is not full.
5736 computeSphericalEdges(node: Image, potentialEdges: PotentialEdge[]): NavigationEdge[];
5742 * @classdesc Provides methods for access to the API.
5744 declare class APIWrapper {
5745 private readonly _data;
5746 constructor(_data: DataProviderBase);
5747 get data(): DataProviderBase;
5748 getCoreImages$(cellId: string): Observable<CoreImagesContract>;
5749 getImages$(imageIds: string[]): Observable<ImagesContract>;
5750 getImageTiles$(tiles: ImageTilesRequestContract): Observable<ImageTilesContract>;
5751 getSequence$(sequenceId: string): Observable<SequenceContract>;
5752 getSpatialImages$(imageIds: string[]): Observable<SpatialImagesContract>;
5753 setAccessToken(accessToken?: string): void;
5760 * @classdesc Represents a graph of nodes with edges.
5762 declare class Graph {
5763 private static _spatialIndex;
5766 * Nodes that have initialized cache with a timestamp of last access.
5768 private _cachedNodes;
5770 * Nodes for which the required tiles are cached.
5772 private _cachedNodeTiles;
5774 * Sequences for which the nodes are cached.
5776 private _cachedSequenceNodes;
5778 * Nodes for which the spatial edges are cached.
5780 private _cachedSpatialEdges;
5782 * Cached tiles with a timestamp of last access.
5784 private _cachedTiles;
5786 * Nodes for which fill properties are being retreived.
5788 private _cachingFill$;
5790 * Nodes for which full properties are being retrieved.
5792 private _cachingFull$;
5794 * Sequences for which the nodes are being retrieved.
5796 private _cachingSequenceNodes$;
5798 * Sequences that are being retrieved.
5800 private _cachingSequences$;
5802 * Nodes for which the spatial area fill properties are being retrieved.
5804 private _cachingSpatialArea$;
5806 * Tiles that are being retrieved.
5808 private _cachingTiles$;
5810 private _defaultAlt;
5811 private _edgeCalculator;
5812 private _graphCalculator;
5813 private _configuration;
5815 private _filterCreator;
5816 private _filterSubject$;
5818 private _filterSubscription;
5820 * All nodes in the graph.
5824 * Contains all nodes in the graph. Used for fast spatial lookups.
5828 * All node index items sorted in tiles for easy uncache.
5830 private _nodeIndexTiles;
5832 * Node to tile dictionary for easy tile access updates.
5834 private _nodeToTile;
5836 * Nodes retrieved before tiles, stored on tile level.
5840 * Tiles required for a node to retrive spatial area.
5842 private _requiredNodeTiles;
5844 * Other nodes required for node to calculate spatial edges.
5846 private _requiredSpatialArea;
5848 * All sequences in graph with a timestamp of last access.
5851 private _tileThreshold;
5853 * Create a new graph instance.
5855 * @param {APIWrapper} [api] - API instance for retrieving data.
5856 * @param {rbush.RBush<NodeIndexItem>} [nodeIndex] - Node index for fast spatial retreival.
5857 * @param {GraphCalculator} [graphCalculator] - Instance for graph calculations.
5858 * @param {EdgeCalculator} [edgeCalculator] - Instance for edge calculations.
5859 * @param {FilterCreator} [filterCreator] - Instance for filter creation.
5860 * @param {GraphConfiguration} [configuration] - Configuration struct.
5862 constructor(api: APIWrapper, nodeIndex?: any, graphCalculator?: GraphCalculator, edgeCalculator?: EdgeCalculator, filterCreator?: FilterCreator, configuration?: GraphConfiguration);
5863 static register(spatialIndex: new (...args: any[]) => any): void;
5867 * @returns {APIWrapper} The API instance used by
5870 get api(): APIWrapper;
5874 * @returns {Observable<Graph>} Observable emitting
5875 * the graph every time it has changed.
5877 get changed$(): Observable<Graph>;
5881 * @returns {Observable<FilterFunction>} Observable emitting
5882 * the filter every time it has changed.
5884 get filter$(): Observable<FilterFunction>;
5886 * Caches the full node data for all images within a bounding
5889 * @description The node assets are not cached.
5891 * @param {LngLat} sw - South west corner of bounding box.
5892 * @param {LngLat} ne - North east corner of bounding box.
5893 * @returns {Observable<Array<Image>>} Observable emitting
5894 * the full nodes in the bounding box.
5896 cacheBoundingBox$(sw: LngLat, ne: LngLat): Observable<Image[]>;
5898 * Caches the full node data for all images of a cell.
5900 * @description The node assets are not cached.
5902 * @param {string} cellId - Cell id.
5903 * @returns {Observable<Array<Image>>} Observable
5904 * emitting the full nodes of the cell.
5906 cacheCell$(cellId: string): Observable<Image[]>;
5908 * Retrieve and cache node fill properties.
5910 * @param {string} key - Key of node to fill.
5911 * @returns {Observable<Graph>} Observable emitting the graph
5912 * when the node has been updated.
5913 * @throws {GraphMapillaryError} When the operation is not valid on the
5916 cacheFill$(key: string): Observable<Graph>;
5918 * Retrieve and cache full node properties.
5920 * @param {string} key - Key of node to fill.
5921 * @returns {Observable<Graph>} Observable emitting the graph
5922 * when the node has been updated.
5923 * @throws {GraphMapillaryError} When the operation is not valid on the
5926 cacheFull$(key: string): Observable<Graph>;
5928 * Retrieve and cache a node sequence.
5930 * @param {string} key - Key of node for which to retrieve sequence.
5931 * @returns {Observable<Graph>} Observable emitting the graph
5932 * when the sequence has been retrieved.
5933 * @throws {GraphMapillaryError} When the operation is not valid on the
5936 cacheNodeSequence$(key: string): Observable<Graph>;
5938 * Retrieve and cache a sequence.
5940 * @param {string} sequenceKey - Key of sequence to cache.
5941 * @returns {Observable<Graph>} Observable emitting the graph
5942 * when the sequence has been retrieved.
5943 * @throws {GraphMapillaryError} When the operation is not valid on the
5946 cacheSequence$(sequenceKey: string): Observable<Graph>;
5948 * Cache sequence edges for a node.
5950 * @param {string} key - Key of node.
5951 * @throws {GraphMapillaryError} When the operation is not valid on the
5954 cacheSequenceEdges(key: string): void;
5956 * Retrieve and cache full nodes for all keys in a sequence.
5958 * @param {string} sequenceKey - Key of sequence.
5959 * @param {string} referenceNodeKey - Key of node to use as reference
5960 * for optimized caching.
5961 * @returns {Observable<Graph>} Observable emitting the graph
5962 * when the nodes of the sequence has been cached.
5964 cacheSequenceNodes$(sequenceKey: string, referenceNodeKey?: string): Observable<Graph>;
5966 * Retrieve and cache full nodes for a node spatial area.
5968 * @param {string} key - Key of node for which to retrieve sequence.
5969 * @returns {Observable<Graph>} Observable emitting the graph
5970 * when the nodes in the spatial area has been made full.
5971 * @throws {GraphMapillaryError} When the operation is not valid on the
5974 cacheSpatialArea$(key: string): Observable<Graph>[];
5976 * Cache spatial edges for a node.
5978 * @param {string} key - Key of node.
5979 * @throws {GraphMapillaryError} When the operation is not valid on the
5982 cacheSpatialEdges(key: string): void;
5984 * Retrieve and cache tiles for a node.
5986 * @param {string} key - Key of node for which to retrieve tiles.
5987 * @returns {Array<Observable<Graph>>} Array of observables emitting
5988 * the graph for each tile required for the node has been cached.
5989 * @throws {GraphMapillaryError} When the operation is not valid on the
5992 cacheTiles$(key: string): Observable<Graph>[];
5994 * Initialize the cache for a node.
5996 * @param {string} key - Key of node.
5997 * @throws {GraphMapillaryError} When the operation is not valid on the
6000 initializeCache(key: string): void;
6002 * Get a value indicating if the graph is fill caching a node.
6004 * @param {string} key - Key of node.
6005 * @returns {boolean} Value indicating if the node is being fill cached.
6007 isCachingFill(key: string): boolean;
6009 * Get a value indicating if the graph is fully caching a node.
6011 * @param {string} key - Key of node.
6012 * @returns {boolean} Value indicating if the node is being fully cached.
6014 isCachingFull(key: string): boolean;
6016 * Get a value indicating if the graph is caching a sequence of a node.
6018 * @param {string} key - Key of node.
6019 * @returns {boolean} Value indicating if the sequence of a node is
6022 isCachingNodeSequence(key: string): boolean;
6024 * Get a value indicating if the graph is caching a sequence.
6026 * @param {string} sequenceKey - Key of sequence.
6027 * @returns {boolean} Value indicating if the sequence is
6030 isCachingSequence(sequenceKey: string): boolean;
6032 * Get a value indicating if the graph is caching sequence nodes.
6034 * @param {string} sequenceKey - Key of sequence.
6035 * @returns {boolean} Value indicating if the sequence nodes are
6038 isCachingSequenceNodes(sequenceKey: string): boolean;
6040 * Get a value indicating if the graph is caching the tiles
6041 * required for calculating spatial edges of a node.
6043 * @param {string} key - Key of node.
6044 * @returns {boolean} Value indicating if the tiles of
6045 * a node are being cached.
6047 isCachingTiles(key: string): boolean;
6049 * Get a value indicating if the cache has been initialized
6052 * @param {string} key - Key of node.
6053 * @returns {boolean} Value indicating if the cache has been
6054 * initialized for a node.
6056 hasInitializedCache(key: string): boolean;
6058 * Get a value indicating if a node exist in the graph.
6060 * @param {string} key - Key of node.
6061 * @returns {boolean} Value indicating if a node exist in the graph.
6063 hasNode(key: string): boolean;
6065 * Get a value indicating if a node sequence exist in the graph.
6067 * @param {string} key - Key of node.
6068 * @returns {boolean} Value indicating if a node sequence exist
6071 hasNodeSequence(key: string): boolean;
6073 * Get a value indicating if a sequence exist in the graph.
6075 * @param {string} sequenceKey - Key of sequence.
6076 * @returns {boolean} Value indicating if a sequence exist
6079 hasSequence(sequenceKey: string): boolean;
6081 * Get a value indicating if sequence nodes has been cached in the graph.
6083 * @param {string} sequenceKey - Key of sequence.
6084 * @returns {boolean} Value indicating if a sequence nodes has been
6085 * cached in the graph.
6087 hasSequenceNodes(sequenceKey: string): boolean;
6089 * Get a value indicating if the graph has fully cached
6090 * all nodes in the spatial area of a node.
6092 * @param {string} key - Key of node.
6093 * @returns {boolean} Value indicating if the spatial area
6094 * of a node has been cached.
6096 hasSpatialArea(key: string): boolean;
6098 * Get a value indicating if the graph has a tiles required
6101 * @param {string} key - Key of node.
6102 * @returns {boolean} Value indicating if the the tiles required
6103 * by a node has been cached.
6105 hasTiles(key: string): boolean;
6109 * @param {string} key - Key of node.
6110 * @returns {Image} Retrieved node.
6112 getNode(key: string): Image;
6116 * @param {string} sequenceKey - Key of sequence.
6117 * @returns {Image} Retrieved sequence.
6119 getSequence(sequenceKey: string): Sequence;
6121 * Reset all spatial edges of the graph nodes.
6123 resetSpatialEdges(): void;
6125 * Reset the complete graph but keep the nodes corresponding
6126 * to the supplied keys. All other nodes will be disposed.
6128 * @param {Array<string>} keepKeys - Keys for nodes to keep
6129 * in graph after reset.
6131 reset(keepKeys: string[]): void;
6133 * Set the spatial node filter.
6135 * @emits FilterFunction The filter function to the {@link Graph.filter$}
6138 * @param {FilterExpression} filter - Filter expression to be applied
6139 * when calculating spatial edges.
6141 setFilter(filter: FilterExpression): void;
6143 * Uncache the graph according to the graph configuration.
6145 * @description Uncaches unused tiles, unused nodes and
6146 * sequences according to the numbers specified in the
6147 * graph configuration. Sequences does not have a direct
6148 * reference to either tiles or nodes and may be uncached
6149 * even if they are related to the nodes that should be kept.
6151 * @param {Array<string>} keepIds - Ids of nodes to keep in
6152 * graph unrelated to last access. Tiles related to those keys
6153 * will also be kept in graph.
6154 * @param {Array<string>} keepCellIds - Ids of cells to keep in
6155 * graph unrelated to last access. The nodes of the cells may
6156 * still be uncached if not specified in the keep ids param
6157 * but are guaranteed to not be disposed.
6158 * @param {string} keepSequenceId - Optional id of sequence
6159 * for which the belonging nodes should not be disposed or
6160 * removed from the graph. These nodes may still be uncached if
6161 * not specified in keep ids param but are guaranteed to not
6164 uncache(keepIds: string[], keepCellIds: string[], keepSequenceId?: string): void;
6166 * Updates existing cells with new core nodes.
6168 * @description Non-existing cells are discarded
6169 * and not requested at all.
6171 * Existing nodes are not changed.
6173 * New nodes are not made full or getting assets
6176 * @param {Array<string>} cellIds - Cell ids.
6177 * @returns {Observable<Array<Image>>} Observable
6178 * emitting the updated cells.
6180 updateCells$(cellIds: string[]): Observable<string>;
6182 * Unsubscribes all subscriptions.
6184 * @description Afterwards, you must not call any other methods
6185 * on the graph instance.
6187 unsubscribe(): void;
6188 private _addNewKeys;
6189 private _cacheSequence$;
6190 private _cacheTile$;
6193 private _removeFromPreStore;
6195 private _uncacheTile;
6196 private _uncachePreStored;
6197 private _updateCachedTileAccess;
6198 private _updateCachedNodeAccess;
6199 private _updateCell$;
6203 * Enumeration for graph modes.
6206 * @description Modes for the retrieval and caching performed
6207 * by the graph service on the graph.
6209 declare enum GraphMode {
6211 * Caching is performed on sequences only and sequence edges are
6212 * calculated. Spatial tiles
6213 * are not retrieved and spatial edges are not calculated when
6214 * caching nodes. Complete sequences are being cached for requested
6215 * nodes within the graph.
6219 * Caching is performed with emphasis on spatial data. Sequence edges
6220 * as well as spatial edges are cached. Sequence data
6221 * is still requested but complete sequences are not being cached
6222 * for requested nodes.
6224 * This is the initial mode of the graph service.
6230 * @class GraphService
6232 * @classdesc Represents a service for graph operations.
6234 declare class GraphService {
6237 private _graphMode$;
6238 private _graphModeSubject$;
6239 private _firstGraphSubjects$;
6240 private _dataAdded$;
6241 private _initializeCacheSubscriptions;
6242 private _sequenceSubscriptions;
6243 private _spatialSubscriptions;
6244 private _subscriptions;
6246 * Create a new graph service instance.
6248 * @param {Graph} graph - Graph instance to be operated on.
6250 constructor(graph: Graph);
6254 * @returns {Observable<string>} Observable emitting
6255 * a cell id every time data has been added to a cell.
6257 get dataAdded$(): Observable<string>;
6259 * Get filter observable.
6261 * @desciption Emits the filter every time it has changed.
6263 * @returns {Observable<FilterFunction>} Observable
6264 * emitting the filter function every time it is set.
6266 get filter$(): Observable<FilterFunction>;
6268 * Get graph mode observable.
6270 * @description Emits the current graph mode.
6272 * @returns {Observable<GraphMode>} Observable
6273 * emitting the current graph mode when it changes.
6275 get graphMode$(): Observable<GraphMode>;
6277 * Cache full images in a bounding box.
6279 * @description When called, the full properties of
6280 * the image are retrieved. The image cache is not initialized
6281 * for any new images retrieved and the image assets are not
6282 * retrieved, {@link cacheImage$} needs to be called for caching
6285 * @param {LngLat} sw - South west corner of bounding box.
6286 * @param {LngLat} ne - North east corner of bounding box.
6287 * @return {Observable<Array<Image>>} Observable emitting a single item,
6288 * the images of the bounding box, when they have all been retrieved.
6289 * @throws {Error} Propagates any IO image caching errors to the caller.
6291 cacheBoundingBox$(sw: LngLat, ne: LngLat): Observable<Image[]>;
6293 * Cache full images in a cell.
6295 * @description When called, the full properties of
6296 * the image are retrieved. The image cache is not initialized
6297 * for any new images retrieved and the image assets are not
6298 * retrieved, {@link cacheImage$} needs to be called for caching
6301 * @param {string} cellId - Id of the cell.
6302 * @return {Observable<Array<Image>>} Observable emitting a single item,
6303 * the images of the cell, when they have all been retrieved.
6304 * @throws {Error} Propagates any IO image caching errors to the caller.
6306 cacheCell$(cellId: string): Observable<Image[]>;
6308 * Cache a image in the graph and retrieve it.
6310 * @description When called, the full properties of
6311 * the image are retrieved and the image cache is initialized.
6312 * After that the image assets are cached and the image
6313 * is emitted to the observable when.
6314 * In parallel to caching the image assets, the sequence and
6315 * spatial edges of the image are cached. For this, the sequence
6316 * of the image and the required tiles and spatial images are
6317 * retrieved. The sequence and spatial edges may be set before
6318 * or after the image is returned.
6320 * @param {string} id - Id of the image to cache.
6321 * @return {Observable<Image>} Observable emitting a single item,
6322 * the image, when it has been retrieved and its assets are cached.
6323 * @throws {Error} Propagates any IO image caching errors to the caller.
6325 cacheImage$(id: string): Observable<Image>;
6327 * Cache a sequence in the graph and retrieve it.
6329 * @param {string} sequenceId - Sequence id.
6330 * @returns {Observable<Sequence>} Observable emitting a single item,
6331 * the sequence, when it has been retrieved and its assets are cached.
6332 * @throws {Error} Propagates any IO image caching errors to the caller.
6334 cacheSequence$(sequenceId: string): Observable<Sequence>;
6336 * Cache a sequence and its images in the graph and retrieve the sequence.
6338 * @description Caches a sequence and its assets are cached and
6339 * retrieves all images belonging to the sequence. The image assets
6340 * or edges will not be cached.
6342 * @param {string} sequenceId - Sequence id.
6343 * @param {string} referenceImageId - Id of image to use as reference
6344 * for optimized caching.
6345 * @returns {Observable<Sequence>} Observable emitting a single item,
6346 * the sequence, when it has been retrieved, its assets are cached and
6347 * all images belonging to the sequence has been retrieved.
6348 * @throws {Error} Propagates any IO image caching errors to the caller.
6350 cacheSequenceImages$(sequenceId: string, referenceImageId?: string): Observable<Sequence>;
6352 * Dispose the graph service and its children.
6356 * Set a spatial edge filter on the graph.
6358 * @description Resets the spatial edges of all cached images.
6360 * @param {FilterExpression} filter - Filter expression to be applied.
6361 * @return {Observable<Graph>} Observable emitting a single item,
6362 * the graph, when the spatial edges have been reset.
6364 setFilter$(filter: FilterExpression): Observable<void>;
6366 * Set the graph mode.
6368 * @description If graph mode is set to spatial, caching
6369 * is performed with emphasis on spatial edges. If graph
6370 * mode is set to sequence no tile data is requested and
6371 * no spatial edges are computed.
6373 * When setting graph mode to sequence all spatial
6374 * subscriptions are aborted.
6376 * @param {GraphMode} mode - Graph mode to set.
6378 setGraphMode(mode: GraphMode): void;
6382 * @description Resets the graph but keeps the images of the
6385 * @param {Array<string>} keepIds - Ids of images to keep in graph.
6386 * @return {Observable<Image>} Observable emitting a single item,
6387 * the graph, when it has been reset.
6389 reset$(keepIds: string[]): Observable<void>;
6391 * Uncache the graph.
6393 * @description Uncaches the graph by removing tiles, images and
6394 * sequences. Keeps the images of the supplied ids and the tiles
6395 * related to those images.
6397 * @param {Array<string>} keepIds - Ids of images to keep in graph.
6398 * @param {Array<string>} keepCellIds - Ids of cells to keep in graph.
6399 * @param {string} keepSequenceId - Optional id of sequence
6400 * for which the belonging images should not be disposed or
6401 * removed from the graph. These images may still be uncached if
6402 * not specified in keep ids param.
6403 * @return {Observable<Graph>} Observable emitting a single item,
6404 * the graph, when the graph has been uncached.
6406 uncache$(keepIds: string[], keepCellIds: string[], keepSequenceId?: string): Observable<void>;
6407 private _abortSubjects;
6408 private _onDataAdded;
6409 private _removeFromArray;
6410 private _resetSubscriptions;
6413 interface CacheServiceConfiguration {
6416 declare class CacheService {
6417 private readonly _graphService;
6418 private readonly _stateService;
6419 private readonly _api;
6420 private _subscriptions;
6423 constructor(_graphService: GraphService, _stateService: StateService, _api: APIWrapper);
6424 get started(): boolean;
6425 configure(configuration?: CacheServiceConfiguration): void;
6428 private _keyToEdges;
6431 declare class LoadingService {
6433 private _loadersSubject$;
6435 get loading$(): Observable<boolean>;
6436 taskLoading$(task: string): Observable<boolean>;
6437 startLoading(task: string): void;
6438 stopLoading(task: string): void;
6444 * @classdesc Provides methods for scalar, vector and matrix calculations.
6446 declare class Spatial {
6449 * Converts azimuthal phi rotation (counter-clockwise with origin on X-axis) to
6450 * bearing (clockwise with origin at north or Y-axis).
6452 * @param {number} phi - Azimuthal phi angle in radians.
6453 * @returns {number} Bearing in radians.
6455 azimuthalToBearing(phi: number): number;
6457 * Converts degrees to radians.
6459 * @param {number} deg - Degrees.
6460 * @returns {number} Radians.
6462 degToRad(deg: number): number;
6464 * Converts radians to degrees.
6466 * @param {number} rad - Radians.
6467 * @returns {number} Degrees.
6469 radToDeg(rad: number): number;
6471 * Creates a rotation matrix from an angle-axis vector.
6473 * @param {Array<number>} angleAxis - Angle-axis representation of a rotation.
6474 * @returns {THREE.Matrix4} Rotation matrix.
6476 rotationMatrix(angleAxis: number[]): Matrix4;
6478 * Rotates a vector according to a angle-axis rotation vector.
6480 * @param {Array<number>} vector - Vector to rotate.
6481 * @param {Array<number>} angleAxis - Angle-axis representation of a rotation.
6482 * @returns {THREE.Vector3} Rotated vector.
6484 rotate(vector: number[], angleAxis: number[]): Vector3;
6486 * Calculates the optical center from a rotation vector
6487 * on the angle-axis representation and a translation vector
6488 * according to C = -R^T t.
6490 * @param {Array<number>} rotation - Angle-axis representation of a rotation.
6491 * @param {Array<number>} translation - Translation vector.
6492 * @returns {THREE.Vector3} Optical center.
6494 opticalCenter(rotation: number[], translation: number[]): Vector3;
6496 * Calculates the viewing direction from a rotation vector
6497 * on the angle-axis representation.
6499 * @param {number[]} rotation - Angle-axis representation of a rotation.
6500 * @returns {THREE.Vector3} Viewing direction.
6502 viewingDirection(rotation: number[]): Vector3;
6504 * Wrap a number on the interval [min, max].
6506 * @param {number} value - Value to wrap.
6507 * @param {number} min - Lower endpoint of interval.
6508 * @param {number} max - Upper endpoint of interval.
6509 * @returns {number} The wrapped number.
6511 wrap(value: number, min: number, max: number): number;
6513 * Wrap an angle on the interval [-Pi, Pi].
6515 * @param {number} angle - Value to wrap.
6516 * @returns {number} Wrapped angle.
6518 wrapAngle(angle: number): number;
6520 * Limit the value to the interval [min, max] by changing the value to
6521 * the nearest available one when it is outside the interval.
6523 * @param {number} value - Value to clamp.
6524 * @param {number} min - Minimum of the interval.
6525 * @param {number} max - Maximum of the interval.
6526 * @returns {number} Clamped value.
6528 clamp(value: number, min: number, max: number): number;
6530 * Calculates the counter-clockwise angle from the first
6531 * vector (x1, y1)^T to the second (x2, y2)^T.
6533 * @param {number} x1 - X coordinate of first vector.
6534 * @param {number} y1 - Y coordinate of first vector.
6535 * @param {number} x2 - X coordinate of second vector.
6536 * @param {number} y2 - Y coordinate of second vector.
6537 * @returns {number} Counter clockwise angle between the vectors.
6539 angleBetweenVector2(x1: number, y1: number, x2: number, y2: number): number;
6541 * Calculates the minimum (absolute) angle change for rotation
6542 * from one angle to another on the [-Pi, Pi] interval.
6544 * @param {number} angle1 - Start angle.
6545 * @param {number} angle2 - Destination angle.
6546 * @returns {number} Absolute angle change between angles.
6548 angleDifference(angle1: number, angle2: number): number;
6550 * Calculates the relative rotation angle between two
6551 * angle-axis vectors.
6553 * @param {number} rotation1 - First angle-axis vector.
6554 * @param {number} rotation2 - Second angle-axis vector.
6555 * @returns {number} Relative rotation angle.
6557 relativeRotationAngle(rotation1: number[], rotation2: number[]): number;
6559 * Calculates the angle from a vector to a plane.
6561 * @param {Array<number>} vector - The vector.
6562 * @param {Array<number>} planeNormal - Normal of the plane.
6563 * @returns {number} Angle from between plane and vector.
6565 angleToPlane(vector: number[], planeNormal: number[]): number;
6566 azimuthal(direction: number[], up: number[]): number;
6568 * Calculates the distance between two coordinates
6569 * (longitude, latitude pairs) in meters according to
6570 * the haversine formula.
6572 * @param {number} lat1 - Latitude of the first coordinate in degrees.
6573 * @param {number} lng1 - Longitude of the first coordinate in degrees.
6574 * @param {number} lat2 - Latitude of the second coordinate in degrees.
6575 * @param {number} lng2 - Longitude of the second coordinate in degrees.
6576 * @returns {number} Distance between lat lon positions in meters.
6578 distanceFromLngLat(lng1: number, lat1: number, lng2: number, lat2: number): number;
6582 * @class ViewportCoords
6584 * @classdesc Provides methods for calculating 2D coordinate conversions
6585 * as well as 3D projection and unprojection.
6587 * Basic coordinates are 2D coordinates on the [0, 1] interval and
6588 * have the origin point, (0, 0), at the top left corner and the
6589 * maximum value, (1, 1), at the bottom right corner of the original
6592 * Viewport coordinates are 2D coordinates on the [-1, 1] interval and
6593 * have the origin point in the center. The bottom left corner point is
6594 * (-1, -1) and the top right corner point is (1, 1).
6596 * Canvas coordiantes are 2D pixel coordinates on the [0, canvasWidth] and
6597 * [0, canvasHeight] intervals. The origin point (0, 0) is in the top left
6598 * corner and the maximum value is (canvasWidth, canvasHeight) is in the
6599 * bottom right corner.
6601 * 3D coordinates are in the topocentric world reference frame.
6603 declare class ViewportCoords {
6604 private _unprojectDepth;
6606 * Convert basic coordinates to canvas coordinates.
6608 * @description Transform origin and camera position needs to be the
6609 * equal for reliable return value.
6611 * @param {number} basicX - Basic X coordinate.
6612 * @param {number} basicY - Basic Y coordinate.
6613 * @param {HTMLElement} container - The viewer container.
6614 * @param {Transform} transform - Transform of the image to unproject from.
6615 * @param {THREE.Camera} camera - Camera used in rendering.
6616 * @returns {Array<number>} 2D canvas coordinates.
6618 basicToCanvas(basicX: number, basicY: number, container: {
6619 offsetHeight: number;
6620 offsetWidth: number;
6621 }, transform: Transform, camera: Camera$1): number[];
6623 * Convert basic coordinates to canvas coordinates safely. If 3D point is
6624 * behind camera null will be returned.
6626 * @description Transform origin and camera position needs to be the
6627 * equal for reliable return value.
6629 * @param {number} basicX - Basic X coordinate.
6630 * @param {number} basicY - Basic Y coordinate.
6631 * @param {HTMLElement} container - The viewer container.
6632 * @param {Transform} transform - Transform of the image to unproject from.
6633 * @param {THREE.Camera} camera - Camera used in rendering.
6634 * @returns {Array<number>} 2D canvas coordinates if the basic point represents a 3D point
6635 * in front of the camera, otherwise null.
6637 basicToCanvasSafe(basicX: number, basicY: number, container: {
6638 offsetHeight: number;
6639 offsetWidth: number;
6640 }, transform: Transform, camera: Camera$1): number[];
6642 * Convert basic coordinates to viewport coordinates.
6644 * @description Transform origin and camera position needs to be the
6645 * equal for reliable return value.
6647 * @param {number} basicX - Basic X coordinate.
6648 * @param {number} basicY - Basic Y coordinate.
6649 * @param {Transform} transform - Transform of the image to unproject from.
6650 * @param {THREE.Camera} camera - Camera used in rendering.
6651 * @returns {Array<number>} 2D viewport coordinates.
6653 basicToViewport(basicX: number, basicY: number, transform: Transform, camera: Camera$1): number[];
6655 * Convert basic coordinates to viewport coordinates safely. If 3D point is
6656 * behind camera null will be returned.
6658 * @description Transform origin and camera position needs to be the
6659 * equal for reliable return value.
6661 * @param {number} basicX - Basic X coordinate.
6662 * @param {number} basicY - Basic Y coordinate.
6663 * @param {Transform} transform - Transform of the image to unproject from.
6664 * @param {THREE.Camera} camera - Camera used in rendering.
6665 * @returns {Array<number>} 2D viewport coordinates.
6667 basicToViewportSafe(basicX: number, basicY: number, transform: Transform, camera: Camera$1): number[];
6669 * Convert camera 3D coordinates to viewport coordinates.
6671 * @param {number} pointCamera - 3D point in camera coordinate system.
6672 * @param {THREE.Camera} camera - Camera used in rendering.
6673 * @returns {Array<number>} 2D viewport coordinates.
6675 cameraToViewport(pointCamera: number[], camera: Camera$1): number[];
6677 * Get canvas pixel position from event.
6679 * @param {Event} event - Event containing clientX and clientY properties.
6680 * @param {HTMLElement} element - HTML element.
6681 * @returns {Array<number>} 2D canvas coordinates.
6683 canvasPosition(event: {
6686 }, element: HTMLElement): number[];
6688 * Convert canvas coordinates to basic coordinates.
6690 * @description Transform origin and camera position needs to be the
6691 * equal for reliable return value.
6693 * @param {number} canvasX - Canvas X coordinate.
6694 * @param {number} canvasY - Canvas Y coordinate.
6695 * @param {HTMLElement} container - The viewer container.
6696 * @param {Transform} transform - Transform of the image to unproject from.
6697 * @param {THREE.Camera} camera - Camera used in rendering.
6698 * @returns {Array<number>} 2D basic coordinates.
6700 canvasToBasic(canvasX: number, canvasY: number, container: {
6701 offsetHeight: number;
6702 offsetWidth: number;
6703 }, transform: Transform, camera: Camera$1): number[];
6705 * Convert canvas coordinates to viewport coordinates.
6707 * @param {number} canvasX - Canvas X coordinate.
6708 * @param {number} canvasY - Canvas Y coordinate.
6709 * @param {HTMLElement} container - The viewer container.
6710 * @returns {Array<number>} 2D viewport coordinates.
6712 canvasToViewport(canvasX: number, canvasY: number, container: {
6713 offsetHeight: number;
6714 offsetWidth: number;
6717 * Determines the width and height of the container in canvas coordinates.
6719 * @param {HTMLElement} container - The viewer container.
6720 * @returns {Array<number>} 2D canvas coordinates.
6722 containerToCanvas(container: {
6723 offsetHeight: number;
6724 offsetWidth: number;
6727 * Determine basic distances from image to canvas corners.
6729 * @description Transform origin and camera position needs to be the
6730 * equal for reliable return value.
6732 * Determines the smallest basic distance for every side of the canvas.
6734 * @param {Transform} transform - Transform of the image to unproject from.
6735 * @param {THREE.Camera} camera - Camera used in rendering.
6736 * @returns {Array<number>} Array of basic distances as [top, right, bottom, left].
6738 getBasicDistances(transform: Transform, camera: Camera$1): number[];
6740 * Determine pixel distances from image to canvas corners.
6742 * @description Transform origin and camera position needs to be the
6743 * equal for reliable return value.
6745 * Determines the smallest pixel distance for every side of the canvas.
6747 * @param {HTMLElement} container - The viewer container.
6748 * @param {Transform} transform - Transform of the image to unproject from.
6749 * @param {THREE.Camera} camera - Camera used in rendering.
6750 * @returns {Array<number>} Array of pixel distances as [top, right, bottom, left].
6752 getPixelDistances(container: {
6753 offsetHeight: number;
6754 offsetWidth: number;
6755 }, transform: Transform, camera: Camera$1): number[];
6757 * Determine if an event occured inside an element.
6759 * @param {Event} event - Event containing clientX and clientY properties.
6760 * @param {HTMLElement} element - HTML element.
6761 * @returns {boolean} Value indicating if the event occured inside the element or not.
6763 insideElement(event: {
6766 }, element: HTMLElement): boolean;
6768 * Project 3D world coordinates to canvas coordinates.
6770 * @param {Array<number>} point3D - 3D world coordinates.
6771 * @param {HTMLElement} container - The viewer container.
6772 * @param {THREE.Camera} camera - Camera used in rendering.
6773 * @returns {Array<number>} 2D canvas coordinates.
6775 projectToCanvas(point3d: number[], container: {
6776 offsetHeight: number;
6777 offsetWidth: number;
6778 }, camera: Camera$1): number[];
6780 * Project 3D world coordinates to canvas coordinates safely. If 3D
6781 * point is behind camera null will be returned.
6783 * @param {Array<number>} point3D - 3D world coordinates.
6784 * @param {HTMLElement} container - The viewer container.
6785 * @param {THREE.Camera} camera - Camera used in rendering.
6786 * @returns {Array<number>} 2D canvas coordinates.
6788 projectToCanvasSafe(point3d: number[], container: {
6789 offsetHeight: number;
6790 offsetWidth: number;
6791 }, camera: Camera$1): number[];
6793 * Project 3D world coordinates to viewport coordinates.
6795 * @param {Array<number>} point3D - 3D world coordinates.
6796 * @param {THREE.Camera} camera - Camera used in rendering.
6797 * @returns {Array<number>} 2D viewport coordinates.
6799 projectToViewport(point3d: number[], camera: Camera$1): number[];
6801 * Uproject canvas coordinates to 3D world coordinates.
6803 * @param {number} canvasX - Canvas X coordinate.
6804 * @param {number} canvasY - Canvas Y coordinate.
6805 * @param {HTMLElement} container - The viewer container.
6806 * @param {THREE.Camera} camera - Camera used in rendering.
6807 * @returns {Array<number>} 3D world coordinates.
6809 unprojectFromCanvas(canvasX: number, canvasY: number, container: {
6810 offsetHeight: number;
6811 offsetWidth: number;
6812 }, camera: Camera$1): Vector3;
6814 * Unproject viewport coordinates to 3D world coordinates.
6816 * @param {number} viewportX - Viewport X coordinate.
6817 * @param {number} viewportY - Viewport Y coordinate.
6818 * @param {THREE.Camera} camera - Camera used in rendering.
6819 * @returns {Array<number>} 3D world coordinates.
6821 unprojectFromViewport(viewportX: number, viewportY: number, camera: Camera$1): Vector3;
6823 * Convert viewport coordinates to basic coordinates.
6825 * @description Transform origin and camera position needs to be the
6826 * equal for reliable return value.
6828 * @param {number} viewportX - Viewport X coordinate.
6829 * @param {number} viewportY - Viewport Y coordinate.
6830 * @param {Transform} transform - Transform of the image to unproject from.
6831 * @param {THREE.Camera} camera - Camera used in rendering.
6832 * @returns {Array<number>} 2D basic coordinates.
6834 viewportToBasic(viewportX: number, viewportY: number, transform: Transform, camera: Camera$1): number[];
6836 * Convert viewport coordinates to canvas coordinates.
6838 * @param {number} viewportX - Viewport X coordinate.
6839 * @param {number} viewportY - Viewport Y coordinate.
6840 * @param {HTMLElement} container - The viewer container.
6841 * @returns {Array<number>} 2D canvas coordinates.
6843 viewportToCanvas(viewportX: number, viewportY: number, container: {
6844 offsetHeight: number;
6845 offsetWidth: number;
6848 * Convert 3D world coordinates to 3D camera coordinates.
6850 * @param {number} point3D - 3D point in world coordinate system.
6851 * @param {THREE.Camera} camera - Camera used in rendering.
6852 * @returns {Array<number>} 3D camera coordinates.
6854 worldToCamera(point3d: number[], camera: Camera$1): number[];
6857 declare class PanService {
6858 private _graphService;
6859 private _stateService;
6860 private _graphCalculator;
6862 private _viewportCoords;
6863 private _panImagesSubject$;
6864 private _panImages$;
6865 private _panImagesSubscription;
6866 private _subscriptions;
6868 constructor(graphService: GraphService, stateService: StateService, enabled?: boolean, graphCalculator?: GraphCalculator, spatial?: Spatial, viewportCoords?: ViewportCoords);
6869 get panImages$(): Observable<[Image, Transform, number][]>;
6876 private _timeDifference;
6877 private _createTransform;
6878 private _computeProjectedPoints;
6879 private _computeHorizontalFov;
6880 private _coordToFov;
6883 declare class PlayService {
6884 static readonly sequenceSpeed: number;
6885 private _graphService;
6886 private _stateService;
6887 private _imagesAhead;
6890 private _direction$;
6891 private _directionSubject$;
6893 private _playingSubject$;
6895 private _speedSubject$;
6896 private _playingSubscription;
6897 private _cacheSubscription;
6898 private _clearSubscription;
6899 private _earthSubscription;
6900 private _graphModeSubscription;
6901 private _stopSubscription;
6902 private _subscriptions;
6904 constructor(graphService: GraphService, stateService: StateService);
6905 get playing(): boolean;
6906 get direction$(): Observable<NavigationDirection>;
6907 get playing$(): Observable<boolean>;
6908 get speed$(): Observable<number>;
6911 setDirection(direction: NavigationDirection): void;
6912 setSpeed(speed: number): void;
6915 private _mapImagesAhead;
6916 private _setPlaying;
6920 declare class Navigator {
6922 private _cacheService;
6923 private _graphService;
6924 private _loadingService;
6925 private _loadingName;
6926 private _panService;
6927 private _playService;
6928 private _stateService;
6929 private _idRequested$;
6930 private _movedToId$;
6932 private _requestSubscription;
6933 private _imageRequestSubscription;
6934 constructor(options: ViewerOptions, api?: APIWrapper, graphService?: GraphService, loadingService?: LoadingService, stateService?: StateService, cacheService?: CacheService, playService?: PlayService, panService?: PanService);
6935 get api(): APIWrapper;
6936 get cacheService(): CacheService;
6937 get graphService(): GraphService;
6938 get loadingService(): LoadingService;
6939 get movedToId$(): Observable<string>;
6940 get panService(): PanService;
6941 get playService(): PlayService;
6942 get stateService(): StateService;
6944 moveTo$(id: string): Observable<Image>;
6945 moveDir$(direction: NavigationDirection): Observable<Image>;
6946 setFilter$(filter: FilterExpression): Observable<void>;
6947 setAccessToken$(accessToken?: string): Observable<void>;
6949 private _abortRequest;
6950 private _makeRequest$;
6952 private _trajectoryIds$;
6955 declare class SubscriptionHolder {
6956 private _subscriptions;
6957 push(subscription: Subscription): void;
6958 unsubscribe(): void;
6961 interface IComponent {
6963 * Value indicating if the component is currently active.
6965 readonly activated: boolean;
6967 * Default configuration for the component.
6969 readonly defaultConfiguration: ComponentConfiguration;
6971 * The name of the component. Used when interacting with the
6972 * component through the Viewer's API.
6974 readonly name: string;
6976 * Configure the component.
6978 configure(configuration: ComponentConfiguration): void;
6984 declare type ComponentEventType = "geometrycreate" | "hover" | "markerdragend" | "markerdragstart" | "markerposition" | "playing" | "tagcreateend" | "tagcreatestart" | "tagmode" | "tags";
6986 declare abstract class Component<TConfiguration extends ComponentConfiguration> extends EventEmitter implements IComponent {
6987 static componentName: ComponentName | FallbackComponentName;
6988 protected _activated: boolean;
6989 protected _container: Container;
6990 protected _name: string;
6991 protected _navigator: Navigator;
6992 protected readonly _subscriptions: SubscriptionHolder;
6993 protected _activated$: BehaviorSubject<boolean>;
6994 protected _configuration$: Observable<TConfiguration>;
6995 protected _configurationSubject$: Subject<TConfiguration>;
6996 constructor(name: string, container: Container, navigator: Navigator);
7000 * @returns {boolean} Value indicating if the component is
7003 get activated(): boolean;
7005 get activated$(): Observable<boolean>;
7007 * Get default configuration.
7009 * @returns {TConfiguration} Default configuration for component.
7011 get defaultConfiguration(): TConfiguration;
7013 get configuration$(): Observable<TConfiguration>;
7017 * @description The name of the component. Used when interacting with the
7018 * component through the Viewer's API.
7022 activate(conf?: TConfiguration): void;
7024 * Configure the component.
7026 * @param configuration Component configuration.
7028 configure(configuration: TConfiguration): void;
7032 fire<T>(type: ComponentEventType, event: T): void;
7034 off<T>(type: ComponentEventType, handler: (event: T) => void): void;
7036 on<T>(type: ComponentEventType, handler: (event: T) => void): void;
7038 * Detect the viewer's new width and height and resize the component's
7039 * rendered elements accordingly if applicable.
7044 protected abstract _activate(): void;
7045 protected abstract _deactivate(): void;
7046 protected abstract _getDefaultConfiguration(): TConfiguration;
7050 * @class BearingComponent
7052 * @classdesc Component for indicating bearing and field of view.
7056 * var viewer = new Viewer({ ... });
7057 * var bearingComponent = viewer.getComponent("bearing");
7058 * bearingComponent.configure({ size: ComponentSize.Small });
7061 declare class BearingComponent extends Component<BearingConfiguration> {
7062 static componentName: ComponentName;
7064 private _viewportCoords;
7065 private _svgNamespace;
7066 private _distinctThreshold;
7067 private _animationSpeed;
7068 private _unitBezier;
7070 constructor(name: string, container: Container, navigator: Navigator);
7071 protected _activate(): void;
7072 protected _deactivate(): void;
7073 protected _getDefaultConfiguration(): BearingConfiguration;
7074 private _createFovIndicator;
7075 private _createFovArc;
7076 private _createCircleSectorCompass;
7077 private _createCircleSector;
7078 private _createNorth;
7079 private _createBackground;
7080 private _computeProjectedPoints;
7081 private _computeHorizontalFov;
7082 private _coordToFov;
7083 private _interpolate;
7086 declare class CacheComponent extends Component<CacheConfiguration> {
7087 static componentName: ComponentName;
7089 constructor(name: string, container: Container, navigator: Navigator);
7090 protected _activate(): void;
7091 protected _deactivate(): void;
7092 protected _getDefaultConfiguration(): CacheConfiguration;
7094 private _imageToEdges$;
7098 * Interface for general component events.
7100 interface ComponentEvent {
7102 * The component object that fired the event.
7108 type: ComponentEventType;
7112 * Interface for component hover events.
7114 interface ComponentHoverEvent extends ComponentEvent {
7116 * The image id corresponding to the element or object that
7117 * is being hovered. When the mouse leaves the element or
7118 * object the id will be null.
7127 * @classdesc Represents a geometry.
7129 declare abstract class Geometry {
7130 protected _notifyChanged$: Subject<Geometry>;
7132 * Create a geometry.
7139 * Get changed observable.
7141 * @description Emits the geometry itself every time the geometry
7144 * @returns {Observable<Geometry>} Observable emitting the geometry instance.
7147 get changed$(): Observable<Geometry>;
7149 * Get the 2D basic coordinates for the centroid of the geometry.
7151 * @returns {Array<number>} 2D basic coordinates representing the centroid.
7154 abstract getCentroid2d(): number[];
7156 * Get the 3D world coordinates for the centroid of the geometry.
7158 * @param {Transform} transform - The transform of the image related to the geometry.
7159 * @returns {Array<number>} 3D world coordinates representing the centroid.
7162 abstract getCentroid3d(transform: Transform): number[];
7164 * Set the 2D centroid of the geometry.
7166 * @param {Array<number>} value - The new value of the centroid in basic coordinates.
7167 * @param {Transform} transform - The transform of the image related to the geometry.
7170 abstract setCentroid2d(value: number[], transform: Transform): void;
7174 * Interface for component geometry events.
7176 interface ComponentGeometryEvent extends ComponentEvent {
7178 * Geometry related to the event.
7181 type: "geometrycreate";
7187 * @classdesc Represents an abstract marker class that should be extended
7188 * by marker implementations used in the marker component.
7190 declare abstract class Marker {
7191 protected _id: string;
7192 protected _geometry: Object3D;
7193 protected _lngLat: LngLat;
7194 constructor(id: string, lngLat: LngLat);
7197 * @returns {string} The id of the marker.
7205 get geometry(): Object3D;
7208 * @returns {LngLat} The geographic coordinates of the marker.
7210 get lngLat(): LngLat;
7212 createGeometry(position: number[]): void;
7214 disposeGeometry(): void;
7216 getInteractiveObjects(): Object3D[];
7218 lerpAltitude(alt: number, alpha: number): void;
7220 updatePosition(position: number[], lngLat?: LngLat): void;
7221 protected abstract _createGeometry(position: number[]): void;
7222 protected abstract _disposeGeometry(): void;
7223 protected abstract _getInteractiveObjects(): Object3D[];
7227 * Interface for component marker events.
7229 interface ComponentMarkerEvent extends ComponentEvent {
7231 * The marker that was affected by the event.
7234 type: "markerdragend" | "markerdragstart" | "markerposition";
7238 * Interface for component play events.
7240 interface ComponentPlayEvent extends ComponentEvent {
7242 * Value indiciating if the component is playing or not.
7249 * Interface for component state events.
7253 * // The `hover` event is an example of a `ComponentStateEvent`.
7254 * // Set up an event listener on the direction component.
7255 * var directionComponent = viewer.getComponent('direction');
7256 * directionComponent.on('hover', function(e) {
7257 * console.log('A hover event has occured');
7261 interface ComponentStateEvent extends ComponentEvent {
7262 type: "tagcreateend" | "tagcreatestart" | "tags";
7266 * Interface for component tag mode events.
7268 interface ComponentTagModeEvent extends ComponentEvent {
7270 * Value indicating the current tag mode of the component.
7277 * @class DirectionDOMRenderer
7278 * @classdesc DOM renderer for direction arrows.
7280 declare class DirectionDOMRenderer {
7282 private _calculator;
7286 private _highlightKey;
7287 private _distinguishSequence;
7288 private _needsRender;
7291 private _sphericalEdges;
7292 private _sequenceEdgeKeys;
7293 private _stepDirections;
7294 private _turnDirections;
7297 constructor(configuration: DirectionConfiguration, size: ViewportSize);
7301 * @returns {boolean} Value indicating whether render should be called.
7303 get needsRender(): boolean;
7305 * Renders virtual DOM elements.
7307 * @description Calling render resets the needs render property.
7309 render(navigator: Navigator): VNode;
7310 setEdges(edgeStatus: NavigationEdgeStatus, sequence: Sequence): void;
7312 * Set image for which to show edges.
7314 * @param {Image} image
7316 setImage(image: Image): void;
7318 * Set the render camera to use for calculating rotations.
7320 * @param {RenderCamera} renderCamera
7322 setRenderCamera(renderCamera: RenderCamera): void;
7324 * Set configuration values.
7326 * @param {DirectionConfiguration} configuration
7328 setConfiguration(configuration: DirectionConfiguration): void;
7330 * Detect the element's width and height and resize
7331 * elements accordingly.
7333 * @param {ViewportSize} size Size of vßiewer container element.
7335 resize(size: ViewportSize): void;
7336 private _setNeedsRender;
7337 private _clearEdges;
7339 private _createSphericalArrows;
7340 private _createSphericalToPerspectiveArrow;
7341 private _createPerspectiveToSphericalArrows;
7342 private _createStepArrows;
7343 private _createTurnArrows;
7344 private _createVNodeByKey;
7345 private _createVNodeByDirection;
7346 private _createVNodeByTurn;
7347 private _createVNodeInactive;
7348 private _createVNode;
7349 private _getContainer;
7353 * @class DirectionComponent
7354 * @classdesc Component showing navigation arrows for steps and turns.
7356 declare class DirectionComponent extends Component<DirectionConfiguration> {
7358 static componentName: ComponentName;
7360 private _hoveredIdSubject$;
7361 private _hoveredId$;
7363 constructor(name: string, container: Container, navigator: Navigator, directionDOMRenderer?: DirectionDOMRenderer);
7364 fire(type: "hover", event: ComponentHoverEvent): void;
7366 fire(type: ComponentEventType, event: ComponentStateEvent): void;
7367 off(type: "hover", handler: (event: ComponentHoverEvent) => void): void;
7369 off(type: ComponentEventType, handler: (event: ComponentStateEvent) => void): void;
7371 * Fired when the hovered element of a component changes.
7376 * // Initialize the viewer
7377 * var viewer = new Viewer({ // viewer options });
7378 * var component = viewer.getComponent('<component-name>');
7379 * // Set an event listener
7380 * component.on('hover', function() {
7381 * console.log("A hover event has occurred.");
7385 on(type: "hover", handler: (event: ComponentHoverEvent) => void): void;
7387 on(type: ComponentEventType, handler: (event: ComponentStateEvent) => void): void;
7388 protected _activate(): void;
7389 protected _deactivate(): void;
7390 protected _getDefaultConfiguration(): DirectionConfiguration;
7393 declare abstract class HandlerBase<TConfiguration extends ComponentConfiguration> {
7394 protected _component: Component<TConfiguration>;
7395 protected _container: Container;
7396 protected _navigator: Navigator;
7397 protected _enabled: boolean;
7399 constructor(component: Component<TConfiguration>, container: Container, navigator: Navigator);
7401 * Returns a Boolean indicating whether the interaction is enabled.
7403 * @returns {boolean} `true` if the interaction is enabled.
7405 get isEnabled(): boolean;
7407 * Enables the interaction.
7411 * <component-name>.<handler-name>.enable();
7416 * Disables the interaction.
7420 * <component-name>.<handler-name>.disable();
7424 protected abstract _enable(): void;
7425 protected abstract _disable(): void;
7426 protected abstract _getConfiguration(enable: boolean): TConfiguration;
7430 * The `KeySequenceNavigationHandler` allows the user to navigate through a sequence using the
7431 * following key commands:
7433 * `ALT` + `Up Arrow`: Navigate to next image in the sequence.
7434 * `ALT` + `Down Arrow`: Navigate to previous image in sequence.
7438 * var keyboardComponent = viewer.getComponent("keyboard");
7440 * keyboardComponent.keySequenceNavigation.disable();
7441 * keyboardComponent.keySequenceNavigation.enable();
7443 * var isEnabled = keyboardComponent.keySequenceNavigation.isEnabled;
7446 declare class KeySequenceNavigationHandler extends HandlerBase<KeyboardConfiguration> {
7447 private _keyDownSubscription;
7448 protected _enable(): void;
7449 protected _disable(): void;
7450 protected _getConfiguration(enable: boolean): KeyboardConfiguration;
7454 * The `KeySpatialNavigationHandler` allows the user to navigate through a sequence using the
7455 * following key commands:
7457 * `Up Arrow`: Step forward.
7458 * `Down Arrow`: Step backward.
7459 * `Left Arrow`: Step to the left.
7460 * `Rigth Arrow`: Step to the right.
7461 * `SHIFT` + `Down Arrow`: Turn around.
7462 * `SHIFT` + `Left Arrow`: Turn to the left.
7463 * `SHIFT` + `Rigth Arrow`: Turn to the right.
7467 * var keyboardComponent = viewer.getComponent("keyboard");
7469 * keyboardComponent.keySpatialNavigation.disable();
7470 * keyboardComponent.keySpatialNavigation.enable();
7472 * var isEnabled = keyboardComponent.keySpatialNavigation.isEnabled;
7475 declare class KeySpatialNavigationHandler extends HandlerBase<KeyboardConfiguration> {
7477 private _keyDownSubscription;
7479 constructor(component: Component<KeyboardConfiguration>, container: Container, navigator: Navigator, spatial: Spatial);
7480 protected _enable(): void;
7481 protected _disable(): void;
7482 protected _getConfiguration(enable: boolean): KeyboardConfiguration;
7485 private _rotationFromCamera;
7489 * The `KeyZoomHandler` allows the user to zoom in and out using the
7490 * following key commands:
7497 * var keyboardComponent = viewer.getComponent("keyboard");
7499 * keyboardComponent.keyZoom.disable();
7500 * keyboardComponent.keyZoom.enable();
7502 * var isEnabled = keyboardComponent.keyZoom.isEnabled;
7505 declare class KeyZoomHandler extends HandlerBase<KeyboardConfiguration> {
7506 private _keyDownSubscription;
7507 private _viewportCoords;
7509 constructor(component: Component<KeyboardConfiguration>, container: Container, navigator: Navigator, viewportCoords: ViewportCoords);
7510 protected _enable(): void;
7511 protected _disable(): void;
7512 protected _getConfiguration(enable: boolean): KeyboardConfiguration;
7516 * The `KeyPlayHandler` allows the user to control the play behavior
7517 * using the following key commands:
7519 * `Spacebar`: Start or stop playing.
7520 * `SHIFT` + `D`: Switch direction.
7521 * `<`: Decrease speed.
7522 * `>`: Increase speed.
7526 * var keyboardComponent = viewer.getComponent("keyboard");
7528 * keyboardComponent.keyPlay.disable();
7529 * keyboardComponent.keyPlay.enable();
7531 * var isEnabled = keyboardComponent.keyPlay.isEnabled;
7534 declare class KeyPlayHandler extends HandlerBase<KeyboardConfiguration> {
7535 private _keyDownSubscription;
7536 protected _enable(): void;
7537 protected _disable(): void;
7538 protected _getConfiguration(enable: boolean): KeyboardConfiguration;
7542 * @class KeyboardComponent
7544 * @classdesc Component for keyboard event handling.
7546 * To retrive and use the keyboard component
7550 * var viewer = new Viewer({ ... });
7552 * var keyboardComponent = viewer.getComponent("keyboard");
7555 declare class KeyboardComponent extends Component<KeyboardConfiguration> {
7556 static componentName: ComponentName;
7557 private _keyPlayHandler;
7558 private _keySequenceNavigationHandler;
7559 private _keySpatialNavigationHandler;
7560 private _keyZoomHandler;
7562 constructor(name: string, container: Container, navigator: Navigator);
7566 * @returns {KeyPlayHandler} The key play handler.
7568 get keyPlay(): KeyPlayHandler;
7570 * Get key sequence navigation.
7572 * @returns {KeySequenceNavigationHandler} The key sequence navigation handler.
7574 get keySequenceNavigation(): KeySequenceNavigationHandler;
7578 * @returns {KeySpatialNavigationHandler} The spatial handler.
7580 get keySpatialNavigation(): KeySpatialNavigationHandler;
7584 * @returns {KeyZoomHandler} The key zoom handler.
7586 get keyZoom(): KeyZoomHandler;
7587 protected _activate(): void;
7588 protected _deactivate(): void;
7589 protected _getDefaultConfiguration(): KeyboardConfiguration;
7593 * @interface CircleMarkerOptions
7595 * Interface that represents the options for configuring a `CircleMarker`.
7597 interface CircleMarkerOptions {
7599 * The color of the marker.
7603 color?: number | string;
7605 * The opacity of the marker.
7611 * The radius of the circle in meters.
7619 * @class CircleMarker
7621 * @classdesc Non-interactive marker with a flat circle shape. The circle
7622 * marker can not be configured to be interactive.
7624 * Circle marker properties can not be updated after creation.
7626 * To create and add one `CircleMarker` with default configuration
7627 * and one with configuration use
7631 * var defaultMarker = new CircleMarker(
7633 * { lat: 0, lng: 0, });
7635 * var configuredMarker = new CircleMarker(
7637 * { lat: 0, lng: 0, },
7644 * markerComponent.add([defaultMarker, configuredMarker]);
7647 declare class CircleMarker extends Marker {
7651 constructor(id: string, lngLat: LngLat, options?: CircleMarkerOptions);
7652 protected _createGeometry(position: number[]): void;
7653 protected _disposeGeometry(): void;
7654 protected _getInteractiveObjects(): Object3D[];
7658 * @class MarkerComponent
7660 * @classdesc Component for showing and editing 3D marker objects.
7662 * The `add` method is used for adding new markers or replacing
7663 * markers already in the set.
7665 * If a marker already in the set has the same
7666 * id as one of the markers added, the old marker will be removed and
7667 * the added marker will take its place.
7669 * It is not possible to update markers in the set by updating any properties
7670 * directly on the marker object. Markers need to be replaced by
7671 * re-adding them for updates to geographic position or configuration
7674 * Markers added to the marker component can be either interactive
7675 * or non-interactive. Different marker types define their behavior.
7676 * Markers with interaction support can be configured with options
7677 * to respond to dragging inside the viewer and be detected when
7678 * retrieving markers from pixel points with the `getMarkerIdAt` method.
7680 * To retrive and use the marker component
7684 * var viewer = new Viewer({ component: { marker: true }, ... });
7686 * var markerComponent = viewer.getComponent("marker");
7689 declare class MarkerComponent extends Component<MarkerConfiguration> {
7690 static componentName: ComponentName;
7691 private _graphCalculator;
7692 private _markerScene;
7694 private _viewportCoords;
7695 private _relativeGroundAltitude;
7697 constructor(name: string, container: Container, navigator: Navigator);
7699 * Add markers to the marker set or replace markers in the marker set.
7701 * @description If a marker already in the set has the same
7702 * id as one of the markers added, the old marker will be removed
7703 * the added marker will take its place.
7705 * Any marker inside the visible bounding bbox
7706 * will be initialized and placed in the viewer.
7708 * @param {Array<Marker>} markers - Markers to add.
7712 * markerComponent.add([marker1, marker2]);
7715 add(markers: Marker[]): void;
7716 fire(type: "markerdragend" | "markerdragstart" | "markerposition", event: ComponentMarkerEvent): void;
7718 fire(type: ComponentEventType, event: ComponentEvent): void;
7720 * Returns the marker in the marker set with the specified id, or
7721 * undefined if the id matches no marker.
7723 * @param {string} markerId - Id of the marker.
7727 * var marker = markerComponent.get("markerId");
7731 get(markerId: string): Marker;
7733 * Returns an array of all markers.
7737 * var markers = markerComponent.getAll();
7742 * Returns the id of the interactive marker closest to the current camera
7743 * position at the specified point.
7745 * @description Notice that the pixelPoint argument requires x, y
7746 * coordinates from pixel space.
7748 * With this function, you can use the coordinates provided by mouse
7749 * events to get information out of the marker component.
7751 * If no interactive geometry of an interactive marker exist at the pixel
7752 * point, `null` will be returned.
7754 * @param {Array<number>} pixelPoint - Pixel coordinates on the viewer element.
7755 * @returns {string} Id of the interactive marker closest to the camera. If no
7756 * interactive marker exist at the pixel point, `null` will be returned.
7760 * markerComponent.getMarkerIdAt([100, 100])
7761 * .then((markerId) => { console.log(markerId); });
7764 getMarkerIdAt(pixelPoint: number[]): Promise<string>;
7766 * Check if a marker exist in the marker set.
7768 * @param {string} markerId - Id of the marker.
7772 * var markerExists = markerComponent.has("markerId");
7775 has(markerId: string): boolean;
7776 off(type: "markerdragend" | "markerdragstart" | "markerposition", handler: (event: ComponentMarkerEvent) => void): void;
7778 off(type: ComponentEventType, handler: (event: ComponentEvent) => void): void;
7780 * Fired when a marker drag interaction ends.
7782 * @event markerdragend
7785 * // Initialize the viewer
7786 * var viewer = new Viewer({ // viewer options });
7787 * var component = viewer.getComponent('<component-name>');
7788 * // Set an event listener
7789 * component.on('markerdragend', function() {
7790 * console.log("A markerdragend event has occurred.");
7794 on(type: "markerdragend", handler: (event: ComponentMarkerEvent) => void): void;
7796 * Fired when a marker drag interaction starts.
7798 * @event markerdragstart
7801 * // Initialize the viewer
7802 * var viewer = new Viewer({ // viewer options });
7803 * var component = viewer.getComponent('<component-name>');
7804 * // Set an event listener
7805 * component.on('markerdragstart', function() {
7806 * console.log("A markerdragstart event has occurred.");
7810 on(type: "markerdragstart", handler: (event: ComponentMarkerEvent) => void): void;
7812 * Fired when the position of a marker is changed.
7814 * @event markerposition
7817 * // Initialize the viewer
7818 * var viewer = new Viewer({ // viewer options });
7819 * var component = viewer.getComponent('<component-name>');
7820 * // Set an event listener
7821 * component.on('markerposition', function() {
7822 * console.log("A markerposition event has occurred.");
7826 on(type: "markerposition", handler: (event: ComponentMarkerEvent) => void): void;
7828 * Remove markers with the specified ids from the marker set.
7830 * @param {Array<string>} markerIds - Ids for markers to remove.
7834 * markerComponent.remove(["id-1", "id-2"]);
7837 remove(markerIds: string[]): void;
7839 * Remove all markers from the marker set.
7843 * markerComponent.removeAll();
7847 protected _activate(): void;
7848 protected _deactivate(): void;
7849 protected _getDefaultConfiguration(): MarkerConfiguration;
7853 * @interface SimpleMarkerOptions
7855 * Interface that represents the options for configuring a `SimpleMarker`.
7857 interface SimpleMarkerOptions {
7859 * The color of the ball inside the marker.
7863 ballColor?: number | string;
7865 * The opacity of the ball inside the marker.
7869 ballOpacity?: number;
7871 * The color of the ice creame shape.
7875 color?: number | string;
7877 * Value indicating if the marker should be interactive or not.
7879 * @description If the marker is configured to be interactive
7880 * it will be draggable in the viewer and retrievable with the
7881 * `getMarkerIdAt` method on the `MarkerComponent`.
7885 interactive?: boolean;
7887 * The opacity of the ice creame shape.
7893 * The radius of the ice cream shape in meters.
7901 * @class SimpleMarker
7903 * @classdesc Interactive marker with ice cream shape. The sphere
7904 * inside the ice cream can be configured to be interactive.
7906 * Simple marker properties can not be updated after creation.
7908 * To create and add one `SimpleMarker` with default configuration
7909 * (non-interactive) and one interactive with configuration use
7913 * var defaultMarker = new SimpleMarker(
7915 * { lat: 0, lng: 0, });
7917 * var interactiveMarker = new SimpleMarker(
7919 * { lat: 0, lng: 0, },
7921 * ballColor: "#00f",
7924 * interactive: true,
7929 * markerComponent.add([defaultMarker, interactiveMarker]);
7932 declare class SimpleMarker extends Marker {
7934 private _ballOpacity;
7935 private _circleToRayAngle;
7937 private _interactive;
7940 constructor(id: string, lngLat: LngLat, options?: SimpleMarkerOptions);
7941 protected _createGeometry(position: number[]): void;
7942 protected _disposeGeometry(): void;
7943 protected _getInteractiveObjects(): Object3D[];
7944 private _markerHeight;
7945 private _createMarkerGeometry;
7949 * The `DragPanHandler` allows the user to pan the viewer image by clicking and dragging the cursor.
7953 * var pointerComponent = viewer.getComponent("pointer");
7955 * pointerComponent.dragPan.disable();
7956 * pointerComponent.dragPan.enable();
7958 * var isEnabled = pointerComponent.dragPan.isEnabled;
7961 declare class DragPanHandler extends HandlerBase<PointerConfiguration> {
7963 private _viewportCoords;
7964 private _activeMouseSubscription;
7965 private _activeTouchSubscription;
7966 private _preventDefaultSubscription;
7967 private _rotateSubscription;
7968 private _rotateWithoutInertiaSubscription;
7970 constructor(component: Component<PointerConfiguration>, container: Container, navigator: Navigator, viewportCoords: ViewportCoords, spatial: Spatial);
7971 protected _enable(): void;
7972 protected _disable(): void;
7973 protected _getConfiguration(enable: boolean): PointerConfiguration;
7974 private _drainBuffer;
7977 declare class EarthControlHandler extends HandlerBase<PointerConfiguration> {
7978 private _viewportCoords;
7980 private _subscriptions;
7982 constructor(component: Component<PointerConfiguration>, container: Container, navigator: Navigator, viewportCoords: ViewportCoords, spatial: Spatial);
7983 protected _enable(): void;
7984 protected _disable(): void;
7985 protected _getConfiguration(): PointerConfiguration;
7986 private _eventToViewport;
7987 private _mousePairToRotation;
7988 private _planeIntersection;
7992 * The `ScrollZoomHandler` allows the user to zoom the viewer image by scrolling.
7996 * var pointerComponent = viewer.getComponent("pointer");
7998 * pointerComponent.scrollZoom.disable();
7999 * pointerComponent.scrollZoom.enable();
8001 * var isEnabled = pointerComponent.scrollZoom.isEnabled;
8004 declare class ScrollZoomHandler extends HandlerBase<PointerConfiguration> {
8005 private _viewportCoords;
8006 private _preventDefaultSubscription;
8007 private _zoomSubscription;
8009 constructor(component: Component<PointerConfiguration>, container: Container, navigator: Navigator, viewportCoords: ViewportCoords);
8010 protected _enable(): void;
8011 protected _disable(): void;
8012 protected _getConfiguration(enable: boolean): PointerConfiguration;
8016 * The `TouchZoomHandler` allows the user to zoom the viewer image by pinching on a touchscreen.
8020 * var pointerComponent = viewer.getComponent("pointer");
8022 * pointerComponent.touchZoom.disable();
8023 * pointerComponent.touchZoom.enable();
8025 * var isEnabled = pointerComponent.touchZoom.isEnabled;
8028 declare class TouchZoomHandler extends HandlerBase<PointerConfiguration> {
8029 private _viewportCoords;
8030 private _activeSubscription;
8031 private _preventDefaultSubscription;
8032 private _zoomSubscription;
8034 constructor(component: Component<PointerConfiguration>, container: Container, navigator: Navigator, viewportCoords: ViewportCoords);
8035 protected _enable(): void;
8036 protected _disable(): void;
8037 protected _getConfiguration(enable: boolean): PointerConfiguration;
8041 * @class PointerComponent
8043 * @classdesc Component handling mouse, pen, and touch events for camera movement.
8045 * To retrive and use the mouse component
8049 * var viewer = new Viewer({ ... });
8051 * var pointerComponent = viewer.getComponent("pointer");
8054 declare class PointerComponent extends Component<PointerConfiguration> {
8056 static componentName: ComponentName;
8057 private _bounceHandler;
8058 private _dragPanHandler;
8059 private _earthControlHandler;
8060 private _scrollZoomHandler;
8061 private _touchZoomHandler;
8063 constructor(name: string, container: Container, navigator: Navigator);
8067 * @returns {DragPanHandler} The drag pan handler.
8069 get dragPan(): DragPanHandler;
8071 * Get earth control.
8073 * @returns {EarthControlHandler} The earth control handler.
8075 get earthControl(): EarthControlHandler;
8079 * @returns {ScrollZoomHandler} The scroll zoom handler.
8081 get scrollZoom(): ScrollZoomHandler;
8085 * @returns {TouchZoomHandler} The touch zoom handler.
8087 get touchZoom(): TouchZoomHandler;
8088 protected _activate(): void;
8089 protected _deactivate(): void;
8090 protected _getDefaultConfiguration(): PointerConfiguration;
8094 * Interface for the popup offset with respect to its anchor point.
8096 * @description An object of number arrays specifing an offset for
8097 * each float direction. Negative offsets indicate left and up.
8105 * bottomLeft: [-10, 10],
8106 * bottomRight: [10, 10],
8111 * topLeft: [-10, -10],
8112 * topRight: [10, -10],
8115 * var popup = new Popup({ offset: offset });
8118 interface PopupOffset {
8120 bottomLeft: number[];
8121 bottomRight: number[];
8131 * Interface for the options that define behavior and
8132 * appearance of a popup.
8136 interface PopupOptions {
8138 * Specify if the popup should capture pointer events.
8140 * @description If the popup is specified to not capture
8141 * pointer events the provided content can still override
8142 * this behavior for the individual content HTML elements
8143 * by specifying the appropriate CSS.
8147 capturePointer?: boolean;
8149 * Specify that the popup should not have any tooltip
8150 * like visuals around the provided content.
8156 * The direction in which the popup floats with respect to the
8157 * anchor point or points. If no value is supplied the popup
8158 * will change float automatically based on the its position
8159 * in the viewport so that as much of its area as possible is
8162 * @description For automatic floating (undefined) the popup
8163 * will float in eight directions around a point or a position
8164 * in a rect. When a rectangle is set without a position option
8165 * specified, the popup will float outward from the rectangle
8166 * center based on the side it is currently rendered in. The
8167 * default floating direction is to the bottom for both points
8170 * @default undefined
8174 * A pixel offset applied to the popup's location specfied as:
8176 * - A single number in pixels in the float direction that the popup
8177 * will be translated with respect to the current anchor point.
8179 * - An object of number arrays specifing an offset for
8180 * each float direction. Negative offsets indicate left and up.
8184 offset?: number | PopupOffset;
8186 * Opacity of the popup visuals.
8192 * The popup position in a rectangle (does not apply to points).
8193 * When not set the popup will change position automatically
8194 * based on the viewport so that as much of it as possible is
8197 * @default undefined
8199 position?: Alignment;
8205 * @classdesc Popup instance for rendering custom HTML content
8206 * on top of images. Popups are based on 2D basic image coordinates
8207 * (see the {@link Viewer} class documentation for more information about coordinate
8208 * systems) and a certain popup is therefore only relevant to a single image.
8209 * Popups related to a certain image should be removed when moving
8212 * A popup must have both its content and its point or rect set to be
8213 * rendered. Popup options can not be updated after creation but the
8214 * basic point or rect as well as its content can be changed by calling
8215 * the appropriate methods.
8217 * To create and add one `Popup` with default configuration
8218 * (tooltip visuals and automatic float) and one with specific options
8223 * var defaultSpan = document.createElement('span');
8224 * defaultSpan.innerHTML = 'hello default';
8226 * var defaultPopup = new Popup();
8227 * defaultPopup.setDOMContent(defaultSpan);
8228 * defaultPopup.setBasicPoint([0.3, 0.3]);
8230 * var cleanSpan = document.createElement('span');
8231 * cleanSpan.innerHTML = 'hello clean';
8233 * var cleanPopup = new Popup({
8235 * float: Alignment.Top,
8240 * cleanPopup.setDOMContent(cleanSpan);
8241 * cleanPopup.setBasicPoint([0.6, 0.6]);
8243 * popupComponent.add([defaultPopup, cleanPopup]);
8246 * @description Implementation of API methods and API documentation inspired
8247 * by/used from https://github.com/mapbox/mapbox-gl-js/blob/v0.38.0/src/ui/popup.js
8249 declare class Popup {
8250 protected _notifyChanged$: Subject<Popup>;
8253 private _parentContainer;
8259 private _viewportCoords;
8260 constructor(options?: PopupOptions, viewportCoords?: ViewportCoords, dom?: DOM);
8262 * @description Internal observable used by the component to
8263 * render the popup when its position or content has changed.
8266 get changed$(): Observable<Popup>;
8268 * @description Internal method used by the component to
8269 * remove all references to the popup.
8274 * Sets a 2D basic image coordinates point to the popup's anchor, and
8275 * moves the popup to it.
8277 * @description Overwrites any previously set point or rect.
8279 * @param {Array<number>} basicPoint - Point in 2D basic image coordinates.
8283 * var popup = new Popup();
8284 * popup.setText('hello image');
8285 * popup.setBasicPoint([0.3, 0.3]);
8287 * popupComponent.add([popup]);
8290 setBasicPoint(basicPoint: number[]): void;
8292 * Sets a 2D basic image coordinates rect to the popup's anchor, and
8293 * moves the popup to it.
8295 * @description Overwrites any previously set point or rect.
8297 * @param {Array<number>} basicRect - Rect in 2D basic image
8298 * coordinates ([topLeftX, topLeftY, bottomRightX, bottomRightY]) .
8302 * var popup = new Popup();
8303 * popup.setText('hello image');
8304 * popup.setBasicRect([0.3, 0.3, 0.5, 0.6]);
8306 * popupComponent.add([popup]);
8309 setBasicRect(basicRect: number[]): void;
8311 * Sets the popup's content to the element provided as a DOM node.
8313 * @param {Node} htmlNode - A DOM node to be used as content for the popup.
8317 * var div = document.createElement('div');
8318 * div.innerHTML = 'hello image';
8320 * var popup = new Popup();
8321 * popup.setDOMContent(div);
8322 * popup.setBasicPoint([0.3, 0.3]);
8324 * popupComponent.add([popup]);
8327 setDOMContent(htmlNode: Node): void;
8329 * Sets the popup's content to the HTML provided as a string.
8331 * @description This method does not perform HTML filtering or sanitization,
8332 * and must be used only with trusted content. Consider
8333 * {@link Popup.setText} if the
8334 * content is an untrusted text string.
8336 * @param {string} html - A string representing HTML content for the popup.
8340 * var popup = new Popup();
8341 * popup.setHTML('<div>hello image</div>');
8342 * popup.setBasicPoint([0.3, 0.3]);
8344 * popupComponent.add([popup]);
8347 setHTML(html: string): void;
8349 * Sets the popup's content to a string of text.
8351 * @description This function creates a Text node in the DOM, so it cannot insert raw HTML.
8352 * Use this method for security against XSS if the popup content is user-provided.
8354 * @param {string} text - Textual content for the popup.
8358 * var popup = new Popup();
8359 * popup.setText('hello image');
8360 * popup.setBasicPoint([0.3, 0.3]);
8362 * popupComponent.add([popup]);
8365 setText(text: string): void;
8367 * @description Internal method for attaching the popup to
8368 * its parent container so that it is rendered in the DOM tree.
8371 setParentContainer(parentContainer: HTMLElement): void;
8373 * @description Internal method for updating the rendered
8374 * position of the popup called by the popup component.
8377 update(renderCamera: RenderCamera, size: ViewportSize, transform: Transform): void;
8378 private _rectToPixel;
8379 private _alignmentToPopupAligment;
8380 private _normalizeOffset;
8381 private _pixelToFloats;
8382 private _pointFromRectPosition;
8386 * @class PopupComponent
8388 * @classdesc Component for showing HTML popup objects.
8390 * The `add` method is used for adding new popups. Popups are removed by reference.
8392 * It is not possible to update popups in the set by updating any properties
8393 * directly on the popup object. Popups need to be replaced by
8394 * removing them and creating new ones with relevant changed properties and
8395 * adding those instead.
8397 * Popups are only relevant to a single image because they are based on
8398 * 2D basic image coordinates. Popups related to a certain image should
8399 * be removed when the viewer is moved to another image.
8401 * To retrive and use the popup component
8405 * var viewer = new Viewer({ component: { popup: true }, ... });
8407 * var popupComponent = viewer.getComponent("popup");
8410 declare class PopupComponent extends Component<ComponentConfiguration> {
8411 static componentName: ComponentName;
8413 private _popupContainer;
8418 constructor(name: string, container: Container, navigator: Navigator, dom?: DOM);
8420 * Add popups to the popups set.
8422 * @description Adding a new popup never replaces an old one
8423 * because they are stored by reference. Adding an already
8424 * existing popup has no effect.
8426 * @param {Array<Popup>} popups - Popups to add.
8430 * popupComponent.add([popup1, popup2]);
8433 add(popups: Popup[]): void;
8435 * Returns an array of all popups.
8439 * var popups = popupComponent.getAll();
8444 * Remove popups based on reference from the popup set.
8446 * @param {Array<Popup>} popups - Popups to remove.
8450 * popupComponent.remove([popup1, popup2]);
8453 remove(popups: Popup[]): void;
8455 * Remove all popups from the popup set.
8459 * popupComponent.removeAll();
8463 protected _activate(): void;
8464 protected _deactivate(): void;
8465 protected _getDefaultConfiguration(): ComponentConfiguration;
8469 declare class SequenceDOMRenderer {
8471 private _minThresholdWidth;
8472 private _maxThresholdWidth;
8473 private _minThresholdHeight;
8474 private _maxThresholdHeight;
8475 private _stepperDefaultWidth;
8476 private _controlsDefaultWidth;
8477 private _defaultHeight;
8478 private _expandControls;
8481 private _changingSpeed;
8483 private _changingPosition;
8484 private _mouseEnterDirection$;
8485 private _mouseLeaveDirection$;
8486 private _notifyChanged$;
8487 private _notifyChangingPositionChanged$;
8488 private _notifySpeedChanged$;
8489 private _notifyIndexChanged$;
8490 private _changingSubscription;
8491 constructor(container: Container);
8492 get changed$(): Observable<SequenceDOMRenderer>;
8493 get changingPositionChanged$(): Observable<boolean>;
8494 get speed$(): Observable<number>;
8495 get index$(): Observable<number>;
8496 get mouseEnterDirection$(): Observable<NavigationDirection>;
8497 get mouseLeaveDirection$(): Observable<NavigationDirection>;
8500 render(edgeStatus: NavigationEdgeStatus, configuration: SequenceConfiguration, containerWidth: number, speed: number, index: number, max: number, playEnabled: boolean, component: SequenceComponent, navigator: Navigator): VNode;
8501 getContainerWidth(size: ViewportSize, configuration: SequenceConfiguration): number;
8502 private _createPositionInput;
8503 private _createSpeedInput;
8504 private _createPlaybackControls;
8505 private _createPlayingButton;
8506 private _createSequenceControls;
8507 private _createSequenceArrows;
8508 private _createStepper;
8509 private _createTimelineControls;
8510 private _getStepClassName;
8511 private _setChangingPosition;
8515 * @class SequenceComponent
8516 * @classdesc Component showing navigation arrows for sequence directions
8517 * as well as playing button. Exposes an API to start and stop play.
8519 declare class SequenceComponent extends Component<SequenceConfiguration> {
8521 static componentName: ComponentName;
8522 private _sequenceDOMRenderer;
8524 private _hoveredIdSubject$;
8525 private _hoveredId$;
8526 private _containerWidth$;
8527 constructor(name: string, container: Container, navigator: Navigator, renderer?: SequenceDOMRenderer, scheduler?: Scheduler);
8528 fire(type: "hover", event: ComponentHoverEvent): void;
8529 fire(type: "playing", event: ComponentPlayEvent): void;
8530 off(type: "hover", handler: (event: ComponentHoverEvent) => void): void;
8531 off(type: "playing", handler: (event: ComponentPlayEvent) => void): void;
8533 * Fired when the hovered element of a component changes.
8538 * // Initialize the viewer
8539 * var viewer = new Viewer({ // viewer options });
8540 * var component = viewer.getComponent('<component-name>');
8541 * // Set an event listener
8542 * component.on('hover', function() {
8543 * console.log("A hover event has occurred.");
8547 on(type: "hover", handler: (event: ComponentHoverEvent) => void): void;
8549 * Event fired when playing starts or stops.
8554 * // Initialize the viewer
8555 * var viewer = new Viewer({ // viewer options });
8556 * var component = viewer.getComponent('<component-name>');
8557 * // Set an event listener
8558 * component.on('playing', function() {
8559 * console.log("A playing event has occurred.");
8563 on(type: "playing", handler: (event: ComponentPlayEvent) => void): void;
8576 protected _activate(): void;
8577 protected _deactivate(): void;
8578 protected _getDefaultConfiguration(): SequenceConfiguration;
8582 * @class SliderComponent
8584 * @classdesc Component for comparing pairs of images. Renders
8585 * a slider for adjusting the curtain of the first image.
8587 * Deactivate the sequence, direction and image plane
8588 * components when activating the slider component to avoid
8589 * interfering UI elements.
8591 * To retrive and use the slider component
8595 * var viewer = new Viewer({ ... });
8597 * viewer.deactivateComponent("image");
8598 * viewer.deactivateComponent("direction");
8599 * viewer.deactivateComponent("sequence");
8601 * viewer.activateComponent("slider");
8603 * var sliderComponent = viewer.getComponent("slider");
8606 declare class SliderComponent extends Component<SliderConfiguration> {
8607 static componentName: ComponentName;
8608 private _viewportCoords;
8609 private _domRenderer;
8610 private _imageTileLoader;
8611 private _roiCalculator;
8613 private _glRendererOperation$;
8614 private _glRenderer$;
8615 private _glRendererCreator$;
8616 private _glRendererDisposer$;
8617 private _waitSubscription;
8619 constructor(name: string, container: Container, navigator: Navigator, viewportCoords?: ViewportCoords);
8620 protected _activate(): void;
8621 protected _deactivate(): void;
8622 protected _getDefaultConfiguration(): SliderConfiguration;
8623 private _catchCacheImage$;
8624 private _getBasicCorners;
8625 private _clipBoundingBox;
8628 declare class SpatialComponent extends Component<SpatialConfiguration> {
8629 static componentName: ComponentName;
8632 private _viewportCoords;
8635 constructor(name: string, container: Container, navigator: Navigator);
8637 * Returns the image id of the camera frame closest to the current
8638 * render camera position at the specified point.
8640 * @description Notice that the pixelPoint argument requires x, y
8641 * coordinates from pixel space.
8643 * With this function, you can use the coordinates provided by mouse
8644 * events to get information out of the spatial component.
8646 * If no camera frame exist at the pixel
8647 * point, `null` will be returned.
8649 * @param {Array<number>} pixelPoint - Pixel coordinates on
8650 * the viewer element.
8651 * @returns {string} Image id of the camera frame closest to
8652 * the camera. If no camera frame is intersected at the
8653 * pixel point, `null` will be returned.
8657 * spatialComponent.getFrameIdAt([100, 125])
8658 * .then((imageId) => { console.log(imageId); });
8661 getFrameIdAt(pixelPoint: number[]): Promise<string>;
8662 protected _activate(): void;
8663 protected _deactivate(): void;
8664 protected _getDefaultConfiguration(): SpatialConfiguration;
8665 private _addSceneImages;
8666 private _cellsInFov;
8667 private _computeOriginalPosition;
8668 private _cellToTopocentric;
8669 private _computeTranslation;
8670 private _createTransform;
8673 declare class GeometryTagError extends MapillaryError {
8674 constructor(message?: string);
8678 * @class PointGeometry
8680 * @classdesc Represents a point geometry in the 2D basic image coordinate system.
8684 * var basicPoint = [0.5, 0.7];
8685 * var pointGeometry = new PointGeometry(basicPoint);
8688 declare class PointGeometry extends Geometry {
8691 * Create a point geometry.
8694 * @param {Array<number>} point - An array representing the basic coordinates of
8697 * @throws {GeometryTagError} Point coordinates must be valid basic coordinates.
8699 constructor(point: number[]);
8701 * Get point property.
8702 * @returns {Array<number>} Array representing the basic coordinates of the point.
8704 get point(): number[];
8706 * Get the 2D basic coordinates for the centroid of the point, i.e. the 2D
8707 * basic coordinates of the point itself.
8709 * @returns {Array<number>} 2D basic coordinates representing the centroid.
8712 getCentroid2d(): number[];
8714 * Get the 3D world coordinates for the centroid of the point, i.e. the 3D
8715 * world coordinates of the point itself.
8717 * @param {Transform} transform - The transform of the image related to the point.
8718 * @returns {Array<number>} 3D world coordinates representing the centroid.
8721 getCentroid3d(transform: Transform): number[];
8723 * Set the centroid of the point, i.e. the point coordinates.
8725 * @param {Array<number>} value - The new value of the centroid.
8726 * @param {Transform} transform - The transform of the image related to the point.
8729 setCentroid2d(value: number[], transform: Transform): void;
8733 * @class PointsGeometry
8735 * @classdesc Represents a point set in the 2D basic image coordinate system.
8739 * var points = [[0.5, 0.3], [0.7, 0.3], [0.6, 0.5]];
8740 * var pointsGeometry = new PointsGeometry(points);
8743 declare class PointsGeometry extends Geometry {
8746 * Create a points geometry.
8749 * @param {Array<Array<number>>} points - Array of 2D points on the basic coordinate
8750 * system. The number of points must be greater than or equal to two.
8752 * @throws {GeometryTagError} Point coordinates must be valid basic coordinates.
8754 constructor(points: number[][]);
8756 * Get points property.
8757 * @returns {Array<Array<number>>} Array of 2d points.
8759 get points(): number[][];
8761 * Add a point to the point set.
8763 * @param {Array<number>} point - Point to add.
8766 addPoint2d(point: number[]): void;
8768 * Get the coordinates of a point from the point set representation of the geometry.
8770 * @param {number} index - Point index.
8771 * @returns {Array<number>} Array representing the 2D basic coordinates of the point.
8774 getPoint2d(index: number): number[];
8776 * Remove a point from the point set.
8778 * @param {number} index - The index of the point to remove.
8781 removePoint2d(index: number): void;
8783 setVertex2d(index: number, value: number[], transform: Transform): void;
8785 setPoint2d(index: number, value: number[], transform: Transform): void;
8787 getPoints3d(transform: Transform): number[][];
8789 getPoint3d(index: number, transform: Transform): number[];
8791 getPoints2d(): number[][];
8793 getCentroid2d(transform?: Transform): number[];
8795 getCentroid3d(transform: Transform): number[];
8797 getRect2d(transform: Transform): number[];
8799 setCentroid2d(value: number[], transform: Transform): void;
8800 private _getPoints3d;
8804 * @class VertexGeometry
8806 * @classdesc Represents a vertex geometry.
8808 declare abstract class VertexGeometry extends Geometry {
8809 private _subsampleThreshold;
8811 * Create a vertex geometry.
8818 * Get the 3D coordinates for the vertices of the geometry with possibly
8819 * subsampled points along the lines.
8821 * @param {Transform} transform - The transform of the image related to
8823 * @returns {Array<Array<number>>} Polygon array of 3D world coordinates
8824 * representing the geometry.
8827 abstract getPoints3d(transform: Transform): number[][];
8829 * Get the polygon pole of inaccessibility, the most
8830 * distant internal point from the polygon outline.
8832 * @returns {Array<number>} 2D basic coordinates for the pole of inaccessibility.
8835 abstract getPoleOfInaccessibility2d(): number[];
8837 * Get the polygon pole of inaccessibility, the most
8838 * distant internal point from the polygon outline.
8840 * @param transform - The transform of the image related to
8842 * @returns {Array<number>} 3D world coordinates for the pole of inaccessibility.
8845 abstract getPoleOfInaccessibility3d(transform: Transform): number[];
8847 * Get the coordinates of a vertex from the polygon representation of the geometry.
8849 * @param {number} index - Vertex index.
8850 * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
8853 abstract getVertex2d(index: number): number[];
8855 * Get a vertex from the polygon representation of the 3D coordinates for the
8856 * vertices of the geometry.
8858 * @param {number} index - Vertex index.
8859 * @param {Transform} transform - The transform of the image related to the geometry.
8860 * @returns {Array<number>} Array representing the 3D world coordinates of the vertex.
8863 abstract getVertex3d(index: number, transform: Transform): number[];
8865 * Get a polygon representation of the 2D basic coordinates for the vertices of the geometry.
8867 * @returns {Array<Array<number>>} Polygon array of 2D basic coordinates representing
8868 * the vertices of the geometry.
8871 abstract getVertices2d(): number[][];
8873 * Get a polygon representation of the 3D world coordinates for the vertices of the geometry.
8875 * @param {Transform} transform - The transform of the image related to the geometry.
8876 * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
8877 * the vertices of the geometry.
8880 abstract getVertices3d(transform: Transform): number[][];
8882 * Get a flattend array of the 3D world coordinates for the
8883 * triangles filling the geometry.
8885 * @param {Transform} transform - The transform of the image related to the geometry.
8886 * @returns {Array<number>} Flattened array of 3D world coordinates of the triangles.
8889 abstract getTriangles3d(transform: Transform): number[];
8891 * Set the value of a vertex in the polygon representation of the geometry.
8893 * @description The polygon is defined to have the first vertex at the
8894 * bottom-left corner with the rest of the vertices following in clockwise order.
8896 * @param {number} index - The index of the vertex to be set.
8897 * @param {Array<number>} value - The new value of the vertex.
8898 * @param {Transform} transform - The transform of the image related to the geometry.
8901 abstract setVertex2d(index: number, value: number[], transform: Transform): void;
8903 * Finds the polygon pole of inaccessibility, the most distant internal
8904 * point from the polygon outline.
8906 * @param {Array<Array<number>>} points2d - 2d points of outline to triangulate.
8907 * @returns {Array<number>} Point of inaccessibility.
8910 protected _getPoleOfInaccessibility2d(points2d: number[][]): number[];
8911 protected _project(points2d: number[][], transform: Transform): number[][];
8912 protected _subsample(points2d: number[][], threshold?: number): number[][];
8914 * Triangulates a 2d polygon and returns the triangle
8915 * representation as a flattened array of 3d points.
8917 * @param {Array<Array<number>>} points2d - 2d points of outline to triangulate.
8918 * @param {Array<Array<number>>} points3d - 3d points of outline corresponding to the 2d points.
8919 * @param {Array<Array<Array<number>>>} [holes2d] - 2d points of holes to triangulate.
8920 * @param {Array<Array<Array<number>>>} [holes3d] - 3d points of holes corresponding to the 2d points.
8921 * @returns {Array<number>} Flattened array of 3d points ordered based on the triangles.
8924 protected _triangulate(points2d: number[][], points3d: number[][], holes2d?: number[][][], holes3d?: number[][][]): number[];
8925 protected _triangulateSpherical(points2d: number[][], holes2d: number[][][], transform: Transform): number[];
8926 protected _unproject(points2d: number[][], transform: Transform, distance?: number): number[][];
8927 private _createCamera;
8928 private _deunproject;
8929 private _triangulateSubarea;
8933 * @class PolygonGeometry
8935 * @classdesc Represents a polygon geometry in the 2D basic image coordinate system.
8936 * All polygons and holes provided to the constructor needs to be closed.
8940 * var basicPolygon = [[0.5, 0.3], [0.7, 0.3], [0.6, 0.5], [0.5, 0.3]];
8941 * var polygonGeometry = new PolygonGeometry(basicPolygon);
8944 declare class PolygonGeometry extends VertexGeometry {
8948 * Create a polygon geometry.
8951 * @param {Array<Array<number>>} polygon - Array of polygon vertices. Must be closed.
8952 * @param {Array<Array<Array<number>>>} [holes] - Array of arrays of hole vertices.
8953 * Each array of holes vertices must be closed.
8955 * @throws {GeometryTagError} Polygon coordinates must be valid basic coordinates.
8957 constructor(polygon: number[][], holes?: number[][][]);
8959 * Get polygon property.
8960 * @returns {Array<Array<number>>} Closed 2d polygon.
8962 get polygon(): number[][];
8964 * Get holes property.
8965 * @returns {Array<Array<Array<number>>>} Holes of 2d polygon.
8967 get holes(): number[][][];
8969 * Add a vertex to the polygon by appending it after the last vertex.
8971 * @param {Array<number>} vertex - Vertex to add.
8974 addVertex2d(vertex: number[]): void;
8976 * Get the coordinates of a vertex from the polygon representation of the geometry.
8978 * @param {number} index - Vertex index.
8979 * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
8982 getVertex2d(index: number): number[];
8984 * Remove a vertex from the polygon.
8986 * @param {number} index - The index of the vertex to remove.
8989 removeVertex2d(index: number): void;
8991 setVertex2d(index: number, value: number[], transform: Transform): void;
8993 setCentroid2d(value: number[], transform: Transform): void;
8995 getPoints3d(transform: Transform): number[][];
8997 getVertex3d(index: number, transform: Transform): number[];
8999 getVertices2d(): number[][];
9001 getVertices3d(transform: Transform): number[][];
9003 * Get a polygon representation of the 3D coordinates for the vertices of each hole
9004 * of the geometry. Line segments between vertices will possibly be subsampled
9005 * resulting in a larger number of points than the total number of vertices.
9007 * @param {Transform} transform - The transform of the image related to the geometry.
9008 * @returns {Array<Array<Array<number>>>} Array of hole polygons in 3D world coordinates
9009 * representing the vertices of each hole of the geometry.
9012 getHolePoints3d(transform: Transform): number[][][];
9014 * Get a polygon representation of the 3D coordinates for the vertices of each hole
9017 * @param {Transform} transform - The transform of the image related to the geometry.
9018 * @returns {Array<Array<Array<number>>>} Array of hole polygons in 3D world coordinates
9019 * representing the vertices of each hole of the geometry.
9022 getHoleVertices3d(transform: Transform): number[][][];
9024 getCentroid2d(): number[];
9026 getCentroid3d(transform: Transform): number[];
9028 get3dDomainTriangles3d(transform: Transform): number[];
9030 getTriangles3d(transform: Transform): number[];
9032 getPoleOfInaccessibility2d(): number[];
9034 getPoleOfInaccessibility3d(transform: Transform): number[];
9035 private _getPoints3d;
9039 * @class RectGeometry
9041 * @classdesc Represents a rectangle geometry in the 2D basic image coordinate system.
9045 * var basicRect = [0.5, 0.3, 0.7, 0.4];
9046 * var rectGeometry = new RectGeometry(basicRect);
9049 declare class RectGeometry extends VertexGeometry {
9050 private _anchorIndex;
9054 * Create a rectangle geometry.
9057 * @param {Array<number>} rect - An array representing the top-left and bottom-right
9058 * corners of the rectangle in basic coordinates. Ordered according to [x0, y0, x1, y1].
9060 * @throws {GeometryTagError} Rectangle coordinates must be valid basic coordinates.
9062 constructor(rect: number[]);
9064 * Get anchor index property.
9066 * @returns {number} Index representing the current anchor property if
9067 * achoring indexing has been initialized. If anchor indexing has not been
9068 * initialized or has been terminated undefined will be returned.
9071 get anchorIndex(): number;
9073 * Get inverted property.
9075 * @returns {boolean} Boolean determining whether the rect geometry is
9076 * inverted. For spherical the rect geometrye may be inverted.
9079 get inverted(): boolean;
9081 * Get rect property.
9083 * @returns {Array<number>} Array representing the top-left and bottom-right
9084 * corners of the rectangle in basic coordinates.
9086 get rect(): number[];
9088 * Initialize anchor indexing to enable setting opposite vertex.
9090 * @param {number} [index] - The index of the vertex to use as anchor.
9092 * @throws {GeometryTagError} If anchor indexing has already been initialized.
9093 * @throws {GeometryTagError} If index is not valid (0 to 3).
9096 initializeAnchorIndexing(index?: number): void;
9098 * Terminate anchor indexing to disable setting pposite vertex.
9101 terminateAnchorIndexing(): void;
9103 * Set the value of the vertex opposite to the anchor in the polygon
9104 * representation of the rectangle.
9106 * @description Setting the opposite vertex may change the anchor index.
9108 * @param {Array<number>} opposite - The new value of the vertex opposite to the anchor.
9109 * @param {Transform} transform - The transform of the image related to the rectangle.
9111 * @throws {GeometryTagError} When anchor indexing has not been initialized.
9114 setOppositeVertex2d(opposite: number[], transform: Transform): void;
9116 * Set the value of a vertex in the polygon representation of the rectangle.
9118 * @description The polygon is defined to have the first vertex at the
9119 * bottom-left corner with the rest of the vertices following in clockwise order.
9121 * @param {number} index - The index of the vertex to be set.
9122 * @param {Array<number>} value - The new value of the vertex.
9123 * @param {Transform} transform - The transform of the image related to the rectangle.
9126 setVertex2d(index: number, value: number[], transform: Transform): void;
9128 setCentroid2d(value: number[], transform: Transform): void;
9130 * Get the 3D coordinates for the vertices of the rectangle with
9131 * interpolated points along the lines.
9133 * @param {Transform} transform - The transform of the image related to
9135 * @returns {Array<Array<number>>} Polygon array of 3D world coordinates
9136 * representing the rectangle.
9139 getPoints3d(transform: Transform): number[][];
9141 * Get the coordinates of a vertex from the polygon representation of the geometry.
9143 * @description The first vertex represents the bottom-left corner with the rest of
9144 * the vertices following in clockwise order. The method shifts the right side
9145 * coordinates of the rectangle by one unit to ensure that the vertices are ordered
9148 * @param {number} index - Vertex index.
9149 * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
9152 getVertex2d(index: number): number[];
9154 * Get the coordinates of a vertex from the polygon representation of the geometry.
9156 * @description The first vertex represents the bottom-left corner with the rest of
9157 * the vertices following in clockwise order. The coordinates will not be shifted
9158 * so they may not appear in clockwise order when layed out on the plane.
9160 * @param {number} index - Vertex index.
9161 * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
9164 getNonAdjustedVertex2d(index: number): number[];
9166 * Get a vertex from the polygon representation of the 3D coordinates for the
9167 * vertices of the geometry.
9169 * @description The first vertex represents the bottom-left corner with the rest of
9170 * the vertices following in clockwise order.
9172 * @param {number} index - Vertex index.
9173 * @param {Transform} transform - The transform of the image related to the geometry.
9174 * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
9175 * the vertices of the geometry.
9178 getVertex3d(index: number, transform: Transform): number[];
9180 * Get a polygon representation of the 2D basic coordinates for the vertices of the rectangle.
9182 * @description The first vertex represents the bottom-left corner with the rest of
9183 * the vertices following in clockwise order.
9185 * @returns {Array<Array<number>>} Polygon array of 2D basic coordinates representing
9186 * the rectangle vertices.
9189 getVertices2d(): number[][];
9191 * Get a polygon representation of the 3D coordinates for the vertices of the rectangle.
9193 * @description The first vertex represents the bottom-left corner with the rest of
9194 * the vertices following in clockwise order.
9196 * @param {Transform} transform - The transform of the image related to the rectangle.
9197 * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
9198 * the rectangle vertices.
9201 getVertices3d(transform: Transform): number[][];
9203 getCentroid2d(): number[];
9205 getCentroid3d(transform: Transform): number[];
9209 getPoleOfInaccessibility2d(): number[];
9211 getPoleOfInaccessibility3d(transform: Transform): number[];
9213 getTriangles3d(transform: Transform): number[];
9215 * Check if a particular bottom-right value is valid according to the current
9216 * rectangle coordinates.
9218 * @param {Array<number>} bottomRight - The bottom-right coordinates to validate
9219 * @returns {boolean} Value indicating whether the provided bottom-right coordinates
9223 validate(bottomRight: number[]): boolean;
9225 * Get the 2D coordinates for the vertices of the rectangle with
9226 * interpolated points along the lines.
9228 * @returns {Array<Array<number>>} Polygon array of 2D basic coordinates
9229 * representing the rectangle.
9231 private _getPoints2d;
9233 * Convert the top-left, bottom-right representation of a rectangle to a polygon
9234 * representation of the vertices starting at the bottom-left corner going
9237 * @description The method shifts the right side coordinates of the rectangle
9238 * by one unit to ensure that the vertices are ordered clockwise.
9240 * @param {Array<number>} rect - Top-left, bottom-right representation of a
9242 * @returns {Array<Array<number>>} Polygon representation of the vertices of the
9245 private _rectToVertices2d;
9247 * Convert the top-left, bottom-right representation of a rectangle to a polygon
9248 * representation of the vertices starting at the bottom-left corner going
9251 * @description The first vertex represents the bottom-left corner with the rest of
9252 * the vertices following in clockwise order. The coordinates will not be shifted
9253 * to ensure that the vertices are ordered clockwise when layed out on the plane.
9255 * @param {Array<number>} rect - Top-left, bottom-right representation of a
9257 * @returns {Array<Array<number>>} Polygon representation of the vertices of the
9260 private _rectToNonAdjustedVertices2d;
9266 declare type TagEventType = "click" | "geometry" | "tag";
9269 * Interface for tag state events.
9273 * var tag = new OutlineTag({ // tag options });
9274 * // Set an event listener
9275 * tag.on('tag', function() {
9276 * console.log("A tag event has occurred.");
9280 interface TagStateEvent {
9282 * The component object that fired the event.
9294 * @classdesc Abstract class representing the basic functionality of for a tag.
9296 declare abstract class Tag extends EventEmitter {
9297 protected _id: string;
9298 protected _geometry: Geometry;
9299 protected _notifyChanged$: Subject<Tag>;
9304 * @param {string} id
9305 * @param {Geometry} geometry
9307 constructor(id: string, geometry: Geometry);
9314 * Get geometry property.
9315 * @returns {Geometry} The geometry of the tag.
9317 get geometry(): Geometry;
9319 * Get changed observable.
9320 * @returns {Observable<Tag>}
9323 get changed$(): Observable<Tag>;
9325 * Get geometry changed observable.
9326 * @returns {Observable<Tag>}
9329 get geometryChanged$(): Observable<Tag>;
9330 fire(type: "tag" | "geometry", event: TagStateEvent): void;
9332 fire(type: TagEventType, event: TagStateEvent): void;
9333 off(type: "tag" | "geometry", handler: (event: TagStateEvent) => void): void;
9335 off(type: TagEventType, handler: (event: TagStateEvent) => void): void;
9337 * Event fired when the geometry of the tag has changed.
9342 * var tag = new OutlineTag({ // tag options });
9343 * // Set an event listener
9344 * tag.on('geometry', function() {
9345 * console.log("A geometry event has occurred.");
9349 on(type: "geometry", handler: (event: TagStateEvent) => void): void;
9351 * Event fired when a tag has been updated.
9356 * var tag = new OutlineTag({ // tag options });
9357 * // Set an event listener
9358 * tag.on('tag', function() {
9359 * console.log("A tag event has occurred.");
9363 on(type: "tag", handler: (event: TagStateEvent) => void): void;
9365 on(type: TagEventType, handler: (event: TagStateEvent) => void): void;
9369 * Interface for the options that define the behavior and
9370 * appearance of the outline tag.
9374 interface ExtremePointTagOptions {
9376 * Indicate whether the tag geometry should be editable.
9378 * @description Polygon tags with two dimensional domain
9379 * are never editable.
9385 * Color for the interior fill as a hexadecimal number.
9390 * Opacity of the interior fill between 0 and 1.
9393 fillOpacity?: number;
9395 * Determines whether vertices should be indicated by points
9396 * when tag is editable.
9400 indicateVertices?: boolean;
9402 * Color for the edge lines as a hexadecimal number.
9407 * Opacity of the edge lines on [0, 1].
9410 lineOpacity?: number;
9412 * Line width in pixels.
9419 * @class ExtremePointTag
9421 * @classdesc Tag holding properties for visualizing a extreme points
9422 * and their outline.
9426 * var geometry = new PointsGeometry([[0.3, 0.3], [0.5, 0.4]]);
9427 * var tag = new ExtremePointTag(
9430 * { editable: true, lineColor: 0xff0000 });
9432 * tagComponent.add([tag]);
9435 declare class ExtremePointTag extends Tag {
9436 protected _geometry: PointsGeometry;
9438 private _indicateVertices;
9440 private _lineOpacity;
9443 private _fillOpacity;
9445 * Create an extreme point tag.
9449 * @param {string} id - Unique identifier of the tag.
9450 * @param {PointsGeometry} geometry - Geometry defining points of tag.
9451 * @param {ExtremePointTagOptions} options - Options defining the visual appearance and
9452 * behavior of the extreme point tag.
9454 constructor(id: string, geometry: PointsGeometry, options?: ExtremePointTagOptions);
9456 * Get editable property.
9457 * @returns {boolean} Value indicating if tag is editable.
9459 get editable(): boolean;
9461 * Set editable property.
9466 set editable(value: boolean);
9468 * Get fill color property.
9471 get fillColor(): number;
9473 * Set fill color property.
9478 set fillColor(value: number);
9480 * Get fill opacity property.
9483 get fillOpacity(): number;
9485 * Set fill opacity property.
9490 set fillOpacity(value: number);
9492 get geometry(): PointsGeometry;
9494 * Get indicate vertices property.
9495 * @returns {boolean} Value indicating if vertices should be indicated
9496 * when tag is editable.
9498 get indicateVertices(): boolean;
9500 * Set indicate vertices property.
9505 set indicateVertices(value: boolean);
9507 * Get line color property.
9510 get lineColor(): number;
9512 * Set line color property.
9517 set lineColor(value: number);
9519 * Get line opacity property.
9522 get lineOpacity(): number;
9524 * Set line opacity property.
9529 set lineOpacity(value: number);
9531 * Get line width property.
9534 get lineWidth(): number;
9536 * Set line width property.
9541 set lineWidth(value: number);
9543 * Set options for tag.
9545 * @description Sets all the option properties provided and keeps
9546 * the rest of the values as is.
9548 * @param {ExtremePointTagOptions} options - Extreme point tag options
9552 setOptions(options: ExtremePointTagOptions): void;
9556 * Enumeration for tag domains.
9559 * @description Defines where lines between two vertices are treated
9562 * Only applicable for polygons. For rectangles lines between
9563 * vertices are always treated as straight in the distorted 2D
9564 * projection and bended in the undistorted 3D space.
9566 declare enum TagDomain {
9568 * Treats lines between two vertices as straight in the
9569 * distorted 2D projection, i.e. on the image. If the image
9570 * is distorted this will result in bended lines when rendered
9571 * in the undistorted 3D space.
9575 * Treats lines as straight in the undistorted 3D space. If the
9576 * image is distorted this will result in bended lines when rendered
9577 * on the distorted 2D projection of the image.
9579 ThreeDimensional = 1
9583 * Interface for the options that define the behavior and
9584 * appearance of the outline tag.
9588 interface OutlineTagOptions {
9590 * The domain where lines between vertices are treated as straight.
9592 * @description Only applicable for tags that renders polygons.
9594 * If the domain is specified as two dimensional, editing of the
9595 * polygon will be disabled.
9597 * @default {TagDomain.TwoDimensional}
9601 * Indicate whether the tag geometry should be editable.
9603 * @description Polygon tags with two dimensional domain
9604 * are never editable.
9610 * Color for the interior fill as a hexadecimal number.
9615 * Opacity of the interior fill between 0 and 1.
9618 fillOpacity?: number;
9620 * A string referencing the sprite data property to pull from.
9622 * @description Icon is not shown for tags with polygon
9623 * geometries in spherical.
9627 * Value determining how the icon will float with respect to its anchor
9628 * position when rendering.
9630 * @default {Alignment.Center}
9632 iconFloat?: Alignment;
9634 * Number representing the index for where to show the icon or
9635 * text for a rectangle geometry.
9637 * @description The default index corresponds to the bottom right corner.
9643 * Determines whether vertices should be indicated by points
9644 * when tag is editable.
9648 indicateVertices?: boolean;
9650 * Color for the edge lines as a hexadecimal number.
9655 * Opacity of the edge lines on [0, 1].
9658 lineOpacity?: number;
9660 * Line width in pixels.
9665 * Text shown as label if no icon is provided.
9667 * @description Text is not shown for tags with
9668 * polygon geometries in spherical.
9672 * Text color as hexadecimal number.
9679 * Interface for the options that define the behavior and
9680 * appearance of the spot tag.
9684 interface SpotTagOptions {
9686 * Color for the spot specified as a hexadecimal number.
9691 * Indicate whether the tag geometry should be editable.
9696 * A string referencing the sprite data property to pull from.
9700 * Text shown as label if no icon is provided.
9704 * Text color as hexadecimal number.
9713 * @classdesc Tag holding properties for visualizing a geometry outline.
9717 * var geometry = new RectGeometry([0.3, 0.3, 0.5, 0.4]);
9718 * var tag = new OutlineTag(
9721 * { editable: true, lineColor: 0xff0000 });
9723 * tagComponent.add([tag]);
9726 declare class OutlineTag extends Tag {
9727 protected _geometry: VertexGeometry;
9733 private _indicateVertices;
9735 private _lineOpacity;
9738 private _fillOpacity;
9743 * Create an outline tag.
9747 * @param {string} id - Unique identifier of the tag.
9748 * @param {VertexGeometry} geometry - Geometry defining vertices of tag.
9749 * @param {OutlineTagOptions} options - Options defining the visual appearance and
9750 * behavior of the outline tag.
9752 constructor(id: string, geometry: VertexGeometry, options?: OutlineTagOptions);
9756 * @description An observable emitting the tag when the icon of the
9757 * tag has been clicked.
9759 * @returns {Observable<Tag>}
9761 get click$(): Subject<OutlineTag>;
9763 * Get domain property.
9765 * @description Readonly property that can only be set in constructor.
9767 * @returns Value indicating the domain of the tag.
9769 get domain(): TagDomain;
9771 * Get editable property.
9772 * @returns {boolean} Value indicating if tag is editable.
9774 get editable(): boolean;
9776 * Set editable property.
9781 set editable(value: boolean);
9783 * Get fill color property.
9786 get fillColor(): number;
9788 * Set fill color property.
9793 set fillColor(value: number);
9795 * Get fill opacity property.
9798 get fillOpacity(): number;
9800 * Set fill opacity property.
9805 set fillOpacity(value: number);
9807 get geometry(): VertexGeometry;
9809 * Get icon property.
9814 * Set icon property.
9819 set icon(value: string);
9821 * Get icon float property.
9822 * @returns {Alignment}
9824 get iconFloat(): Alignment;
9826 * Set icon float property.
9827 * @param {Alignment}
9831 set iconFloat(value: Alignment);
9833 * Get icon index property.
9836 get iconIndex(): number;
9838 * Set icon index property.
9843 set iconIndex(value: number);
9845 * Get indicate vertices property.
9846 * @returns {boolean} Value indicating if vertices should be indicated
9847 * when tag is editable.
9849 get indicateVertices(): boolean;
9851 * Set indicate vertices property.
9856 set indicateVertices(value: boolean);
9858 * Get line color property.
9861 get lineColor(): number;
9863 * Set line color property.
9868 set lineColor(value: number);
9870 * Get line opacity property.
9873 get lineOpacity(): number;
9875 * Set line opacity property.
9880 set lineOpacity(value: number);
9882 * Get line width property.
9885 get lineWidth(): number;
9887 * Set line width property.
9892 set lineWidth(value: number);
9894 * Get text property.
9899 * Set text property.
9904 set text(value: string);
9906 * Get text color property.
9909 get textColor(): number;
9911 * Set text color property.
9916 set textColor(value: number);
9917 fire(type: TagStateEvent["type"], event: TagStateEvent): void;
9919 fire(type: TagEventType, event: TagStateEvent): void;
9920 off(type: TagStateEvent["type"], handler: (event: TagStateEvent) => void): void;
9922 off(type: TagEventType, handler: (event: TagStateEvent) => void): void;
9924 * Event fired when the icon of the outline tag is clicked.
9929 * var tag = new OutlineTag({ // tag options });
9930 * // Set an event listener
9931 * tag.on('click', function() {
9932 * console.log("A click event has occurred.");
9936 on(type: "click", handler: (event: TagStateEvent) => void): void;
9938 * Event fired when the geometry of the tag has changed.
9943 * var tag = new OutlineTag({ // tag options });
9944 * // Set an event listener
9945 * tag.on('geometry', function() {
9946 * console.log("A geometry event has occurred.");
9950 on(type: "geometry", handler: (event: TagStateEvent) => void): void;
9952 * Event fired when a tag has been updated.
9957 * var tag = new OutlineTag({ // tag options });
9958 * // Set an event listener
9959 * tag.on('tag', function() {
9960 * console.log("A tag event has occurred.");
9964 on(type: "tag", handler: (event: TagStateEvent) => void): void;
9966 * Set options for tag.
9968 * @description Sets all the option properties provided and keeps
9969 * the rest of the values as is.
9971 * @param {OutlineTagOptions} options - Outline tag options
9975 setOptions(options: OutlineTagOptions): void;
9976 private _twoDimensionalPolygon;
9982 * @classdesc Tag holding properties for visualizing the centroid of a geometry.
9986 * var geometry = new PointGeometry([0.3, 0.3]);
9987 * var tag = new SpotTag(
9990 * { editable: true, color: 0xff0000 });
9992 * tagComponent.add([tag]);
9995 declare class SpotTag extends Tag {
9996 protected _geometry: Geometry;
10001 private _textColor;
10003 * Create a spot tag.
10007 * @param {string} id
10008 * @param {Geometry} geometry
10009 * @param {IOutlineTagOptions} options - Options defining the visual appearance and
10010 * behavior of the spot tag.
10012 constructor(id: string, geometry: Geometry, options?: SpotTagOptions);
10014 * Get color property.
10015 * @returns {number} The color of the spot as a hexagonal number;
10017 get color(): number;
10019 * Set color property.
10024 set color(value: number);
10026 * Get editable property.
10027 * @returns {boolean} Value indicating if tag is editable.
10029 get editable(): boolean;
10031 * Set editable property.
10036 set editable(value: boolean);
10038 * Get icon property.
10039 * @returns {string}
10041 get icon(): string;
10043 * Set icon property.
10048 set icon(value: string);
10050 * Get text property.
10051 * @returns {string}
10053 get text(): string;
10055 * Set text property.
10060 set text(value: string);
10062 * Get text color property.
10063 * @returns {number}
10065 get textColor(): number;
10067 * Set text color property.
10072 set textColor(value: number);
10074 * Set options for tag.
10076 * @description Sets all the option properties provided and keps
10077 * the rest of the values as is.
10079 * @param {SpotTagOptions} options - Spot tag options
10083 setOptions(options: SpotTagOptions): void;
10087 * @class TagComponent
10089 * @classdesc Component for showing and editing tags with different
10090 * geometries composed from 2D basic image coordinates (see the
10091 * {@link Viewer} class documentation for more information about coordinate
10094 * The `add` method is used for adding new tags or replacing
10095 * tags already in the set. Tags are removed by id.
10097 * If a tag already in the set has the same
10098 * id as one of the tags added, the old tag will be removed and
10099 * the added tag will take its place.
10101 * The tag component mode can be set to either be non interactive or
10102 * to be in creating mode of a certain geometry type.
10104 * The tag properties can be updated at any time and the change will
10105 * be visibile immediately.
10107 * Tags are only relevant to a single image because they are based on
10108 * 2D basic image coordinates. Tags related to a certain image should
10109 * be removed when the viewer is moved to another image.
10111 * To retrive and use the tag component
10115 * var viewer = new Viewer({ component: { tag: true } }, ...);
10117 * var tagComponent = viewer.getComponent("tag");
10120 declare class TagComponent extends Component<TagConfiguration> {
10122 static componentName: ComponentName;
10123 private _tagDomRenderer;
10126 private _tagCreator;
10127 private _viewportCoords;
10128 private _renderTags$;
10129 private _tagChanged$;
10130 private _renderTagGLChanged$;
10131 private _createGeometryChanged$;
10132 private _createGLObjectsChanged$;
10133 private _creatingConfiguration$;
10134 private _createHandlers;
10135 private _editVertexHandler;
10137 constructor(name: string, container: Container, navigator: Navigator);
10139 * Add tags to the tag set or replace tags in the tag set.
10141 * @description If a tag already in the set has the same
10142 * id as one of the tags added, the old tag will be removed
10143 * the added tag will take its place.
10145 * @param {Array<Tag>} tags - Tags to add.
10149 * tagComponent.add([tag1, tag2]);
10152 add(tags: Tag[]): void;
10154 * Calculate the smallest rectangle containing all the points
10155 * in the points geometry.
10157 * @description The result may be different depending on if the
10158 * current image is an spherical or not. If the
10159 * current image is an spherical the rectangle may
10160 * wrap the horizontal border of the image.
10162 * @returns {Promise<Array<number>>} Promise to the rectangle
10163 * on the format specified for the {@link RectGeometry} in basic
10166 calculateRect(geometry: PointsGeometry): Promise<number[]>;
10168 * Force the creation of a geometry programatically using its
10169 * current vertices.
10171 * @description The method only has an effect when the tag
10172 * mode is either of the following modes:
10174 * {@link TagMode.CreatePoints}
10175 * {@link TagMode.CreatePolygon}
10176 * {@link TagMode.CreateRect}
10177 * {@link TagMode.CreateRectDrag}
10179 * In the case of points or polygon creation, only the created
10180 * vertices are used, i.e. the mouse position is disregarded.
10182 * In the case of rectangle creation the position of the mouse
10183 * at the time of the method call is used as one of the vertices
10184 * defining the rectangle.
10186 * @fires geometrycreate
10190 * tagComponent.on("geometrycreate", function(geometry) {
10191 * console.log(geometry);
10194 * tagComponent.create();
10199 * Change the current tag mode.
10201 * @description Change the tag mode to one of the create modes for creating new geometries.
10203 * @param {TagMode} mode - New tag mode.
10209 * tagComponent.changeMode(TagMode.CreateRect);
10212 changeMode(mode: TagMode): void;
10213 fire(type: "geometrycreate", event: ComponentGeometryEvent): void;
10214 fire(type: "tagmode", event: ComponentTagModeEvent): void;
10216 fire(type: "tagcreateend" | "tagcreatestart" | "tags", event: ComponentStateEvent): void;
10218 * Returns the tag in the tag set with the specified id, or
10219 * undefined if the id matches no tag.
10221 * @param {string} tagId - Id of the tag.
10225 * var tag = tagComponent.get("tagId");
10228 get(tagId: string): Tag;
10230 * Returns an array of all tags.
10234 * var tags = tagComponent.getAll();
10239 * Returns an array of tag ids for tags that contain the specified point.
10241 * @description The pixel point must lie inside the polygon or rectangle
10242 * of an added tag for the tag id to be returned. Tag ids for
10243 * tags that do not have a fill will also be returned if the point is inside
10244 * the geometry of the tag. Tags with point geometries can not be retrieved.
10246 * No tag ids will be returned for polygons rendered in cropped spherical or
10247 * rectangles rendered in spherical.
10249 * Notice that the pixelPoint argument requires x, y coordinates from pixel space.
10251 * With this function, you can use the coordinates provided by mouse
10252 * events to get information out of the tag component.
10254 * If no tag at exist the pixel point, an empty array will be returned.
10256 * @param {Array<number>} pixelPoint - Pixel coordinates on the viewer element.
10257 * @returns {Promise<Array<string>>} Promise to the ids of the tags that
10258 * contain the specified pixel point.
10262 * tagComponent.getTagIdsAt([100, 100])
10263 * .then((tagIds) => { console.log(tagIds); });
10266 getTagIdsAt(pixelPoint: number[]): Promise<string[]>;
10268 * Check if a tag exist in the tag set.
10270 * @param {string} tagId - Id of the tag.
10274 * var tagExists = tagComponent.has("tagId");
10277 has(tagId: string): boolean;
10278 off(type: "geometrycreate", handler: (event: ComponentGeometryEvent) => void): void;
10279 off(type: "tagmode", handler: (event: ComponentTagModeEvent) => void): void;
10280 off(type: "tagcreateend" | "tagcreatestart" | "tags", handler: (event: ComponentStateEvent) => void): void;
10282 * Event fired when a geometry has been created.
10284 * @event geometrycreated
10287 * // Initialize the viewer
10288 * var viewer = new Viewer({ // viewer options });
10289 * var component = viewer.getComponent('<component-name>');
10290 * // Set an event listener
10291 * component.on('geometrycreated', function() {
10292 * console.log("A geometrycreated event has occurred.");
10296 on(type: "geometrycreate", handler: (event: ComponentGeometryEvent) => void): void;
10298 * Event fired when an interaction to create a geometry ends.
10300 * @description A create interaction can by a geometry being created
10301 * or by the creation being aborted.
10303 * @event tagcreateend
10306 * // Initialize the viewer
10307 * var viewer = new Viewer({ // viewer options });
10308 * var component = viewer.getComponent('<component-name>');
10309 * // Set an event listener
10310 * component.on('tagcreateend', function() {
10311 * console.log("A tagcreateend event has occurred.");
10315 on(type: "tagcreateend", handler: (event: ComponentStateEvent) => void): void;
10317 * Event fired when an interaction to create a geometry starts.
10319 * @description A create interaction starts when the first vertex
10320 * is created in the geometry.
10322 * @event tagcreatestart
10325 * // Initialize the viewer
10326 * var viewer = new Viewer({ // viewer options });
10327 * var component = viewer.getComponent('<component-name>');
10328 * // Set an event listener
10329 * component.on('tagcreatestart', function() {
10330 * console.log("A tagcreatestart event has occurred.");
10334 on(type: "tagcreatestart", handler: (event: ComponentStateEvent) => void): void;
10336 * Event fired when the create mode is changed.
10341 * // Initialize the viewer
10342 * var viewer = new Viewer({ // viewer options });
10343 * var component = viewer.getComponent('<component-name>');
10344 * // Set an event listener
10345 * component.on('tagmode', function() {
10346 * console.log("A tagmode event has occurred.");
10350 on(type: "tagmode", handler: (event: ComponentTagModeEvent) => void): void;
10352 * Event fired when the tags collection has changed.
10357 * // Initialize the viewer
10358 * var viewer = new Viewer({ // viewer options });
10359 * var component = viewer.getComponent('<component-name>');
10360 * // Set an event listener
10361 * component.on('tags', function() {
10362 * console.log("A tags event has occurred.");
10366 on(type: "tags", handler: (event: ComponentStateEvent) => void): void;
10368 * Remove tags with the specified ids from the tag set.
10370 * @param {Array<string>} tagIds - Ids for tags to remove.
10374 * tagComponent.remove(["id-1", "id-2"]);
10377 remove(tagIds: string[]): void;
10379 * Remove all tags from the tag set.
10383 * tagComponent.removeAll();
10387 protected _activate(): void;
10388 protected _deactivate(): void;
10389 protected _getDefaultConfiguration(): TagConfiguration;
10390 private _disableCreateHandlers;
10394 * @class ZoomComponent
10396 * @classdesc Component rendering UI elements used for zooming.
10400 * var viewer = new Viewer({ ... });
10402 * var zoomComponent = viewer.getComponent("zoom");
10403 * zoomComponent.configure({ size: ComponentSize.Small });
10406 declare class ZoomComponent extends Component<ZoomConfiguration> {
10407 static componentName: ComponentName;
10408 private _viewportCoords;
10409 private _zoomDelta$;
10410 constructor(name: string, container: Container, navigator: Navigator);
10411 protected _activate(): void;
10412 protected _deactivate(): void;
10413 protected _getDefaultConfiguration(): ZoomConfiguration;
10416 export { Alignment, ArgumentMapillaryError, BearingComponent, BearingConfiguration, CacheComponent, CacheConfiguration, CacheDepthConfiguration, CameraControls, CameraEnt, CameraVisualizationMode, CancelMapillaryError, CircleMarker, CircleMarkerOptions, ClusterContract, CombiningFilterExpression, CombiningFilterOperator, ComparisonFilterExpression, ComparisonFilterOperator, Component, ComponentEvent, ComponentEventType, ComponentGeometryEvent, ComponentHoverEvent, ComponentMarkerEvent, ComponentName, ComponentOptions, ComponentPlayEvent, ComponentSize, ComponentStateEvent, ComponentTagModeEvent, CoreImageEnt, CoreImagesContract, CreatorEnt, DataProviderBase, DirectionComponent, DirectionConfiguration, DragPanHandler, EntContract, ExtremePointTag, ExtremePointTagOptions, FallbackComponentName, FallbackOptions, FilterExpression, FilterKey, FilterOperator, FilterValue, Geometry, GeometryProviderBase, GeometryTagError, GraphDataProvider, GraphDataProviderOptions, GraphMapillaryError, IComponent, ICustomCameraControls, ICustomRenderer, IDEnt, IViewer, Image, ImageEnt, ImageTileEnt, ImageTilesContract, ImageTilesRequestContract, ImagesContract, KeyPlayHandler, KeySequenceNavigationHandler, KeySpatialNavigationHandler, KeyZoomHandler, KeyboardComponent, KeyboardConfiguration, LngLat, LngLatAlt, MapillaryError, Marker, MarkerComponent, MarkerConfiguration, MeshContract, NavigationDirection, NavigationEdge, NavigationEdgeData, NavigationEdgeStatus, OriginalPositionMode, OutlineTag, OutlineTagOptions, PointContract, PointGeometry, PointOfView, PointerComponent, PointerConfiguration, PointsGeometry, PolygonGeometry, Popup, PopupComponent, PopupOffset, PopupOptions, ProviderCellEvent, ProviderEvent, ProviderEventType, RectGeometry, RenderMode, RenderPass, S2GeometryProvider, ScrollZoomHandler, SequenceComponent, SequenceConfiguration, SequenceContract, SequenceEnt, SetMembershipFilterExpression, SetMembershipFilterOperator, SimpleMarker, SimpleMarkerOptions, SliderComponent, SliderConfiguration, SliderConfigurationIds, SliderConfigurationMode, SpatialComponent, SpatialConfiguration, SpatialImageEnt, SpatialImagesContract, SpotTag, SpotTagOptions, Tag, TagComponent, TagConfiguration, TagDomain, TagEventType, TagMode, TagStateEvent, TouchZoomHandler, TransitionMode, URLEnt, UrlOptions, VertexGeometry, Viewer, ViewerBearingEvent, ViewerDataLoadingEvent, ViewerEvent, ViewerEventType, ViewerImageEvent, ViewerMouseEvent, ViewerNavigableEvent, ViewerNavigationEdgeEvent, ViewerOptions, ViewerStateEvent, ZoomComponent, ZoomConfiguration, decompress, enuToGeodetic, fetchArrayBuffer, geodeticToEnu, isFallbackSupported, isSupported, readMeshPbf };