empty map with error in atlas.min.js

octoberluny commented 3 years ago

Hi. Great work! But I try to use AzureMapsControl.Components and receive empty map with errors: TypeError: n.options.getToken is not a function at atlas.min.js:55 at new Promise () at Xf._triggerTokenFetch (atlas.min.js:55) at atlas.min.js:55 at new Promise () at Xf.initialize (atlas.min.js:55) at new hg (atlas.min.js:55) at Object.addMap (azure-maps-control.js:226) at blazor.server.js:1 at new Promise () Can you please give an advice how to make it works?

arnaudleclerc commented 3 years ago

Hi @octoberluny . I guess you are trying to use an anonymous authentication to consume your instance of azure-maps. This is something I still have to work on, because the anonymous mode still requires a token to be sent, but a token callback needs to be provided for that. For now, I would recommend to use either the aad authentication or a subscription key.

I don't know when I will have time to work on the integration of the anonymous mode, but I will let you know when it is done.

arnaudleclerc commented 3 years ago

I actually had time to look into it and the solution is quite simple.

The anonymous authentication requires only a ClientId. By calling the AddAzureMapsControl method :

public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor(options => options.DetailedErrors = true);

            services.AddAzureMapsControl(configuration => configuration.ClientId = Configuration["AzureMaps:ClientId"])
        }

You also need to tell the library how to fetch the token which will be attached to the requests sent by the atlas library. You can do so by overriding the window.azureMapsControl.extensions.getTokenCallback method. This method accepts 3 parameters : a resolve for the promise, a reject for the promise and the map itself. The following example would fetch a token from an API when necessary :

@page "/"
@namespace AzureMapsControl.Sample.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AzureMapsControl.Sample</title>
    <base href="~/" />
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/0.1/atlas-drawing.min.css" type="text/css" />
    <style>
        body {
            margin: 0;
        }

        #map {
            position: absolute;
            width: 100%;
            min-width: 290px;
            height: 100%;
        }
    </style>
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
    <script src="https://atlas.microsoft.com/sdk/javascript/drawing/0.1/atlas-drawing.min.js"></script>
    <script src="_content/AzureMapsControl.Components/azure-maps-control.js"></script>
    <script src="_framework/blazor.server.js"></script>
    <script type="text/javascript">
        window.azureMapsControl.extensions.getTokenCallback = (resolve, reject, map) => {
            const url = "url_of_my_token_endpoint";
            fetch(url).then(function (response) {
                return response.text();
            }).then(function (token) {
                resolve(token);
            });        };
    </script>
</body>
</html>

This is now available on the version 0.8.0. Hope it solves your issue.

octoberluny commented 3 years ago

Thank you for response. I use SubscriptionKey like: services.AddAzureMapsControl(configuration => configuration.SubscriptionKey = "Your Subscription Key"); also I try to run your sample without any changes. but have those errors. I thought that maybe smth needs to be added or changed to make it work using your sample?

arnaudleclerc commented 3 years ago

The samples should be running fine, I just tried to run them with a subscription key authentication, and the map is being displayed without any issue. The call to the AddAzureMapsControl method like the one you mentioned should be enough.

services.AddAzureMapsControl(configuration => configuration.SubscriptionKey = Configuration["AzureMaps:SubscriptionKey"]);

Are you sure the subscription key you are using is a valid one ?

octoberluny commented 3 years ago

Sorry, didn't noticed that key is expired. Everything works, thank you

arnaudleclerc / AzureMapsControl.Components

empty map with error in atlas.min.js #21