Basic Setup Guide

This guide will walk you through the steps to display and style the AerialSphere viewer on your web page. You should have already created and account and acquired and API key.

XP360 API Basics

Create a new web page, and add a <script> tag pointing to the XP360 API and including your API key, like this:

<script src="https://app.aerialsphere.com/api/map/js?key=INSERT-YOUR-API-KEY-HERE"></script>

Add a <div> to your page, and then another <script> tag in which you call the API constructor:

<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. This iframe is further customizable as expected using existing html and css options. Below is a 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.