Getting Started

This section covers the concept of the Outdooractive API Keys, walks you through a “Hello World!” example and gives advice for further reading.

Hello World

The Web API “Hello World!” example uses the Outdooractive FlexView API to integrate Content from the Outdooractive Platform on a web page.

A FlexView API integration is done by the following steps:

  • take a html page
  • add a script tag to your HTML header
  • add a HTML container to your HTML body
  • use JavaScript to configure and instantiate your Outdooractive API Product
  • use CSS to customize the look and feel

HTML page

We start with an empty HTML page:

<!DOCTYPE html>
<html>
  <head>
    <title>outdooractive platform - API Template</title>
    <meta charset="utf-8">

  </head>
  <body>

    <h1>Hello, world!</h1>

  </body>
</html>

Script Tag

Add a script tag to the HTML Head to load the Outdooractive Javascript Library. You have to pass your Outdooractive Project Key and your Outdooractive API Key as parameter.

<!-- load Outdooractive Javascript API -->
<script type="text/javascript" 
        src="https://api-oa.com/jscr/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en"></script>

The “Hello World!” example uses the test keys:

proj = api-dev-oa
key  = yourtest-outdoora-ctiveapi

HTML container

Put a <div /> container with css class “oax-top-cont” inside the page body where the Flexview Widget should be placed.

<!-- container used by FlexView API -->
<div class="oax-top-cont"></div>

JavaScript

Add a script to the html body after the container “oax-top-cont” for configuration and instantiation:

<script type="text/javascript">

  var conf = {
      frontendtype:   "tour",          // choose content type
      zoom:           11,              // set initial zoom level
      center:       [ 10.292, 47.546 ] // set initial map center
  };
  
  var fvp = oa.api.flexviewpage( conf );

</script>

The FlexView API is now ready to use.

Complete Example

The basic HTML 5 example below illustrates how the Outdooractive FlexView API may be integrated into your web pages:

<!DOCTYPE html>
<html>
  <head>
    <title>outdooractive platform - API Template</title>
    <meta charset="utf-8">

    
    <!-- load Outdooractive Javascript API -->
    <script type="text/javascript" 
            src="https://api-oa.com/jscr/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en"></script>


  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- container used by FlexView API -->
    <div class="oax-top-cont"></div>


    <!-- and some lines of javascript inside a script tag -->
    <script type="text/javascript">

      var conf = {
          frontendtype:   "tour",          // choose content type
          zoom:           11,              // set initial zoom level
          center:       [ 10.292, 47.546 ] // set initial map center
      };
      
      var fvp = oa.api.flexviewpage( conf );

    </script>
  </body>
</html>

All options of the Outdooractive FlexView API are described under the API-Reference section.

If your use case has further needs then customize the Configuration or add CSS Rules to customize the style.

CSS

Customize the FlexView API using Cascading Style Sheets (CSS) if needed.

This rule changes the background color of cluster icons:

.oax .oax-cluster-marker-cont, .oax-cluster-marker-cont {
    background-color: red;
}

You won’t need to add css rules in most use cases. We recommend to add as few css rules as possible to implement the design needs of your project.

The HTML 5 example with css rules:

<!DOCTYPE html>
<html>
  <head>
    <title>outdooractive platform - API Template</title>
    <meta charset="utf-8">

    
    <!-- load Outdooractive Javascript API -->
    <script type="text/javascript" 
            src="https://api-oa.com/jscr/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en"></script>


    <style>
      .oax .oax-cluster-marker-cont, .oax-cluster-marker-cont {
          background-color: red;
      }
    </style>

  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- container used by FlexView API -->
    <div class="oax-top-cont"></div>


    <!-- and some lines of javascript inside a script tag -->
    <script type="text/javascript">

      var conf = {
          frontendtype:   "tour",          // choose content type
          zoom:           11,              // set initial zoom level
          center:       [ 10.292, 47.546 ] // set initial map center
      };
      
      var fvp = oa.api.flexviewpage( conf );

    </script>
  </body>
</html>

API Keys

You need a Project Key and an Outdooractive API Key to use the Outdooractive API:

  • Project Key
    • short string (e.g. “api-dev-oa”)
    • identifies your API project
  • Outdooractive API Key
    • alpha numeric string (e.g. “KK7FCKIF-EMWGKXNX-4OSSFO9C”)
    • grants access to the API
    • bound to a second level domain

You are welcome to use our test keys for temporary testing purposes:

Test Project Key

api-dev-oa

Test API Key

yourtest-outdoora-ctiveapi

Please keep in mind that you need your personal Outdooractive API Key and Outdooractive Project Key as soon as your implementation goes live (e.g. public website goes live or mobile app is offered for public download or listed in a store).

API Products

Our Web API offers a set of products that are based on Javascript. These products are used on websites or inside mobile apps using web views:

  • FlexView API:
    • full featured views showing your project’s content as overview and detail representations
    • see the FlexView API Example

Our Data API integration use cases are mobile apps and web server programming, e.g. to synchronize data:

The Outdooractive APIs can be used and combined to cover 3 main use cases:

  • Web Client using the Outdooractive Web API (HTML, Javascript and CSS).
  • Server using the Outdooractive Data API to communicate with the Outdooractive Platform.
  • Mobile App using web views built with the Outdooractive Web API, and/or the Outdooractive Data API

What’s next ?

Please read the Outdooractive API Guidelines section that describes what you have to consider to fulfill the Outdooractive API Terms of Use.

Explore the Outdooractive API Examples to see the Outdooractive API Products in action.

The Outdooractive API Reference describes all Outdooractive APIs in detail.

Support

Please use our zendesk account to get in contact with us.