Samples/Spatial Data Services/Load all results (recursive)/Load all results (recursive).html

﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title>Load all results (recursive) using Query API - Bing Maps Samples</title>

    <meta charset="utf-8" />
	<link rel="shortcut icon" href="/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="This sample shows how to load all results for a query recursively." />
    <meta name="keywords" content="Microsoft maps, map, gis, API, SDK, Bing, Bing Maps" />
    <meta name="author" content="Microsoft Bing Maps" />
    <meta name="screenshot" content="screenshot.jpg" />
    
    <script>
    var map;

    //Query URL to the 2010 US Census Zip Code tabulation areas data source
    var sdsDataSourceUrl = 'https://spatial.virtualearth.net/REST/v1/data/f42cab32d0ee41738d90856badd638d3/USCensus2010_ZCTA5/ZCTA5';

    function GetMap() {
        map = new Microsoft.Maps.Map('#myMap', {
            center: new Microsoft.Maps.Location(40.10, -82.80),
            zoom: 7
        });

        //Load the Bing Spatial Data Services module.
        Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () {
            //Create a query to get zip code tabulation areas in view.
            var query = {
                queryUrl: sdsDataSourceUrl,
                inlineCount: true,
                skip: 0,
                top: 250,
                spatialFilter: {
                    spatialFilterType: 'intersects',
                    intersects: map.getBounds()
                }
            };

            //Trigger an initial search.
            QueryDataSource(query);
        });
    }

    function QueryDataSource(query) {
        //Process the query.
        Microsoft.Maps.SpatialDataService.QueryAPIManager.search(query, map, function (data, inlineCount) {
            //Add results to the map.
            map.entities.push(data);

            //Increase the number of results to skip for the next query.
            query.skip += query.top;

            //Check to see if there is more results to retrieve for this query. inlineCount is the total number of results for the query.
            if (query.skip < inlineCount) {
                //Query the next set of results.
                QueryDataSource(query);
            }
        });
    }
    </script>
    
</head>
<body>
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;background-color:gray"></div>
    
    <fieldset style="width:800px;margin-top:10px;">
        <legend>Query API - Load all results (recursive) Sample</legend>
        This sample shows how to load all results for a query recursively. The Query API allows a maximium of 250 results to be returned in a single request. 
        This sample shows how to make multiple requests recursively that page through the results and downloads all of the data that matches the query.
    </fieldset>

    <script>
        // Dynamic load the Bing Maps Key and Script
        // Get your own Bing Maps key at https://www.microsoft.com/maps
        (async () => {
            let script = document.createElement("script");
            let bingKey = await fetch("https://samples.azuremaps.com/api/GetBingMapsKey").then(r => r.text()).then(key => { return key });
            script.setAttribute("src", `https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=${bingKey}`);
            document.body.appendChild(script);
        })();
    </script>
</body>
</html>