Samples/Spatial Data Services/Search Along a Route/Search Along a Route.html

﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title>Along a Route Search - 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 example shows how to search for locations along a route." />
    <meta name="keywords" content="Microsoft maps, map, gis, API, SDK, Bing, Bing Maps" />
    <meta name="author" content="Microsoft Bing Maps" />
    <meta name="screenshot" content="bmv8-findalongrouteexample.jpg" />
    
    <script>
        var map, infobox, dataLayer, directionsManager;

        //Query URL to the Fourth Coffe Shop data source
        var sdsDataSourceUrl = 'https://spatial.virtualearth.net/REST/v1/data/20181f26d9e94c81acdf9496133d4f23/FourthCoffeeSample/FourthCoffeeShops';

        function GetMap()
        {
            map = new Microsoft.Maps.Map('#myMap', {});

            //Create a layer for rendering the data that is along a route.
            dataLayer = new Microsoft.Maps.Layer();

            //Add the layer to the map.
            map.layers.insert(dataLayer);

            //Add click event to shapes in the data layer.
            Microsoft.Maps.Events.addHandler(dataLayer, 'click', shapeClicked);

            //Create an infobox at the center of the map but don't show it.
            infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
                visible: false
            });

            //Assign the infobox to a map instance.
            infobox.setMap(map);

            //Load the directions and spatial data service modules.
            Microsoft.Maps.loadModule(['Microsoft.Maps.Directions', 'Microsoft.Maps.SpatialDataService'], function () {
                //Create an instance of the directions manager.
                directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);

                //Specify where to display the route instructions.
                directionsManager.setRenderOptions({ itineraryContainer: '#directionsItinerary' });

                //Specify the where to display the input panel
                directionsManager.showInputPanel('directionsPanel');

                //Add event handler to directions manager.
                Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', directionsUpdated);
            });
        }

        function directionsUpdated(e) {
            dataLayer.clear();

            //Get the current route.
            var currentRoute = directionsManager.getCurrentRoute();

            if (!currentRoute) {
                alert('No route found.');
                return;
            }

            var routeRequest = directionsManager.getRequestOptions();

            //Get the route mode.
            var routeMode = getRouteMode(routeRequest);

            if(!routeMode){
                alert('Transit mode is not supported for near route queries.');
                return;
            }

            //Create a query to get data that is near a route.
            var queryOptions = {
                queryUrl: sdsDataSourceUrl,
                spatialFilter: {
                    spatialFilterType: 'nearRoute',
                    start: currentRoute.routeLegs[0].startWaypointLocation,
                    end: currentRoute.routeLegs[0].endWaypointLocation,
                    travelMode: routeMode,
                    optimize: getRouteOptimization(routeRequest)
                }
            };

            //Process the query.
            Microsoft.Maps.SpatialDataService.QueryAPIManager.search(queryOptions, map, function (data) {
                //Add results to the map.
                dataLayer.add(data);
            });
        }

        function getRouteMode(routeRequest) {
            switch(routeRequest.routeMode){
                case Microsoft.Maps.Directions.RouteMode.driving:
                    return 'Driving';
                case Microsoft.Maps.Directions.RouteMode.walking:
                    return 'Walking';
            }

            return null;
        }

        function getRouteOptimization(routeRequest) {
            switch(routeRequest.routeOptimize){
                case Microsoft.Maps.Directions.RouteOptimization.timeWithTraffic:
                    return 'timeWithTraffic';
                case Microsoft.Maps.Directions.RouteOptimization.shortestDistance:
                    return 'distance';
                case Microsoft.Maps.Directions.RouteOptimization.shortestTime:
                default:
                    return 'time';
            }
        }

        function shapeClicked(e) {
            //Make sure the infobox has metadata to display.
            if (e.primitive.metadata) {
                //Set the infobox options with the metadata of the pushpin.
                infobox.setOptions({
                    location: e.primitive.getLocation(),
                    title: e.primitive.metadata.Name,
                    description: 'Store Type: ' + e.primitive.metadata.StoreType,
                    visible: true
                });
            }
        }
    </script>
    
    <style>
        html, body {
            padding: 0;
            margin: 0;
            height: 100%;
        }

        .directionsContainer {
            width: 380px;
            height: 100%;
            overflow-y: auto;
            float: left;
        }

        #myMap {
            position: relative;
            width: calc(100% - 380px);
            height: 100%;
            float: left;
        }
    </style>
</head>
<body>
    <div class="directionsContainer">
        <div id="directionsPanel"></div>
        <div id="directionsItinerary"></div>
    </div>
    <div id="myMap"></div>

    <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>