Blazor Meets Azure Maps

Introduction

So, I'm sitting here thinking, can I create a Map component with Azure APIs instead of sleeping on this Sunday afternoon? Why not! So here it is, folks: Blazing Azure Maps.

Since it's a third-party API, you’ll need to get a subscription key. Let’s grab that real quick.

Subscription Key

Visit Azure Portal: https://portal.azure.com

Here, you'll need to search for "Azure Maps Account".

Maps Account

Image 1. Create an Azure Maps Account

Click on the "Create" button, which will bring up the following form. Fill out the basic details. There’s a help icon to guide you through the creation process.

Azure Maps

Image 2. Configure Azure Maps Account

Now, open your newly created map, go to the "Authentication" section as highlighted below, and you’ll find the Primary Key. This is your subscription key.

Subscription Key

Image 3. Get Subscription Key

Adding the Map Component

Open your Pages folder, right-click, and add a new Razor component. Name it AzureMap.

It’s up to you if you want to make this component routable or not. For simplicity, I’ve made my component route to "/map".

Next, you need to inject IJSRuntime for JavaScript runtime.

Here’s the important part: you need a container for the map with an id attribute. The id serves two purposes: it’s used for CSS styling and, more importantly, to uniquely identify the container in the JavaScript code. You can customize the basic style as needed.

In the code section, I’m using OnAfterRenderAsync() because I want the JavaScript to target the div once it’s loaded into the UI. Here, we’re calling a JavaScript method named LoadMap(), which takes the subscription-key as an argument. This is the key you got from the Azure portal earlier.

@page "/map"
@inject IJSRuntime JS;
<div id="mapContainer"></div>
<style>
    #mapContainer
    {
        border: 3px gray solid;
        border-radius: 5px;
        height: 750px;
        width: 1200px;
    }
</style>
@code{
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("GetMap", "key");
        }
    }
}

Code Snippet 1. Map. razor Component

Good job on calling the JS method! But wait, where's your JS method? Oh, that’s right - it's time to jump into JavaScript land.

Go to the wwwroot folder, create a folder named js for JavaScript files, create a map.js file, and add the code from Snippet 2.

In this code, AzureMap is a global object; hence, it is associated with the window object. We also have a map object initially set to null. Finally, there’s a LoadMap() function that takes the subscription key as an argument. We call this method from our component. Inside the function, we initialize the map object, pass in the authentication type and subscription key, and set the style to "night" for dark mode.

window.AzureMap = {
    map: null,
    LoadMap: function(subKey)
    {
        this.map = new atlas.Map("mapContainer", {
            authOptions:{
                authType: 'subscriptionKey',
                subscriptionKey: subKey
            },
            style: 'night'
        });
    }
}

Code Snippet 2. map.js

Now, simply add the map.js file, along with a few other API scripts, to the <head> section of index.html, as shown below:

<head>
     ...
     ...
    <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 src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>
    <script src="js/map.js" ></script>
</head>

Code snippet 3. Index.html

Now, it’s time to see the map in action. Run the code and navigate to your map.

Light theme

Light Theme

Image 4. Azure Map in Blazor (Light Theme)

Dark theme

Night Theme

Image 5. Azure Map in Blazor (Night Theme)

Conclusion

I hope I was able to share some valuable knowledge today. These are the things that matter: learning and understanding. Now we know how C# communicates with JS, how JS communicates with the Azure Maps API, and how maps are loaded in Blazor apps. Download the attached source code for your reference. See you soon!