Find more Examples here

Interactive Example (Map-API)

Version reduced to minimal set of HTML Read Example Description

Description

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 = '';
    }
}