Find more Examples here

Clustered Markers (Map-API)

Version reduced to minimal set of HTML Read Example Description

Description

This example is based on the simple map example. A Clusterlayer is added to the Map that shows all POIs and tours of an API project:

oa.api.maps( initOAX );

function initOAX( oamaps, gm ) {

    // map configuration
    var config = {
        center : new gm.LatLng( 47.54687, 10.2928 ),
        zoom : 10,
        mapTypeId : 'oa_map',
        mapTypeControlOptions : { mapTypeIds: ['oa_map', 'oa_topo', 'oa_map_winter'] }
    };

    // instantiate map
    map = oamaps.map( document.getElementById("map_canvas"), config );

    // instantiate ClusterLayer
    layer = new oamaps.ClusterLayer();

    // listen on clicks on info windows
    var h = layer.listen( 'iwSelect', openDetailPage );

    // add clusterLayer to map
    layer.setMap( map );

}

// open a detail page
function openDetailPage( obj ) {
    return window.location = "../../FlexView-API/FlexView.DetailPage.html?id=" + obj.id;
}

Integrate the outdooractive Map API Cluster Layer

The outdooractive Map API cluster layer is an easy way to show the content of a outdooractive API project on a map.

The tours and POIs of your project appear as categorized icons following the project’s category configuration. The cluster layer allows to show/hide the content of each category or of whole category groups.

Cluster icons are used in all cases where objects are very near to each other or would overlap because of the current zoom level. The cluster layer also allows you to use custom categorized icons and cluster icons.