Map API - Examples

Maps, Overlays, Content

Choose a basemap, add an activity specific overlay and put interactive content on top of it.

E.g. the basemap “Outdooractive Summer” with the overlay “Hiking” and on top of it map markers for all hiking tours in your area.

Base Maps

We offer three main types of base maps:

  • a summer map
  • a winter map
  • a hybrid map (satellite)

Summer, Winter, Hybrid

Summer Winter Hybrid

Outdooractive Maps

  • cartography optimized for tourism/outdoor purposes
  • official data set
  • contributions from our customers and our team
  • Local data set:
    • Germany, Austria, Switzerland, Northern Italy
    • some further areas

Outdooractive OSM Maps

  • cartography optimized for tourism/outdoor purposes
  • Open Street Map data set
  • world-wide

Available Base Maps

  • Outdooractive Summer (“oa_map”)
  • Outdooractive Winter (“oa_map_winter”)

  • Outdooractive OSM Summer (“oa_osm”)
  • Outdooractive OSM Winter (“oa_osm_winter”)

  • Outdooractive Hybrid (“oa_hybrid”)

Map Overlays

We offer different transparent overlays to show special interest information on top of the base maps:

Hiking, Cycling, Mountainbike

Hiking Cycling Mountainbike

Wintersports, Slope

Wintersports Slope

All available Outdooractive Map Overlays:

  • Hiking Trails (“hiking”)
  • Long-Distance Hiking (“longDistanceHiking”)
  • Cycling Routes (“cycling”)
  • Long-Distance Cycling (“longDistanceCycling”)
  • MTB TransAlp (“transalpMountainbiking”)
  • Horse Riding Routes (“horseback”)

  • Winter Sports (“skiresort_transp”)
  • Slopes > 30°,35°,40° (“slopes”)

Content

Add interactive layers that show content from the Outdooractive Platform as map markers with info windows:

ClusterLayer, GeomLayer

ClusterLayer GeomLayer

See section about content layers.

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 : new gm.LatLng(47.54687, 10.2928),

    // initial zoom level
    zoom : 10,

    // initial map type
    mapTypeId : 'oa_hybrid',

    mapTypeControlOptions : {

	// activated map types
	mapTypeIds: 
	[
	    'oa_map',
	    'oa_map_winter',
	    'oa_hybrid',
	    'oa_topo',
	    'oa_osm',
	    'gm.MapTypeId.TERRAIN'
	]
    },

    
};
// calculate map zoom and center
// based on bbox around 3 OOIs
// >= 10% padding on map size
map.fitOOI(

    // list of OOI ids
    [ "1499798", "1361050", "1383134" ],

    // padding value of >=10% (only
    { padding: 0.1 }
);

// same if only one OOI is used
map.fitOOI( "1499798" );

// set map center to center of bbox of some OOIs
// doesn't change map zoom level
map.centerOOI(

    // list of OOI ids                                                                                                                                                
    [ "1499798", "1361050", "1383134" ]

);

Content Layers

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

  • ClusterLayer
    • show all or many objects of your API project
    • categorized map markers
    • out-of-the-box info windows
    • clusters overlapping markers
    • allows to show/hide categories
    • allows to show objects of different content types
  • FilterClusterLayer
    • show all or many objects of a single content type
    • allows filtering (e.g. filter by tour length…)
    • categorized map markers
    • out-of-the-box info windows
    • clusters overlapping markers
    • allows to show/hide categories
  • 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

ClusterLayer

ClusterLayer - Examples

The ClusterLayer loads all content objects of your project from the Outdooractive Platform and shows them as markers on a map. The marker of an object depends on its category. Cluster markers are shown whenever markers overlap e.g. at low zoom levels. The ClusterLayer automatically opens an info window with preview information of an object as soon as a marker is clicked. The ClusterLayer’s methods allow to show or hide the objects by category.

Please have a look at our basic ClusterLayer example.

Instantiate a ClusterLayer passing the config object and add it to a map instance:

// create a new ClusterLayer instance
clusterLayer = new oamaps.ClusterLayer( configClusterLayer );

// add the layer to a map instance
clusterLayer.setMap(map);

// remove the layer from a map instance
clusterLayer.setMap(null);

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

var configClusterLayer = {

    // only show tours or only pois
    type : 'tour',

    // set language
    locale : 'en',

    // don't load all the content of the project container
    // use objects out of id list instead
    initDataPointList : []

};

Open Infowindows Programatically

// open the infowindow of a tour or POI
clusterLayer.iwOpenOOI('1550214');

// showTour: open an infowindow, show tour geometry
// fit: set map extent to geometry bounding box
clusterLayer.iwOpenOOI('1550214', { showTour : true, fit : true });

// show/hide tour geometry
clusterLayer.showTour('1550214');
clusterLayer.showTour(null);

Custom Data Set

Use the clusterLayer for custom sets of tours and POIs by a list of outdooractive Ids:

// pass list of ids to clusterLayer constructor
clusterLayer = new oamaps.ClusterLayer(
    { 
	initDataPointList : 
	[ 
	    "1501643", 
	    "external:makrohaus-digiggv:867"
	]
    }
);

// change list of ids after clusterLayer was instantiated
clusterLayer.setDataPointList(
    [
	"1501643",
	"external:makrohaus-digiggv:867"
    ]
);

// call a function after data was read from outdooractive platform
clusterLayer.setDataPointList(
    [
	"1501643",
	"external:makrohaus-digiggv:867"
    ]
).then(
    function (arr) {
	console.log('setDataPointList: arr:', arr);
    }
);

Events

You may pass listeners to Clusterlayer (FilterClusterLayer) events to the constructor:

var configClusterLayer = {

    onAllIdsChange : function( idlist ) {},

};

Just add a “on” prefix to the event name and use Camel Case names. Listeners passed to a Clusterlayer cannot be removed from the layer later.

Or just register an event listener after a layer was instantiated:

// register event listener
var h = clusterLayer.listen( 'visibleIdsChange',
			     function (idlist) {
			         console.log('visibleIdsChange', idlist);
			     }
		           );

// remove event listener
clusterLayer.drop( h );

It is possible to drop such event listeners with help of the drop() method.

ClusterLayer Events

The ClusterLayer and the FilterClusterLayer offer a list of events.

Events What changed/happened ? callback function
markerClick click on single object marker function( objlist : array ) {}
iwSelect click on info window function( obj : array ) { var i = obj.id; }
allIdsChange result set function( idlist : array ) {}
visibleIdsChange result set inside map extent function( idlist : array ) {}
allCatSelChange visible/hidden categories function ( categorySelection : object ) {}
visibleCatCountChange count of ooi’s of a category inside map extent function ( categoryObjectCount : object ) {}
sortedIdsChange result set function( idlist : array ) {}
sortedVisibleIdsChange result set inside map extent function( idlist : array ) {}
clusterMetaChange filter settings changed function ( { bounds : <google.maps.LatLngBounds>, nDataPoint : <integer> } ) {}
setFilterDone setFilter call finished function ( { bounds : <google.maps.LatLngBounds>, nDataPoint : <integer> } ) {}
clusterLoadStart cluster loading starts function () {}
clusterLoadEnd cluster loading done function () {}

FilterClusterLayer

FilterClusterLayer - Examples

The FilterClusterLayer shows the objects of content type “tour” of your project as a ClusterLayer and adds methods and configuration parameters to filter the result set.

Please have a look at our basic FilterClusterLayer example.

Instatiate a FilterClusterLayer passing the config object and add it to a map instance. You may set a filter at creation time as well:

var configFilterClusterLayer = {

    initFilter : { q:'Kirche', len_s:5000, len_e:20000 }

};

Filter

Use method setFilter() to set or change the filter of a FilterClusterLayer:

// save initial settings to be able to reset filters
var defaultFilter = filterClusterLayer.getFilter();

// reset filters
filterClusterLayer.setFilter( defaultFilter );

// set filter for a single attribute
filterClusterLayer.setFilter( 'dif_e', false );

// set filter for a list of attributes
filterClusterLayer.setFilter( { dif_e:false, dif_m:false, len_s:1000, len_e:2000 } );

Filter Parameter

The FilterClusterLayer allows you to filter all tours of your project by the following parameters.

Parameter Example Default Description
dif_d, dif_m, dif_e dif_d : false true show tours which are ‘difficult’ (dif_d=true), ‘intermediate’ (dif_m=true), ‘easy’ (dif_e=true)
asc_s, asc_e asc_s : 500 empty string filter tours by ascending meters: asc_s <= tour.asc <= asc_e
tim_s, tim_e tim_e : 60 empty string filter tours by duration in minutes: tim_s <= tour.time <= tim_e
len_s, len_e len_e : 5000 empty string filter tours by length in meters: len_s <= tour.length <= len_e
q q : ‘Church’ empty string full text search
area area : ‘1027459’ empty string filter by region
category category : ‘1566479’ empty string filter by category

Sort

The FilterClusterLayer allows you to get sorted filter result id lists, e.g. to render a result list:

// set sort order
filterClusterLayer.setFilter( 'sortedBy', 'distance' );

// descending order...
filterClusterLayer.setFilter( 'sortedBy', 'distance desc' );

GeomLayer

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
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.

Infowindow

map.iwCloseAll()

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( 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 );
        }

    }

);

Filter and Search - Examples

The Search API, Filter API, Top Tipps 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

Tour Filter:

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

A Project’s Top Tipps

All Top Tipps of a project:

oa.api.requestIds( "toptipps", 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 );

Image Gallery - Example

Please have a look at our Lightbox example.

// Note: oax only (Desktop)
var lightbox = new oax.api.Lightbox( { init_value : '1555565' } );

lightbox.show();

Instantiate a new oax.api.Lightbox object with an OOI id and open the lighbox with its show method.

Web Map APIs

Leaflet

The Outdooractive Web API integrates Leaflet as client side map API. Please set the HTTP get parameter leaflet_gshim=1 inside all script tags:

<script type="text/javascript"
            src="//www.outdooractive.com/alpportal/oa_head.js?proj=api-dev-oa&key=yourtest-outdoora-ctiveapi&lang=en&leaflet_gshim=1"></script>

Google Maps

The Outdooractive JavaScript API is compatible with the Google Maps API.

Add the following HTTP get parameter to the script tag source url:

  • use_gmap=1
  • gmapclientid=YOUR-GMAP-CLIENT-ID or gmapkey=YOUR-GMAP-API-KEY
<script
    type="text/javascript"
    src="//www.outdooractive.com/alpportal/oa_head.js?proj=api-dev-oa&key=yourtest-outdoora-ctiveapi&lang=en&use_gmap=1&gmapclientid=YOUR-GMAP-CLIENT-ID"></script>

Learn more about Google Maps API Keys and Client Ids here: