Creates a new AerialSphere object, which is used for all the other functions documented here. |
Parameters:
displayElementId (string) - The id of your div. This div will end up with a child iframe element where our imagery will display.
mapClass (object) - The css class that will be added to the generated iframe.
sphereData (object) - Sphere data with which to initialize the iframe. sphereData can have these properties:
title (string): A title for the sphere
sphereLat (number): The latitude of the sphere to display
sphereLng (number): The longitude of the sphere to display
lookatLat (number): The latitude the camera should look at
lookatLng (number): The longitude the camera should look at
cameraFov (number): Camera field of view angle
cameraFovMin (number): Minimum field of view angle. Note: Cannot be less than 5.
cameraFovMax (number): Maximum field of view angle. Note: Cannot be greater than 120.
sphereMarkerDistance (number): The distance, in meters, for which sphere markers are displayed
sphereMarkerList (Array<number>): The list of specific sphere markers to display, by sphere id
customMarkerDistance(number): The distance, in meters, for which custom markers are displayed
customMarkerList(Array<number>): The list of specific custom markers to display, by custom marker id
layers (array): An array of layer objects, one for each layer you want to display. Each layer object can have these properties:
name (string): A name for the layer. Each layer name should be unique.
visible (bool): Set this to true for the layer to show (defaults false).
markers (array): An array of marker objects to display on the layer. Each marker object can have these properties:
name (string): A name for the marker which will be displayed on the sphere. This can contain HTML. Any HTML will be sanitized.
id (number | string): An id for the marker. Each marker id must be unique. If this value is falsy, a uuid will be assigned as the id for this marker.
lat (number): The latitude at which to display the marker. Note: Cannot be a string.
lng (number): The longitude at which to display the marker. Note: Cannot be a string.
icon (string): The name of the icon to display for the marker. If the name is one of the default icon names, the marker icon will change as indicated. See list of all available icons here.
If more than one marker exists, the sphere will automatically rotate its point of view to accommodate.
Marker pop-ups can also be customized, for more information visit here.
fontFamilies (string): The string pulled from google fonts in order to allow custom fonts. Note: Only works when done during API initialization.
Example(highlighted text):
<link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300&family=DotGothic16&family=Stick&family=Syne+Mono&display=swap" rel="stylesheet">
apiUIOptions (string): The UI widgets that are displayed in the viewer.
Each option can be set to true or false. All are optional and assumed to be true if they are not specified.
fullScreen: Set this to false to hide the widget.
snapshot: Set this to false to hide the widget.
search: Set this to false to hide the widget.
help: Set this to false to hide the widget.
info: Set this to false to hide the widget.
view_toggle: Set this to false to hide the widget.
navigation: Set this to false to hide the widget.
showFlyHere (boolean): Toggle if the Fly Here portion of marker Pop-ups is shown.
viewerDisplayOrder(Array<string>): ['polygons', 'spheres', 'icons', 'text'] Uses the 4 items in the array to determine rendering order. Requires all options to be passed but can be done in any order.
Note: The normal behavior is to call the constructor passing the 3 basic parameters (as shown in the example below), when there is no data provided the API will result in loading the map by default, also make sure to use the proper variable names to pass such as sphereLat, sphereLng, lookAtLng, cameraFov, etc.
Note: The set functions will be overridden by already defined parameters while viewer is being initialized. for example: If cameraZoomMin is already defined to 5.0 like in the example below,
setting setZoomto 1.0 won’t work.
const sphereData = {
sphereLat: 33.323741448909225,
sphereLng: -111.73930440609989,
lookAtLat: 37.815,
lookAtLng: -122.4775,
cameraFov: 90,
cameraFovMin: 10,
cameraFovMax: 360,
cameraZoomMin: 5.0,
sphereMarkerDistance: 10000,
layers: [] |
Using custom fonts: