Find more Examples here

Objects on a Map (Map-API)

Version reduced to minimal set of HTML Read Example Description

Description

The GeomLayer adds a set of tours and POIs to the map without clustering. It is used to build maps to show a tour and its POIs, small result sets and the 3d flight.

// 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;
}