This section covers the concept of the Outdooractive API Keys, walks you through a “Hello World!” example and gives advice for further reading.
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:
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>
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&key=yourtest-outdoora-ctiveapi&lang=en"></script>
The “Hello World!” example uses the test keys:
proj = api-dev-oa
key = yourtest-outdoora-ctiveapi
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>
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.
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&key=yourtest-outdoora-ctiveapi&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.
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&key=yourtest-outdoora-ctiveapi&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>
You need a Project Key and an Outdooractive API Key to use the Outdooractive API:
You are welcome to use our test keys for temporary testing purposes:
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).
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:
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:
Please read the Outdooractive API Guidelines section that describes what you have to consider to fulfill the Outdooractive API Terms of Use.
Read more about the Outdooractive Platform to learn more about the details behind the scenes.
Explore the Outdooractive API Examples to see the Outdooractive API Products in action.
The Outdooractive API Reference describes all Outdooractive APIs in detail.
The Outdooractive Platform and API Release Log is the best way to stay up to date with changes and updates.
Please use our zendesk account to get in contact with us.