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 aerialSphereApi = new AerialSphere('aerialSphereTestDiv');
</script>

The XP360 viewer will be shown in an iframe which will be created inside your div.

Here 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:

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.