Legacy API 1.0 - Embedding AerialSphere's XP360 API into Your Website


The following is a demo that shows how you can embed the AerialSphere XP360 client into your website and also use it to share and display your private or public data. PLEASE NOTE: The following documentation applies only to users on our legacy API 1.0. For updated documentation on XP360 API Beta (2.0) please visit https://aerialsphere.atlassian.net/wiki/spaces/PD/pages/589824001.

These instructions assume you already have an AerialSphere API account. If you do not have an account, please contact api_support@aerialsphere.com.

Download and run the demo

  1. Download and extract the contents of the “Embed Demo Files.zip” folder from this link.

  2. Upload the files contained inside to your web server:

The interactive demo is also hosted on our site here: http://aerialspheres.com/map/embed/

Once you've hosted it on your site you should see the same result.

Go to your new host page and make sure the demo starts up. You should see something like this:

At this point you'll notice that the AerialSphere XP360 client has been successfully embedded into your site. However, you'll also notice in your console that you have error messages. This is because you do not have a valid API key yet.

Also, for this same reason - none of the examples in the API demo will work correctly, as you will not be able to communicate with AerialSphere.

So, let’s get an API key!

Creating an API Key

Anyone who has the appropriate AerialSphere XP360 credentials can create their own API keys.

  1. Navigate to http://aerialspheres.com/map/. Click on "Log in" in the top right corner.

  2. Upon successful log in you should see your username in the top right:

  3. Next, click on the "API Key" menu item.


    In the window that pops up, enter a name for your API Key and click New Key. You can add and manage as many keys as you like!


    Once added, you can add and remove trusted URLs. These are the URLs you will be using each key from. The trusted URL field also supports '*' as a wild card character.

  4. Now add the domain where you uploaded your demo to the list of trusted URLs and click the + button.

     

  5. Next copy the generated API Key. We're going to need to add it to our request for the AerialSphere API.

     

  6. Go to embed.html and replace the the text "YOUR_KEY_GOES_HERE" with the key that you've copied.

     

  7. Now reload your demo and your console should no longer show the API Key error we saw before. To test if the demo is working, you can click on "Send Sample Data." This will send a javascript object to the AerialSphere XP360 API with all sorts of data. Go through the other data examples and view the source to view how various tasks can be accomplished.

  8. Feel free to play with the live example here: https://aerialspheres.com/map/embed

If you encounter any issues, please contact mailto:api_support@aerialsphere.com.