Page Comparison

...

<div id="aerialSphereTestDiv"/>

<script>
    const sphereData = {
      sphereLat: 33.323741448909225,
      sphereLng: -111.73930440609989,
      title: 'Example',
      lookAtLat: 33.32044654603967,
      lookAtLng: -111.74065486034277,
      cameraFov: 30,
      cameraFovMin: 10,
      cameraFovMax: 145
  }
  const aerialSphereApi = new AerialSphere('aerialSphereTestDiv', 'aerialsphereIframeClassname', sphereData);
</script>

The XP360 viewer will be shown in an iframe which will be created inside your div. Here This iframe is further customizable as expected using existing html and css options. Below is a simple example:

Adding Styles

You can add CSS styles to the XP360 viewer iframe by passing a class name to the AerialSphere constructor; the class will be added to the iframe. Here is an example which adds styles to the div to make it fill the parent element, and adds styles to the iframe to fill the div:basic example that initiates our AerialSphere class with some basic sphere data and also styled to take up the entire result window.

Calling API Functions

Consult the API Reference for a list of the functions you can use. Here is an example which demonstrates adding markers and changing the camera view: Markers and Buttons example.

...