Map API - Examples

Basic Usage

The initialization of outdooractive maps has to be done by calling oax.api.maps() inside html header:

oax.api.maps( f:function );

Instantiation and configuration of the map is done inside the function f given to oax.api.maps().

Instatiate a new map passing a dom element id of the map div container and a configuration object including a project key:

var map = new maps.Map( domId, config:object );

The map constructor accepts a MapOptions object,

Use outdooractive Map Type Ids inside MapOptions or “oa”

var config = {

    // initial map center
    center : {lat: 47.54687, lng: 10.2928},

    // initial zoom level
    zoom : 10

Content Layers

Use our interactive layers to show content from the Outdooractive Platform a map:

  • GeomLayer
    • show a single object or some objects
    • categorized map markers
    • out-of-the-box info windows
    • allows to show objects of different content types


GeomLayer - Examples

GeomLayer shows content objects as categorized markers on a map. It is used for small sets of object ids and opens an info window on marker click. The GeomLayer loads the geometry and related POIs of a tour automatically.

Please have a look at our basic GeomLayer example.

Instatiate a GeomLayer passing the config object and add it to a map instance:

// create a new GeomLayer instance
// content: array of string ids
// configGeomLayer: configuration object
geomLayer = new oamaps.GeomLayer( content, configGeomLayer );

// add the layer to a map instance

// remove the layer from a map instance

These parameters and callbacks may be passed to the GeomLayer constructor:

var geomLayerConfig = {

    // all POIs have a marker click event
    markersActive : true,

    // show tour geometry on marker mouse over
    mouseoverTourGeom : true,

    // center and pan map to fit to the bounds of all objects (including tour start points)
    fitPoiBounds : true,
    // calculate bounds based on tour geometries
    fitTourBounds : true,

    // activate default info windows
    defaultIW : true,

    // show related pois of a tour automatically
    initShowPois  : true,

    // implement a custom info window
    customIW : {

	// Text while loading
	loadingHTML : "Loading ... ",

	// callback as soon as info window is opened
	// ooi: content object
	// returns HTML snippet as string
	render : function( ooi ) {

	    return "<b>" + ooi.title + "</b>";




The methods of the GeomLayer:

// function is called as soon as the content of the geom layer was loaded
layer.whenLoaded( function() {} );

// returns a bounds calculated on content objects
// (influenced by "fitPoiBounds" and "fitTourBounds")

The Javascript Data API allows basic access to the Outdooractive Data API. Simple Method calls perform requests to the Data API in the background asynchronously and callback methods receive the data of the responses.



Load Objects

LoadObjects - Examples

Use the objects API to load OOI data from server side. The objects API takes care of the complete data transfer including x-domain support and makes OOI data available on client side through an easy to use interface:

// load data of a single OOI
// Note: oax only (Desktop)
new oax.api.SingleOOI( id ).load(

    // callback function
    function ( ooi, point ) {

        // do something with the loaded ooi data
        alert( );



// load data of multiple OOIs at once
// Note: oax only (Desktop)
new oax.api.OOIs( 
        // list of string ids
        idlist: ["123", "234"],
        // optional argument to load only basic information about each OOI
        lightweightApp: 'tour'


    // callback function
    function( status, oois ) {

        // do something with the loaded ooi data
        if (oois.length>0) {
            console.debug( oois[0].title );



Filter and Search - Examples

The Search API, Filter API and NearBy API use all the same method:

// request object
var request = { search : "hotel" };

// keep a reference to the last request
// (e.g. if user interaction may lead to multiple requests)
var last_request = request;

// send the request...
oa.api.requestIds( request, callback );

// callback function with answer object
function callback( answer ) {

    // check if request was successfull
    if (answer.success) {

        // ignore response if another request was sent
        if (answer.request === last_request) {

            // grab ids from answer object
            var ids =;



Full text search:

oa.api.requestIds( { search : "hotel" }, callback );

Tour Filter

Tour Filter:

oa.api.requestIds( { filter : { asc_s : 500 } }, callback );

Search Near By a Location

Request a list of tour ids inside a radius around a location:

// request object
var request = { 
    searchNearby : 
        // the search center
        location : {lat:47, lng:10},

        // the search radius (unit: meters)
        radius : 5000

        // the result list will be sorted by distance
        sortby: "distance"

// send the nearby request
oa.api.requestIds( request, callback );

PDF Download

PDF Download - Example

Please have a look at our PDF Download example.

// Attach the pdf dialog to clicking a dom element
// id: string
// button: DOM element

// Note: oax only (Desktop)
oax.pdfDialog( id, button );