Show traffic along route.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Show traffic along route - Azure Maps Web SDK Samples</title>

    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="This sample shows how to retrieve traffic information along a route using the <b>sectionType</b> option, and color the sections on the map. " />
    <meta name="keywords" content="Microsoft maps, map, gis, API, SDK, services, module, route, directions, route sections, traffic" />
    <meta name="author" content="Microsoft Azure Maps" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>

    <!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
    <script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>

    <script type='text/javascript'>
        var map, datasource, popup, searchURL, routeURL;

        function GetMap() {
            //Point the Azure Maps domain to the US Azure Gov Cloud domain.
            atlas.setDomain('atlas.azure.us');

            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',

                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Create a pipeline using the Azure Maps subscription key.
            var pipeline = atlas.service.MapsURL.newPipeline(new atlas.service.SubscriptionKeyCredential(atlas.getSubscriptionKey()));

            //Construct the RouteURL object and point to the US Azure Gov Cloud domain.
            routeURL = new atlas.service.RouteURL(pipeline, 'atlas.azure.us');

            //Create the SearchURL clien and point to the US Azure Gov Cloud domain.
            searchURL = new atlas.service.SearchURL(pipeline, 'atlas.azure.us');

            //Wait until the map resources are ready.
            map.events.add('ready', function () {
                //Create a popup for displaying route section details.
                popup = new atlas.Popup();

                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

                //Create two line layers. One for the base route line, and another for the traffic sections on top. Render these below the labels.
                map.layers.add(
                    //Render the base route line. This will look like an outline in areas that have traffic.
                    new atlas.layer.LineLayer(datasource, null, {
                        strokeWidth: 9,
                        lineJoin: 'round',
                        lineCap: 'round',
                        filter: ['!', ['has', 'magnitudeOfDelay']]
                    }), 'labels');

                //Render the traffic section data above the route line.
                var sectionLayer = new atlas.layer.LineLayer(datasource, null, {
                    //Use an expression to style the color based on the traffics magnitiude of delay metric: https://docs.microsoft.com/en-us/rest/api/maps/route/getroutedirections#magnitudeofdelay
                    strokeColor: [
                        'match',
                        ['get', 'magnitudeOfDelay'],
                        3, 'red',
                        2, 'orange',

                        [
                            'match',
                            ['get', 'simpleCategory'],

                            //If the category of the section is a Jam, make it orange.
                            'JAM', 'orange',

                            //If the category of the section is a road closure, make it black.
                            'ROAD_CLOSURE', 'black',

                            'GreenYellow'
                        ]
                    ],
                    strokeWidth: 7,
                    lineJoin: 'round',
                    lineCap: 'butt',
                    filter: ['has', 'magnitudeOfDelay']
                });

                //Add mouse events on the section layer so we can show a popup with details about the traffic issue.
                map.events.add('mousemove', sectionLayer, showPopup);
                map.events.add('touchstart', sectionLayer, showPopup);

                //Close the popup on mouseout or touchend.
                map.events.add('mouseout', sectionLayer, closePopup);
                map.events.add('touchend', closePopup);

                map.layers.add(sectionLayer, 'labels');

                //Create a layer for rendering the start and end points of the route as symbols.
                map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
                    iconOptions: {
                        image: ['get', 'iconImage'],
                        allowOverlap: true,
                        ignorePlacement: true
                    },
                    textOptions: {
                        textField: ['get', 'title'],
                        offset: [0, 1.2]
                    },
                    filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] //Only render Point or MultiPoints in this layer.
                }));

                //Calculate the initial route.
                calculateRoute();
            });
        }

        async function calculateRoute() {
            datasource.clear();

            var start = document.getElementById('startTbx').value;
            var end = document.getElementById('endTbx').value;

            if (start == '' || end == '') {
                alert('Invalid waypoint point specified.');
                return;
            }

            var geocodeOptions = {
                limit: 1,
                view: 'Auto'
            };

            //Geocode the start location.
            var startResult = await searchURL.searchAddress(atlas.service.Aborter.timeout(3000), start, geocodeOptions);

            if (startResult.results && startResult.results.length > 0) {
                var startPoint = [startResult.results[0].position.lon, startResult.results[0].position.lat];

                //Geocode the end location.
                var endResult = await searchURL.searchAddress(atlas.service.Aborter.timeout(3000), end, geocodeOptions);

                if (endResult.results && endResult.results.length > 0) {
                    var endPoint = [endResult.results[0].position.lon, endResult.results[0].position.lat];

                    //Calculate a route.
                    var directions = await routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), [startPoint, endPoint], {
                        sectionType: 'traffic', //Route option to return traffic sections.
                        maxAlternatives: 0
                    });

                    //Get the route data as GeoJSON and add it to the data source.
                    var data = directions.geojson.getFeatures();
                    var route = data.features[0];

                    datasource.add([route,
                        new atlas.data.Feature(new atlas.data.Point(startPoint), {
                            title: start,
                            iconImage: 'pin-blue'
                        }),
                        new atlas.data.Feature(new atlas.data.Point(endPoint), {
                            title: end,
                            iconImage: 'pin-red'
                        })
                    ]);

                    //Extract the traffic section data.
                    if (route.properties.sections) {
                        var sections = route.properties.sections;

                        var sectionLines = [];

                        //Route path could be a MultiLineString as multiple route legs (specify 3 or more waypoints) can result in multiple lines.
                        var routePath = route.geometry.coordinates[0];

                        for (var i = 0; i < sections.length; i++) {
                            //Only worry about traffic sections with a magnitude delay of 1 (minor) or higher.
                            if (sections[i].sectionType === 'TRAFFIC' && sections[i].magnitudeOfDelay >= 1) {
                                //Create a line for the traffic section.
                                sectionLines.push(new atlas.data.Feature(new atlas.data.LineString(
                                    //Get the coordinates from the route path for the section, startPointIndex...endPointIndex - add 1 as the end index is not included
                                    routePath.slice(sections[i].startPointIndex, sections[i].endPointIndex + 1)
                                ), sections[i]));
                            }
                        }

                        datasource.add(sectionLines);
                    }

                    //Update the map view to center over the route.
                    map.setCamera({
                        bounds: data.bbox,
                        padding: 30 //Add a padding to account for the pixel size of symbols.
                    });
                } else {
                    alert('Unable to geocode end waypoint.');
                }
            } else {
                alert('Unable to geocode start waypoint.');
            }
        }

        function showPopup(e) {
            //Make sure the event occurred on a shape feature.
            if (e.shapes && e.shapes.length > 0) {
                map.getCanvasContainer().style.cursor = 'pointer';

                var properties = e.shapes[0].getProperties();

                //Update the content and position of the popup.
                popup.setOptions({
                    //Create the content of the popup.
                    content: `<div style="padding:10px;"><b>${properties.simpleCategory}</b><br/>Speed: ${Math.round(properties.effectiveSpeedInKmh * 0.62137119)} mph</div`,
                    position: e.position
                });

                //Open the popup.
                popup.open(map);
            }
        }

        function closePopup() {
            popup.close();
            map.getCanvasContainer().style.cursor = 'grab';
        }
    </script>
</head>
<body onload="GetMap()">
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>

    <div style="position:absolute;top:15px;left:15px;background-color:white;padding:10px;border-radius:10px;">
        <table>
            <tr>
                <td>Start: </td>
                <td><input type="text" id="startTbx" value="Seattle" /></td>
            </tr>
            <tr>
                <td>End: </td>
                <td><input type="text" id="endTbx" value="San Diego" /></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="Calculate Route" onclick="calculateRoute()" /></td>
            </tr>
        </table>
    </div>

    <fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
        <legend><h1 style="font-size:16px">Show traffic along route</h1></legend>
        This sample shows how to retrieve traffic information along a route using the <b>sectionType</b> option, and color the sections on the map.
    </fieldset>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Show traffic along route - Azure Maps Web SDK Samples</title>

	<meta charset="utf-8" />
	<meta http-equiv="x-ua-compatible" content="IE=Edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
	<meta name="description" content="This sample shows how to retrieve traffic information along a route using the <b>sectionType</b> option, and color the sections on the map. " />
	<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, services, module, route, directions, route sections, traffic" />
	<meta name="author" content="Microsoft Azure Maps" />

	<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
	<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
	<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>

	<!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
	<script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>

	<script type='text/javascript'>
	var map, datasource, popup, searchURL, routeURL;

	function GetMap() {
	//Point the Azure Maps domain to the US Azure Gov Cloud domain.
	atlas.setDomain('atlas.azure.us');

	//Initialize a map instance.
	map = new atlas.Map('myMap', {
	view: 'Auto',

	//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
	authOptions: {
	authType: 'subscriptionKey',
	subscriptionKey: '<Your Azure Maps Key>'
	}
	});

	//Create a pipeline using the Azure Maps subscription key.
	var pipeline = atlas.service.MapsURL.newPipeline(new atlas.service.SubscriptionKeyCredential(atlas.getSubscriptionKey()));

	//Construct the RouteURL object and point to the US Azure Gov Cloud domain.
	routeURL = new atlas.service.RouteURL(pipeline, 'atlas.azure.us');

	//Create the SearchURL clien and point to the US Azure Gov Cloud domain.
	searchURL = new atlas.service.SearchURL(pipeline, 'atlas.azure.us');

	//Wait until the map resources are ready.
	map.events.add('ready', function () {
	//Create a popup for displaying route section details.
	popup = new atlas.Popup();

	datasource = new atlas.source.DataSource();
	map.sources.add(datasource);

	//Create two line layers. One for the base route line, and another for the traffic sections on top. Render these below the labels.
	map.layers.add(
	//Render the base route line. This will look like an outline in areas that have traffic.
	new atlas.layer.LineLayer(datasource, null, {
	strokeWidth: 9,
	lineJoin: 'round',
	lineCap: 'round',
	filter: ['!', ['has', 'magnitudeOfDelay']]
	}), 'labels');

	//Render the traffic section data above the route line.
	var sectionLayer = new atlas.layer.LineLayer(datasource, null, {
	//Use an expression to style the color based on the traffics magnitiude of delay metric: https://docs.microsoft.com/en-us/rest/api/maps/route/getroutedirections#magnitudeofdelay
	strokeColor: [
	'match',
	['get', 'magnitudeOfDelay'],
	3, 'red',
	2, 'orange',

	[
	'match',
	['get', 'simpleCategory'],

	//If the category of the section is a Jam, make it orange.
	'JAM', 'orange',

	//If the category of the section is a road closure, make it black.
	'ROAD_CLOSURE', 'black',

	'GreenYellow'
	]
	],
	strokeWidth: 7,
	lineJoin: 'round',
	lineCap: 'butt',
	filter: ['has', 'magnitudeOfDelay']
	});

	//Add mouse events on the section layer so we can show a popup with details about the traffic issue.
	map.events.add('mousemove', sectionLayer, showPopup);
	map.events.add('touchstart', sectionLayer, showPopup);

	//Close the popup on mouseout or touchend.
	map.events.add('mouseout', sectionLayer, closePopup);
	map.events.add('touchend', closePopup);

	map.layers.add(sectionLayer, 'labels');

	//Create a layer for rendering the start and end points of the route as symbols.
	map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
	iconOptions: {
	image: ['get', 'iconImage'],
	allowOverlap: true,
	ignorePlacement: true
	},
	textOptions: {
	textField: ['get', 'title'],
	offset: [0, 1.2]
	},
	filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] //Only render Point or MultiPoints in this layer.
	}));

	//Calculate the initial route.
	calculateRoute();
	});
	}

	async function calculateRoute() {
	datasource.clear();

	var start = document.getElementById('startTbx').value;
	var end = document.getElementById('endTbx').value;

	if (start == '' \|\| end == '') {
	alert('Invalid waypoint point specified.');
	return;
	}

	var geocodeOptions = {
	limit: 1,
	view: 'Auto'
	};

	//Geocode the start location.
	var startResult = await searchURL.searchAddress(atlas.service.Aborter.timeout(3000), start, geocodeOptions);

	if (startResult.results && startResult.results.length > 0) {
	var startPoint = [startResult.results[0].position.lon, startResult.results[0].position.lat];

	//Geocode the end location.
	var endResult = await searchURL.searchAddress(atlas.service.Aborter.timeout(3000), end, geocodeOptions);

	if (endResult.results && endResult.results.length > 0) {
	var endPoint = [endResult.results[0].position.lon, endResult.results[0].position.lat];

	//Calculate a route.
	var directions = await routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), [startPoint, endPoint], {
	sectionType: 'traffic', //Route option to return traffic sections.
	maxAlternatives: 0
	});

	//Get the route data as GeoJSON and add it to the data source.
	var data = directions.geojson.getFeatures();
	var route = data.features[0];

	datasource.add([route,
	new atlas.data.Feature(new atlas.data.Point(startPoint), {
	title: start,
	iconImage: 'pin-blue'
	}),
	new atlas.data.Feature(new atlas.data.Point(endPoint), {
	title: end,
	iconImage: 'pin-red'
	})
	]);

	//Extract the traffic section data.
	if (route.properties.sections) {
	var sections = route.properties.sections;

	var sectionLines = [];

	//Route path could be a MultiLineString as multiple route legs (specify 3 or more waypoints) can result in multiple lines.
	var routePath = route.geometry.coordinates[0];

	for (var i = 0; i < sections.length; i++) {
	//Only worry about traffic sections with a magnitude delay of 1 (minor) or higher.
	if (sections[i].sectionType === 'TRAFFIC' && sections[i].magnitudeOfDelay >= 1) {
	//Create a line for the traffic section.
	sectionLines.push(new atlas.data.Feature(new atlas.data.LineString(
	//Get the coordinates from the route path for the section, startPointIndex...endPointIndex - add 1 as the end index is not included
	routePath.slice(sections[i].startPointIndex, sections[i].endPointIndex + 1)
	), sections[i]));
	}
	}

	datasource.add(sectionLines);
	}

	//Update the map view to center over the route.
	map.setCamera({
	bounds: data.bbox,
	padding: 30 //Add a padding to account for the pixel size of symbols.
	});
	} else {
	alert('Unable to geocode end waypoint.');
	}
	} else {
	alert('Unable to geocode start waypoint.');
	}
	}

	function showPopup(e) {
	//Make sure the event occurred on a shape feature.
	if (e.shapes && e.shapes.length > 0) {
	map.getCanvasContainer().style.cursor = 'pointer';

	var properties = e.shapes[0].getProperties();

	//Update the content and position of the popup.
	popup.setOptions({
	//Create the content of the popup.
	content: `<div style="padding:10px;"><b>${properties.simpleCategory}</b><br/>Speed: ${Math.round(properties.effectiveSpeedInKmh * 0.62137119)} mph</div`,
	position: e.position
	});

	//Open the popup.
	popup.open(map);
	}
	}

	function closePopup() {
	popup.close();
	map.getCanvasContainer().style.cursor = 'grab';
	}
	</script>
	</head>
	<body onload="GetMap()">
	<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>

	<div style="position:absolute;top:15px;left:15px;background-color:white;padding:10px;border-radius:10px;">
	<table>
	<tr>
	<td>Start: </td>
	<td><input type="text" id="startTbx" value="Seattle" /></td>
	</tr>
	<tr>
	<td>End: </td>
	<td><input type="text" id="endTbx" value="San Diego" /></td>
	</tr>
	<tr>
	<td></td>
	<td><input type="button" value="Calculate Route" onclick="calculateRoute()" /></td>
	</tr>
	</table>
	</div>

	<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
	<legend><h1 style="font-size:16px">Show traffic along route</h1></legend>
	This sample shows how to retrieve traffic information along a route using the <b>sectionType</b> option, and color the sections on the map.
	</fieldset>
	</body>
	</html>