The GeomLayer’s events and highlighting methods allow interactivity between the map markers and a list showing the titles of the objects on the map.
oax.api.maps( initOAX );
function initOAX( oamaps, gm ) {
// choose layer content
var idlist = [
// some tours
'1397449', '5345254',
// some pois
'1303417', '1336336', '1324291'
];
// layer configuration
var layerConfig = {
// make sure that `layer.getBounds()` will use tours *and* POIs.
fitPoiBounds : true,
fitTourBounds : true,
// make all markers clickable
markersActive : true,
// show tour geometry on marker mouse over
mouseoverTourGeom : true,
// activate outdooractive default info windows for all markers
defaultIW : true
};
// instantiate layer
layer = new oamaps.GeomLayer( idlist, layerConfig );
// wait until layer loaded object data (async) and call initMap function then
layer.whenLoaded( initMap );
// init map and add layer to the map
function initMap() {
// we can ask layer for bounds now as layer data was already loaded
var bounds = layer.getBounds();
// render a list of the objects on the map
// the object data is read from the GeomLayer
// this avoids additional requests to the data api
renderList( layer.getData() );
// register map marker listeners
layer.listen('markerMouseover', markerMouseOver);
layer.listen('markerMouseout', markerMouseOut);
var mapId = "map_canvas";
var mapDiv = document.getElementById( mapId );
var mapTypeIds = ['oa_map', 'oa_topo', 'oa_map_winter'];
var mapConfig = {
// outdooractive API feature: just give `bounds` (instead of: `zoom`,`center`)
bounds : bounds,
mapTypeId : mapTypeIds[ 0 ],
mapTypeControlOptions : { mapTypeIds: mapTypeIds }
};
// instantiate and show the map
var map = oamaps.map( mapDiv, mapConfig );
// add GeomLayer to the map
layer.setMap( map );
}
// render the objects on the map as unordered html list
// including events for interactivity
function renderList ( data ) {
// reate the list root element
var ul = document.createElement('ul');
// loop through data arrays (as the GeomLayer has diffent arrays for "tours" and "pois")
for(var k in data) {
// loop through all loaded ooi's of a type ("tour" or "poi")
for(var i=0; i<data[k].length; i++) {
// create list entry element for each ooi
li = document.createElement('li');
// create href link element, like:
// <a id="t_1384978" href="javascript:hl('1384978');">
hr = document.createElement('a');
hr.setAttribute("href", "javascript:listClick('" + data[k][i].id + "');");
hr.setAttribute("id", "t_" + data[k][i].id);
// event listener on mouse over and out
hr.setAttribute("onmouseover", "listMouseOver('" + data[k][i].id + "');");
hr.setAttribute("onmouseout", "listMouseOut('" + data[k][i].id + "');");
// object title
hr.appendChild(document.createTextNode( 'title: ' + data[k][i].title.substr(0,25) + '...' ));
// append dom elements
li.appendChild(hr);
ul.appendChild(li);
}
}
// add list to dom
document.getElementById("map_panel").appendChild(ul);
}
}
// called when list entry was clicked
function listClick( id ) {
// Open Infowindow
layer.showTour( id );
// stop bouncing of a GeomLayer map marker
layer.setHighlight('');
}
// called on mouse over a list entry
function listMouseOver( id ) {
// show tour geometry if id represents a tour
layer.showTour( id );
// bounce map marker
layer.setHighlight( id );
}
// called on mouse out (list entry)
function listMouseOut( id ) {
// hide tour geometry if a tour geometry is shown
layer.triggerMouseoutFromId( id );
// stop bouncing of a GeomLayer map marker
layer.setHighlight( '' );
// reset all list elments to default style (no highlighting)
resetListElements();
}
// called on mouse over a map marker
function markerMouseOver( ooi ) {
// reset all list elments to default style (no highlighting)
resetListElements();
// find list entry corresponding to the clicked ooi
var listElement = document.getElementById( "t_" + ooi.id );
// set css class of list entry to highlight it
listElement.className = "devoa_highlight";
}
// called on mouse out (map marker)
function markerMouseOut( ooi ) {
// reset all list elments to default style (no highlighting)
resetListElements();
}
// reset all list elments to default style (no highlighting)
function resetListElements() {
// find all highlighted list entry (should only be one at a time)
var elements = document.getElementsByClassName('devoa_highlight');
// loop through result list
for(var i=0; i<elements.length; i++) {
// remove highlighting css class from list entry dom element
elements[i].className = '';
}
}