Overview

To help you get started we have the playground, an easy to use exploration tool
that gets you up to speed quickly with the most important concepts. By showing both
the code and the result it is the best way try out unfamiliar APIs. Because the code is also
directly editable, you can experiment directly in the browser to try out new things.

Using one of the samples is probably the easiest way for you to start your own
visualization project. By clicking the download button on right side of the editor
toolbar you can download the current file as a starter .html-file for your project.

The only thing left to do is to replace the YOUR_TOKEN placeholder with the actual
string for your token.

The editor in the middle shows the code for sample. It uses different colors for different symbols
based on their meaning (syntax highlight). This is especially helpful if you made changes and
forgot something (like closing a bracket or ending a string quote).

As normal for a web application it consists
of both HTML and JavaScript. Usually, the interesting stuff happens in JavaScript - that's why
this view is preselected. However, you can also see the JS in context by switching to the
HTML&JS tab with the corresponding button in the toolbar.

Note that there is helpful little download icon on the right hand side of the toolbar
that allows you to download the code the example (with your changes) and use it as a starting
point for you own application. There are still some small changes you need to make, like
replacing the text YOUR_TOKEN with the string of your actual token (and don't forget to
put in quotes, like this: "xyz9876").

Playground access to your data

The playground uses it's own credentials and token to access the Spaces used in the
samples. This token doesn't show in the code.

If you want to use your own data, add the token where you need it, either by globally
setting YOUR_TOKEN or by adding it to specific credentials configuration as the
access_token:

You will see the result of the example or your experiment in the right hand panel.
The output is fully interactive.

If you have coded yourself into a corner and the map doesn't work anymore as expected
you can always Reset the sample back to it's original state where it should work.

Also look into your browsers Developer Tools for messages

It also help to understand what's going to open your browsers Developer Tools
(for Chrome press CTRL-SHIFT-I or CMD+OPTION+I on macOS). There you see
console messages and network information for what content gets loaded, especially
when pan and zoom the map.