2 * Copyright (c) Facebook, Inc. and its affiliates.
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
11 * Convert coordinates from geodetic (WGS84) reference to local topocentric
13 * @param {number} lng Longitude in degrees.
14 * @param {number} lat Latitude in degrees.
15 * @param {number} alt Altitude in meters.
16 * @param {number} refLng Reference longitude in degrees.
17 * @param {number} refLat Reference latitude in degrees.
18 * @param {number} refAlt Reference altitude in meters.
19 * @returns {Array<number>} The x, y, z local topocentric ENU coordinates.
21 declare function geodeticToEnu(
31 * Convert coordinates from local topocentric (ENU) reference to
32 * geodetic (WGS84) reference.
33 * @param {number} x Topocentric ENU coordinate in East direction.
34 * @param {number} y Topocentric ENU coordinate in North direction.
35 * @param {number} z Topocentric ENU coordinate in Up direction.
36 * @param {number} refLng Reference longitude in degrees.
37 * @param {number} refLat Reference latitude in degrees.
38 * @param {number} refAlt Reference altitude in meters.
39 * @returns {Array<number>} The longitude, latitude in degrees
40 * and altitude in meters.
42 declare function enuToGeodetic(
52 * Convert coordinates from Earth-Centered, Earth-Fixed (ECEF) reference
53 * to local topocentric (ENU) reference.
54 * @param {number} X ECEF X-value.
55 * @param {number} Y ECEF Y-value.
56 * @param {number} Z ECEF Z-value.
57 * @param {number} refLng Reference longitude in degrees.
58 * @param {number} refLat Reference latitude in degrees.
59 * @param {number} refAlt Reference altitude in meters.
60 * @returns {Array<number>} The x, y, z topocentric ENU coordinates in East, North
61 * and Up directions respectively.
63 declare function ecefToEnu(
73 * Convert coordinates from local topocentric (ENU) reference
74 * to Earth-Centered, Earth-Fixed (ECEF) reference.
75 * @param {number} x Topocentric ENU coordinate in East direction.
76 * @param {number} y Topocentric ENU coordinate in North direction.
77 * @param {number} z Topocentric ENU coordinate in Up direction.
78 * @param {number} refLng Reference longitude in degrees.
79 * @param {number} refLat Reference latitude in degrees.
80 * @param {number} refAlt Reference altitude in meters.
81 * @returns {Array<number>} The X, Y, Z ECEF coordinates.
83 declare function enuToEcef(
93 * Convert coordinates from geodetic reference (WGS84) to Earth-Centered,
94 * Earth-Fixed (ECEF) reference.
95 * @param {number} lng Longitude in degrees.
96 * @param {number} lat Latitude in degrees.
97 * @param {number} alt Altitude in meters.
98 * @returns {Array<number>} The X, Y, Z ECEF coordinates.
100 declare function geodeticToEcef(
107 * Convert coordinates from Earth-Centered, Earth-Fixed (ECEF) reference
108 * to geodetic reference (WGS84).
109 * @param {number} X ECEF X-value.
110 * @param {number} Y ECEF Y-value.
111 * @param {number} Z ECEF Z-value.
112 * @returns {Array<number>} The longitude, latitude in degrees
113 * and altitude in meters.
115 declare function ecefToGeodetic(X: number, Y: number, Z: number): number[];
118 * Contract describing triangulated meshes.
120 export interface MeshContract {
122 * Flattened array of faces for the mesh. Each face consist
123 * three vertex indices.
128 * Flattened array of vertices for the mesh. Each vertex
129 * consists of X, Y and Z coordinates in the camera
135 * Decompress and parse an array buffer containing zipped
136 * json data and return as a json object.
137 * @description Handles array buffers continaing zipped json
139 * @param {ArrayBuffer} buffer - Array buffer to decompress.
140 * @returns {Object} Parsed object.
142 declare function decompress<T>(buffer: ArrayBuffer): T;
145 * Retrieves a resource as an array buffer and returns a promise
147 * @description Rejects the promise on request failure.
148 * @param {string} url - URL for resource to retrieve.
149 * @param {Promise} [abort] - Optional promise for aborting
150 * the request through rejection.
151 * @returns {Promise<ArrayBuffer>} Promise to the array buffer
154 declare function fetchArrayBuffer(
156 abort?: Promise<void>
157 ): Promise<ArrayBuffer>;
160 * Read the fields of a protobuf array buffer into a mesh
162 * @param {ArrayBuffer} buffer - Protobuf array buffer
164 * @returns {MeshContract} Mesh object.
166 declare function readMeshPbf(buffer: ArrayBuffer): MeshContract;
169 * Interface describing event emitter members.
171 * This is a specification for implementers to model: it is
172 * not an exported method or class.
174 export interface IEventEmitter {
175 fire<T>(type: string, event: T): void;
176 off<T>(type: string, handler: (event: T) => void): void;
177 on<T>(type: string, handler: (event: T) => void): void;
180 declare class EventEmitter implements IEventEmitter {
184 * Subscribe to an event by its name.
185 * @param {string} type - The name of the event
187 * @param {(event: T) => void} handler - The
188 * handler called when the event occurs.
190 on<T>(type: string, handler: (event: T) => void): void;
193 * Unsubscribe from an event by its name.
194 * @param {string} type - The name of the event
195 * to unsubscribe from.
196 * @param {(event: T) => void} handler - The
199 off<T>(type: string, handler: (event: T) => void): void;
204 fire<T>(type: string, event: T): void;
207 * Interface that represents a longitude, latitude coordinate,
208 * measured in degrees. Coordinates are defined in the WGS84 datum.
210 export interface LngLat {
212 * Latitude, measured in degrees.
217 * Longitude, measured in degrees.
222 * Interface that represents longitude-latitude-altitude
223 * coordinates. Longitude and latitude are measured in degrees
224 * and altitude in meters. Coordinates are defined in the WGS84 datum.
227 export interface LngLatAlt extends LngLat {
229 * Altitude, measured in meters.
235 * Contract describing a reconstruction point.
237 export interface PointContract {
239 * RGB color vector of the point, normalized to floats
240 * on the interval [0, 1];
245 * Coordinates in metric scale in topocentric ENU
246 * reference frame with respect to a geo reference.
248 coordinates: number[];
251 * Contract describing cluster reconstruction data.
253 export interface ClusterContract {
255 * The unique id of the cluster.
260 * The points of the reconstruction.
263 [pointId: string]: PointContract,
268 * The reference longitude, latitude, altitude of
269 * the reconstruction. Determines the
270 * position of the reconstruction in world reference
273 reference: LngLatAlt;
276 * Ent representing an entity with a unique ID.
279 export interface IDEnt {
286 * Ent representing core image properties.
288 export type CoreImageEnt = {
290 * SfM computed longitude, latitude in WGS84 datum, measured in degrees.
291 * @description Optional - no 3D interaction available
294 computed_geometry?: LngLat,
297 * Original EXIF longitude, latitude in WGS84 datum, measured in degrees.
302 * Sequence that the image is part of.
309 * Contract describing core image results.
311 export interface CoreImagesContract {
318 * Array of core image ents.
320 images: CoreImageEnt[];
323 * Ent representing camera properties.
325 export interface CameraEnt {
327 * Camera type dependent camera parameters.
329 * For perspective and fisheye camera types,
330 * the camera parameters array should be
331 * constructed according to
335 * where focal is the camera focal length,
336 * and k1, k2 are radial distortion parameters.
338 * For spherical camera type the camera
339 * parameters should be an emtpy array.
341 camera_parameters: number[];
344 * Projection type of the camera.
345 * @description Supported camera types are:
353 * Other camera types will be treated as
354 * perspective images.
359 * Ent representing URL properties.
361 export type URLEnt = {
363 * URL for fetching ent data.
370 * Ent representing image creator properties.
372 export type CreatorEnt = {
374 * The username of the creator.
381 * Ent representing spatial image properties.
383 export type SpatialImageEnt = {
385 * Original EXIF altitude above sea level, in meters.
390 * Scale of atomic reconstruction.
391 * @description Optional - no 3D interaction available
394 atomic_scale?: number,
397 * Timestamp representing the capture date and time.
398 * @description Unix epoch timestamp in milliseconds.
403 * Original EXIF compass angle, measured in degrees.
405 compass_angle: number,
408 * Computed altitude, in meters.
409 * @description Optional - no 3D interaction available
412 computed_altitude?: number,
415 * SfM computed compass angle, measured in degrees.
416 * @description Optional - no 3D interaction available
419 computed_compass_angle?: number,
422 * Rotation vector in angle axis representation.
423 * @description Optional - no 3D interaction available
426 computed_rotation?: number[],
429 * Cluster reconstruction to which the image belongs.
439 * EXIF orientation of original image.
441 exif_orientation: number,
444 * Height of original image, not adjusted for orientation.
449 * SfM connected component id to which the image belongs.
450 * @description Optional - no 3D interaction available
461 * Owner to which the image belongs.
466 * Value specifying if image is accessible to organization members only
472 * Image quality score on the interval [0, 1].
474 quality_score?: number,
477 * Image thumbnail resource.
482 * Width of original image, not adjusted for orientation.
490 * Contract describing ent results.
492 export interface EntContract<T> {
504 * Contract describing spatial image results.
506 export type SpatialImagesContract = EntContract<SpatialImageEnt>[];
508 * Ent representing image properties.
510 export type ImageEnt = { ... } & CoreImageEnt & SpatialImageEnt;
513 * Contract describing image results.
515 export type ImagesContract = EntContract<ImageEnt>[];
517 * Ent representing sequence properties.
518 * @interface SequenceEnt
520 export type SequenceEnt = {
522 * The image IDs of the sequence sorted in
523 * acsending order based on capture time.
530 * Contract describing sequence results.
532 export type SequenceContract = SequenceEnt;
534 * Ent representing image tile properties.
536 export interface ImageTileEnt {
538 * URL for fetching image tile pixel data.
558 * Contract describing image tile results.
560 export type ImageTilesContract = EntContract<ImageTileEnt[]>;
562 * Contract describing image tile requests.
564 export interface ImageTilesRequestContract {
566 * ID of the tile's image.
578 export type ProviderEventType = "datacreate";
580 * @interface IGeometryProvider
582 * Interface describing geometry provider members.
584 * This is a specification for implementers to model: it
585 * is not an exported method or class.
587 export interface IGeometryProvider {
589 * Convert a geodetic bounding box to the the minimum set
590 * of cell ids containing the bounding box.
591 * @description The bounding box needs
592 * to be sufficiently small to be contained in an area with the size
593 * of maximally four tiles. Up to nine adjacent tiles may be returned.
594 * @param {LngLat} sw - South west corner of bounding box.
595 * @param {LngLat} ne - North east corner of bounding box.
596 * @returns {Array<string>} Array of cell ids.
598 bboxToCellIds(sw: LngLat, ne: LngLat): string[];
601 * Get the cell ids of all adjacent cells.
602 * @description In the case of approximately rectangular cells
603 * this is typically the eight orthogonally and diagonally adjacent
605 * @param {string} cellId - Id of cell.
606 * @returns {Array<string>} Array of cell ids. No specific
607 * order is guaranteed.
609 getAdjacent(cellId: string): string[];
612 * Get the vertices of a cell.
613 * @description The vertices form an unclosed
614 * clockwise polygon in the 2D longitude, latitude
615 * space. No assumption on the position of the first
616 * vertex relative to the others can be made.
617 * @param {string} cellId - Id of cell.
618 * @returns {Array<LngLat>} Unclosed clockwise polygon.
620 getVertices(cellId: string): LngLat[];
623 * Convert geodetic coordinates to a cell id.
624 * @param {LngLat} lngLat - Longitude, latitude to convert.
625 * @returns {string} Cell id for the longitude, latitude.
627 lngLatToCellId(lngLat: LngLat): string;
630 * Interface describing data provider members.
632 * This is a specification for implementers to model: it is
633 * not an exported method or class.
636 export interface IDataProvider extends IEventEmitter {
638 * Get geometry property.
639 * @returns {IGeometryProvider} Geometry provider instance.
641 geometry: IGeometryProvider;
644 * Get core images in a geometry cell.
645 * @param {string} cellId - The id of the geometry cell.
646 * @returns {Promise<CoreImagesContract>} Promise to
647 * the core images of the requested geometry cell id.
648 * @throws Rejects the promise on errors.
650 getCoreImages(cellId: string): Promise<CoreImagesContract>;
653 * Get a cluster reconstruction.
654 * @param {string} url - URL for the cluster reconstruction
656 * @param {Promise} [abort] - Optional promise for aborting
657 * the request through rejection.
658 * @returns {Promise<ClusterContract>} Promise to the
659 * cluster reconstruction.
660 * @throws Rejects the promise on errors.
662 getCluster(url: string, abort?: Promise<void>): Promise<ClusterContract>;
665 * Get spatial images.
666 * @param {Array<string>} imageIds - The ids for the
667 * images to retrieve.
668 * @returns {Promise<SpatialImagesContract>} Promise to
669 * the spatial images of the requested image ids.
670 * @throws Rejects the promise on errors.
672 getSpatialImages(imageIds: string[]): Promise<SpatialImagesContract>;
675 * Get complete images.
676 * @param {Array<string>} imageIds - The ids for the
677 * images to retrieve.
678 * @returns {Promise<ImagesContract>} Promise to the images of the
679 * requested image ids.
680 * @throws Rejects the promise on errors.
682 getImages(imageIds: string[]): Promise<ImagesContract>;
685 * Get an image as an array buffer.
686 * @param {string} url - URL for image to retrieve.
687 * @param {Promise<void>} [abort] - Optional promise for aborting
688 * the request through rejection.
689 * @returns {Promise<ArrayBuffer>} Promise to the array
690 * buffer containing the image.
691 * @throws Rejects the promise on errors.
693 getImageBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer>;
696 * Get image tiles urls for a tile level.
697 * @param {ImageTilesRequestContract} tiles - Tiles to request
698 * @returns {Promise<ImageTilesContract>} Promise to the
699 * image tiles response contract
700 * @throws Rejects the promise on errors.
702 * var tileRequest = { imageId: 'image-id', z: 12 };
703 * provider.getImageTiles(tileRequest)
704 * .then((response) => console.log(response));
707 getImageTiles(tiles: ImageTilesRequestContract): Promise<ImageTilesContract>;
711 * @param {string} url - URL for mesh to retrieve.
712 * @param {Promise<void>} [abort] - Optional promise for aborting
713 * the request through rejection.
714 * @returns {Promise<MeshContract>} Promise to the mesh.
715 * @throws Rejects the promise on errors.
717 getMesh(url: string, abort?: Promise<void>): Promise<MeshContract>;
721 * @param {Array<string>} sequenceId - The id for the
722 * sequence to retrieve.
723 * @returns {Promise} Promise to the sequences of the
724 * requested image ids.
725 * @throws Rejects the promise on errors.
727 getSequence(sequenceId: string): Promise<SequenceContract>;
730 * Set an access token for authenticated API requests of
731 * protected resources.
732 * @param {string} [accessToken] accessToken - User access
733 * token or client access token.
735 setAccessToken(accessToken?: string): void;
739 * Interface for general provider events.
741 export interface ProviderEvent {
743 * Data provider target that emitted the event.
745 target: IDataProvider;
748 * Provider event type.
750 type: ProviderEventType;
754 * Interface for data provider cell events.
756 export type ProviderCellEvent = {
758 * Cell ids for cells where data have been created.
763 * Provider event type.
770 * @class DataProviderBase
771 * @classdesc Base class to extend if implementing a data provider
775 * class MyDataProvider extends DataProviderBase {
777 * super(new S2GeometryProvider());
783 declare class DataProviderBase implements IDataProvider, IEventEmitter {
784 _geometry: IGeometryProvider;
787 * Create a new data provider base instance.
788 * @param {IGeometryProvider} geometry - Geometry
791 constructor(_geometry: IGeometryProvider): this;
794 * Get geometry property.
795 * @returns {IGeometryProvider} Geometry provider instance.
797 geometry: IGeometryProvider;
799 fire<T>(type: string, event: T): void;
802 * Get core images in a geometry cell.
803 * @param {string} cellId - The id of the geometry cell.
804 * @returns {Promise<CoreImagesContract>} Promise to
805 * the core images of the requested geometry cell id.
806 * @throws Rejects the promise on errors.
808 getCoreImages(cellId: string): Promise<CoreImagesContract>;
811 * Get a cluster reconstruction.
812 * @param {string} url - URL for the cluster reconstruction
814 * @param {Promise} [abort] - Optional promise for aborting
815 * the request through rejection.
816 * @returns {Promise<ClusterContract>} Promise to the
817 * cluster reconstruction.
818 * @throws Rejects the promise on errors.
820 getCluster(url: string, abort?: Promise<void>): Promise<ClusterContract>;
823 * Get spatial images.
824 * @param {Array<string>} imageIds - The ids for the
825 * images to retrieve.
826 * @returns {Promise<SpatialImagesContract>} Promise to
827 * the spatial images of the requested image ids.
828 * @throws Rejects the promise on errors.
830 getSpatialImages(imageIds: string[]): Promise<SpatialImagesContract>;
833 * Get complete images.
834 * @param {Array<string>} imageIds - The ids for the
835 * images to retrieve.
836 * @returns {Promise<ImagesContract>} Promise to the images of the
837 * requested image ids.
838 * @throws Rejects the promise on errors.
840 getImages(imageIds: string[]): Promise<ImagesContract>;
843 * Get an image as an array buffer.
844 * @param {string} url - URL for image to retrieve.
845 * @param {Promise<void>} [abort] - Optional promise for aborting
846 * the request through rejection.
847 * @returns {Promise<ArrayBuffer>} Promise to the array
848 * buffer containing the image.
849 * @throws Rejects the promise on errors.
851 getImageBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer>;
854 * Get image tiles urls for a tile level.
855 * @param {ImageTilesRequestContract} tiles - Tiles to request
856 * @returns {Promise<ImageTilesContract>} Promise to the
857 * image tiles response contract
858 * @throws Rejects the promise on errors.
860 * var tileRequest = { imageId: 'image-id', z: 12 };
861 * provider.getImageTiles(tileRequest)
862 * .then((response) => console.log(response));
865 getImageTiles(tiles: ImageTilesRequestContract): Promise<ImageTilesContract>;
869 * @param {string} url - URL for mesh to retrieve.
870 * @param {Promise<void>} [abort] - Optional promise for aborting
871 * the request through rejection.
872 * @returns {Promise<MeshContract>} Promise to the mesh.
873 * @throws Rejects the promise on errors.
875 getMesh(url: string, abort?: Promise<void>): Promise<MeshContract>;
879 * @param {Array<string>} sequenceId - The id for the
880 * sequence to retrieve.
881 * @returns {Promise} Promise to the sequences of the
882 * requested image ids.
883 * @throws Rejects the promise on errors.
885 getSequence(sequenceId: string): Promise<SequenceContract>;
887 off<T>(type: string, handler: (event: T) => void): void;
889 on<T>(type: string, handler: (event: T) => void): void;
892 * Set an access token for authenticated API requests of
893 * protected resources.
894 * @param {string} [accessToken] accessToken - User access
895 * token or client access token.
897 setAccessToken(accessToken?: string): void;
900 * @class GeometryProviderBase
901 * @classdesc Base class to extend if implementing a geometry
904 * class MyGeometryProvider extends GeometryProviderBase {
909 declare class GeometryProviderBase implements IGeometryProvider {
911 * Create a new geometry provider base instance.
916 * Convert a geodetic bounding box to the the minimum set
917 * of cell ids containing the bounding box.
918 * @description The bounding box needs
919 * to be sufficiently small to be contained in an area with the size
920 * of maximally four tiles. Up to nine adjacent tiles may be returned.
921 * @param {LngLat} sw - South west corner of bounding box.
922 * @param {LngLat} ne - North east corner of bounding box.
923 * @returns {Array<string>} Array of cell ids.
925 bboxToCellIds(sw: LngLat, ne: LngLat): string[];
928 * Get the cell ids of all adjacent cells.
929 * @description In the case of approximately rectangular cells
930 * this is typically the eight orthogonally and diagonally adjacent
932 * @param {string} cellId - Id of cell.
933 * @returns {Array<string>} Array of cell ids. No specific
934 * order is guaranteed.
936 getAdjacent(cellId: string): string[];
939 * Get the vertices of a cell.
940 * @description The vertices form an unclosed
941 * clockwise polygon in the 2D longitude, latitude
942 * space. No assumption on the position of the first
943 * vertex relative to the others can be made.
944 * @param {string} cellId - Id of cell.
945 * @returns {Array<LngLat>} Unclosed clockwise polygon.
947 getVertices(cellId: string): LngLat[];
950 * Convert geodetic coordinates to a cell id.
951 * @param {LngLat} lngLat - Longitude, latitude to convert.
952 * @returns {string} Cell id for the longitude, latitude.
954 lngLatToCellId(lngLat: LngLat): string;
959 _approxBboxToCellIds(sw: LngLat, ne: LngLat): string[];
961 declare interface GraphCameraContract {
965 projection_type: string;
967 declare interface GraphCameraShotContract {
970 translation: number[];
972 declare interface GraphReferenceContract {
977 declare interface GraphPointContract {
979 coordinates: number[];
981 declare interface GraphClusterContract {
983 [cameraId: string]: GraphCameraContract,
987 [pointId: string]: GraphPointContract,
990 reference_lla: GraphReferenceContract;
992 [imageKey: string]: GraphCameraShotContract,
996 declare interface GraphGeometry {
997 coordinates: [number, number];
999 declare type GraphCoreImageEnt = {
1000 computed_geometry: GraphGeometry,
1001 geometry: GraphGeometry,
1005 declare type GraphSpatialImageEnt = {
1007 sfm_cluster: URLEnt,
1008 thumb_1024_url: string,
1009 thumb_2048_url: string,
1011 } & SpatialImageEnt;
1012 declare class GraphConverter {
1013 clusterReconstruction(source: GraphClusterContract): ClusterContract;
1014 coreImage(source: GraphCoreImageEnt): CoreImageEnt;
1015 spatialImage(source: GraphSpatialImageEnt): SpatialImageEnt;
1017 declare interface GraphDataProviderOptions {
1019 accessToken?: string;
1021 declare class GraphQueryCreator {
1022 +imagesPath: string;
1023 +sequencePath: string;
1024 +coreFields: string[];
1025 +idFields: string[];
1026 +spatialFields: string[];
1027 +imageTileFields: string[];
1028 constructor(): this;
1029 images(imageIds: string[], fields: string[]): string;
1030 imagesS2(cellId: string, fields: string[]): string;
1031 imageTiles(z: number, fields: string[]): string;
1032 imageTilesPath(imageId: string): string;
1033 sequence(sequenceId: string): string;
1035 declare class GraphDataProvider extends DataProviderBase {
1037 options?: GraphDataProviderOptions,
1038 geometry?: IGeometryProvider,
1039 converter?: GraphConverter,
1040 queryCreator?: GraphQueryCreator
1042 getCluster(url: string, abort?: Promise<void>): Promise<ClusterContract>;
1043 getCoreImages(cellId: string): Promise<CoreImagesContract>;
1044 getImageBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer>;
1045 getImages(imageIds: string[]): Promise<ImagesContract>;
1047 request: ImageTilesRequestContract
1048 ): Promise<ImageTilesContract>;
1049 getMesh(url: string, abort?: Promise<void>): Promise<MeshContract>;
1050 getSequence(sequenceId: string): Promise<SequenceContract>;
1051 getSpatialImages(imageIds: string[]): Promise<SpatialImagesContract>;
1052 setAccessToken(accessToken?: string): void;
1055 * @class S2GeometryProvider
1056 * @classdesc Geometry provider based on S2 cells.
1058 * class MyDataProvider extends DataProviderBase {
1062 * const geometryProvider = new S2GeometryProvider();
1063 * const dataProvider = new MyDataProvider(geometryProvider);
1066 declare class S2GeometryProvider extends GeometryProviderBase {
1068 * Create a new S2 geometry provider instance.
1070 constructor(_level?: number): this;
1075 bboxToCellIds(sw: LngLat, ne: LngLat): string[];
1080 getAdjacent(cellId: string): string[];
1085 getVertices(cellId: string): LngLat[];
1090 lngLatToCellId(lngLat: LngLat): string;
1092 export interface ComponentConfiguration {
1093 [key: string]: mixed;
1096 * Enumeration for render mode
1099 * @description Modes for specifying how rendering is done
1100 * in the viewer. All modes preserves the original aspect
1101 * ratio of the images.
1104 declare var RenderMode: {|
1108 declare interface ViewportSize {
1112 declare type CameraType = "spherical" | "fisheye" | "perspective";
1115 * @classdesc Class used for calculating coordinate transformations
1118 declare class Transform {
1120 * Create a new transform instance.
1121 * @param {number} orientation - Image orientation.
1122 * @param {number} width - Image height.
1123 * @param {number} height - Image width.
1124 * @param {number} focal - Focal length.
1125 * @param {number} scale - Atomic scale.
1126 * @param {Array<number>} rotation - Rotation vector in three dimensions.
1127 * @param {Array<number>} translation - Translation vector in three dimensions.
1128 * @param {HTMLImageElement} image - Image for fallback size calculations.
1131 orientation: number,
1136 translation: number[],
1137 image: HTMLImageElement,
1138 textureScale?: number[],
1139 cameraParameters?: number[],
1140 cameraType?: CameraType
1144 cameraType: CameraType;
1148 * @returns {number} The orientation adjusted aspect ratio.
1150 basicAspect: number;
1154 * @description Does not fall back to image image height but
1155 * uses original value from API so can be faulty.
1156 * @returns {number} The height of the basic version image
1157 * (adjusted for orientation).
1159 basicHeight: number;
1163 * @description Does not fall back to image image width but
1164 * uses original value from API so can be faulty.
1165 * @returns {number} The width of the basic version image
1166 * (adjusted for orientation).
1172 * @returns {number} The image focal length.
1178 * @description Falls back to the image image height if
1179 * the API data is faulty.
1180 * @returns {number} The orientation adjusted image height.
1186 * @returns {number} The image orientation.
1188 orientation: number;
1192 * @returns {number} The image atomic reconstruction scale.
1197 * Get has valid scale.
1198 * @returns {boolean} Value indicating if the scale of the transform is valid.
1200 hasValidScale: boolean;
1204 * @returns {number} Value indicating the radius where the radial
1205 * undistortion function peaks.
1211 * @description Falls back to the image image width if
1212 * the API data is faulty.
1213 * @returns {number} The orientation adjusted image width.
1218 * Project 3D world coordinates to basic coordinates.
1219 * @param {Array<number>} point3d - 3D world coordinates.
1220 * @return {Array<number>} 2D basic coordinates.
1222 projectBasic(point3d: number[]): number[];
1225 * Unproject basic coordinates to 3D world coordinates.
1226 * @param {Array<number>} basic - 2D basic coordinates.
1227 * @param {Array<number>} distance - Distance to unproject from camera center.
1228 * @param {boolean} [depth] - Treat the distance value as depth from camera center.
1229 * Only applicable for perspective images. Will be
1230 * ignored for spherical.
1231 * @returns {Array<number>} Unprojected 3D world coordinates.
1233 unprojectBasic(basic: number[], distance: number, depth?: boolean): number[];
1236 * Project 3D world coordinates to SfM coordinates.
1237 * @param {Array<number>} point3d - 3D world coordinates.
1238 * @return {Array<number>} 2D SfM coordinates.
1240 projectSfM(point3d: number[]): number[];
1243 * Unproject SfM coordinates to a 3D world coordinates.
1244 * @param {Array<number>} sfm - 2D SfM coordinates.
1245 * @param {Array<number>} distance - Distance to unproject
1246 * from camera center.
1247 * @param {boolean} [depth] - Treat the distance value as
1248 * depth from camera center. Only applicable for perspective
1249 * images. Will be ignored for spherical.
1250 * @returns {Array<number>} Unprojected 3D world coordinates.
1252 unprojectSfM(sfm: number[], distance: number, depth?: boolean): number[];
1256 * @classdesc Holds information about a camera.
1258 declare class Camera {
1260 * Create a new camera instance.
1261 * @param {Transform} [transform] - Optional transform instance.
1263 constructor(transform?: Transform): this;
1267 * @returns {number} The focal length.
1277 * Update this camera to the linearly interpolated value of two other cameras.
1278 * @param {Camera} a - First camera.
1279 * @param {Camera} b - Second camera.
1280 * @param {number} alpha - Interpolation value on the interval [0, 1].
1282 lerpCameras(a: Camera, b: Camera, alpha: number): void;
1285 * Copy the properties of another camera to this camera.
1286 * @param {Camera} other - Another camera.
1288 copy(other: Camera): void;
1291 * Clone this camera.
1292 * @returns {Camera} A camera with cloned properties equal to this camera.
1297 * Determine the distance between this camera and another camera.
1298 * @param {Camera} other - Another camera.
1299 * @returns {number} The distance between the cameras.
1301 diff(other: Camera): number;
1303 declare var State: {|
1306 +Traversing: 2, // 2
1308 +WaitingInteractively: 4, // 4
1312 * Enumeration for edge directions
1315 * @description Directions for edges in image graph describing
1316 * sequence, spatial and image type relations between nodes.
1319 declare var NavigationDirection: {|
1324 +StepForward: 4, // 4
1325 +StepBackward: 5, // 5
1334 * Interface that describes additional properties of an edge.
1335 * @interface NavigationEdgeData
1337 export interface NavigationEdgeData {
1339 * The edge direction.
1341 direction: $Values<typeof NavigationDirection>;
1344 * The counter clockwise horizontal rotation angle from
1345 * the X-axis in a spherical coordiante system of the
1346 * motion from the source image to the destination node.
1348 worldMotionAzimuth: number;
1351 * Interface that describes the properties for a
1352 * navigation edge from a source image to a
1354 * @interface NavigationEdge
1356 export interface NavigationEdge {
1358 * The id of the source image.
1363 * The id of the target image.
1368 * Additional data describing properties of the edge.
1370 data: NavigationEdgeData;
1373 * Interface that indicates edge status.
1374 * @interface NavigationEdgeStatus
1376 export interface NavigationEdgeStatus {
1378 * Value indicating whether the edges have been cached.
1384 * @description If the cached property is false the edges
1385 * property will always be an empty array. If the cached
1386 * property is true, there will exist edges in the the
1387 * array if the image has edges.
1389 edges: NavigationEdge[];
1393 * @classdesc Represents the cached properties of a image.
1395 declare class ImageCache {
1397 * Create a new image cache instance.
1399 constructor(provider: IDataProvider): this;
1403 * @description Will not be set when assets have not been cached
1404 * or when the object has been disposed.
1405 * @returns {HTMLImageElement} Cached image element of the image.
1407 image: HTMLImageElement;
1411 * @description Will not be set when assets have not been cached
1412 * or when the object has been disposed.
1413 * @returns {MeshContract} SfM triangulated mesh of reconstructed
1419 * Get sequenceEdges.
1420 * @returns {NavigationEdgeStatus} Value describing the status of the
1423 sequenceEdges: NavigationEdgeStatus;
1427 * @returns {NavigationEdgeStatus} Value describing the status of the
1430 spatialEdges: NavigationEdgeStatus;
1433 * Cache the sequence edges.
1434 * @param {Array<NavigationEdge>} edges - Sequence edges to cache.
1436 cacheSequenceEdges(edges: NavigationEdge[]): void;
1439 * Cache the spatial edges.
1440 * @param {Array<NavigationEdge>} edges - Spatial edges to cache.
1442 cacheSpatialEdges(edges: NavigationEdge[]): void;
1445 * Dispose the image cache.
1446 * @description Disposes all cached assets and unsubscribes to
1452 * Reset the sequence edges.
1454 resetSequenceEdges(): void;
1457 * Reset the spatial edges.
1459 resetSpatialEdges(): void;
1463 * @classdesc [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
1465 declare class Image {
1467 * Create a new image instance.
1468 * @description Images are always created internally by the library.
1469 * Images can not be added to the library through any API method.
1470 * @param {CoreImageEnt} core- Raw core image data.
1473 constructor(core: CoreImageEnt): this;
1476 * Get assets cached.
1477 * @description The assets that need to be cached for this property
1478 * to report true are the following: fill properties, image and mesh.
1479 * The library ensures that the current image will always have the
1481 * @returns {boolean} Value indicating whether all assets have been
1485 assetsCached: boolean;
1488 * Get cameraParameters.
1489 * @description Will be undefined if SfM has
1492 * Camera type dependent parameters.
1494 * For perspective and fisheye camera types,
1495 * the camera parameters array should be
1496 * constructed according to
1500 * where focal is the camera focal length,
1501 * and k1, k2 are radial distortion parameters.
1503 * For spherical camera type the camera
1504 * parameters are unset or emtpy array.
1505 * @returns {Array<number>} The parameters
1506 * related to the camera type.
1508 cameraParameters: number[];
1512 * @description Will be undefined if SfM has not been run.
1513 * @returns {string} The camera type that captured the image.
1519 * @description Timestamp of the image capture date
1520 * and time represented as a Unix epoch timestamp in milliseconds.
1521 * @returns {number} Timestamp when the image was captured.
1527 * @returns {string} Globally unique id of the SfM cluster to which
1528 * the image belongs.
1534 * @returns {string} Url to the cluster reconstruction file.
1541 * @description If the SfM computed compass angle exists it will
1542 * be returned, otherwise the original EXIF compass angle.
1543 * @returns {number} Compass angle, measured in degrees
1544 * clockwise with respect to north.
1546 compassAngle: number;
1550 * @description The library ensures that the current image will
1552 * @returns {boolean} Value indicating whether the image has all
1553 * properties filled.
1559 * Get computedAltitude.
1560 * @description If SfM has not been run the computed altitude is
1561 * set to a default value of two meters.
1562 * @returns {number} Altitude, in meters.
1564 computedAltitude: number;
1567 * Get computedCompassAngle.
1568 * @description Will not be set if SfM has not been run.
1569 * @returns {number} SfM computed compass angle, measured
1570 * in degrees clockwise with respect to north.
1572 computedCompassAngle: number;
1575 * Get computedLngLat.
1576 * @description Will not be set if SfM has not been run.
1577 * @returns {LngLat} SfM computed longitude, latitude in WGS84 datum,
1578 * measured in degrees.
1580 computedLngLat: LngLat;
1584 * @description Note that the creator ID will not be set when using
1585 * the Mapillary API.
1586 * @returns {string} Globally unique id of the user who uploaded
1592 * Get creatorUsername.
1593 * @description Note that the creator username will not be set when
1594 * using the Mapillary API.
1595 * @returns {string} Username of the creator who uploaded
1598 creatorUsername: string;
1601 * Get exifOrientation.
1602 * @returns {number} EXIF orientation of original image.
1604 exifOrientation: number;
1608 * @returns {number} Height of original image, not adjusted
1615 * @description The image will always be set on the current image.
1616 * @returns {HTMLImageElement} Cached image element of the image.
1618 image: HTMLImageElement;
1622 * @returns {string} Globally unique id of the image.
1628 * @description If the SfM computed longitude, latitude exist
1629 * it will be returned, otherwise the original EXIF latitude
1631 * @returns {LngLat} Longitude, latitude in WGS84 datum,
1632 * measured in degrees.
1638 * @returns {boolean} Value indicating whether SfM has been
1639 * run on the image and the image has been merged into a
1640 * connected component.
1646 * @description Will not be set if SfM has not yet been run on
1648 * @returns {stirng} Id of connected component to which image
1649 * belongs after the aligning merge.
1655 * @description The mesh will always be set on the current image.
1656 * @returns {MeshContract} SfM triangulated mesh of reconstructed
1662 * Get originalAltitude.
1663 * @returns {number} EXIF altitude, in meters, if available.
1665 originalAltitude: number;
1668 * Get originalCompassAngle.
1669 * @returns {number} Original EXIF compass angle, measured in
1672 originalCompassAngle: number;
1675 * Get originalLngLat.
1676 * @returns {LngLat} Original EXIF longitude, latitude in
1677 * WGS84 datum, measured in degrees.
1679 originalLngLat: LngLat;
1683 * @returns {string} Globally unique id of the owner to which
1684 * the image belongs. If the image does not belong to an
1685 * owner the owner id will be undefined.
1691 * @returns {boolean} Value specifying if image is accessible to
1692 * organization members only or to everyone.
1698 * @returns {number} A number between zero and one
1699 * determining the quality of the image. Blurriness
1700 * (motion blur / out-of-focus), occlusion (camera
1701 * mount, ego vehicle, water-drops), windshield
1702 * reflections, bad illumination (exposure, glare),
1703 * and bad weather condition (fog, rain, snow)
1704 * affect the quality score.
1705 * @description Value should be on the interval [0, 1].
1707 qualityScore: number;
1711 * @description Will not be set if SfM has not been run.
1712 * @returns {Array<number>} Rotation vector in angle axis representation.
1718 * @description Will not be set if SfM has not been run.
1719 * @returns {number} Scale of reconstruction the image
1726 * @returns {string} Globally unique id of the sequence
1727 * to which the image belongs.
1732 * Get sequenceEdges.
1733 * @returns {NavigationEdgeStatus} Value describing the status of the
1737 sequenceEdges: NavigationEdgeStatus;
1741 * @returns {NavigationEdgeStatus} Value describing the status of the
1745 spatialEdges: NavigationEdgeStatus;
1749 * @returns {number} Width of original image, not
1750 * adjusted for orientation.
1755 * Cache the sequence edges.
1756 * @description The sequence edges are cached asynchronously
1757 * internally by the library.
1758 * @param {Array<NavigationEdge>} edges - Sequence edges to cache.
1761 cacheSequenceEdges(edges: NavigationEdge[]): void;
1764 * Cache the spatial edges.
1765 * @description The spatial edges are cached asynchronously
1766 * internally by the library.
1767 * @param {Array<NavigationEdge>} edges - Spatial edges to cache.
1770 cacheSpatialEdges(edges: NavigationEdge[]): void;
1773 * Dispose the image.
1774 * @description Disposes all cached assets.
1780 * Initialize the image cache.
1781 * @description The image cache is initialized internally by
1783 * @param {ImageCache} cache - The image cache to set as cache.
1786 initializeCache(cache: ImageCache): void;
1789 * Complete an image with spatial properties.
1790 * @description The image is completed internally by
1792 * @param {SpatialImageEnt} fill - The spatial image struct.
1795 makeComplete(fill: SpatialImageEnt): void;
1798 * Reset the sequence edges.
1801 resetSequenceEdges(): void;
1804 * Reset the spatial edges.
1807 resetSpatialEdges(): void;
1810 * Clears the image and mesh assets, aborts
1811 * any outstanding requests and resets edges.
1816 declare interface IAnimationState {
1817 reference: LngLatAlt;
1821 currentImage: Image;
1822 currentCamera: Camera;
1823 previousImage: Image;
1824 trajectory: Image[];
1825 currentIndex: number;
1827 imagesAhead: number;
1828 currentTransform: Transform;
1829 previousTransform: Transform;
1830 motionless: boolean;
1831 state: $Values<typeof State>;
1833 declare interface AnimationFrame {
1836 state: IAnimationState;
1838 declare interface EulerRotation {
1842 declare class RenderCamera {
1844 elementWidth: number,
1845 elementHeight: number,
1846 renderMode: $Values<typeof RenderMode>
1852 renderMode: $Values<typeof RenderMode>;
1853 rotation: EulerRotation;
1857 fovToZoom(fov: number): number;
1858 setFrame(frame: AnimationFrame): void;
1859 setProjectionMatrix(matrix: number[]): void;
1860 setRenderMode(renderMode: $Values<typeof RenderMode>): void;
1861 setSize(size: ViewportSize): void;
1863 declare class RenderService {
1865 element: HTMLElement,
1866 currentFrame$: mixed,
1867 renderMode: $Values<typeof RenderMode>,
1868 renderCamera?: RenderCamera
1870 element: HTMLElement;
1873 declare interface VirtualNodeHash {
1876 declare class DOMRenderer {
1877 constructor(element: HTMLElement, renderService: RenderService): this;
1878 clear(name: string): void;
1881 declare type GLRenderFunction = {
1885 declare var RenderPass$1: {|
1886 +Background: 0, // 0
1889 declare interface GLFrameRenderer {
1891 needsRender: boolean;
1892 render: GLRenderFunction;
1893 pass: $Values<typeof RenderPass$1>;
1895 declare interface GLRenderHash {
1897 renderer: GLFrameRenderer;
1899 declare class GLRenderer {
1901 canvas: HTMLCanvasElement,
1902 canvasContainer: HTMLElement,
1903 renderService: RenderService
1905 clear(name: string): void;
1907 triggerRerender(): void;
1910 * Enumeration for transition mode
1913 * @description Modes for specifying how transitions
1914 * between images are performed.
1917 declare var TransitionMode: {|
1919 +Instantaneous: 1, // 1
1921 declare class StateService {
1923 initialState: $Values<typeof State>,
1924 transitionMode?: $Values<typeof TransitionMode>
1931 waitInteractively(): void;
1932 appendImagess(images: Image[]): void;
1933 prependImages(images: Image[]): void;
1934 removeImages(n: number): void;
1935 clearImages(): void;
1936 clearPriorImages(): void;
1938 setImages(images: Image[]): void;
1939 setViewMatrix(matrix: number[]): void;
1940 rotate(delta: EulerRotation): void;
1941 rotateUnbounded(delta: EulerRotation): void;
1942 rotateWithoutInertia(delta: EulerRotation): void;
1943 rotateBasic(basicRotation: number[]): void;
1944 rotateBasicUnbounded(basicRotation: number[]): void;
1945 rotateBasicWithoutInertia(basicRotation: number[]): void;
1946 rotateToBasic(basic: number[]): void;
1947 move(delta: number): void;
1948 moveTo(position: number): void;
1949 dolly(delta: number): void;
1950 orbit(rotation: EulerRotation): void;
1951 truck(direction: number[]): void;
1954 * Change zoom level while keeping the reference point position approximately static.
1955 * @parameter {number} delta - Change in zoom level.
1956 * @parameter {Array<number>} reference - Reference point in basic coordinates.
1958 zoomIn(delta: number, reference: number[]): void;
1959 setCenter(center: number[]): void;
1960 setSpeed(speed: number): void;
1961 setTransitionMode(mode: $Values<typeof TransitionMode>): void;
1962 setZoom(zoom: number): void;
1967 constructor(doc?: Node): this;
1970 * Enumeration for component size.
1973 * @description May be used by a component to allow for resizing
1974 * of the UI elements rendered by the component.
1977 declare var ComponentSize: {|
1982 export type BearingConfiguration = {
1984 * The size of the ui elements.
1985 * @default ComponentSize.Automatic
1987 size?: $Values<typeof ComponentSize>,
1989 } & ComponentConfiguration;
1992 * Interface for configuration of cache depth.
1995 * var viewer = new Viewer({
2009 export interface CacheDepthConfiguration {
2011 * Cache depth in the sequence directions.
2012 * @description Max value is 4. Value will be clamped
2013 * to the interval [0, 4].
2019 * Cache depth in the spherical direction.
2020 * @description Max value is 2. Value will be clamped
2021 * to the interval [0, 2].
2027 * Cache depth in the step directions.
2028 * @description Max value is 3. Value will be clamped
2029 * to the interval [0, 3].
2035 * Cache depth in the turn directions.
2036 * @description Max value is 1. Value will be clamped
2037 * to the interval [0, 1].
2043 * Interface for configuration of cache component.
2046 export type CacheConfiguration = {
2048 * Cache depth struct.
2050 depth?: CacheDepthConfiguration,
2052 } & ComponentConfiguration;
2055 * Interface for configuration of direction component.
2058 * var viewer = new Viewer({
2070 export type DirectionConfiguration = {
2072 * Determines if the sequence arrow appearance should be different from
2073 * the non sequence arrows.
2074 * @description Needs to be set to true for the sequence suffixed classes
2075 * to be applied to the navigation elements. Additional calculations will be
2076 * performed resulting in a performance cost.
2079 distinguishSequence?: boolean,
2082 * The image id representing the direction arrow to be highlighted.
2083 * @description The arrow pointing towards the image corresponding to the
2084 * highlight id will be highlighted.
2085 * @default undefined
2087 highlightId?: string,
2090 * The min width of the non transformed container element holding
2091 * the navigation arrows.
2092 * @description Set min width of the non transformed
2093 * container element holding the navigation arrows.
2094 * If the min width is larger than the max width the
2095 * min width value will be used.
2097 * The container element is automatically resized when the resize
2098 * method on the Viewer class is called.
2104 * The max width of the non transformed container element holding
2105 * the navigation arrows.
2106 * @description Set max width of the non transformed
2107 * container element holding the navigation arrows.
2108 * If the min width is larger than the max width the
2109 * min width value will be used.
2111 * The container element is automatically resized when the resize
2112 * method on the Viewer class is called.
2117 } & ComponentConfiguration;
2120 * Interface for configuration of keyboard component.
2123 * var viewer = new Viewer({
2128 * keySequenceNavigation: false,
2129 * keySpatialNavigation: false,
2136 export type KeyboardConfiguration = {
2138 * Enable or disable the `KeyPlayHandler`.
2144 * Enable or disable the `KeySequenceNavigationHandler`.
2147 keySequenceNavigation?: boolean,
2150 * Enable or disable the `KeySpatialNavigationHandler`.
2153 keySpatialNavigation?: boolean,
2156 * Enable or disable the `KeyZoomHandler`.
2161 } & ComponentConfiguration;
2164 * Interface for configuration of marker component.
2167 * var viewer = new Viewer({
2171 * visibleBBoxSize: 80,
2178 export type MarkerConfiguration = {
2180 * The size of the bounding box for which markers will be visible.
2181 * @description Provided values will be clamped to the [1, 200]
2185 visibleBBoxSize?: number,
2187 } & ComponentConfiguration;
2190 * Interface for configuration of mouse component.
2193 * var viewer = new Viewer({
2198 * scrollZoom: false,
2206 export type PointerConfiguration = {
2208 * Activate or deactivate the `DragPanHandler`.
2214 * Activate or deactivate the `EarthControlHandler`.
2217 earthControl?: boolean,
2220 * Activate or deactivate the `ScrollZoomHandler`.
2223 scrollZoom?: boolean,
2226 * Activate or deactivate the `TouchZoomHandler`.
2229 touchZoom?: boolean,
2231 } & ComponentConfiguration;
2234 * Interface for configuration of sequence component.
2237 * const viewer = new Viewer({
2250 export type SequenceConfiguration = {
2252 * Set the direction to follow when playing.
2253 * @default EdgeDirection.Next
2255 direction?: $Values<typeof NavigationDirection>,
2258 * The node id representing the direction arrow to be highlighted.
2259 * @description When set to null no direction will be highlighted.
2260 * The arrow pointing towards the node corresponding to the
2261 * highlight id will be highlighted.
2262 * @default undefined
2265 highlightId?: string,
2268 * The max width of the sequence container.
2269 * @description Set max width of the container element holding
2270 * the sequence navigation elements. If the min width is larger than the
2271 * max width the min width value will be used.
2273 * The container element is automatically resized when the resize
2274 * method on the Viewer class is called.
2280 * The min width of the sequence container.
2281 * @description Set min width of the container element holding
2282 * the sequence navigation elements. If the min width is larger than the
2283 * max width the min width value will be used.
2285 * The container element is automatically resized when the resize
2286 * method on the Viewer class is called.
2292 * Indicating whether the component is playing.
2298 * Determine whether the sequence UI elements
2299 * should be visible.
2304 } & ComponentConfiguration;
2307 * Enumeration for slider mode.
2310 * @description Modes for specifying how transitions
2311 * between images are performed in slider mode. Only
2312 * applicable when the slider component determines
2313 * that transitions with motion is possilble. When it
2314 * is not, the stationary mode will be applied.
2317 declare var SliderConfigurationMode: {|
2319 +Stationary: 1, // 1
2323 * Interface for configuration of slider ids.
2326 export interface SliderConfigurationIds {
2328 * Id for the image plane in the background.
2333 * Id for the image plane in the foreground.
2338 * Interface for configuration of slider component.
2340 * var viewer = new Viewer({
2344 * initialPosition: 0.5,
2346 * background: '<background-id>',
2347 * foreground: '<foreground-id>',
2349 * sliderVisible: true,
2356 export type SliderConfiguration = {
2358 * Initial position of the slider on the interval [0, 1].
2359 * @description Configures the initial position of the slider.
2360 * The inital position value will be used when the component
2364 initialPosition?: number,
2368 * @description Configures the component to show the image
2369 * planes for the supplied image ids in the foreground
2370 * and the background.
2372 ids?: SliderConfigurationIds,
2375 * Value indicating whether the slider should be visible.
2376 * @description Set the value controlling if the
2377 * slider is visible.
2380 sliderVisible?: boolean,
2383 * Mode used for image pair transitions.
2384 * @description Configures the mode for transitions between
2387 mode?: $Values<typeof SliderConfigurationMode>,
2389 } & ComponentConfiguration;
2391 declare var CameraVisualizationMode: {|
2393 +Homogeneous: 1, // 1
2395 +ConnectedComponent: 3, // 3
2399 declare var OriginalPositionMode: {|
2405 declare var PointVisualizationMode: {|
2412 * Interface for configuration of spatial component.
2415 * var viewer = new Viewer({
2420 * cameraVisualizationMode: CameraVisualizationMode.Cluster,
2421 * cellsVisible: true,
2422 * originalPositionMode: OriginalPositionMode.Altitude,
2424 * pointVisualizationMode: PointVisualizationMode.Hidden,
2431 export type SpatialConfiguration = {
2433 * The camera size on the interval [0.01, 1].
2436 cameraSize?: number,
2439 * Specify the camera visualization mode.
2440 * @default CameraVisualizationMode.Homogeneous
2442 cameraVisualizationMode?: $Values<typeof CameraVisualizationMode>,
2445 * Specify if the currently rendered cells should be visualize on
2446 * an approximated ground plane.
2449 cellsVisible?: boolean,
2452 * Cell grid depth from the cell of the currently
2454 * @description Max value is 3. Value will be clamped
2455 * to the interval [1, 3].
2458 cellGridDepth?: number,
2461 * Specify the original position visualization mode.
2462 * @description The original positions are hidden
2464 * @default OriginalPositionMode.Hidden
2466 originalPositionMode?: $Values<typeof OriginalPositionMode>,
2469 * The point size on the interval [0.01, 1].
2475 * Specify if the points should be visible or not.
2476 * @deprecated `pointsVisible` will be removed in
2477 * v5.x. Use {@link pointVisualizationMode} instead.
2480 pointsVisible?: boolean,
2483 * Specify how point clouds should be visualized.
2484 * @default PointVisualizationMode.Original
2486 pointVisualizationMode?: $Values<typeof PointVisualizationMode>,
2488 } & ComponentConfiguration;
2491 * Enumeration for tag modes
2494 * @description Modes for the interaction in the tag component.
2497 declare var TagMode: {|
2499 +CreatePoint: 1, // 1
2500 +CreatePoints: 2, // 2
2501 +CreatePolygon: 3, // 3
2502 +CreateRect: 4, // 4
2503 +CreateRectDrag: 5, // 5
2507 * Interface for configuration of tag component.
2510 * var viewer = new Viewer({
2514 * createColor: 0xFF0000,
2515 * mode: TagMode.CreateRect,
2522 export type TagConfiguration = {
2524 * The color of vertices and edges for tags that
2525 * are being created.
2528 createColor?: number,
2531 * Show an indicator at the centroid of the points geometry
2532 * that creates the geometry when clicked.
2535 indicatePointsCompleter?: boolean,
2538 * The interaction mode of the tag component.
2539 * @default TagMode.Default
2541 mode?: $Values<typeof TagMode>,
2543 } & ComponentConfiguration;
2544 export type ZoomConfiguration = {
2546 * The size of the ui elements.
2547 * @default ComponentSize.Automatic
2549 size?: $Values<typeof ComponentSize>,
2551 } & ComponentConfiguration;
2554 * Interface for configuration of navigation component.
2557 * var viewer = new Viewer({
2570 export type NavigationFallbackConfiguration = {
2572 * Enable or disable the sequence arrows.
2578 * Enable or disable the spatial arrows.
2583 } & ComponentConfiguration;
2586 * Interface for the fallback component options that can be
2587 * provided to the viewer when the browser does not have
2591 export interface FallbackOptions {
2593 * Show static images without pan, zoom, or transitions.
2594 * @description Fallback for `image` when WebGL is not supported.
2600 * Show static navigation arrows in the corners.
2601 * @description Fallback for `direction` and `sequence` when WebGL is not supported.
2604 navigation?: boolean | NavigationFallbackConfiguration;
2607 * Interface for the component options that can be provided to the viewer.
2610 export interface ComponentOptions {
2615 attribution?: boolean;
2618 * Show indicator for bearing and field of view.
2621 bearing?: boolean | BearingConfiguration;
2624 * Cache images around the current one.
2627 cache?: boolean | CacheConfiguration;
2630 * Use a cover to avoid loading data until viewer interaction.
2636 * Show spatial direction arrows for navigation.
2637 * @description Default spatial navigation when there is WebGL support.
2638 * Requires WebGL support.
2641 direction?: boolean | DirectionConfiguration;
2644 * Enable fallback component options
2645 * when the browser does not have WebGL support.
2646 * @default undefined
2648 fallback?: FallbackOptions;
2651 * Show image planes in 3D.
2652 * @description Requires WebGL support.
2658 * Enable use of keyboard commands.
2659 * @description Requires WebGL support.
2662 keyboard?: boolean | KeyboardConfiguration;
2665 * Enable an interface for showing 3D markers in the viewer.
2666 * @description Requires WebGL support.
2669 marker?: boolean | MarkerConfiguration;
2672 * Enable mouse, pen, and touch interaction for zoom and pan.
2673 * @description Requires WebGL support.
2676 pointer?: boolean | PointerConfiguration;
2679 * Show HTML popups over images.
2680 * @description Requires WebGL support.
2686 * Show sequence related navigation.
2687 * @description Default sequence navigation when there is WebGL support.
2690 sequence?: boolean | SequenceConfiguration;
2693 * Show a slider for transitioning between image planes.
2694 * @description Requires WebGL support.
2697 slider?: boolean | SliderConfiguration;
2700 * Enable an interface for showing spatial data in the viewer.
2701 * @description Requires WebGL support.
2704 spatial?: boolean | SpatialConfiguration;
2707 * Enable an interface for drawing 2D geometries on top of images.
2708 * @description Requires WebGL support.
2711 tag?: boolean | TagConfiguration;
2714 * Show buttons for zooming in and out.
2715 * @description Requires WebGL support.
2718 zoom?: boolean | ZoomConfiguration;
2721 * Interface for the URL options that can be provided to the viewer.
2724 export interface UrlOptions {
2727 * @description Host used for links to the full
2728 * mapillary website.
2729 * @default {"www.mapillary.com"}
2731 exploreHost?: string;
2735 * @description Used for all hosts.
2736 * @default {"https"}
2741 * Enumeration for camera controls.
2742 * @description Specifies different modes for how the
2743 * camera is controlled through pointer, keyboard or
2744 * other modes of input.
2749 declare var CameraControls: {|
2756 * [object Object],[object Object],[object Object]
2758 export interface ViewerOptions {
2760 * Optional access token for API requests of
2762 * @description [object Object],[object Object],[object Object]
2764 accessToken?: string;
2767 * Value specifying the initial camera controls of
2769 * @default [object Object],[object Object]
2771 cameraControls?: $Values<typeof CameraControls>;
2774 * Value specifying if combined panning should be activated.
2777 combinedPanning?: boolean;
2780 * Component options.
2782 component?: ComponentOptions;
2785 * The HTML element in which MapillaryJS will render the
2786 * viewer, or the element's string `id`. The
2787 * specified element must have no children.
2789 container: string | HTMLElement;
2792 * Optional data provider class instance for API and static
2793 * resource requests.
2794 * @description [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
2796 dataProvider?: IDataProvider;
2799 * Optional `image-id` to start from. The id
2800 * can be any Mapillary image. If a id is provided the viewer is
2801 * bound to that id until it has been fully loaded. If null is provided
2802 * no image is loaded at viewer initialization and the viewer is not
2803 * bound to any particular id. Any image can then be navigated to
2804 * with e.g. `viewer.moveTo("<my-image-id>")`.
2809 * Value indicating if the viewer should fetch high resolution
2811 * @description Can be used when extending MapillaryJS with
2812 * a custom data provider. If no image tiling server exists
2813 * the image tiling can be inactivated to avoid error
2814 * messages about non-existing tiles in the console.
2817 imageTiling?: boolean;
2820 * The render mode in the viewer.
2821 * @default [object Object],[object Object]
2823 renderMode?: $Values<typeof RenderMode>;
2826 * A base URL for retrieving a PNG sprite image and json metadata file.
2827 * File name extensions will be automatically appended.
2832 * If `true`, the viewer will automatically resize when the
2833 * browser window resizes.
2836 trackResize?: boolean;
2839 * The transtion mode in the viewer.
2840 * @default [object Object],[object Object]
2842 transitionMode?: $Values<typeof TransitionMode>;
2849 declare class KeyboardService {
2850 constructor(canvasContainer: HTMLElement): this;
2852 declare class MouseService {
2854 container: EventTarget,
2855 canvasContainer: EventTarget,
2856 domContainer: EventTarget,
2860 claimMouse(name: string, zindex: number): void;
2861 unclaimMouse(name: string): void;
2862 deferPixels(name: string, deferPixels: number): void;
2863 undeferPixels(name: string): void;
2864 claimWheel(name: string, zindex: number): void;
2865 unclaimWheel(name: string): void;
2868 * Enumeration for alignments
2873 declare var Alignment: {|
2875 +BottomLeft: 1, // 1
2876 +BottomRight: 2, // 2
2884 declare interface ISpriteAtlas {
2887 declare class SpriteAtlas implements ISpriteAtlas {
2892 declare interface Sprite {
2899 declare interface Sprites {
2900 [key: string]: Sprite;
2902 declare class SpriteService {
2903 constructor(sprite?: string): this;
2906 declare interface TouchPinch {
2908 * X client coordinate for center of pinch.
2913 * Y client coordinate for center of pinch.
2918 * X page coordinate for center of pinch.
2923 * Y page coordinate for center of pinch.
2928 * X screen coordinate for center of pinch.
2933 * Y screen coordinate for center of pinch.
2938 * Distance change in X direction between touches
2939 * compared to previous event.
2944 * Distance change in Y direction between touches
2945 * compared to previous event.
2950 * Pixel distance between touches.
2955 * Change in pixel distance between touches compared
2956 * to previous event.
2958 distanceChange: number;
2961 * Distance in X direction between touches.
2966 * Distance in Y direction between touches.
2971 * Original touch event.
2973 originalEvent: TouchEvent;
2985 declare class TouchService {
2986 constructor(canvasContainer: HTMLElement, domContainer: HTMLElement): this;
2990 * Test whether the current browser supports the full
2991 * functionality of MapillaryJS.
2992 * @description The full functionality includes WebGL rendering.
2994 * @example `var supported = isSupported();`
2996 declare function isSupported(): boolean;
2999 * Test whether the current browser supports the fallback
3000 * functionality of MapillaryJS.
3001 * @description The fallback functionality does not include WebGL
3002 * rendering, only 2D canvas rendering.
3004 * @example `var fallbackSupported = isFallbackSupported();`
3006 declare function isFallbackSupported(): boolean;
3007 export type ComparisonFilterOperator = "==" | "!=" | ">" | ">=" | "<" | "<=";
3008 export type SetMembershipFilterOperator = "in" | "!in";
3009 export type CombiningFilterOperator = "all";
3010 export type FilterOperator =
3011 | CombiningFilterOperator
3012 | ComparisonFilterOperator
3013 | SetMembershipFilterOperator;
3014 declare type FilterKey =
3030 export type FilterValue = boolean | number | string;
3031 export type ComparisonFilterExpression = [
3032 ComparisonFilterOperator,
3036 export type SetMembershipFilterExpression = (
3037 | SetMembershipFilterOperator
3041 export type CombiningFilterExpression = (
3042 | CombiningFilterOperator
3043 | ComparisonFilterExpression
3044 | SetMembershipFilterExpression
3046 export type FilterExpression =
3047 | ComparisonFilterExpression
3048 | SetMembershipFilterExpression
3049 | CombiningFilterExpression;
3053 export type ViewerEventType =
3077 declare var RenderPass: {|
3083 * @description [object Object],[object Object],[object Object],[object Object],[object Object]
3085 export interface ICustomRenderer {
3087 * A unique renderer id.
3092 * The custom renderer's render pass.
3093 * @description [object Object],[object Object],[object Object]
3095 renderPass: $Values<typeof RenderPass>;
3098 * Method called when the renderer has been added to the
3099 * viewer. This gives the
3100 * renderer a chance to initialize gl resources and
3101 * register event listeners.
3102 * @description [object Object],[object Object],[object Object],[object Object],[object Object]
3103 * @param {IViewer} viewer - The viewer this custom renderer
3104 * was just added to.
3105 * @param {LngLatAlt} reference - The viewer's current
3106 * reference position.
3107 * @param {WebGLRenderingContext | WebGL2RenderingContext} context -
3108 * The viewer's gl context.
3112 reference: LngLatAlt,
3113 context: WebGLRenderingContext
3117 * Method called when the viewer's reference position has changed.
3118 * This gives the renderer a chance to reposition its scene objects.
3119 * @description [object Object],[object Object],[object Object]
3120 * @param {IViewer} viewer - The viewer this custom renderer
3122 * @param {LngLatAlt} reference - The viewer's current
3123 * reference position.
3125 onReference(viewer: IViewer, reference: LngLatAlt): void;
3128 * Method called when the renderer has been removed from the
3129 * viewer. This gives the
3130 * renderer a chance to clean up gl resources and event
3132 * @description [object Object],[object Object],[object Object]
3133 * @param {IViewer} viewer - The viewer this custom renderer
3134 * was just removed from.
3135 * @param {WebGLRenderingContext | WebGL2RenderingContext} context -
3136 * The viewer's gl context.
3138 onRemove(viewer: IViewer, context: WebGLRenderingContext): void;
3141 * Called during an animation frame allowing the renderer to draw
3142 * into the GL context. The layer cannot make assumptions
3143 * about the current GL state.
3144 * @description Take a look at the
3145 * [WebGL model view projection article](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection)
3146 * on MDN for an introduction to the view and projection matrices.
3147 * @param {WebGLRenderingContext | WebGL2RenderingContext} context The
3148 * viewer's WebGL context.
3149 * @param {Array<number>} viewMatrix The viewer's view matrix.
3150 * @param {Array<number>} projectionMatrix The viewers's projection
3154 context: WebGLRenderingContext,
3155 viewMatrix: number[],
3156 projectionMatrix: number[]
3160 * @interface PointOfView
3162 * Interface that represents the point of view of the viewer.
3164 export interface PointOfView {
3166 * Value indicating the current bearing of the viewer
3167 * measured in degrees clockwise with respect to north.
3168 * Ranges from 0° to 360°.
3173 * The camera tilt in degrees, relative to a horizontal plane.
3174 * Ranges from 90° (directly upwards) to -90° (directly downwards).
3178 export interface IViewer {
3179 +dataProvider: IDataProvider;
3180 +isNavigable: boolean;
3181 activateCombinedPanning(): void;
3182 activateComponent(name: string): void;
3183 activateCover(): void;
3184 addCustomRenderer(renderer: ICustomRenderer): void;
3185 attachCustomCameraControls(controls: ICustomCameraControls): void;
3186 deactivateCombinedPanning(): void;
3187 deactivateComponent(name: string): void;
3188 deactivateCover(): void;
3189 detachCustomCameraControls(): Promise<ICustomCameraControls>;
3190 fire<T>(type: ViewerEventType, event: T): void;
3191 getBearing(): Promise<number>;
3192 getCameraControls(): Promise<$Values<typeof CameraControls>>;
3193 getCanvas(): HTMLCanvasElement;
3194 getCanvasContainer(): HTMLDivElement;
3195 getCenter(): Promise<number[]>;
3196 getComponent<TComponent: Component<ComponentConfiguration>>(
3199 getContainer(): HTMLElement;
3200 getFieldOfView(): Promise<number>;
3201 getImage(): Promise<Image>;
3202 getPointOfView(): Promise<PointOfView>;
3203 getPosition(): Promise<LngLat>;
3204 getReference(): Promise<LngLatAlt>;
3205 getZoom(): Promise<number>;
3206 hasCustomCameraControls(controls: ICustomCameraControls): boolean;
3207 hasCustomRenderer(rendererId: string): boolean;
3208 moveDir(direction: $Values<typeof NavigationDirection>): Promise<Image>;
3209 moveTo(imageId: string): Promise<Image>;
3210 off<T>(type: ViewerEventType, handler: (event: T) => void): void;
3211 on<T>(type: ViewerEventType, handler: (event: T) => void): void;
3212 project(lngLat: LngLat): Promise<number[]>;
3213 projectFromBasic(basicPoint: number[]): Promise<number[]>;
3215 removeCustomRenderer(rendererId: string): void;
3217 setCameraControls(controls: $Values<typeof CameraControls>): void;
3218 setCenter(center: number[]): void;
3219 setFieldOfView(fov: number): void;
3220 setFilter(filter?: FilterExpression): Promise<void>;
3221 setRenderMode(renderMode: $Values<typeof RenderMode>): void;
3222 setTransitionMode(transitionMode: $Values<typeof TransitionMode>): void;
3223 setAccessToken(accessToken?: string): Promise<void>;
3224 setZoom(zoom: number): void;
3225 triggerRerender(): void;
3226 unproject(pixelPoint: number[]): Promise<LngLat>;
3227 unprojectToBasic(pixelPoint: number[]): Promise<number[]>;
3231 * @description [object Object],[object Object],[object Object]
3233 export interface ICustomCameraControls {
3235 * Method called when the camera controls have been
3236 * activated and is responsible for moving the
3237 * viewer's camera and defining its projection. This
3238 * method gives the camera controls a chance to initialize
3239 * resources, perform any transitions, and determine
3241 * @description [object Object],[object Object],[object Object]
3242 * @param {IViewer} viewer - The viewer this custom
3243 * camera controls instance was just added to.
3244 * @param {Array<number>} viewMatrix - The viewer's view matrix.
3245 * @param {Array<number>} projectionMatrix - The viewers's
3246 * projection matrix.
3247 * @param {LngLatAlt} reference - The viewer's reference.
3251 viewMatrix: number[],
3252 projectionMatrix: number[],
3253 reference: LngLatAlt
3257 * Method called for each animation frame.
3258 * @desdcription Custom camera controls can choose to
3259 * make updates on each animation frame or only based on
3260 * user input. Invoking updates on each animation frame is
3261 * more resource intensive.
3262 * @param {IViewer} viewer - The viewer this custom
3263 * camera controls instance is attached to.
3264 * @param {number} frameId - The request animation frame's id.
3266 onAnimationFrame(viewer: IViewer, frameId: number): void;
3269 * Method called when the camera controls have been
3270 * attached to the viewer.
3271 * This gives the camera controls a chance to initialize
3273 * @description [object Object],[object Object],[object Object]
3274 * @param {IViewer} viewer - The viewer this custom
3275 * camera controls instance was just added to.
3279 viewMatrixCallback: (viewMatrix: number[]) => void,
3280 projectionMatrixCallback: (projectionMatrix: number[]) => void
3284 * Method called when the camera controls have been deactivated.
3285 * This gives the camera controls a chance to clean up resources
3286 * and event listeners.
3287 * @param {IViewer} viewer - The viewer this custom camera controls
3288 * instance is attached to.
3290 onDeactivate(viewer: IViewer): void;
3293 * Method called when the camera controls have been detached from
3294 * the viewer. This gives the camera controls a chance to clean
3295 * up resources and event listeners.
3296 * @description [object Object],[object Object],[object Object]
3297 * @param {IViewer} viewer - The viewer this custom camera
3298 * controls instance was just detached from.
3300 onDetach(viewer: IViewer): void;
3303 * Method called when the viewer's reference position has changed.
3304 * This gives the custom camera controls a chance to reposition
3306 * @description [object Object],[object Object],[object Object],[object Object],[object Object]
3307 * @param {IViewer} viewer - The viewer this custom renderer
3309 * @param {LngLatAlt} reference - The viewer's current
3310 * reference position.
3312 onReference(viewer: IViewer, reference: LngLatAlt): void;
3315 * Method called when the viewer has been resized.
3316 * @description Use this method to modify the projection.
3318 onResize(viewer: IViewer): void;
3321 * Interface for general viewer events.
3323 export interface ViewerEvent {
3325 * The viewer object that fired the event.
3332 type: ViewerEventType;
3335 * Interface for bearing viewer events.
3337 export type ViewerBearingEvent = {
3339 * Bearing is measured in degrees
3340 * clockwise with respect to north.
3341 * @description [object Object],[object Object],[object Object]
3349 * Interface for viewer data loading events.
3350 * @description Fired when any viewer data (image, mesh, metadata, etc)
3351 * begins loading or changing asyncronously as a result of viewer
3354 * Also fired when the data has finished loading and the viewer
3355 * is able to perform the navigation.
3357 export type ViewerDataLoadingEvent = {
3359 * Indicates if the viewer navigation is awaiting data load.
3362 type: "dataloading",
3367 * Interface for mouse-related viewer events.
3369 * // The `click` event is an example of a `ViewerMouseEvent`.
3370 * // Set up an event listener on the viewer.
3371 * viewer.on('click', function(e) {
3372 * // The event object contains information like the
3373 * // coordinates of the point in the viewer that was clicked.
3374 * console.log('A click event has occurred at ' + e.lngLat);
3378 export type ViewerMouseEvent = {
3380 * The basic coordinates in the current image of the mouse
3382 * @description [object Object],[object Object],[object Object]
3384 basicPoint: number[],
3387 * The geographic location in the viewer of the mouse event target.
3388 * @description In some situations the viewer can not determine a valid
3389 * geographic location for the mouse event target. In that case the
3390 * geographic coordinates will be `null`.
3395 * The pixel coordinates of the mouse event target, relative to
3396 * the viewer and measured from the top left corner.
3398 pixelPoint: number[],
3401 * The original event that triggered the viewer event.
3403 originalEvent: MouseEvent,
3421 * Interface for navigable viewer events.
3423 export type ViewerNavigableEvent = {
3425 * The navigable state indicates if the viewer supports
3426 * moving, i.e. calling the `moveTo` and `moveDir`
3427 * methods. The viewer will not be in a navigable state if the cover
3428 * is activated and the viewer has been supplied a id. When the cover
3429 * is deactivated or activated without being supplied a id it will
3438 * Interface for navigation edge viewer events.
3440 export type ViewerNavigationEdgeEvent = {
3442 * The viewer's current navigation edge status.
3444 status: NavigationEdgeStatus,
3445 type: "sequenceedges" | "spatialedges",
3450 * Interface for viewer image events.
3452 export type ViewerImageEvent = {
3454 * The viewer's current image.
3462 * Interface for viewer state events.
3464 * // The `fov` event is an example of a `ViewerStateEvent`.
3465 * // Set up an event listener on the viewer.
3466 * viewer.on('fov', function(e) {
3467 * console.log('A fov event has occured');
3471 export type ViewerStateEvent = {
3475 type: "fov" | "moveend" | "movestart" | "position" | "pov" | "remove",
3478 export type ComponentName =
3494 export type FallbackComponentName = "imagefallback" | "navigationfallback";
3496 * Interface for viewer load events.
3497 * @description Fired immediately after all necessary resources
3498 * have been downloaded and the first visually complete
3499 * rendering of the viewer has occurred.
3501 * The visually complete rendering does not include custom
3504 * This event is only fired for viewer configurations where
3505 * the WebGL context is created, i.e. not when using the
3506 * fallback functionality only.
3508 * // Set up an event listener on the viewer.
3509 * viewer.on('load', function(e) {
3510 * console.log('A load event has occured');
3514 export type ViewerLoadEvent = {
3520 * Interface for viewer reference events.
3522 export type ViewerReferenceEvent = {
3524 * The viewer's current reference.
3526 reference: LngLatAlt,
3533 * @classdesc The Viewer object represents the navigable image viewer.
3534 * Create a Viewer by specifying a container, client ID, image ID and
3535 * other options. The viewer exposes methods and events for programmatic
3538 * In the case of asynchronous methods, MapillaryJS returns promises to
3539 * the results. Notifications are always emitted through JavaScript events.
3541 declare class Viewer implements IEventEmitter, IViewer {
3543 * Create a new viewer instance.
3544 * @description The `Viewer` object represents the street imagery
3545 * viewer on your web page. It exposes methods and properties that
3546 * you can use to programatically change the view, and fires
3547 * events as users interact with it.
3549 * It is possible to initialize the viewer with or
3552 * When you want to show a specific image in the viewer from
3553 * the start you should initialize it with a ID.
3555 * When you do not know the first image ID at implementation
3556 * time, e.g. in a map-viewer application you should initialize
3557 * the viewer without a ID and call `moveTo` instead.
3559 * When initializing with an ID the viewer is bound to that ID
3560 * until the image for that ID has been successfully loaded.
3561 * Also, a cover with the image of the ID will be shown.
3562 * If the data for that ID can not be loaded because the ID is
3563 * faulty or other errors occur it is not possible to navigate
3564 * to another ID because the viewer is not navigable. The viewer
3565 * becomes navigable when the data for the ID has been loaded and
3566 * the image is shown in the viewer. This way of initializing
3567 * the viewer is mostly for embedding in blog posts and similar
3568 * where one wants to show a specific image initially.
3570 * If the viewer is initialized without a ID (with null or
3571 * undefined) it is not bound to any particular ID and it is
3572 * possible to move to any ID with `viewer.moveTo("<my-image-id>")`.
3573 * If the first move to a ID fails it is possible to move to another
3574 * ID. The viewer will show a black background until a move
3575 * succeeds. This way of intitializing is suited for a map-viewer
3576 * application when the initial ID is not known at implementation
3578 * @param {ViewerOptions} options - Optional configuration object
3579 * specifying Viewer's and the components' initial setup.
3581 * var viewer = new Viewer({
3582 * accessToken: "<my-access-token>",
3583 * container: "<my-container-id>",
3587 constructor(options: ViewerOptions): this;
3590 * Returns the data provider used by the viewer to fetch
3591 * all contracts, ents, and buffers.
3592 * @description [object Object],[object Object],[object Object]
3593 * @returns {IDataProvider} The viewer's data provider.
3595 dataProvider: IDataProvider;
3598 * Return a boolean indicating if the viewer is in a navigable state.
3599 * @description [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
3600 * @returns {boolean} Boolean indicating whether the viewer is navigable.
3602 isNavigable: boolean;
3605 * Activate the combined panning functionality.
3606 * @description The combined panning functionality is active by default.
3608 activateCombinedPanning(): void;
3611 * Activate a component.
3612 * @param {string} name - Name of
3613 * the component which will become active.
3615 * viewer.activateComponent("marker");
3618 activateComponent(name: string): void;
3621 * Activate the cover (deactivates all other components).
3623 activateCover(): void;
3626 * Add a custom renderer to the viewer's rendering pipeline.
3627 * @description During a render pass, custom renderers
3628 * are called in the order they were added.
3629 * @param renderer - The custom renderer implementation.
3631 addCustomRenderer(renderer: ICustomRenderer): void;
3634 * Attach custom camera controls to control the viewer's
3635 * camera pose and projection.
3636 * @description [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
3637 * @param controls - The custom camera controls implementation.
3638 * @throws {MapillaryError} When camera controls attached
3639 * are already attached to the viewer.
3641 attachCustomCameraControls(controls: ICustomCameraControls): void;
3644 * Deactivate the combined panning functionality.
3645 * @description Deactivating the combined panning functionality
3646 * could be needed in scenarios involving sequence only navigation.
3648 deactivateCombinedPanning(): void;
3651 * Deactivate a component.
3652 * @param {string} name - Name
3653 * of component which become inactive.
3655 * viewer.deactivateComponent("pointer");
3658 deactivateComponent(name: string): void;
3661 * Deactivate the cover (activates all components marked as active).
3663 deactivateCover(): void;
3666 * Detach a previously attached custom camera control
3667 * instance from the viewer.
3668 * @description If no custom camera control instance
3669 * has previously been attached, calling this method
3672 * Already attached custom camera controls need to
3673 * be detached before attaching another custom camera
3676 detachCustomCameraControls(): Promise<ICustomCameraControls>;
3679 * Get the bearing of the current viewer camera.
3680 * @description The bearing depends on how the camera
3681 * is currently rotated and does not correspond
3682 * to the compass angle of the current image if the view
3685 * Bearing is measured in degrees clockwise with respect to
3687 * @returns {Promise<number>} Promise to the bearing
3688 * of the current viewer camera.
3690 * viewer.getBearing().then(b => { console.log(b); });
3693 getBearing(): Promise<number>;
3696 * Get the viewer's camera control mode.
3697 * @description The camera control mode determines
3698 * how the camera is controlled when the viewer
3699 * receives pointer and keyboard input.
3700 * @returns {$Values<
3702 CameraControls>} controls - Camera control mode.
3704 * viewer.getCameraControls().then(c => { console.log(c); });
3707 getCameraControls(): Promise<$Values<typeof CameraControls>>;
3710 * Returns the viewer's canvas element.
3711 * @description This is the element onto which the viewer renders
3712 * the WebGL content.
3713 * @returns {HTMLCanvasElement} The viewer's canvas element, or
3714 * null or not initialized.
3716 getCanvas(): HTMLCanvasElement;
3719 * Returns the HTML element containing the viewer's canvas element.
3720 * @description This is the element to which event bindings for viewer
3721 * interactivity (such as panning and zooming) are attached.
3722 * @returns {HTMLDivElement} The container for the viewer's
3725 getCanvasContainer(): HTMLDivElement;
3728 * Get the basic coordinates of the current image that is
3729 * at the center of the viewport.
3730 * @description Basic coordinates are 2D coordinates on the [0, 1] interval
3731 * and have the origin point, (0, 0), at the top left corner and the
3732 * maximum value, (1, 1), at the bottom right corner of the original
3734 * @returns {Promise<number[]>} Promise to the basic coordinates
3735 * of the current image at the center for the viewport.
3737 * viewer.getCenter().then(c => { console.log(c); });
3740 getCenter(): Promise<number[]>;
3744 * @param {string} name - Name of component.
3745 * @returns {Component} The requested component.
3747 * var pointerComponent = viewer.getComponent("pointer");
3750 getComponent<TComponent: Component<ComponentConfiguration>>(
3755 * Returns the viewer's containing HTML element.
3756 * @returns {HTMLElement} The viewer's container.
3758 getContainer(): HTMLElement;
3761 * Get the viewer's current vertical field of view.
3762 * @description The vertical field of view rendered on the viewer canvas
3763 * measured in degrees.
3764 * @returns {Promise<number>} Promise to the current field of view
3765 * of the viewer camera.
3767 * viewer.getFieldOfView().then(fov => { console.log(fov); });
3770 getFieldOfView(): Promise<number>;
3773 * Get the viewer's current image.
3774 * @returns {Promise<Image>} Promise to the current image.
3776 * viewer.getImage().then(image => { console.log(image.id); });
3779 getImage(): Promise<Image>;
3782 * Get the viewer's current point of view.
3783 * @returns {Promise<PointOfView>} Promise to the current point of view
3784 * of the viewer camera.
3786 * viewer.getPointOfView().then(pov => { console.log(pov); });
3789 getPointOfView(): Promise<PointOfView>;
3792 * Get the viewer's current position
3793 * @returns {Promise<LngLat>} Promise to the viewers's current
3796 * viewer.getPosition().then(pos => { console.log(pos); });
3799 getPosition(): Promise<LngLat>;
3802 * Get the viewer's current reference position.
3803 * @description The reference position specifies the origin in
3804 * the viewer's topocentric coordinate system.
3805 * @returns {Promise<LngLatAlt>} Promise to the reference position.
3807 * viewer.getReference().then(reference => { console.log(reference); });
3810 getReference(): Promise<LngLatAlt>;
3813 * Get the image's current zoom level.
3814 * @returns {Promise<number>} Promise to the viewers's current
3817 * viewer.getZoom().then(z => { console.log(z); });
3820 getZoom(): Promise<number>;
3823 * Check if a controls instance is the camera controls that are
3824 * currently attached to the viewer.
3825 * @param {ICustomCameraControls} controls - Camera controls instance.
3826 * @returns {boolean} Value indicating whether the controls instance
3827 * is currently attached.
3829 hasCustomCameraControls(controls: ICustomCameraControls): boolean;
3832 * Check if a custom renderer has been added to the viewer's
3833 * rendering pipeline.
3834 * @param {string} id - Unique ID of the custom renderer.
3835 * @returns {boolean} Value indicating whether the customer
3836 * renderer has been added.
3838 hasCustomRenderer(rendererId: string): boolean;
3841 * Navigate in a given direction.
3844 NavigationDirection>} direction - Direction in which which to move.
3845 * @returns {Promise<Image>} Promise to the image that was navigated to.
3846 * @throws If the current image does not have the edge direction
3847 * or the edges has not yet been cached.
3848 * @throws Propagates any IO errors to the caller.
3849 * @throws When viewer is not navigable.
3850 * @throws [object Object],[object Object],[object Object]
3852 * viewer.moveDir(NavigationDirection.Next).then(
3853 * image => { console.log(image); },
3854 * error => { console.error(error); });
3857 moveDir(direction: $Values<typeof NavigationDirection>): Promise<Image>;
3860 * Navigate to a given image ID.
3861 * @param {string} imageId - Id of the image to move to.
3862 * @returns {Promise<Image>} Promise to the image that was navigated to.
3863 * @throws Propagates any IO errors to the caller.
3864 * @throws When viewer is not navigable.
3865 * @throws [object Object],[object Object],[object Object]
3867 * viewer.moveTo("<my-image-id>").then(
3868 * image => { console.log(image); },
3869 * error => { console.error(error); });
3872 moveTo(imageId: string): Promise<Image>;
3875 * Project geodetic coordinates to canvas pixel coordinates.
3876 * @description The geodetic coordinates may not always correspond to pixel
3877 * coordinates, e.g. if the geodetic coordinates have a position behind the
3878 * viewer camera. In the case of no correspondence the returned value will
3881 * If the distance from the viewer camera position to the provided
3882 * longitude-latitude is more than 1000 meters `null` will be returned.
3884 * The projection is performed from the ground plane, i.e.
3885 * the altitude with respect to the ground plane for the geodetic
3888 * Note that whenever the camera moves, the result of the method will be
3890 * @param {LngLat} lngLat - Geographical coordinates to project.
3891 * @returns {Promise<Array<number>>} Promise to the pixel coordinates corresponding
3894 * viewer.project({ lat: 0, lng: 0 })
3895 * .then(pixelPoint => {
3896 * if (!pixelPoint) {
3897 * console.log("no correspondence");
3900 * console.log(pixelPoint);
3904 project(lngLat: LngLat): Promise<number[]>;
3907 * Project basic image coordinates for the current image to canvas pixel
3909 * @description The basic image coordinates may not always correspond to a
3910 * pixel point that lies in the visible area of the viewer container. In the
3911 * case of no correspondence the returned value can be `null`.
3912 * @param {Array<number>} basicPoint - Basic images coordinates to project.
3913 * @returns {Promise<Array<number>>} Promise to the pixel coordinates corresponding
3914 * to the basic image point.
3916 * viewer.projectFromBasic([0.3, 0.7])
3917 * .then(pixelPoint => { console.log(pixelPoint); });
3920 projectFromBasic(basicPoint: number[]): Promise<number[]>;
3923 * Clean up and release all internal resources associated with
3925 * @description This includes DOM elements, event bindings, and
3928 * Use this method when you are done using the viewer and wish to
3929 * ensure that it no longer consumes browser resources. Afterwards,
3930 * you must not call any other methods on the viewer.
3939 * Remove a custom renderer from the viewer's rendering pipeline.
3940 * @param id - Unique ID of the custom renderer.
3942 removeCustomRenderer(rendererId: string): void;
3945 * Detect the viewer's new width and height and resize it
3947 * @description [object Object],[object Object],[object Object],[object Object],[object Object]
3955 * Set the viewer's camera control mode.
3956 * @description The camera control mode determines
3957 * how the camera is controlled when the viewer
3958 * receives pointer and keyboard input.
3960 * Changing the camera control mode is not possible
3961 * when the slider component is active and attempts
3962 * to do so will be ignored.
3965 CameraControls>} controls - Camera control mode.
3967 * viewer.setCameraControls(CameraControls.Street);
3970 setCameraControls(controls: $Values<typeof CameraControls>): void;
3973 * Set the basic coordinates of the current image to be in the
3974 * center of the viewport.
3975 * @description Basic coordinates are 2D coordinates on the [0, 1] interval
3976 * and has the origin point, (0, 0), at the top left corner and the
3977 * maximum value, (1, 1), at the bottom right corner of the original
3979 * @param {number[]} The basic coordinates of the current
3980 * image to be at the center for the viewport.
3982 * viewer.setCenter([0.5, 0.5]);
3985 setCenter(center: number[]): void;
3988 * Set the viewer's current vertical field of view.
3989 * @description Sets the vertical field of view rendered
3990 * on the viewer canvas measured in degrees. The value
3991 * will be clamped to be able to set a valid zoom level
3992 * based on the projection model of the current image and
3993 * the viewer's current render mode.
3994 * @param {number} fov - Vertical field of view in degrees.
3996 * viewer.setFieldOfView(45);
3999 setFieldOfView(fov: number): void;
4002 * Set the filter selecting images to use when calculating
4003 * the spatial edges.
4004 * @description [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
4005 * @param {FilterExpression} [filter] - The filter expression.
4006 * Applied filter is cleared if omitted.
4007 * @returns {Promise<void>} Promise that resolves after filter is applied.
4010 * viewer.setFilter(["==", "cameraType", "spherical"]);
4011 * viewer.setFilter([">=", "capturedAt", <my-time-stamp>]);
4012 * viewer.setFilter(["in", "sequenceId", "<sequence-id-1>", "<sequence-id-2>"]);
4015 setFilter(filter?: FilterExpression): Promise<void>;
4018 * Set the viewer's render mode.
4021 RenderMode>} renderMode - Render mode.
4023 * viewer.setRenderMode(RenderMode.Letterbox);
4026 setRenderMode(renderMode: $Values<typeof RenderMode>): void;
4029 * Set the viewer's transition mode.
4032 TransitionMode>} transitionMode - Transition mode.
4034 * viewer.setTransitionMode(TransitionMode.Instantaneous);
4037 setTransitionMode(transitionMode: $Values<typeof TransitionMode>): void;
4040 * Set an access token for authenticated API requests of protected
4043 * The token may be a user access token or a client access token.
4044 * @description [object Object],[object Object],[object Object]
4045 * @param {string} [accessToken] accessToken - Optional user
4046 * access token or client access token.
4047 * @returns {Promise<void>} Promise that resolves after token
4049 * @throws When viewer is not navigable.
4051 * viewer.setAccessToken("<my access token>")
4052 * .then(() => { console.log("user token set"); });
4055 setAccessToken(accessToken?: string): Promise<void>;
4058 * Set the image's current zoom level.
4059 * @description Possible zoom level values are on the [0, 3] interval.
4060 * Zero means zooming out to fit the image to the view whereas three
4061 * shows the highest level of detail.
4062 * @param {number} The image's current zoom level.
4064 * viewer.setZoom(2);
4067 setZoom(zoom: number): void;
4070 * Trigger the rendering of a single frame.
4071 * @description Use this method with custom renderers to
4072 * force the viewer to rerender when the custom content
4073 * changes. Calling this multiple times before the next
4074 * frame is rendered will still result in only a single
4075 * frame being rendered.
4077 triggerRerender(): void;
4080 * Unproject canvas pixel coordinates to geodetic
4082 * @description The pixel point may not always correspond to geodetic
4083 * coordinates. In the case of no correspondence the returned value will
4086 * The unprojection to a lngLat will be performed towards the ground plane, i.e.
4087 * the altitude with respect to the ground plane for the returned lngLat is zero.
4088 * @param {Array<number>} pixelPoint - Pixel coordinates to unproject.
4089 * @returns {Promise<LngLat>} Promise to the lngLat corresponding to the pixel point.
4091 * viewer.unproject([100, 100])
4092 * .then(lngLat => { console.log(lngLat); });
4095 unproject(pixelPoint: number[]): Promise<LngLat>;
4098 * Unproject canvas pixel coordinates to basic image coordinates for the
4100 * @description The pixel point may not always correspond to basic image
4101 * coordinates. In the case of no correspondence the returned value will
4103 * @param {Array<number>} pixelPoint - Pixel coordinates to unproject.
4104 * @returns {Promise<LngLat>} Promise to the basic coordinates corresponding
4105 * to the pixel point.
4107 * viewer.unprojectToBasic([100, 100])
4108 * .then(basicPoint => { console.log(basicPoint); });
4111 unprojectToBasic(pixelPoint: number[]): Promise<number[]>;
4113 fire<T>(type: string, event: T): void;
4114 off<T>(type: string, handler: (event: T) => void): void;
4115 on<T>(type: string, handler: (event: T) => void): void;
4118 * @class MapillaryError
4119 * @classdesc Generic Mapillary error.
4121 declare class MapillaryError extends Error {
4122 constructor(message?: string): this;
4125 * @class CancelMapillaryError
4126 * @classdesc Error thrown when a move to request has been
4127 * cancelled before completing because of a subsequent request.
4129 declare class CancelMapillaryError extends MapillaryError {
4130 constructor(message?: string): this;
4132 declare class ArgumentMapillaryError extends MapillaryError {
4133 constructor(message?: string): this;
4135 declare class GraphMapillaryError extends MapillaryError {
4136 constructor(message: string): this;
4138 declare class ConfigurationService {
4139 constructor(options: ViewerOptions): this;
4141 declare class Container {
4143 renderService: RenderService;
4144 glRenderer: GLRenderer;
4145 domRenderer: DOMRenderer;
4146 keyboardService: KeyboardService;
4147 mouseService: MouseService;
4148 touchService: TouchService;
4149 spriteService: SpriteService;
4150 +configurationService: ConfigurationService;
4152 options: ViewerOptions,
4153 stateService: StateService,
4156 canvas: HTMLCanvasElement;
4157 canvasContainer: HTMLDivElement;
4158 container: HTMLElement;
4159 domContainer: HTMLDivElement;
4162 declare type Func<T, TResult> = (item: T) => TResult;
4163 declare type FilterFunction = Func<Image, boolean>;
4166 * @classdesc Represents a class for creating image filters. Implementation and
4167 * definitions based on https://github.com/mapbox/feature-filter.
4169 declare class FilterCreator {
4171 * Create a filter from a filter expression.
4172 * @description The following filters are supported:
4188 * @param {FilterExpression} filter - Comparison, set membership or combinding filter
4190 * @returns {FilterFunction} Function taking a image and returning a boolean that
4191 * indicates whether the image passed the test or not.
4193 createFilter(filter: FilterExpression): FilterFunction;
4196 * @class GraphCalculator
4197 * @classdesc Represents a calculator for graph entities.
4199 declare class GraphCalculator {
4201 * Get the bounding box corners for a circle with radius of a threshold
4202 * with center in a geodetic position.
4203 * @param {LngLat} lngLat - Longitude, latitude to encode.
4204 * @param {number} threshold - Threshold distance from the position in meters.
4205 * @returns {Array<LngLat>} The south west and north east corners of the
4208 boundingBoxCorners(lngLat: LngLat, threshold: number): [LngLat, LngLat];
4211 * Convert a compass angle to an angle axis rotation vector.
4212 * @param {number} compassAngle - The compass angle in degrees.
4213 * @param {number} orientation - The orientation of the original image.
4214 * @returns {Array<number>} Angle axis rotation vector.
4216 rotationFromCompass(compassAngle: number, orientation: number): number[];
4220 * @classdesc Represents a sequence of ordered images.
4222 declare class Sequence {
4224 * Create a new sequene instance.
4225 * @param {SequenceEnt} sequence - Raw sequence data.
4227 constructor(sequence: SequenceEnt): this;
4231 * @returns {string} Unique sequence id.
4237 * @returns {Array<string>} Array of ordered image ids in the sequence.
4242 * Dispose the sequence.
4243 * @description Disposes all cached assets.
4248 * Find the next image id in the sequence with respect to
4249 * the provided image id.
4250 * @param {string} id - Reference image id.
4251 * @returns {string} Next id in sequence if it exists, null otherwise.
4253 findNext(id: string): string;
4256 * Find the previous image id in the sequence with respect to
4257 * the provided image id.
4258 * @param {string} id - Reference image id.
4259 * @returns {string} Previous id in sequence if it exists, null otherwise.
4261 findPrev(id: string): string;
4264 * Interface for graph configuration.
4265 * @interface GraphConfiguration
4267 export interface GraphConfiguration {
4269 * The maximum number of cached sequences left
4272 maxSequences: number;
4275 * The maximum number of unused cached images left
4278 maxUnusedImages: number;
4281 * The maximum number of unused pre-stored cached images left
4284 maxUnusedPreStoredImages: number;
4287 * The maximum number of unused cached tiles left
4290 maxUnusedTiles: number;
4292 declare class EdgeCalculatorCoefficients {
4293 sphericalPreferredDistance: number;
4294 sphericalMotion: number;
4295 sphericalSequencePenalty: number;
4296 sphericalMergeCCPenalty: number;
4297 stepPreferredDistance: number;
4299 stepRotation: number;
4300 stepSequencePenalty: number;
4301 stepMergeCCPenalty: number;
4302 similarDistance: number;
4303 similarRotation: number;
4304 turnDistance: number;
4306 turnSequencePenalty: number;
4307 turnMergeCCPenalty: number;
4308 constructor(): this;
4310 declare interface SphericalDirection {
4311 direction: $Values<typeof NavigationDirection>;
4312 prev: $Values<typeof NavigationDirection>;
4313 next: $Values<typeof NavigationDirection>;
4314 directionChange: number;
4316 declare interface StepDirection {
4317 direction: $Values<typeof NavigationDirection>;
4318 motionChange: number;
4319 useFallback: boolean;
4321 declare interface TurnDirection {
4322 direction: $Values<typeof NavigationDirection>;
4323 directionChange: number;
4324 motionChange?: number;
4326 declare class EdgeCalculatorDirections {
4328 [direction: string]: StepDirection,
4332 [direction: string]: TurnDirection,
4336 [direction: string]: SphericalDirection,
4339 constructor(): this;
4341 declare class EdgeCalculatorSettings {
4342 sphericalMinDistance: number;
4343 sphericalMaxDistance: number;
4344 sphericalPreferredDistance: number;
4345 sphericalMaxItems: number;
4346 sphericalMaxStepTurnChange: number;
4347 rotationMaxDistance: number;
4348 rotationMaxDirectionChange: number;
4349 rotationMaxVerticalDirectionChange: number;
4350 similarMaxDirectionChange: number;
4351 similarMaxDistance: number;
4352 similarMinTimeDifference: number;
4353 stepMaxDistance: number;
4354 stepMaxDirectionChange: number;
4355 stepMaxDrift: number;
4356 stepPreferredDistance: number;
4357 turnMaxDistance: number;
4358 turnMaxDirectionChange: number;
4359 turnMaxRigDistance: number;
4360 turnMinRigDirectionChange: number;
4361 constructor(): this;
4362 maxDistance: number;
4365 * Interface that describes the properties for a image that is the destination of a
4366 * potential edge from an origin image.
4367 * @interface PotentialEdge
4369 declare interface PotentialEdge {
4371 * Timestamp when the image was captured.
4372 * @property {number} capturedAt
4377 * Change in viewing direction with respect to the origin image.
4378 * @property {number} directionChange
4380 directionChange: number;
4383 * Distance to the origin image.
4384 * @property {number} distance
4389 * Determines if the destination image is spherical.
4390 * @property {boolean} spherical
4396 * @property {string} id
4401 * Change in motion with respect to the viewing direction
4402 * of the origin image.
4403 * @property {number} motionChange
4405 motionChange: number;
4408 * General camera rotation with respect to the origin image.
4409 * @property {number} rotation
4414 * Determines if the origin and destination image are considered
4415 * to be in the same merge connected component.
4416 * @property {boolean} sameMergeCC
4418 sameMergeCC: boolean;
4421 * Determines if the origin and destination image are in the
4423 * @property {boolean} sameSequence
4425 sameSequence: boolean;
4428 * Determines if the origin and destination image have been captured
4430 * @property {boolean} sameUser
4435 * Determines which sequence the destination image of the potential edge
4437 * @property {string} sequenceId
4442 * Change in viewing direction with respect to the XY-plane.
4443 * @property {number} verticalDirectionChange
4445 verticalDirectionChange: number;
4448 * The angle between motion vector and the XY-plane
4449 * @property {number} verticalMotion
4451 verticalMotion: number;
4454 * The counter clockwise horizontal rotation angle from
4455 * the X-axis in a spherical coordiante system.
4456 * @property {number} worldMotionAzimuth
4458 worldMotionAzimuth: number;
4461 * @class EdgeCalculator
4462 * @classdesc Represents a class for calculating node edges.
4464 declare class EdgeCalculator {
4466 * Create a new edge calculator instance.
4467 * @param {EdgeCalculatorSettings} settings - Settings struct.
4468 * @param {EdgeCalculatorDirections} directions - Directions struct.
4469 * @param {EdgeCalculatorCoefficients} coefficients - Coefficients struct.
4472 settings?: EdgeCalculatorSettings,
4473 directions?: EdgeCalculatorDirections,
4474 coefficients?: EdgeCalculatorCoefficients
4478 * Returns the potential edges to destination nodes for a set
4479 * of nodes with respect to a source node.
4480 * @param {Image} node - Source node.
4481 * @param {Array<Image>} nodes - Potential destination nodes.
4482 * @param {Array<string>} fallbackIds - Ids for destination nodes
4483 * that should be returned even if they do not meet the
4484 * criteria for a potential edge.
4485 * @throws {ArgumentMapillaryError} If node is not full.
4489 potentialImages: Image[],
4490 fallbackIds: string[]
4494 * Computes the sequence edges for a node.
4495 * @param {Image} node - Source node.
4496 * @throws {ArgumentMapillaryError} If node is not full.
4498 computeSequenceEdges(node: Image, sequence: Sequence): NavigationEdge[];
4501 * Computes the similar edges for a node.
4502 * @description Similar edges for perspective images
4503 * look roughly in the same direction and are positioned closed to the node.
4504 * Similar edges for spherical only target other spherical.
4505 * @param {Image} node - Source node.
4506 * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
4507 * @throws {ArgumentMapillaryError} If node is not full.
4509 computeSimilarEdges(
4511 potentialEdges: PotentialEdge[]
4512 ): NavigationEdge[];
4515 * Computes the step edges for a perspective node.
4516 * @description Step edge targets can only be other perspective nodes.
4517 * Returns an empty array for spherical.
4518 * @param {Image} node - Source node.
4519 * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
4520 * @param {string} prevId - Id of previous node in sequence.
4521 * @param {string} nextId - Id of next node in sequence.
4522 * @throws {ArgumentMapillaryError} If node is not full.
4526 potentialEdges: PotentialEdge[],
4529 ): NavigationEdge[];
4532 * Computes the turn edges for a perspective node.
4533 * @description Turn edge targets can only be other perspective images.
4534 * Returns an empty array for spherical.
4535 * @param {Image} node - Source node.
4536 * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
4537 * @throws {ArgumentMapillaryError} If node is not full.
4541 potentialEdges: PotentialEdge[]
4542 ): NavigationEdge[];
4545 * Computes the spherical edges for a perspective node.
4546 * @description Perspective to spherical edge targets can only be
4547 * spherical nodes. Returns an empty array for spherical.
4548 * @param {Image} node - Source node.
4549 * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
4550 * @throws {ArgumentMapillaryError} If node is not full.
4552 computePerspectiveToSphericalEdges(
4554 potentialEdges: PotentialEdge[]
4555 ): NavigationEdge[];
4558 * Computes the spherical and step edges for a spherical node.
4559 * @description Spherical to spherical edge targets can only be
4560 * spherical nodes. spherical to step edge targets can only be perspective
4562 * @param {Image} node - Source node.
4563 * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
4564 * @throws {ArgumentMapillaryError} If node is not full.
4566 computeSphericalEdges(
4568 potentialEdges: PotentialEdge[]
4569 ): NavigationEdge[];
4573 * @classdesc Provides methods for access to the API.
4575 declare class APIWrapper {
4576 constructor(_data: IDataProvider): this;
4577 data: IDataProvider;
4578 setAccessToken(accessToken?: string): void;
4582 * @classdesc Represents a graph of nodes with edges.
4584 declare class Graph {
4586 * Create a new graph instance.
4587 * @param {APIWrapper} [api] - API instance for retrieving data.
4588 * @param {rbush.RBush<NodeIndexItem>} [nodeIndex] - Node index for fast spatial retreival.
4589 * @param {GraphCalculator} [graphCalculator] - Instance for graph calculations.
4590 * @param {EdgeCalculator} [edgeCalculator] - Instance for edge calculations.
4591 * @param {FilterCreator} [filterCreator] - Instance for filter creation.
4592 * @param {GraphConfiguration} [configuration] - Configuration struct.
4597 graphCalculator?: GraphCalculator,
4598 edgeCalculator?: EdgeCalculator,
4599 filterCreator?: FilterCreator,
4600 configuration?: GraphConfiguration
4602 static register(spatialIndex: (...args: mixed[]) => mixed): void;
4606 * @returns {APIWrapper} The API instance used by
4612 * Cache sequence edges for a node.
4613 * @param {string} key - Key of node.
4614 * @throws {GraphMapillaryError} When the operation is not valid on the
4617 cacheSequenceEdges(key: string): void;
4620 * Cache spatial edges for a node.
4621 * @param {string} key - Key of node.
4622 * @throws {GraphMapillaryError} When the operation is not valid on the
4625 cacheSpatialEdges(key: string): void;
4628 * Initialize the cache for a node.
4629 * @param {string} key - Key of node.
4630 * @throws {GraphMapillaryError} When the operation is not valid on the
4633 initializeCache(key: string): void;
4636 * Get a value indicating if the graph is fill caching a node.
4637 * @param {string} key - Key of node.
4638 * @returns {boolean} Value indicating if the node is being fill cached.
4640 isCachingFill(key: string): boolean;
4643 * Get a value indicating if the graph is fully caching a node.
4644 * @param {string} key - Key of node.
4645 * @returns {boolean} Value indicating if the node is being fully cached.
4647 isCachingFull(key: string): boolean;
4650 * Get a value indicating if the graph is caching a sequence of a node.
4651 * @param {string} key - Key of node.
4652 * @returns {boolean} Value indicating if the sequence of a node is
4655 isCachingNodeSequence(key: string): boolean;
4658 * Get a value indicating if the graph is caching a sequence.
4659 * @param {string} sequenceKey - Key of sequence.
4660 * @returns {boolean} Value indicating if the sequence is
4663 isCachingSequence(sequenceKey: string): boolean;
4666 * Get a value indicating if the graph is caching sequence nodes.
4667 * @param {string} sequenceKey - Key of sequence.
4668 * @returns {boolean} Value indicating if the sequence nodes are
4671 isCachingSequenceNodes(sequenceKey: string): boolean;
4674 * Get a value indicating if the graph is caching the tiles
4675 * required for calculating spatial edges of a node.
4676 * @param {string} key - Key of node.
4677 * @returns {boolean} Value indicating if the tiles of
4678 * a node are being cached.
4680 isCachingTiles(key: string): boolean;
4683 * Get a value indicating if the cache has been initialized
4685 * @param {string} key - Key of node.
4686 * @returns {boolean} Value indicating if the cache has been
4687 * initialized for a node.
4689 hasInitializedCache(key: string): boolean;
4692 * Get a value indicating if a node exist in the graph.
4693 * @param {string} key - Key of node.
4694 * @returns {boolean} Value indicating if a node exist in the graph.
4696 hasNode(key: string): boolean;
4699 * Get a value indicating if a node sequence exist in the graph.
4700 * @param {string} key - Key of node.
4701 * @returns {boolean} Value indicating if a node sequence exist
4704 hasNodeSequence(key: string): boolean;
4707 * Get a value indicating if a sequence exist in the graph.
4708 * @param {string} sequenceKey - Key of sequence.
4709 * @returns {boolean} Value indicating if a sequence exist
4712 hasSequence(sequenceKey: string): boolean;
4715 * Get a value indicating if sequence nodes has been cached in the graph.
4716 * @param {string} sequenceKey - Key of sequence.
4717 * @returns {boolean} Value indicating if a sequence nodes has been
4718 * cached in the graph.
4720 hasSequenceNodes(sequenceKey: string): boolean;
4723 * Get a value indicating if the graph has fully cached
4724 * all nodes in the spatial area of a node.
4725 * @param {string} key - Key of node.
4726 * @returns {boolean} Value indicating if the spatial area
4727 * of a node has been cached.
4729 hasSpatialArea(key: string): boolean;
4732 * Get a value indicating if the graph has a tiles required
4734 * @param {string} key - Key of node.
4735 * @returns {boolean} Value indicating if the the tiles required
4736 * by a node has been cached.
4738 hasTiles(key: string): boolean;
4742 * @param {string} key - Key of node.
4743 * @returns {Image} Retrieved node.
4745 getNode(key: string): Image;
4749 * @param {string} sequenceKey - Key of sequence.
4750 * @returns {Image} Retrieved sequence.
4752 getSequence(sequenceKey: string): Sequence;
4755 * Reset all spatial edges of the graph nodes.
4757 resetSpatialEdges(): void;
4760 * Reset the complete graph but keep the nodes corresponding
4761 * to the supplied keys. All other nodes will be disposed.
4762 * @param {Array<string>} keepKeys - Keys for nodes to keep
4763 * in graph after reset.
4765 reset(keepKeys: string[]): void;
4768 * Set the spatial node filter.
4769 * @emits [object Object],[object Object],[object Object]
4770 * @param {FilterExpression} filter - Filter expression to be applied
4771 * when calculating spatial edges.
4773 setFilter(filter: FilterExpression): void;
4776 * Uncache the graph according to the graph configuration.
4777 * @description Uncaches unused tiles, unused nodes and
4778 * sequences according to the numbers specified in the
4779 * graph configuration. Sequences does not have a direct
4780 * reference to either tiles or nodes and may be uncached
4781 * even if they are related to the nodes that should be kept.
4782 * @param {Array<string>} keepIds - Ids of nodes to keep in
4783 * graph unrelated to last access. Tiles related to those keys
4784 * will also be kept in graph.
4785 * @param {Array<string>} keepCellIds - Ids of cells to keep in
4786 * graph unrelated to last access. The nodes of the cells may
4787 * still be uncached if not specified in the keep ids param
4788 * but are guaranteed to not be disposed.
4789 * @param {string} keepSequenceId - Optional id of sequence
4790 * for which the belonging nodes should not be disposed or
4791 * removed from the graph. These nodes may still be uncached if
4792 * not specified in keep ids param but are guaranteed to not
4797 keepCellIds: string[],
4798 keepSequenceId?: string
4802 * Unsubscribes all subscriptions.
4803 * @description Afterwards, you must not call any other methods
4804 * on the graph instance.
4806 unsubscribe(): void;
4809 * Enumeration for graph modes.
4812 * @description Modes for the retrieval and caching performed
4813 * by the graph service on the graph.
4816 declare var GraphMode: {|
4822 * @class GraphService
4823 * @classdesc Represents a service for graph operations.
4825 declare class GraphService {
4827 * Create a new graph service instance.
4828 * @param {Graph} graph - Graph instance to be operated on.
4830 constructor(graph: Graph): this;
4833 * Dispose the graph service and its children.
4838 * Set the graph mode.
4839 * @description If graph mode is set to spatial, caching
4840 * is performed with emphasis on spatial edges. If graph
4841 * mode is set to sequence no tile data is requested and
4842 * no spatial edges are computed.
4844 * When setting graph mode to sequence all spatial
4845 * subscriptions are aborted.
4848 GraphMode>} mode - Graph mode to set.
4850 setGraphMode(mode: $Values<typeof GraphMode>): void;
4853 declare interface CacheServiceConfiguration {
4856 declare class CacheService {
4858 _graphService: GraphService,
4859 _stateService: StateService,
4863 configure(configuration?: CacheServiceConfiguration): void;
4867 declare class LoadingService {
4868 constructor(): this;
4869 startLoading(task: string): void;
4870 stopLoading(task: string): void;
4874 * @classdesc Provides methods for scalar, vector and matrix calculations.
4876 declare class Spatial {
4878 * Converts azimuthal phi rotation (counter-clockwise with origin on X-axis) to
4879 * bearing (clockwise with origin at north or Y-axis).
4880 * @param {number} phi - Azimuthal phi angle in radians.
4881 * @returns {number} Bearing in radians.
4883 azimuthalToBearing(phi: number): number;
4886 * Converts degrees to radians.
4887 * @param {number} deg - Degrees.
4888 * @returns {number} Radians.
4890 degToRad(deg: number): number;
4893 * Converts radians to degrees.
4894 * @param {number} rad - Radians.
4895 * @returns {number} Degrees.
4897 radToDeg(rad: number): number;
4900 * Wrap a number on the interval [min, max].
4901 * @param {number} value - Value to wrap.
4902 * @param {number} min - Lower endpoint of interval.
4903 * @param {number} max - Upper endpoint of interval.
4904 * @returns {number} The wrapped number.
4906 wrap(value: number, min: number, max: number): number;
4909 * Wrap an angle on the interval [-Pi, Pi].
4910 * @param {number} angle - Value to wrap.
4911 * @returns {number} Wrapped angle.
4913 wrapAngle(angle: number): number;
4916 * Limit the value to the interval [min, max] by changing the value to
4917 * the nearest available one when it is outside the interval.
4918 * @param {number} value - Value to clamp.
4919 * @param {number} min - Minimum of the interval.
4920 * @param {number} max - Maximum of the interval.
4921 * @returns {number} Clamped value.
4923 clamp(value: number, min: number, max: number): number;
4926 * Calculates the counter-clockwise angle from the first
4927 * vector (x1, y1)^T to the second (x2, y2)^T.
4928 * @param {number} x1 - X coordinate of first vector.
4929 * @param {number} y1 - Y coordinate of first vector.
4930 * @param {number} x2 - X coordinate of second vector.
4931 * @param {number} y2 - Y coordinate of second vector.
4932 * @returns {number} Counter clockwise angle between the vectors.
4934 angleBetweenVector2(x1: number, y1: number, x2: number, y2: number): number;
4937 * Calculates the minimum (absolute) angle change for rotation
4938 * from one angle to another on the [-Pi, Pi] interval.
4939 * @param {number} angle1 - Start angle.
4940 * @param {number} angle2 - Destination angle.
4941 * @returns {number} Absolute angle change between angles.
4943 angleDifference(angle1: number, angle2: number): number;
4946 * Calculates the relative rotation angle between two
4947 * angle-axis vectors.
4948 * @param {number} rotation1 - First angle-axis vector.
4949 * @param {number} rotation2 - Second angle-axis vector.
4950 * @returns {number} Relative rotation angle.
4952 relativeRotationAngle(rotation1: number[], rotation2: number[]): number;
4955 * Calculates the angle from a vector to a plane.
4956 * @param {Array<number>} vector - The vector.
4957 * @param {Array<number>} planeNormal - Normal of the plane.
4958 * @returns {number} Angle from between plane and vector.
4960 angleToPlane(vector: number[], planeNormal: number[]): number;
4961 azimuthal(direction: number[], up: number[]): number;
4964 * Calculates the distance between two coordinates
4965 * (longitude, latitude pairs) in meters according to
4966 * the haversine formula.
4967 * @param {number} lat1 - Latitude of the first coordinate in degrees.
4968 * @param {number} lng1 - Longitude of the first coordinate in degrees.
4969 * @param {number} lat2 - Latitude of the second coordinate in degrees.
4970 * @param {number} lng2 - Longitude of the second coordinate in degrees.
4971 * @returns {number} Distance between lat lon positions in meters.
4981 * @class ViewportCoords
4982 * @classdesc Provides methods for calculating 2D coordinate conversions
4983 * as well as 3D projection and unprojection.
4985 * Basic coordinates are 2D coordinates on the [0, 1] interval and
4986 * have the origin point, (0, 0), at the top left corner and the
4987 * maximum value, (1, 1), at the bottom right corner of the original
4990 * Viewport coordinates are 2D coordinates on the [-1, 1] interval and
4991 * have the origin point in the center. The bottom left corner point is
4992 * (-1, -1) and the top right corner point is (1, 1).
4994 * Canvas coordiantes are 2D pixel coordinates on the [0, canvasWidth] and
4995 * [0, canvasHeight] intervals. The origin point (0, 0) is in the top left
4996 * corner and the maximum value is (canvasWidth, canvasHeight) is in the
4997 * bottom right corner.
4999 * 3D coordinates are in the topocentric world reference frame.
5001 declare class ViewportCoords {
5003 * Convert basic coordinates to canvas coordinates.
5004 * @description Transform origin and camera position needs to be the
5005 * equal for reliable return value.
5006 * @param {number} basicX - Basic X coordinate.
5007 * @param {number} basicY - Basic Y coordinate.
5008 * @param {HTMLElement} container - The viewer container.
5009 * @param {Transform} transform - Transform of the image to unproject from.
5010 * @param {THREE.Camera} camera - Camera used in rendering.
5011 * @returns {Array<number>} 2D canvas coordinates.
5017 offsetHeight: number,
5018 offsetWidth: number,
5021 transform: Transform
5025 * Convert basic coordinates to canvas coordinates safely. If 3D point is
5026 * behind camera null will be returned.
5027 * @description Transform origin and camera position needs to be the
5028 * equal for reliable return value.
5029 * @param {number} basicX - Basic X coordinate.
5030 * @param {number} basicY - Basic Y coordinate.
5031 * @param {HTMLElement} container - The viewer container.
5032 * @param {Transform} transform - Transform of the image to unproject from.
5033 * @param {THREE.Camera} camera - Camera used in rendering.
5034 * @returns {Array<number>} 2D canvas coordinates if the basic point represents a 3D point
5035 * in front of the camera, otherwise null.
5041 offsetHeight: number,
5042 offsetWidth: number,
5045 transform: Transform
5049 * Convert basic coordinates to viewport coordinates.
5050 * @description Transform origin and camera position needs to be the
5051 * equal for reliable return value.
5052 * @param {number} basicX - Basic X coordinate.
5053 * @param {number} basicY - Basic Y coordinate.
5054 * @param {Transform} transform - Transform of the image to unproject from.
5055 * @param {THREE.Camera} camera - Camera used in rendering.
5056 * @returns {Array<number>} 2D viewport coordinates.
5061 transform: Transform
5065 * Convert basic coordinates to viewport coordinates safely. If 3D point is
5066 * behind camera null will be returned.
5067 * @description Transform origin and camera position needs to be the
5068 * equal for reliable return value.
5069 * @param {number} basicX - Basic X coordinate.
5070 * @param {number} basicY - Basic Y coordinate.
5071 * @param {Transform} transform - Transform of the image to unproject from.
5072 * @param {THREE.Camera} camera - Camera used in rendering.
5073 * @returns {Array<number>} 2D viewport coordinates.
5075 basicToViewportSafe(
5078 transform: Transform
5082 * Get canvas pixel position from event.
5083 * @param {Event} event - Event containing clientX and clientY properties.
5084 * @param {HTMLElement} element - HTML element.
5085 * @returns {Array<number>} 2D canvas coordinates.
5093 element: HTMLElement
5097 * Convert canvas coordinates to viewport coordinates.
5098 * @param {number} canvasX - Canvas X coordinate.
5099 * @param {number} canvasY - Canvas Y coordinate.
5100 * @param {HTMLElement} container - The viewer container.
5101 * @returns {Array<number>} 2D viewport coordinates.
5107 offsetHeight: number,
5108 offsetWidth: number,
5114 * Determines the width and height of the container in canvas coordinates.
5115 * @param {HTMLElement} container - The viewer container.
5116 * @returns {Array<number>} 2D canvas coordinates.
5118 containerToCanvas(container: {
5119 offsetHeight: number,
5120 offsetWidth: number,
5125 * Determine if an event occured inside an element.
5126 * @param {Event} event - Event containing clientX and clientY properties.
5127 * @param {HTMLElement} element - HTML element.
5128 * @returns {boolean} Value indicating if the event occured inside the element or not.
5136 element: HTMLElement
5140 * Convert viewport coordinates to canvas coordinates.
5141 * @param {number} viewportX - Viewport X coordinate.
5142 * @param {number} viewportY - Viewport Y coordinate.
5143 * @param {HTMLElement} container - The viewer container.
5144 * @returns {Array<number>} 2D canvas coordinates.
5150 offsetHeight: number,
5151 offsetWidth: number,
5156 declare class PanService {
5158 graphService: GraphService,
5159 stateService: StateService,
5161 graphCalculator?: GraphCalculator,
5163 viewportCoords?: ViewportCoords
5171 declare class PlayService {
5172 static +sequenceSpeed: number;
5173 constructor(graphService: GraphService, stateService: StateService): this;
5177 setDirection(direction: $Values<typeof NavigationDirection>): void;
5178 setSpeed(speed: number): void;
5181 declare class Navigator {
5183 options: ViewerOptions,
5185 graphService?: GraphService,
5186 loadingService?: LoadingService,
5187 stateService?: StateService,
5188 cacheService?: CacheService,
5189 playService?: PlayService,
5190 panService?: PanService
5193 cacheService: CacheService;
5194 graphService: GraphService;
5195 loadingService: LoadingService;
5196 panService: PanService;
5197 playService: PlayService;
5198 stateService: StateService;
5201 declare class SubscriptionHolder {
5202 unsubscribe(): void;
5204 export interface IComponent {
5206 * Value indicating if the component is currently active.
5208 +activated: boolean;
5211 * Default configuration for the component.
5213 +defaultConfiguration: ComponentConfiguration;
5216 * The name of the component. Used when interacting with the
5217 * component through the Viewer's API.
5222 * Configure the component.
5224 configure(configuration: ComponentConfiguration): void;
5229 export type ComponentEventType =
5240 declare class Component<TConfiguration: ComponentConfiguration>
5241 implements IEventEmitter, IComponent
5243 static componentName: string;
5244 _activated: boolean;
5245 _container: Container;
5247 _navigator: Navigator;
5248 +_subscriptions: SubscriptionHolder;
5249 constructor(name: string, container: Container, navigator: Navigator): this;
5253 * @returns {boolean} Value indicating if the component is
5259 * Get default configuration.
5260 * @returns {TConfiguration} Default configuration for component.
5262 defaultConfiguration: TConfiguration;
5266 * @description The name of the component. Used when interacting with the
5267 * component through the Viewer's API.
5274 activate(conf?: TConfiguration): void;
5277 * Configure the component.
5278 * @param configuration Component configuration.
5280 configure(configuration: ComponentConfiguration): void;
5290 fire<T>(type: string, event: T): void;
5295 off<T>(type: string, handler: (event: T) => void): void;
5300 on<T>(type: string, handler: (event: T) => void): void;
5303 * Detect the viewer's new width and height and resize the component's
5304 * rendered elements accordingly if applicable.
5309 _deactivate(): void;
5310 _getDefaultConfiguration(): TConfiguration;
5313 * @class BearingComponent
5314 * @classdesc Component for indicating bearing and field of view.
5316 * var viewer = new Viewer({ ... });
5317 * var bearingComponent = viewer.getComponent("bearing");
5318 * bearingComponent.configure({ size: ComponentSize.Small });
5321 declare class BearingComponent extends Component<BearingConfiguration> {
5322 static componentName: string;
5327 constructor(name: string, container: Container, navigator: Navigator): this;
5329 _deactivate(): void;
5330 _getDefaultConfiguration(): BearingConfiguration;
5332 declare class CacheComponent extends Component<CacheConfiguration> {
5333 static componentName: string;
5338 constructor(name: string, container: Container, navigator: Navigator): this;
5340 _deactivate(): void;
5341 _getDefaultConfiguration(): CacheConfiguration;
5344 * Interface for general component events.
5346 export interface ComponentEvent {
5348 * The component object that fired the event.
5355 type: ComponentEventType;
5358 * Interface for component hover events.
5360 export type ComponentHoverEvent = {
5362 * The image id corresponding to the element or object that
5363 * is being hovered. When the mouse leaves the element or
5364 * object the id will be null.
5374 * @classdesc Represents a geometry.
5376 declare class Geometry {
5378 * Create a geometry.
5382 constructor(): this;
5385 * Get the 2D basic coordinates for the centroid of the geometry.
5386 * @returns {Array<number>} 2D basic coordinates representing the centroid.
5389 getCentroid2d(): number[];
5392 * Get the 3D world coordinates for the centroid of the geometry.
5393 * @param {Transform} transform - The transform of the image related to the geometry.
5394 * @returns {Array<number>} 3D world coordinates representing the centroid.
5397 getCentroid3d(transform: Transform): number[];
5400 * Set the 2D centroid of the geometry.
5401 * @param {Array<number>} value - The new value of the centroid in basic coordinates.
5402 * @param {Transform} transform - The transform of the image related to the geometry.
5405 setCentroid2d(value: number[], transform: Transform): void;
5408 * Interface for component geometry events.
5410 export type ComponentGeometryEvent = {
5412 * Geometry related to the event.
5415 type: "geometrycreate",
5421 * @classdesc Represents an abstract marker class that should be extended
5422 * by marker implementations used in the marker component.
5424 declare class Marker {
5425 constructor(id: string, lngLat: LngLat): this;
5429 * @returns {string} The id of the marker.
5435 * @returns {LngLat} The geographic coordinates of the marker.
5442 createGeometry(position: number[]): void;
5447 disposeGeometry(): void;
5452 lerpAltitude(alt: number, alpha: number): void;
5457 updatePosition(position: number[], lngLat?: LngLat): void;
5458 _createGeometry(position: number[]): void;
5459 _disposeGeometry(): void;
5462 * Interface for component marker events.
5464 export type ComponentMarkerEvent = {
5466 * The marker that was affected by the event.
5469 type: "markerdragend" | "markerdragstart" | "markerposition",
5474 * Interface for component play events.
5476 export type ComponentPlayEvent = {
5478 * Value indiciating if the component is playing or not.
5486 * Interface for component state events.
5488 * // The `hover` event is an example of a `ComponentStateEvent`.
5489 * // Set up an event listener on the direction component.
5490 * var directionComponent = viewer.getComponent('direction');
5491 * directionComponent.on('hover', function(e) {
5492 * console.log('A hover event has occured');
5496 export type ComponentStateEvent = {
5497 type: "tagcreateend" | "tagcreatestart" | "tags",
5502 * Interface for component tag mode events.
5504 export type ComponentTagModeEvent = {
5506 * Value indicating the current tag mode of the component.
5508 mode: $Values<typeof TagMode>,
5514 * @class DirectionDOMRenderer
5515 * @classdesc DOM renderer for direction arrows.
5517 declare class DirectionDOMRenderer {
5518 constructor(configuration: DirectionConfiguration, size: ViewportSize): this;
5522 * @returns {boolean} Value indicating whether render should be called.
5524 needsRender: boolean;
5527 * Renders virtual DOM elements.
5528 * @description Calling render resets the needs render property.
5530 setEdges(edgeStatus: NavigationEdgeStatus, sequence: Sequence): void;
5533 * Set image for which to show edges.
5534 * @param {Image} image
5536 setImage(image: Image): void;
5539 * Set the render camera to use for calculating rotations.
5540 * @param {RenderCamera} renderCamera
5542 setRenderCamera(renderCamera: RenderCamera): void;
5545 * Set configuration values.
5546 * @param {DirectionConfiguration} configuration
5548 setConfiguration(configuration: DirectionConfiguration): void;
5551 * Detect the element's width and height and resize
5552 * elements accordingly.
5553 * @param {ViewportSize} size Size of vßiewer container element.
5555 resize(size: ViewportSize): void;
5558 * @class DirectionComponent
5559 * @classdesc Component showing navigation arrows for steps and turns.
5561 declare class DirectionComponent extends Component<DirectionConfiguration> {
5565 static componentName: string;
5572 container: Container,
5573 navigator: Navigator,
5574 directionDOMRenderer?: DirectionDOMRenderer
5578 _deactivate(): void;
5579 _getDefaultConfiguration(): DirectionConfiguration;
5581 declare class HandlerBase<TConfiguration: ComponentConfiguration> {
5582 _component: Component<TConfiguration>;
5583 _container: Container;
5584 _navigator: Navigator;
5591 component: Component<TConfiguration>,
5592 container: Container,
5593 navigator: Navigator
5597 * Returns a Boolean indicating whether the interaction is enabled.
5598 * @returns {boolean} `true` if the interaction is enabled.
5603 * Enables the interaction.
5605 * <component-name>.<handler-name>.enable();
5611 * Disables the interaction.
5613 * <component-name>.<handler-name>.disable();
5619 _getConfiguration(enable: boolean): TConfiguration;
5622 * The `KeySequenceNavigationHandler` allows the user to navigate through a sequence using the
5623 * following key commands:
5625 * `ALT` + `Up Arrow`: Navigate to next image in the sequence.
5626 * `ALT` + `Down Arrow`: Navigate to previous image in sequence.
5628 * var keyboardComponent = viewer.getComponent("keyboard");
5630 * keyboardComponent.keySequenceNavigation.disable();
5631 * keyboardComponent.keySequenceNavigation.enable();
5633 * var isEnabled = keyboardComponent.keySequenceNavigation.isEnabled;
5636 declare class KeySequenceNavigationHandler
5637 extends HandlerBase<KeyboardConfiguration>
5641 _getConfiguration(enable: boolean): KeyboardConfiguration;
5644 * The `KeySpatialNavigationHandler` allows the user to navigate through a sequence using the
5645 * following key commands:
5647 * `Up Arrow`: Step forward.
5648 * `Down Arrow`: Step backward.
5649 * `Left Arrow`: Step to the left.
5650 * `Rigth Arrow`: Step to the right.
5651 * `SHIFT` + `Down Arrow`: Turn around.
5652 * `SHIFT` + `Left Arrow`: Turn to the left.
5653 * `SHIFT` + `Rigth Arrow`: Turn to the right.
5655 * var keyboardComponent = viewer.getComponent("keyboard");
5657 * keyboardComponent.keySpatialNavigation.disable();
5658 * keyboardComponent.keySpatialNavigation.enable();
5660 * var isEnabled = keyboardComponent.keySpatialNavigation.isEnabled;
5663 declare class KeySpatialNavigationHandler
5664 extends HandlerBase<KeyboardConfiguration>
5670 component: Component<KeyboardConfiguration>,
5671 container: Container,
5672 navigator: Navigator,
5677 _getConfiguration(enable: boolean): KeyboardConfiguration;
5680 * The `KeyZoomHandler` allows the user to zoom in and out using the
5681 * following key commands:
5686 * var keyboardComponent = viewer.getComponent("keyboard");
5688 * keyboardComponent.keyZoom.disable();
5689 * keyboardComponent.keyZoom.enable();
5691 * var isEnabled = keyboardComponent.keyZoom.isEnabled;
5694 declare class KeyZoomHandler extends HandlerBase<KeyboardConfiguration> {
5699 component: Component<KeyboardConfiguration>,
5700 container: Container,
5701 navigator: Navigator,
5702 viewportCoords: ViewportCoords
5706 _getConfiguration(enable: boolean): KeyboardConfiguration;
5709 * The `KeyPlayHandler` allows the user to control the play behavior
5710 * using the following key commands:
5712 * `Spacebar`: Start or stop playing.
5713 * `SHIFT` + `D`: Switch direction.
5714 * `<`: Decrease speed.
5715 * `>`: Increase speed.
5717 * var keyboardComponent = viewer.getComponent("keyboard");
5719 * keyboardComponent.keyPlay.disable();
5720 * keyboardComponent.keyPlay.enable();
5722 * var isEnabled = keyboardComponent.keyPlay.isEnabled;
5725 declare class KeyPlayHandler extends HandlerBase<KeyboardConfiguration> {
5728 _getConfiguration(enable: boolean): KeyboardConfiguration;
5731 * @class KeyboardComponent
5732 * @classdesc Component for keyboard event handling.
5734 * To retrive and use the keyboard component
5736 * var viewer = new Viewer({ ... });
5738 * var keyboardComponent = viewer.getComponent("keyboard");
5741 declare class KeyboardComponent extends Component<KeyboardConfiguration> {
5742 static componentName: string;
5747 constructor(name: string, container: Container, navigator: Navigator): this;
5751 * @returns {KeyPlayHandler} The key play handler.
5753 keyPlay: KeyPlayHandler;
5756 * Get key sequence navigation.
5757 * @returns {KeySequenceNavigationHandler} The key sequence navigation handler.
5759 keySequenceNavigation: KeySequenceNavigationHandler;
5763 * @returns {KeySpatialNavigationHandler} The spatial handler.
5765 keySpatialNavigation: KeySpatialNavigationHandler;
5769 * @returns {KeyZoomHandler} The key zoom handler.
5771 keyZoom: KeyZoomHandler;
5773 _deactivate(): void;
5774 _getDefaultConfiguration(): KeyboardConfiguration;
5777 * @interface CircleMarkerOptions
5779 * Interface that represents the options for configuring a `CircleMarker`.
5781 export interface CircleMarkerOptions {
5783 * The color of the marker.
5786 color?: number | string;
5789 * The opacity of the marker.
5795 * The radius of the circle in meters.
5801 * @class CircleMarker
5802 * @classdesc Non-interactive marker with a flat circle shape. The circle
5803 * marker can not be configured to be interactive.
5805 * Circle marker properties can not be updated after creation.
5807 * To create and add one `CircleMarker` with default configuration
5808 * and one with configuration use
5810 * var defaultMarker = new CircleMarker(
5812 * { lat: 0, lng: 0, });
5814 * var configuredMarker = new CircleMarker(
5816 * { lat: 0, lng: 0, },
5823 * markerComponent.add([defaultMarker, configuredMarker]);
5826 declare class CircleMarker extends Marker {
5827 constructor(id: string, lngLat: LngLat, options?: CircleMarkerOptions): this;
5828 _createGeometry(position: number[]): void;
5829 _disposeGeometry(): void;
5832 * @class MarkerComponent
5833 * @classdesc Component for showing and editing 3D marker objects.
5835 * The `add` method is used for adding new markers or replacing
5836 * markers already in the set.
5838 * If a marker already in the set has the same
5839 * id as one of the markers added, the old marker will be removed and
5840 * the added marker will take its place.
5842 * It is not possible to update markers in the set by updating any properties
5843 * directly on the marker object. Markers need to be replaced by
5844 * re-adding them for updates to geographic position or configuration
5847 * Markers added to the marker component can be either interactive
5848 * or non-interactive. Different marker types define their behavior.
5849 * Markers with interaction support can be configured with options
5850 * to respond to dragging inside the viewer and be detected when
5851 * retrieving markers from pixel points with the `getMarkerIdAt` method.
5853 * To retrive and use the marker component
5855 * var viewer = new Viewer({ component: { marker: true }, ... });
5857 * var markerComponent = viewer.getComponent("marker");
5860 declare class MarkerComponent extends Component<MarkerConfiguration> {
5861 static componentName: string;
5866 constructor(name: string, container: Container, navigator: Navigator): this;
5869 * Add markers to the marker set or replace markers in the marker set.
5870 * @description If a marker already in the set has the same
5871 * id as one of the markers added, the old marker will be removed
5872 * the added marker will take its place.
5874 * Any marker inside the visible bounding bbox
5875 * will be initialized and placed in the viewer.
5876 * @param {Array<Marker>} markers - Markers to add.
5878 * markerComponent.add([marker1, marker2]);
5881 add(markers: Marker[]): void;
5884 * Returns the marker in the marker set with the specified id, or
5885 * undefined if the id matches no marker.
5886 * @param {string} markerId - Id of the marker.
5888 * var marker = markerComponent.get("markerId");
5891 get(markerId: string): Marker;
5894 * Returns an array of all markers.
5896 * var markers = markerComponent.getAll();
5902 * Returns the id of the interactive marker closest to the current camera
5903 * position at the specified point.
5904 * @description Notice that the pixelPoint argument requires x, y
5905 * coordinates from pixel space.
5907 * With this function, you can use the coordinates provided by mouse
5908 * events to get information out of the marker component.
5910 * If no interactive geometry of an interactive marker exist at the pixel
5911 * point, `null` will be returned.
5912 * @param {Array<number>} pixelPoint - Pixel coordinates on the viewer element.
5913 * @returns {string} Id of the interactive marker closest to the camera. If no
5914 * interactive marker exist at the pixel point, `null` will be returned.
5916 * markerComponent.getMarkerIdAt([100, 100])
5917 * .then((markerId) => { console.log(markerId); });
5920 getMarkerIdAt(pixelPoint: number[]): Promise<string>;
5923 * Check if a marker exist in the marker set.
5924 * @param {string} markerId - Id of the marker.
5926 * var markerExists = markerComponent.has("markerId");
5929 has(markerId: string): boolean;
5932 * Remove markers with the specified ids from the marker set.
5933 * @param {Array<string>} markerIds - Ids for markers to remove.
5935 * markerComponent.remove(["id-1", "id-2"]);
5938 remove(markerIds: string[]): void;
5941 * Remove all markers from the marker set.
5943 * markerComponent.removeAll();
5948 _deactivate(): void;
5949 _getDefaultConfiguration(): MarkerConfiguration;
5952 * @interface SimpleMarkerOptions
5954 * Interface that represents the options for configuring a `SimpleMarker`.
5956 export interface SimpleMarkerOptions {
5958 * The color of the ball inside the marker.
5961 ballColor?: number | string;
5964 * The opacity of the ball inside the marker.
5967 ballOpacity?: number;
5970 * The color of the ice creame shape.
5973 color?: number | string;
5976 * Value indicating if the marker should be interactive or not.
5977 * @description If the marker is configured to be interactive
5978 * it will be draggable in the viewer and retrievable with the
5979 * `getMarkerIdAt` method on the `MarkerComponent`.
5982 interactive?: boolean;
5985 * The opacity of the ice creame shape.
5991 * The radius of the ice cream shape in meters.
5997 * @class SimpleMarker
5998 * @classdesc Interactive marker with ice cream shape. The sphere
5999 * inside the ice cream can be configured to be interactive.
6001 * Simple marker properties can not be updated after creation.
6003 * To create and add one `SimpleMarker` with default configuration
6004 * (non-interactive) and one interactive with configuration use
6006 * var defaultMarker = new SimpleMarker(
6008 * { lat: 0, lng: 0, });
6010 * var interactiveMarker = new SimpleMarker(
6012 * { lat: 0, lng: 0, },
6014 * ballColor: "#00f",
6017 * interactive: true,
6022 * markerComponent.add([defaultMarker, interactiveMarker]);
6025 declare class SimpleMarker extends Marker {
6026 constructor(id: string, lngLat: LngLat, options?: SimpleMarkerOptions): this;
6027 _createGeometry(position: number[]): void;
6028 _disposeGeometry(): void;
6031 * The `DragPanHandler` allows the user to pan the viewer image by clicking and dragging the cursor.
6033 * var pointerComponent = viewer.getComponent("pointer");
6035 * pointerComponent.dragPan.disable();
6036 * pointerComponent.dragPan.enable();
6038 * var isEnabled = pointerComponent.dragPan.isEnabled;
6041 declare class DragPanHandler extends HandlerBase<PointerConfiguration> {
6046 component: Component<PointerConfiguration>,
6047 container: Container,
6048 navigator: Navigator,
6049 viewportCoords: ViewportCoords,
6054 _getConfiguration(enable: boolean): PointerConfiguration;
6056 declare class EarthControlHandler extends HandlerBase<PointerConfiguration> {
6061 component: Component<PointerConfiguration>,
6062 container: Container,
6063 navigator: Navigator,
6064 viewportCoords: ViewportCoords,
6069 _getConfiguration(): PointerConfiguration;
6072 * The `ScrollZoomHandler` allows the user to zoom the viewer image by scrolling.
6074 * var pointerComponent = viewer.getComponent("pointer");
6076 * pointerComponent.scrollZoom.disable();
6077 * pointerComponent.scrollZoom.enable();
6079 * var isEnabled = pointerComponent.scrollZoom.isEnabled;
6082 declare class ScrollZoomHandler extends HandlerBase<PointerConfiguration> {
6087 component: Component<PointerConfiguration>,
6088 container: Container,
6089 navigator: Navigator,
6090 viewportCoords: ViewportCoords
6094 _getConfiguration(enable: boolean): PointerConfiguration;
6097 * The `TouchZoomHandler` allows the user to zoom the viewer image by pinching on a touchscreen.
6099 * var pointerComponent = viewer.getComponent("pointer");
6101 * pointerComponent.touchZoom.disable();
6102 * pointerComponent.touchZoom.enable();
6104 * var isEnabled = pointerComponent.touchZoom.isEnabled;
6107 declare class TouchZoomHandler extends HandlerBase<PointerConfiguration> {
6112 component: Component<PointerConfiguration>,
6113 container: Container,
6114 navigator: Navigator,
6115 viewportCoords: ViewportCoords
6119 _getConfiguration(enable: boolean): PointerConfiguration;
6122 * @class PointerComponent
6123 * @classdesc Component handling mouse, pen, and touch events for camera movement.
6125 * To retrive and use the mouse component
6127 * var viewer = new Viewer({ ... });
6129 * var pointerComponent = viewer.getComponent("pointer");
6132 declare class PointerComponent extends Component<PointerConfiguration> {
6136 static componentName: string;
6141 constructor(name: string, container: Container, navigator: Navigator): this;
6145 * @returns {DragPanHandler} The drag pan handler.
6147 dragPan: DragPanHandler;
6150 * Get earth control.
6151 * @returns {EarthControlHandler} The earth control handler.
6153 earthControl: EarthControlHandler;
6157 * @returns {ScrollZoomHandler} The scroll zoom handler.
6159 scrollZoom: ScrollZoomHandler;
6163 * @returns {TouchZoomHandler} The touch zoom handler.
6165 touchZoom: TouchZoomHandler;
6167 _deactivate(): void;
6168 _getDefaultConfiguration(): PointerConfiguration;
6171 * Interface for the popup offset with respect to its anchor point.
6172 * @description An object of number arrays specifying an offset for
6173 * each float direction. Negative offsets indicate left and up.
6178 * bottomLeft: [-10, 10],
6179 * bottomRight: [10, 10],
6184 * topLeft: [-10, -10],
6185 * topRight: [10, -10],
6188 * var popup = new Popup({ offset: offset });
6191 export interface PopupOffset {
6193 bottomLeft: number[];
6194 bottomRight: number[];
6203 * Interface for the options that define behavior and
6204 * appearance of a popup.
6207 export interface PopupOptions {
6209 * Specify if the popup should capture pointer events.
6210 * @description If the popup is specified to not capture
6211 * pointer events the provided content can still override
6212 * this behavior for the individual content HTML elements
6213 * by specifying the appropriate CSS.
6216 capturePointer?: boolean;
6219 * Specify that the popup should not have any tooltip
6220 * like visuals around the provided content.
6226 * The direction in which the popup floats with respect to the
6227 * anchor point or points. If no value is supplied the popup
6228 * will change float automatically based on the its position
6229 * in the viewport so that as much of its area as possible is
6231 * @description For automatic floating (undefined) the popup
6232 * will float in eight directions around a point or a position
6233 * in a rect. When a rectangle is set without a position option
6234 * specified, the popup will float outward from the rectangle
6235 * center based on the side it is currently rendered in. The
6236 * default floating direction is to the bottom for both points
6238 * @default undefined
6240 float?: $Values<typeof Alignment>;
6243 * A pixel offset applied to the popup's location specfied as:
6245 * - A single number in pixels in the float direction that the popup
6246 * will be translated with respect to the current anchor point.
6248 * - An object of number arrays specifying an offset for
6249 * each float direction. Negative offsets indicate left and up.
6252 offset?: number | PopupOffset;
6255 * Opacity of the popup visuals.
6261 * The popup position in a rectangle (does not apply to points).
6262 * When not set the popup will change position automatically
6263 * based on the viewport so that as much of it as possible is
6265 * @default undefined
6267 position?: $Values<typeof Alignment>;
6271 * @classdesc [object Object],[object Object],[object Object]
6273 * var defaultSpan = document.createElement('span');
6274 * defaultSpan.innerHTML = 'hello default';
6276 * var defaultPopup = new Popup();
6277 * defaultPopup.setDOMContent(defaultSpan);
6278 * defaultPopup.setBasicPoint([0.3, 0.3]);
6280 * var cleanSpan = document.createElement('span');
6281 * cleanSpan.innerHTML = 'hello clean';
6283 * var cleanPopup = new Popup({
6285 * float: Alignment.Top,
6290 * cleanPopup.setDOMContent(cleanSpan);
6291 * cleanPopup.setBasicPoint([0.6, 0.6]);
6293 * popupComponent.add([defaultPopup, cleanPopup]);
6295 * @description Implementation of API methods and API documentation inspired
6296 * by/used from https://github.com/mapbox/mapbox-gl-js/blob/v0.38.0/src/ui/popup.js
6298 declare class Popup {
6300 options?: PopupOptions,
6301 viewportCoords?: ViewportCoords,
6306 * @description Internal method used by the component to
6307 * remove all references to the popup.
6313 * Sets a 2D basic image coordinates point to the popup's anchor, and
6314 * moves the popup to it.
6315 * @description Overwrites any previously set point or rect.
6316 * @param {Array<number>} basicPoint - Point in 2D basic image coordinates.
6318 * var popup = new Popup();
6319 * popup.setText('hello image');
6320 * popup.setBasicPoint([0.3, 0.3]);
6322 * popupComponent.add([popup]);
6325 setBasicPoint(basicPoint: number[]): void;
6328 * Sets a 2D basic image coordinates rect to the popup's anchor, and
6329 * moves the popup to it.
6330 * @description Overwrites any previously set point or rect.
6331 * @param {Array<number>} basicRect - Rect in 2D basic image
6332 * coordinates ([topLeftX, topLeftY, bottomRightX, bottomRightY]) .
6334 * var popup = new Popup();
6335 * popup.setText('hello image');
6336 * popup.setBasicRect([0.3, 0.3, 0.5, 0.6]);
6338 * popupComponent.add([popup]);
6341 setBasicRect(basicRect: number[]): void;
6344 * Sets the popup's content to the element provided as a DOM node.
6345 * @param {Node} htmlNode - A DOM node to be used as content for the popup.
6347 * var div = document.createElement('div');
6348 * div.innerHTML = 'hello image';
6350 * var popup = new Popup();
6351 * popup.setDOMContent(div);
6352 * popup.setBasicPoint([0.3, 0.3]);
6354 * popupComponent.add([popup]);
6357 setDOMContent(htmlNode: Node): void;
6360 * Sets the popup's content to the HTML provided as a string.
6361 * @description [object Object],[object Object],[object Object]
6362 * @param {string} html - A string representing HTML content for the popup.
6364 * var popup = new Popup();
6365 * popup.setHTML('<div>hello image</div>');
6366 * popup.setBasicPoint([0.3, 0.3]);
6368 * popupComponent.add([popup]);
6371 setHTML(html: string): void;
6374 * Sets the popup's content to a string of text.
6375 * @description This function creates a Text node in the DOM, so it cannot insert raw HTML.
6376 * Use this method for security against XSS if the popup content is user-provided.
6377 * @param {string} text - Textual content for the popup.
6379 * var popup = new Popup();
6380 * popup.setText('hello image');
6381 * popup.setBasicPoint([0.3, 0.3]);
6383 * popupComponent.add([popup]);
6386 setText(text: string): void;
6389 * @description Internal method for attaching the popup to
6390 * its parent container so that it is rendered in the DOM tree.
6393 setParentContainer(parentContainer: HTMLElement): void;
6396 * @description Internal method for updating the rendered
6397 * position of the popup called by the popup component.
6401 renderCamera: RenderCamera,
6403 transform: Transform
6407 * @class PopupComponent
6408 * @classdesc Component for showing HTML popup objects.
6410 * The `add` method is used for adding new popups. Popups are removed by reference.
6412 * It is not possible to update popups in the set by updating any properties
6413 * directly on the popup object. Popups need to be replaced by
6414 * removing them and creating new ones with relevant changed properties and
6415 * adding those instead.
6417 * Popups are only relevant to a single image because they are based on
6418 * 2D basic image coordinates. Popups related to a certain image should
6419 * be removed when the viewer is moved to another image.
6421 * To retrive and use the popup component
6423 * var viewer = new Viewer({ component: { popup: true }, ... });
6425 * var popupComponent = viewer.getComponent("popup");
6428 declare class PopupComponent extends Component<ComponentConfiguration> {
6429 static componentName: string;
6436 container: Container,
6437 navigator: Navigator,
6442 * Add popups to the popups set.
6443 * @description Adding a new popup never replaces an old one
6444 * because they are stored by reference. Adding an already
6445 * existing popup has no effect.
6446 * @param {Array<Popup>} popups - Popups to add.
6448 * popupComponent.add([popup1, popup2]);
6451 add(popups: Popup[]): void;
6454 * Returns an array of all popups.
6456 * var popups = popupComponent.getAll();
6462 * Remove popups based on reference from the popup set.
6463 * @param {Array<Popup>} popups - Popups to remove.
6465 * popupComponent.remove([popup1, popup2]);
6468 remove(popups: Popup[]): void;
6471 * Remove all popups from the popup set.
6473 * popupComponent.removeAll();
6478 _deactivate(): void;
6479 _getDefaultConfiguration(): ComponentConfiguration;
6481 declare class SequenceDOMRenderer {
6482 constructor(container: Container): this;
6487 configuration: SequenceConfiguration
6491 * @class SequenceComponent
6492 * @classdesc Component showing navigation arrows for sequence directions
6493 * as well as playing button. Exposes an API to start and stop play.
6495 declare class SequenceComponent extends Component<SequenceConfiguration> {
6499 static componentName: string;
6502 container: Container,
6503 navigator: Navigator,
6504 renderer?: SequenceDOMRenderer
6519 _deactivate(): void;
6520 _getDefaultConfiguration(): SequenceConfiguration;
6523 * @class SliderComponent
6524 * @classdesc Component for comparing pairs of images. Renders
6525 * a slider for adjusting the curtain of the first image.
6527 * Deactivate the sequence, direction and image plane
6528 * components when activating the slider component to avoid
6529 * interfering UI elements.
6531 * To retrive and use the slider component
6533 * var viewer = new Viewer({ ... });
6535 * viewer.deactivateComponent("image");
6536 * viewer.deactivateComponent("direction");
6537 * viewer.deactivateComponent("sequence");
6539 * viewer.activateComponent("slider");
6541 * var sliderComponent = viewer.getComponent("slider");
6544 declare class SliderComponent extends Component<SliderConfiguration> {
6545 static componentName: string;
6552 container: Container,
6553 navigator: Navigator,
6554 viewportCoords?: ViewportCoords
6557 _deactivate(): void;
6558 _getDefaultConfiguration(): SliderConfiguration;
6560 declare class SpatialComponent extends Component<SpatialConfiguration> {
6561 static componentName: string;
6566 constructor(name: string, container: Container, navigator: Navigator): this;
6569 * Returns the image id of the camera frame closest to the current
6570 * render camera position at the specified point.
6571 * @description Notice that the pixelPoint argument requires x, y
6572 * coordinates from pixel space.
6574 * With this function, you can use the coordinates provided by mouse
6575 * events to get information out of the spatial component.
6577 * If no camera frame exist at the pixel
6578 * point, `null` will be returned.
6579 * @param {Array<number>} pixelPoint - Pixel coordinates on
6580 * the viewer element.
6581 * @returns {string} Image id of the camera frame closest to
6582 * the camera. If no camera frame is intersected at the
6583 * pixel point, `null` will be returned.
6585 * spatialComponent.getFrameIdAt([100, 125])
6586 * .then((imageId) => { console.log(imageId); });
6589 getFrameIdAt(pixelPoint: number[]): Promise<string>;
6591 _deactivate(): void;
6592 _getDefaultConfiguration(): SpatialConfiguration;
6594 declare class GeometryTagError extends MapillaryError {
6595 constructor(message?: string): this;
6598 * @class PointGeometry
6599 * @classdesc Represents a point geometry in the 2D basic image coordinate system.
6601 * var basicPoint = [0.5, 0.7];
6602 * var pointGeometry = new PointGeometry(basicPoint);
6605 declare class PointGeometry extends Geometry {
6607 * Create a point geometry.
6609 * @param {Array<number>} point - An array representing the basic coordinates of
6611 * @throws {GeometryTagError} Point coordinates must be valid basic coordinates.
6613 constructor(point: number[]): this;
6616 * Get point property.
6617 * @returns {Array<number>} Array representing the basic coordinates of the point.
6622 * Get the 2D basic coordinates for the centroid of the point, i.e. the 2D
6623 * basic coordinates of the point itself.
6624 * @returns {Array<number>} 2D basic coordinates representing the centroid.
6627 getCentroid2d(): number[];
6630 * Get the 3D world coordinates for the centroid of the point, i.e. the 3D
6631 * world coordinates of the point itself.
6632 * @param {Transform} transform - The transform of the image related to the point.
6633 * @returns {Array<number>} 3D world coordinates representing the centroid.
6636 getCentroid3d(transform: Transform): number[];
6639 * Set the centroid of the point, i.e. the point coordinates.
6640 * @param {Array<number>} value - The new value of the centroid.
6641 * @param {Transform} transform - The transform of the image related to the point.
6644 setCentroid2d(value: number[], transform: Transform): void;
6647 * @class PointsGeometry
6648 * @classdesc Represents a point set in the 2D basic image coordinate system.
6650 * var points = [[0.5, 0.3], [0.7, 0.3], [0.6, 0.5]];
6651 * var pointsGeometry = new PointsGeometry(points);
6654 declare class PointsGeometry extends Geometry {
6656 * Create a points geometry.
6658 * @param {Array<Array<number>>} points - Array of 2D points on the basic coordinate
6659 * system. The number of points must be greater than or equal to two.
6660 * @throws {GeometryTagError} Point coordinates must be valid basic coordinates.
6662 constructor(points: number[][]): this;
6665 * Get points property.
6666 * @returns {Array<Array<number>>} Array of 2d points.
6671 * Add a point to the point set.
6672 * @param {Array<number>} point - Point to add.
6675 addPoint2d(point: number[]): void;
6678 * Get the coordinates of a point from the point set representation of the geometry.
6679 * @param {number} index - Point index.
6680 * @returns {Array<number>} Array representing the 2D basic coordinates of the point.
6683 getPoint2d(index: number): number[];
6686 * Remove a point from the point set.
6687 * @param {number} index - The index of the point to remove.
6690 removePoint2d(index: number): void;
6695 setVertex2d(index: number, value: number[], transform: Transform): void;
6700 setPoint2d(index: number, value: number[], transform: Transform): void;
6705 getPoints3d(transform: Transform): number[][];
6710 getPoint3d(index: number, transform: Transform): number[];
6715 getPoints2d(): number[][];
6720 getCentroid2d(transform?: Transform): number[];
6725 getCentroid3d(transform: Transform): number[];
6730 getRect2d(transform: Transform): number[];
6735 setCentroid2d(value: number[], transform: Transform): void;
6738 * @class VertexGeometry
6740 * @classdesc Represents a vertex geometry.
6742 declare class VertexGeometry extends Geometry {
6744 * Create a vertex geometry.
6748 constructor(): this;
6751 * Get the 3D coordinates for the vertices of the geometry with possibly
6752 * subsampled points along the lines.
6753 * @param {Transform} transform - The transform of the image related to
6755 * @returns {Array<Array<number>>} Polygon array of 3D world coordinates
6756 * representing the geometry.
6759 getPoints3d(transform: Transform): number[][];
6762 * Get the polygon pole of inaccessibility, the most
6763 * distant internal point from the polygon outline.
6764 * @returns {Array<number>} 2D basic coordinates for the pole of inaccessibility.
6767 getPoleOfInaccessibility2d(): number[];
6770 * Get the polygon pole of inaccessibility, the most
6771 * distant internal point from the polygon outline.
6772 * @param transform - The transform of the image related to
6774 * @returns {Array<number>} 3D world coordinates for the pole of inaccessibility.
6777 getPoleOfInaccessibility3d(transform: Transform): number[];
6780 * Get the coordinates of a vertex from the polygon representation of the geometry.
6781 * @param {number} index - Vertex index.
6782 * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
6785 getVertex2d(index: number): number[];
6788 * Get a vertex from the polygon representation of the 3D coordinates for the
6789 * vertices of the geometry.
6790 * @param {number} index - Vertex index.
6791 * @param {Transform} transform - The transform of the image related to the geometry.
6792 * @returns {Array<number>} Array representing the 3D world coordinates of the vertex.
6795 getVertex3d(index: number, transform: Transform): number[];
6798 * Get a polygon representation of the 2D basic coordinates for the vertices of the geometry.
6799 * @returns {Array<Array<number>>} Polygon array of 2D basic coordinates representing
6800 * the vertices of the geometry.
6803 getVertices2d(): number[][];
6806 * Get a polygon representation of the 3D world coordinates for the vertices of the geometry.
6807 * @param {Transform} transform - The transform of the image related to the geometry.
6808 * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
6809 * the vertices of the geometry.
6812 getVertices3d(transform: Transform): number[][];
6815 * Get a flattend array of the 3D world coordinates for the
6816 * triangles filling the geometry.
6817 * @param {Transform} transform - The transform of the image related to the geometry.
6818 * @returns {Array<number>} Flattened array of 3D world coordinates of the triangles.
6821 getTriangles3d(transform: Transform): number[];
6824 * Set the value of a vertex in the polygon representation of the geometry.
6825 * @description The polygon is defined to have the first vertex at the
6826 * bottom-left corner with the rest of the vertices following in clockwise order.
6827 * @param {number} index - The index of the vertex to be set.
6828 * @param {Array<number>} value - The new value of the vertex.
6829 * @param {Transform} transform - The transform of the image related to the geometry.
6832 setVertex2d(index: number, value: number[], transform: Transform): void;
6835 * Finds the polygon pole of inaccessibility, the most distant internal
6836 * point from the polygon outline.
6837 * @param {Array<Array<number>>} points2d - 2d points of outline to triangulate.
6838 * @returns {Array<number>} Point of inaccessibility.
6841 _getPoleOfInaccessibility2d(points2d: number[][]): number[];
6842 _project(points2d: number[][], transform: Transform): number[][];
6843 _subsample(points2d: number[][], threshold?: number): number[][];
6846 * Triangulates a 2d polygon and returns the triangle
6847 * representation as a flattened array of 3d points.
6848 * @param {Array<Array<number>>} points2d - 2d points of outline to triangulate.
6849 * @param {Array<Array<number>>} points3d - 3d points of outline corresponding to the 2d points.
6850 * @param {Array<Array<Array<number>>>} [holes2d] - 2d points of holes to triangulate.
6851 * @param {Array<Array<Array<number>>>} [holes3d] - 3d points of holes corresponding to the 2d points.
6852 * @returns {Array<number>} Flattened array of 3d points ordered based on the triangles.
6856 points2d: number[][],
6857 points3d: number[][],
6858 holes2d?: number[][][],
6859 holes3d?: number[][][]
6861 _triangulateSpherical(
6862 points2d: number[][],
6863 holes2d: number[][][],
6864 transform: Transform
6867 points2d: number[][],
6868 transform: Transform,
6873 * @class PolygonGeometry
6874 * @classdesc Represents a polygon geometry in the 2D basic image coordinate system.
6875 * All polygons and holes provided to the constructor needs to be closed.
6877 * var basicPolygon = [[0.5, 0.3], [0.7, 0.3], [0.6, 0.5], [0.5, 0.3]];
6878 * var polygonGeometry = new PolygonGeometry(basicPolygon);
6881 declare class PolygonGeometry extends VertexGeometry {
6883 * Create a polygon geometry.
6885 * @param {Array<Array<number>>} polygon - Array of polygon vertices. Must be closed.
6886 * @param {Array<Array<Array<number>>>} [holes] - Array of arrays of hole vertices.
6887 * Each array of holes vertices must be closed.
6888 * @throws {GeometryTagError} Polygon coordinates must be valid basic coordinates.
6890 constructor(polygon: number[][], holes?: number[][][]): this;
6893 * Get polygon property.
6894 * @returns {Array<Array<number>>} Closed 2d polygon.
6896 polygon: number[][];
6899 * Get holes property.
6900 * @returns {Array<Array<Array<number>>>} Holes of 2d polygon.
6902 holes: number[][][];
6905 * Add a vertex to the polygon by appending it after the last vertex.
6906 * @param {Array<number>} vertex - Vertex to add.
6909 addVertex2d(vertex: number[]): void;
6912 * Get the coordinates of a vertex from the polygon representation of the geometry.
6913 * @param {number} index - Vertex index.
6914 * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
6917 getVertex2d(index: number): number[];
6920 * Remove a vertex from the polygon.
6921 * @param {number} index - The index of the vertex to remove.
6924 removeVertex2d(index: number): void;
6929 setVertex2d(index: number, value: number[], transform: Transform): void;
6934 setCentroid2d(value: number[], transform: Transform): void;
6939 getPoints3d(transform: Transform): number[][];
6944 getVertex3d(index: number, transform: Transform): number[];
6949 getVertices2d(): number[][];
6954 getVertices3d(transform: Transform): number[][];
6957 * Get a polygon representation of the 3D coordinates for the vertices of each hole
6958 * of the geometry. Line segments between vertices will possibly be subsampled
6959 * resulting in a larger number of points than the total number of vertices.
6960 * @param {Transform} transform - The transform of the image related to the geometry.
6961 * @returns {Array<Array<Array<number>>>} Array of hole polygons in 3D world coordinates
6962 * representing the vertices of each hole of the geometry.
6965 getHolePoints3d(transform: Transform): number[][][];
6968 * Get a polygon representation of the 3D coordinates for the vertices of each hole
6970 * @param {Transform} transform - The transform of the image related to the geometry.
6971 * @returns {Array<Array<Array<number>>>} Array of hole polygons in 3D world coordinates
6972 * representing the vertices of each hole of the geometry.
6975 getHoleVertices3d(transform: Transform): number[][][];
6980 getCentroid2d(): number[];
6985 getCentroid3d(transform: Transform): number[];
6990 get3dDomainTriangles3d(transform: Transform): number[];
6995 getTriangles3d(transform: Transform): number[];
7000 getPoleOfInaccessibility2d(): number[];
7005 getPoleOfInaccessibility3d(transform: Transform): number[];
7008 * @class RectGeometry
7009 * @classdesc Represents a rectangle geometry in the 2D basic image coordinate system.
7011 * var basicRect = [0.5, 0.3, 0.7, 0.4];
7012 * var rectGeometry = new RectGeometry(basicRect);
7015 declare class RectGeometry extends VertexGeometry {
7017 * Create a rectangle geometry.
7019 * @param {Array<number>} rect - An array representing the top-left and bottom-right
7020 * corners of the rectangle in basic coordinates. Ordered according to [x0, y0, x1, y1].
7021 * @throws {GeometryTagError} Rectangle coordinates must be valid basic coordinates.
7023 constructor(rect: number[]): this;
7026 * Get anchor index property.
7027 * @returns {number} Index representing the current anchor property if
7028 * achoring indexing has been initialized. If anchor indexing has not been
7029 * initialized or has been terminated undefined will be returned.
7032 anchorIndex: number;
7035 * Get inverted property.
7036 * @returns {boolean} Boolean determining whether the rect geometry is
7037 * inverted. For spherical the rect geometrye may be inverted.
7043 * Get rect property.
7044 * @returns {Array<number>} Array representing the top-left and bottom-right
7045 * corners of the rectangle in basic coordinates.
7050 * Initialize anchor indexing to enable setting opposite vertex.
7051 * @param {number} [index] - The index of the vertex to use as anchor.
7052 * @throws {GeometryTagError} If anchor indexing has already been initialized.
7053 * @throws {GeometryTagError} If index is not valid (0 to 3).
7056 initializeAnchorIndexing(index?: number): void;
7059 * Terminate anchor indexing to disable setting pposite vertex.
7062 terminateAnchorIndexing(): void;
7065 * Set the value of the vertex opposite to the anchor in the polygon
7066 * representation of the rectangle.
7067 * @description Setting the opposite vertex may change the anchor index.
7068 * @param {Array<number>} opposite - The new value of the vertex opposite to the anchor.
7069 * @param {Transform} transform - The transform of the image related to the rectangle.
7070 * @throws {GeometryTagError} When anchor indexing has not been initialized.
7073 setOppositeVertex2d(opposite: number[], transform: Transform): void;
7076 * Set the value of a vertex in the polygon representation of the rectangle.
7077 * @description The polygon is defined to have the first vertex at the
7078 * bottom-left corner with the rest of the vertices following in clockwise order.
7079 * @param {number} index - The index of the vertex to be set.
7080 * @param {Array<number>} value - The new value of the vertex.
7081 * @param {Transform} transform - The transform of the image related to the rectangle.
7084 setVertex2d(index: number, value: number[], transform: Transform): void;
7089 setCentroid2d(value: number[], transform: Transform): void;
7092 * Get the 3D coordinates for the vertices of the rectangle with
7093 * interpolated points along the lines.
7094 * @param {Transform} transform - The transform of the image related to
7096 * @returns {Array<Array<number>>} Polygon array of 3D world coordinates
7097 * representing the rectangle.
7100 getPoints3d(transform: Transform): number[][];
7103 * Get the coordinates of a vertex from the polygon representation of the geometry.
7104 * @description The first vertex represents the bottom-left corner with the rest of
7105 * the vertices following in clockwise order. The method shifts the right side
7106 * coordinates of the rectangle by one unit to ensure that the vertices are ordered
7108 * @param {number} index - Vertex index.
7109 * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
7112 getVertex2d(index: number): number[];
7115 * Get the coordinates of a vertex from the polygon representation of the geometry.
7116 * @description The first vertex represents the bottom-left corner with the rest of
7117 * the vertices following in clockwise order. The coordinates will not be shifted
7118 * so they may not appear in clockwise order when layed out on the plane.
7119 * @param {number} index - Vertex index.
7120 * @returns {Array<number>} Array representing the 2D basic coordinates of the vertex.
7123 getNonAdjustedVertex2d(index: number): number[];
7126 * Get a vertex from the polygon representation of the 3D coordinates for the
7127 * vertices of the geometry.
7128 * @description The first vertex represents the bottom-left corner with the rest of
7129 * the vertices following in clockwise order.
7130 * @param {number} index - Vertex index.
7131 * @param {Transform} transform - The transform of the image related to the geometry.
7132 * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
7133 * the vertices of the geometry.
7136 getVertex3d(index: number, transform: Transform): number[];
7139 * Get a polygon representation of the 2D basic coordinates for the vertices of the rectangle.
7140 * @description The first vertex represents the bottom-left corner with the rest of
7141 * the vertices following in clockwise order.
7142 * @returns {Array<Array<number>>} Polygon array of 2D basic coordinates representing
7143 * the rectangle vertices.
7146 getVertices2d(): number[][];
7149 * Get a polygon representation of the 3D coordinates for the vertices of the rectangle.
7150 * @description The first vertex represents the bottom-left corner with the rest of
7151 * the vertices following in clockwise order.
7152 * @param {Transform} transform - The transform of the image related to the rectangle.
7153 * @returns {Array<Array<number>>} Polygon array of 3D world coordinates representing
7154 * the rectangle vertices.
7157 getVertices3d(transform: Transform): number[][];
7162 getCentroid2d(): number[];
7167 getCentroid3d(transform: Transform): number[];
7172 getPoleOfInaccessibility2d(): number[];
7177 getPoleOfInaccessibility3d(transform: Transform): number[];
7182 getTriangles3d(transform: Transform): number[];
7185 * Check if a particular bottom-right value is valid according to the current
7186 * rectangle coordinates.
7187 * @param {Array<number>} bottomRight - The bottom-right coordinates to validate
7188 * @returns {boolean} Value indicating whether the provided bottom-right coordinates
7192 validate(bottomRight: number[]): boolean;
7197 export type TagEventType = "click" | "geometry" | "tag";
7199 * Interface for tag state events.
7201 * var tag = new OutlineTag({ // tag options });
7202 * // Set an event listener
7203 * tag.on('tag', function() {
7204 * console.log("A tag event has occurred.");
7208 export interface TagStateEvent {
7210 * The component object that fired the event.
7222 * @classdesc Abstract class representing the basic functionality of for a tag.
7224 declare class Tag extends EventEmitter {
7226 _geometry: Geometry;
7231 * @param {string} id
7232 * @param {Geometry} geometry
7234 constructor(id: string, geometry: Geometry): this;
7243 * Get geometry property.
7244 * @returns {Geometry} The geometry of the tag.
7249 * Interface for the options that define the behavior and
7250 * appearance of the outline tag.
7253 export interface ExtremePointTagOptions {
7255 * Indicate whether the tag geometry should be editable.
7256 * @description Polygon tags with two dimensional domain
7257 * are never editable.
7263 * Color for the interior fill as a hexadecimal number.
7269 * Opacity of the interior fill between 0 and 1.
7272 fillOpacity?: number;
7275 * Determines whether vertices should be indicated by points
7276 * when tag is editable.
7279 indicateVertices?: boolean;
7282 * Color for the edge lines as a hexadecimal number.
7288 * Opacity of the edge lines on [0, 1].
7291 lineOpacity?: number;
7294 * Line width in pixels.
7300 * @class ExtremePointTag
7301 * @classdesc Tag holding properties for visualizing a extreme points
7302 * and their outline.
7304 * var geometry = new PointsGeometry([[0.3, 0.3], [0.5, 0.4]]);
7305 * var tag = new ExtremePointTag(
7308 * { editable: true, lineColor: 0xff0000 });
7310 * tagComponent.add([tag]);
7313 declare class ExtremePointTag extends Tag {
7315 * Create an extreme point tag.
7318 * @param {string} id - Unique identifier of the tag.
7319 * @param {PointsGeometry} geometry - Geometry defining points of tag.
7320 * @param {ExtremePointTagOptions} options - Options defining the visual appearance and
7321 * behavior of the extreme point tag.
7325 geometry: PointsGeometry,
7326 options?: ExtremePointTagOptions
7330 * Get editable property.
7331 * @returns {boolean} Value indicating if tag is editable.
7336 * Set editable property.
7343 * Get fill color property.
7349 * Set fill color property.
7356 * Get fill opacity property.
7359 fillOpacity: number;
7362 * Set fill opacity property.
7366 -fillOpacity: number;
7374 * Get indicate vertices property.
7375 * @returns {boolean} Value indicating if vertices should be indicated
7376 * when tag is editable.
7378 indicateVertices: boolean;
7381 * Get line color property.
7387 * Get line opacity property.
7390 lineOpacity: number;
7393 * Get line width property.
7399 * Set options for tag.
7400 * @description Sets all the option properties provided and keeps
7401 * the rest of the values as is.
7402 * @param {ExtremePointTagOptions} options - Extreme point tag options
7405 setOptions(options: ExtremePointTagOptions): void;
7408 * Enumeration for tag domains.
7411 * @description Defines where lines between two vertices are treated
7414 * Only applicable for polygons. For rectangles lines between
7415 * vertices are always treated as straight in the distorted 2D
7416 * projection and bended in the undistorted 3D space.
7419 declare var TagDomain: {|
7420 +TwoDimensional: 0, // 0
7421 +ThreeDimensional: 1, // 1
7425 * Interface for the options that define the behavior and
7426 * appearance of the outline tag.
7429 export interface OutlineTagOptions {
7431 * The domain where lines between vertices are treated as straight.
7432 * @description Only applicable for tags that renders polygons.
7434 * If the domain is specified as two dimensional, editing of the
7435 * polygon will be disabled.
7436 * @default {TagDomain.TwoDimensional}
7438 domain?: $Values<typeof TagDomain>;
7441 * Indicate whether the tag geometry should be editable.
7442 * @description Polygon tags with two dimensional domain
7443 * are never editable.
7449 * Color for the interior fill as a hexadecimal number.
7455 * Opacity of the interior fill between 0 and 1.
7458 fillOpacity?: number;
7461 * A string referencing the sprite data property to pull from.
7462 * @description Icon is not shown for tags with polygon
7463 * geometries in spherical.
7468 * Value determining how the icon will float with respect to its anchor
7469 * position when rendering.
7470 * @default {Alignment.Center}
7472 iconFloat?: $Values<typeof Alignment>;
7475 * Number representing the index for where to show the icon or
7476 * text for a rectangle geometry.
7477 * @description The default index corresponds to the bottom right corner.
7483 * Determines whether vertices should be indicated by points
7484 * when tag is editable.
7487 indicateVertices?: boolean;
7490 * Color for the edge lines as a hexadecimal number.
7496 * Opacity of the edge lines on [0, 1].
7499 lineOpacity?: number;
7502 * Line width in pixels.
7508 * Text shown as label if no icon is provided.
7509 * @description Text is not shown for tags with
7510 * polygon geometries in spherical.
7515 * Text color as hexadecimal number.
7521 * Interface for the options that define the behavior and
7522 * appearance of the spot tag.
7525 export interface SpotTagOptions {
7527 * Color for the spot specified as a hexadecimal number.
7533 * Indicate whether the tag geometry should be editable.
7539 * A string referencing the sprite data property to pull from.
7544 * Text shown as label if no icon is provided.
7549 * Text color as hexadecimal number.
7556 * @classdesc Tag holding properties for visualizing a geometry outline.
7558 * var geometry = new RectGeometry([0.3, 0.3, 0.5, 0.4]);
7559 * var tag = new OutlineTag(
7562 * { editable: true, lineColor: 0xff0000 });
7564 * tagComponent.add([tag]);
7567 declare class OutlineTag extends Tag {
7569 * Create an outline tag.
7572 * @param {string} id - Unique identifier of the tag.
7573 * @param {VertexGeometry} geometry - Geometry defining vertices of tag.
7574 * @param {OutlineTagOptions} options - Options defining the visual appearance and
7575 * behavior of the outline tag.
7579 geometry: VertexGeometry,
7580 options?: OutlineTagOptions
7584 * Get domain property.
7585 * @description Readonly property that can only be set in constructor.
7586 * @returns Value indicating the domain of the tag.
7588 domain: $Values<typeof TagDomain>;
7591 * Get editable property.
7592 * @returns {boolean} Value indicating if tag is editable.
7597 * Set editable property.
7604 * Get fill color property.
7610 * Set fill color property.
7617 * Get fill opacity property.
7620 fillOpacity: number;
7623 * Set fill opacity property.
7627 -fillOpacity: number;
7635 * Get icon property.
7641 * Set icon property.
7648 * Get icon float property.
7649 * @returns {$Values<
7653 iconFloat: $Values<typeof Alignment>;
7656 * Set icon float property.
7662 -iconFloat: $Values<typeof Alignment>;
7665 * Get icon index property.
7671 * Set icon index property.
7678 * Get indicate vertices property.
7679 * @returns {boolean} Value indicating if vertices should be indicated
7680 * when tag is editable.
7682 indicateVertices: boolean;
7685 * Set indicate vertices property.
7689 -indicateVertices: boolean;
7692 * Get line color property.
7698 * Set line color property.
7705 * Get line opacity property.
7708 lineOpacity: number;
7711 * Set line opacity property.
7715 -lineOpacity: number;
7718 * Get line width property.
7724 * Set line width property.
7731 * Get text property.
7737 * Set text property.
7744 * Get text color property.
7750 * Set text color property.
7757 * Set options for tag.
7758 * @description Sets all the option properties provided and keeps
7759 * the rest of the values as is.
7760 * @param {OutlineTagOptions} options - Outline tag options
7763 setOptions(options: OutlineTagOptions): void;
7767 * @classdesc Tag holding properties for visualizing the centroid of a geometry.
7769 * var geometry = new PointGeometry([0.3, 0.3]);
7770 * var tag = new SpotTag(
7773 * { editable: true, color: 0xff0000 });
7775 * tagComponent.add([tag]);
7778 declare class SpotTag extends Tag {
7779 _geometry: Geometry;
7782 * Create a spot tag.
7785 * @param {string} id
7786 * @param {Geometry} geometry
7787 * @param {IOutlineTagOptions} options - Options defining the visual appearance and
7788 * behavior of the spot tag.
7790 constructor(id: string, geometry: Geometry, options?: SpotTagOptions): this;
7793 * Get color property.
7794 * @returns {number} The color of the spot as a hexagonal number;
7799 * Set color property.
7806 * Get editable property.
7807 * @returns {boolean} Value indicating if tag is editable.
7812 * Set editable property.
7819 * Get icon property.
7825 * Set icon property.
7832 * Get text property.
7838 * Set text property.
7845 * Get text color property.
7851 * Set text color property.
7858 * Set options for tag.
7859 * @description Sets all the option properties provided and keps
7860 * the rest of the values as is.
7861 * @param {SpotTagOptions} options - Spot tag options
7864 setOptions(options: SpotTagOptions): void;
7867 * @class TagComponent
7868 * @classdesc [object Object],[object Object],[object Object]
7870 * var viewer = new Viewer({ component: { tag: true } }, ...);
7872 * var tagComponent = viewer.getComponent("tag");
7875 declare class TagComponent extends Component<TagConfiguration> {
7879 static componentName: string;
7884 constructor(name: string, container: Container, navigator: Navigator): this;
7887 * Add tags to the tag set or replace tags in the tag set.
7888 * @description If a tag already in the set has the same
7889 * id as one of the tags added, the old tag will be removed
7890 * the added tag will take its place.
7891 * @param {Array<Tag>} tags - Tags to add.
7893 * tagComponent.add([tag1, tag2]);
7896 add(tags: Tag[]): void;
7899 * Calculate the smallest rectangle containing all the points
7900 * in the points geometry.
7901 * @description The result may be different depending on if the
7902 * current image is an spherical or not. If the
7903 * current image is an spherical the rectangle may
7904 * wrap the horizontal border of the image.
7905 * @returns {Promise<Array<number>>} [object Object],[object Object],[object Object]
7907 calculateRect(geometry: PointsGeometry): Promise<number[]>;
7910 * Force the creation of a geometry programatically using its
7912 * @description [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
7913 * @fires geometrycreate
7915 * tagComponent.on("geometrycreate", function(geometry) {
7916 * console.log(geometry);
7919 * tagComponent.create();
7925 * Change the current tag mode.
7926 * @description Change the tag mode to one of the create modes for creating new geometries.
7929 TagMode>} mode - New tag mode.
7932 * tagComponent.changeMode(TagMode.CreateRect);
7935 changeMode(mode: $Values<typeof TagMode>): void;
7938 * Returns the tag in the tag set with the specified id, or
7939 * undefined if the id matches no tag.
7940 * @param {string} tagId - Id of the tag.
7942 * var tag = tagComponent.get("tagId");
7945 get(tagId: string): Tag;
7948 * Returns an array of all tags.
7950 * var tags = tagComponent.getAll();
7956 * Returns an array of tag ids for tags that contain the specified point.
7957 * @description The pixel point must lie inside the polygon or rectangle
7958 * of an added tag for the tag id to be returned. Tag ids for
7959 * tags that do not have a fill will also be returned if the point is inside
7960 * the geometry of the tag. Tags with point geometries can not be retrieved.
7962 * No tag ids will be returned for polygons rendered in cropped spherical or
7963 * rectangles rendered in spherical.
7965 * Notice that the pixelPoint argument requires x, y coordinates from pixel space.
7967 * With this function, you can use the coordinates provided by mouse
7968 * events to get information out of the tag component.
7970 * If no tag at exist the pixel point, an empty array will be returned.
7971 * @param {Array<number>} pixelPoint - Pixel coordinates on the viewer element.
7972 * @returns {Promise<Array<string>>} Promise to the ids of the tags that
7973 * contain the specified pixel point.
7975 * tagComponent.getTagIdsAt([100, 100])
7976 * .then((tagIds) => { console.log(tagIds); });
7979 getTagIdsAt(pixelPoint: number[]): Promise<string[]>;
7982 * Check if a tag exist in the tag set.
7983 * @param {string} tagId - Id of the tag.
7985 * var tagExists = tagComponent.has("tagId");
7988 has(tagId: string): boolean;
7991 * Remove tags with the specified ids from the tag set.
7992 * @param {Array<string>} tagIds - Ids for tags to remove.
7994 * tagComponent.remove(["id-1", "id-2"]);
7997 remove(tagIds: string[]): void;
8000 * Remove all tags from the tag set.
8002 * tagComponent.removeAll();
8007 _deactivate(): void;
8008 _getDefaultConfiguration(): TagConfiguration;
8011 * @class ZoomComponent
8012 * @classdesc Component rendering UI elements used for zooming.
8014 * var viewer = new Viewer({ ... });
8016 * var zoomComponent = viewer.getComponent("zoom");
8017 * zoomComponent.configure({ size: ComponentSize.Small });
8020 declare class ZoomComponent extends Component<ZoomConfiguration> {
8021 static componentName: string;
8022 constructor(name: string, container: Container, navigator: Navigator): this;
8024 _deactivate(): void;
8025 _getDefaultConfiguration(): ZoomConfiguration;
8029 ArgumentMapillaryError,
8033 CameraVisualizationMode,
8034 CancelMapillaryError,
8044 GeometryProviderBase,
8047 GraphMapillaryError,
8050 KeySequenceNavigationHandler,
8051 KeySpatialNavigationHandler,
8057 NavigationDirection,
8058 OriginalPositionMode,
8063 PointVisualizationMode,
8075 SliderConfigurationMode,
8095 isFallbackSupported,