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
};
Use our interactive layers to show content from the Outdooractive Platform a map:
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
geomLayer.setMap(map);
// remove the layer from a map instance
geomLayer.setMap(null);
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")
layer.getBounds();
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.
map.iwCloseAll()
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( ooi.data.title );
}
);
// 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'
}
).load(
// callback function
function( status, oois ) {
// do something with the loaded ooi data
if (oois.length>0) {
console.debug( oois[0].title );
}
}
);
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 = answer.data.ids;
}
}
}
Full text search:
oa.api.requestIds( { search : "hotel" }, callback );
Tour Filter:
oa.api.requestIds( { filter : { asc_s : 500 } }, callback );
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 );
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 );