Credentials for Microsoft.Maps.TileSource callback

Question

I am trying to add a custom Microsoft.Maps.TileSource() to my map.

I set the uriConstructor to a WebAPI endpoint in my ASP.NET MVC application. I would prefer to require authentication of the WebAPI endpoint, but there doesn't seem to be a way to send the credentials of the hosting web page with the callback request.

Is there a way to specify the credentials for the TileSource web service call?

score 1 · Accepted Answer · answered Dec 11 '18 at 21:04

Correct, the is no way to do this with Bing Maps. I recommend taking a look at Azure Maps instead. This can be achieved with Azure Maps by setting the transformRequest option of the map and then creating a tile layer and adding it to the map. Here is a quick code sample:

<!DOCTYPE html>
<html>
<head>
    <title>Tile Layer using X, Y, and Z - Azure Maps Web Control 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" />

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

    <script type='text/javascript'>
        var map;

        function GetMap() {
            //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
            atlas.setSubscriptionKey('<Your Azure Maps Key>');

            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-99.47, 40.75],
                zoom: 4,
                trasnformRequest: function(url, resourceType){
                    if(url.startsWith('https://mytileserviceurl...') {
                        return {
                            url: url,
                            credentials: 'include',
                            headers: {
                                'my-header': true
                            }
                        };
                    }
                }
            });

            //Wait until the map resources have fully loaded.
            map.events.add('load', function (e) {
                //Create a tile layer and add it to the map below the label layer.
                //Weather radar tiles from Iowa Environmental Mesonet of Iowa State University.
                map.layers.add(new atlas.layer.TileLayer({
                    tileUrl: 'https://mytileserviceurl/{z}/{x}/{y}.png',
                    opacity: 0.8,
                    tileSize: 256
                }), 'labels');
            });
        }
    </script>
</head>
<body onload="GetMap()">
    <div id="myMap" style="position:relative;width:100%;min-width:350px;height:600px;"></div>
</body>
</html>

Here are some related resources:

Here is some additional resources on Azure Maps:

Main info page (overview/pricing): https://azure.com/maps
Docs: https://learn.microsoft.com/en-us/azure/azure-maps/

Credentials for Microsoft.Maps.TileSource callback

1 Answers1