Description

// initialize map and set callback function
oax.api.maps( initOA );

// called as soon as the map api is loaded and ready for use
// oamaps: Outdooractive JavaScript API
// gm:     Basic Map API
function initOA( oamaps, gm ) {

    // initial FlexView configuration object
    var conf = {
        frontendtype:   "tour",           // choose content type
        zoom:           11,               // set initial zoom level
        center:       [ 10.292, 47.546 ], // set initial map center

        onModeChange:   onModeChange
    };

    // variables to save current state
    var mode = conf.initMode;
    var categoryId = undefined;

    // FlexView instance
    var fvp = oa.api.flexviewpage( conf );

    // callback as soon as FlexView was loaded
    fvp.whenLoaded( whenFlexViewLoaded );

    function whenFlexViewLoaded() {

        // category change event
        fvp.flexview.catidChangeEvt().then( onCategoryChange );

        // callback as soon as map was loaded
        fvp.flexview.mapCB( whenMapLoaded );

        // update configuration whenever an element of the GUI (html form) was clicked
        document.getElementById("configuratorForm").addEventListener( "click", updateConfiguration );

    }

    function whenMapLoaded( map ) {

        // event when map zoom or center changes
        gm.event.addListener(map, 'bounds_changed', updateConfiguration);

        // update configuration after map was loaded
        updateConfiguration();

    }

    function onCategoryChange( c ) {

        // put category id into variable
        categoryId = c;

        // update configuration
	updateConfiguration();

    }

    function onModeChange( m ) {

        // put mode into variable
        mode = m;

        if (fvp) {

            // update configuration
            updateConfiguration();

        }
    }

    function updateConfiguration() {

        // configuration object to create json output
        var conf = {

            frontendtype:    "tour",

            zoom:            fvp.flexview.map.getZoom(),
            center:          [ fvp.flexview.map.getCenter().lng(), fvp.flexview.map.getCenter().lat() ],
            initMode:        mode,

            whatHide:            !document.getElementById("whatHide").checked,
            whereType:           document.getElementById("whereType").checked ? "simple" : "none"
        };

        // add category filter to configuration object when category was chosen by user
        if (categoryId) {
	    conf["cfg"] = {"what": { "selected_init":categoryId } };
        }


        // serialize configuration object and put it into text field
        document.getElementById("config").innerHTML = JSON.stringify( conf, null, " ");

    }

}