// function initOA is called as soon as Outdooractive JavaScript API is ready
oa.api.maps( initOA );
var tours, pois, content;
// add some tours to array of object ids
tours = [ '1397449', '5345254' ]; // some tours
pois = [ '1336336', '1324291' ]; // some pois
content = tours.concat(pois);
function initOA( oamaps, gm ) {
// create configuration objects
var layerConfig, detailPageEvent;
// only oax allows GeomLayer configuration attributes
if (oa.PREFIX === 'oax') {
layerConfig = {
fitPoiBounds: true,
markersActive: true,
defaultIW: true
};
}
// instantiate GeomLayer
layer = new oamaps.GeomLayer( content, layerConfig );
// event to open detail page:
// oax: info window click
// oam: marker click
detailPageEvent = (oa.PREFIX === 'oax') ? 'iwSelect' : 'markerClick';
// add listener to open detail page
var h = layer.listen( detailPageEvent, openDetailPage );
layer.whenLoaded( initMap );
function initMap() {
// map container
mapDiv = document.getElementById( "map_canvas" );
// map config
mapConfig = {};
var bounds = layer.getBounds();
if (oa.PREFIX=='oax') {
mapConfig.bounds = layer.getBounds();
} else {
bounds = layer.getBounds();
mapConfig.center = layer.getBounds().center;
mapConfig.zoom = 8;
}
// instantiate map
map = oamaps.map( mapDiv, mapConfig );
if (oa.PREFIX=='oam') {
map.fitBounds( L.latLngBounds(L.latLng(bounds[1], bounds[0]), L.latLng( bounds[3],bounds[2] )));
}
// add GeomLayer to map
layer.setMap( map );
}
}
function openDetailPage( obj ) {
return window.location = "../../FlexView-API/Detail-Pages/FlexView.DetailPage.html?id=" + obj.id;
}
// Use the id list out of the GeomLayer Example to create
// a list of commands to test fitOOI and centerOOI
// Get DOM node holding the map_canvas
var node = document.getElementById('map_canvas').parentNode;
// List of command templates:
// map.fitOOI() and map.centerOOI() are the commands to test
var js_cmd = [ 'map.fitOOI( %P% );' , 'map.centerOOI( %P% );' ];
// List l will hold single ids or id lists
var l = [];
// Add the id array of the tours to list l
l.push(tours);
// Add the id array of the pois to list l
l.push(pois);
// Add the id array of tours and pois to list l
l.push(content);
// Loop over tours and pois and add single ids to list l
for(var i=0; i<content.length; i++) {
l.push(content[i]);
}
// Create a table with a single row
// to render the commands inside two columns
var table = document.createElement('table');
var tr = document.createElement('tr');
// Loop over the command template strings
for(var h=0; h<js_cmd.length; h++) {
// Current command template string
var j = js_cmd[h];
// Create a table column and an unordered list
var td = document.createElement('td');
var ul = document.createElement('ul');
// Loop over list of ids and id arrays
for(var i=0; i<l.length; i++) {
// Build the parameter string
// (a single id differs from an id array)
var param = (Array.isArray(l[i])) ? "['" + l[i].join("', '") + "']" : "'" + l[i] + "'";
// Put the parameter string into the command template
var cmd = j.replace( /%P%/, param );
// Create a hyperlink
// (tells the browser to render our command text like a hyperlink)
var a = document.createElement('a');
a.setAttribute('href', '#');
// Set 'onclick' handler
a.setAttribute('onclick', cmd + 'return false;');
a.appendChild(document.createTextNode( cmd ));
// Create list item for each command
var li = document.createElement('li');
// Add hyperlink to list item
li.appendChild(a);
// Add list item to unordered list
ul.appendChild(li);
}
// Add unordered list to table column
td.appendChild(ul);
// Add table column to table row
tr.appendChild(td);
}
// Add table row to table
table.appendChild(tr);
// Add a horizontal ruler between the map and the command list table
node.appendChild(document.createElement('hr'));
// Add table to the map_canvas' parent element
node.appendChild(table);