Find more Examples here

Near By Search (FlexView-API)

Version reduced to minimal set of HTML Read Example Description

Description

Use the FlexView API to show tours found inside a radius around a location on a map and other views.

// initialize map and set callback function
oa.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 ) {

    // search inside a circle of 5km
    var searchRadius = 5000;

    // set search center
    var searchCenter = new gm.LatLng( 47.54687, 10.2928 ); // { lat: lat, lng: lng };

    // define search center
    var lat = 47.560012;
    var lng = 10.2210235;

    // FlexView API configuration
    var conf = {
        withUrlHash:    false,
        actionOpenType: "in-page",              // open detail view without leaving the page
        frontendtype:   "tour",                 // choose content type
        whatType:       "none",                 // integrate without "what" filter
        whereType:      "none",                 // integrate without "where" filter
        mapTypeId:      "oa_map",  // select the initial map type
        mapTypeIds:   [ "oa_map",  // list all map types you want to see
                        "oa_hybrid"],
        zoom:           11,                     // set initial zoom level
        center:       [ lng, lat ], // set initial map center
        initDataPointList: []
    };

    // call the outdooractive FlexView API to do all the magic
    var fvp = oa.api.flexviewpage( conf );

    // callback: as soon as the FlexView page object is ready to use
    fvp.whenLoaded( whenFlexViewLoaded )

    fvp.whenMap( whenMapLoaded );

    function whenMapLoaded( map ) {

        // callback with map object
        
	// circle options
	var searchCircleOpts = {
            clickable: false,
            strokeColor: '#FF9900',
            strokeOpacity: 1.0,
            strokeWeight: 4,
            fillColor: '#FF0000',
            fillOpacity: 0.25,
            radius: searchRadius,

            // the FlexView page object holds a reference to the map instance
            map: map,

            center: searchCenter
	};

	// draw search circle
	var searchCircle = new gm.Circle(searchCircleOpts);

    }

    function whenFlexViewLoaded() {

        // nearby search request object
        var request = {

            // request type
            searchNearby : {

		// the search center
		location: searchCenter,

		// the search radius
		radius: searchRadius
                
            }

        };

	// call outdooractive API to search for tours inside the given radius
        // parameter: request object, callback function
	oa.api.requestIds( request, searchResult );

    }

    // callback for nearby search result
    function searchResult( answer ) {

        // was the search successfull and run without errors ?
        if ( answer.success ) {
		    
	    // add result to cluster layer with help of id list
	    fvp.setDataPointList( answer.data.ids );
            
        }

    }

}