Description

oax.api.maps( initOA );

function initOA( oamaps, gm ) {

    // search radius
    var radius = 5000;

    // map configuration object
    var config = {
        center : new gm.LatLng( 47.54687, 10.2928 ),
        zoom : 12,
        mapTypeId : 'oa_map',
        mapTypeControlOptions : { mapTypeIds: ['oa_map', 'oa_hybrid', 'oa_map_winter'] }
    };
    
    // initialize Outdooractive map
    map = oamaps.map( document.getElementById("map_canvas"), config );

    // initialize clusterLayer (no objects on the map)
    layer = new oamaps.ClusterLayer( { initDataPointList:[] } );

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

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

    // add click event handler to start nearby search as soon as user clicks on map
    gm.event.addListener(map, 'click', mapClick);

    // keep references to center and marker object
    var searchCenter, centerMarker;

    // remember the last request, to prevent async race conditions
    var last_request;

    // search around map center on page load
    mapClick( { latLng: config.center } );

    // event handler called when user clicks on map
    // note: clicking on circle or marker doesn't raise map click
    function mapClick(event) {

        // remove the current result set from the map
        resetLayer();

        // draw search center and circle
        drawMarkerAndCircle( event.latLng );

        // nearby search request object
        var request = {
            
            searchNearby: {

                // the search center
                location: event.latLng,
                
                // the search radius
                radius: radius,

                // the result list will be sorted by distance
                sortby: "distance"

            }

        };

        // remember the last request, to prevent async race conditions
        last_request = request;

        // start nearby search
        // 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 (last_request === answer.request  && answer.success) {

            // add result to cluster layer with help of id list
            layer.setDataPointList( answer.data.ids );

        }

    }

    // remove result set of last search from the map
    function resetLayer() {

        // remove clusters from last search
        layer.setDataPointList([]);

        oamaps.iwCloseAll( map );

    }

    // visualize search center and radius on the map
    function drawMarkerAndCircle( center ) {

        // marker options
        var markerOpts = {
            map: map,
            icon: {
                anchor: { x:5, y:5 },
                url: '/icons/circle.png'
            }
        };

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

        // initial search ?
        if (!centerMarker) {

            // initial search: create marker to visualize nearby search center
            markerOpts["position"] = center;

            // place a marker at the search center
            centerMarker = new gm.Marker( markerOpts );

            // add map and circle center to circle options
            searchCircleOpts["center"] = center;

            // instantiate circle
            searchCircle = new gm.Circle(searchCircleOpts);

        } else {

            // repeated search: move nearby search center to new position
            centerMarker.setPosition( center );

            // repeated search: move nearby search cirle to new position
            searchCircle.setCenter( center );

        }

    }

}

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