Load content of the Outdooractive Platform automatically and render it on a map.
Have a look a the examples section to see the Outdooractive Layers API in action.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 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);
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);
}
);
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.
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 () {} |
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 }
};
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 } );
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 |
| sortedBy | sortedBy : ‘title’ | empty string | sort output by ‘title’ or ‘distance’. Use ‘title desc’ to sort in descending order. |
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' );
map.iwCloseAll()
(Note: this layer was renamed from “TourPoiLayer”; Outdooractive JavaScript API v2)
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();