Samples/Traffic/Traffic controls/Traffic controls.html

﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title>Traffic controls - Azure Maps Web SDK 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 add the traffic control that lets the user toggle the traffic on and off, as well as how to use the traffic legend control. " />
    <meta name="keywords" content="Microsoft maps, map, gis, API, SDK, traffic, layer, flow, incidents" />
    <meta name="author" content="Microsoft Azure Maps" /><meta name="version" content="1.0" />
    <meta name="screenshot" content="screenshot.jpg" />

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

    <script>
        var map;

        function getMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-122.33, 47.6],
                zoom: 12,
                view: 'Auto',

                //Add authentication details for connecting to Azure Maps.
                authOptions: {
                    //Use Microsoft Entra ID authentication.
                    authType: 'anonymous',
                    clientId: 'e6b6ab59-eb5d-4d25-aa57-581135b927f0', //Your Azure Maps client id for accessing your Azure Maps account.
                    getToken: function (resolve, reject, map) {
                        //URL to your authentication service that retrieves an Microsoft Entra ID Token.
                        var tokenServiceUrl = 'https://samples.azuremaps.com/api/GetAzureMapsToken';

                        fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
                    }

                    //Alternatively, use an Azure Maps key. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                    //authType: 'subscriptionKey',
                    //subscriptionKey: '[YOUR_AZURE_MAPS_KEY]'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create a traffic control to let the user easily turn the traffic on an off.
                map.controls.add(new atlas.control.TrafficControl(), {
                    position: 'top-right'
                });

                //Add a traffic legend. It will automatically appear whenever the map is displaying traffic flow data. This can be used on its own with the map or with the traffic toggle button control like in this sample.
                map.controls.add(new atlas.control.TrafficLegendControl(), { position: 'bottom-left' });
            });
        }
    </script>
</head>
<body onload="getMap()">
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>

    <fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
        <legend>Traffic controls</legend>
        This sample shows how to add the traffic control that lets the user toggle the traffic on and off, as well as how to use the traffic legend control. 
    </fieldset>
</body>
</html>