Introduction
So, I am sitting right here pondering, can I create a Map element with Azure APIs as an alternative of sleeping on this Sunday afternoon? Why not! So right here it’s, of us: Blazing Azure Maps.
Since it is a third-party API, you’ll have to get a subscription key. Let’s seize that actual fast.
Subscription Key
Go to Azure Portal: https://portal.azure.com
Right here, you may have to seek for “Azure Maps Account”.
Picture 1. Create an Azure Maps Account
Click on on the “Create” button, which is able to convey up the next type. Fill out the essential particulars. There’s a assist icon to information you thru the creation course of.
Picture 2. Configure Azure Maps Account
Now, open your newly created map, go to the “Authentication” part as highlighted beneath, and also you’ll discover the Major Key. That is your subscription key.
Picture 3. Get Subscription Key
Including the Map Element
Open your Pages folder, right-click, and add a brand new Razor element. Title it AzureMap.
It’s as much as you if you wish to make this element routable or not. For simplicity, I’ve made my element path to “/map”.
Subsequent, you could inject IJSRuntime for JavaScript runtime.
Right here’s the necessary half: you want a container for the map with an id attribute. The id serves two functions: it’s used for CSS styling and, extra importantly, to uniquely determine the container within the JavaScript code. You may customise the essential fashion as wanted.
Within the code part, I’m utilizing OnAfterRenderAsync() as a result of I would like the JavaScript to focus on the div as soon as it’s loaded into the UI. Right here, we’re calling a JavaScript technique named LoadMap(), which takes the subscription-key as an argument. That is the important thing you bought from the Azure portal earlier.
@web page "/map"
@inject IJSRuntime JS;
<div id="mapContainer"></div>
<fashion>
#mapContainer
{
border: 3px grey strong;
border-radius: 5px;
peak: 750px;
width: 1200px;
}
</fashion>
@code{
protected override async Job OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeVoidAsync("GetMap", "key");
}
}
}
Code Snippet 1. Map. razor Element
Good job on calling the JS technique! However wait, the place’s your JS technique? Oh, that’s proper – it is time to bounce into JavaScript land.
Go to the wwwroot folder, create a folder named js for JavaScript information, create a map.js file, and add the code from Snippet 2.
On this code, AzureMap is a worldwide object therefore it’s related to the window object. We even have a map object initially set to null. Lastly, there’s a LoadMap() operate that takes the subscription key as an argument. We name this technique from our element. Contained in the operate, we initialize the map object, move within the authentication sort and subscription key, and set the fashion to “evening” for darkish mode.
window.AzureMap = {
map: null,
LoadMap: operate(subKey)
{
this.map = new atlas.Map("mapContainer", {
authOptions:{
authType: 'subscriptionKey',
subscriptionKey: subKey
},
fashion: 'evening'
});
}
}
Code Snippet 2. map.js
Now, merely add the map.js file, together with a couple of different API scripts, to the <head> part of index.html, as proven beneath:
<head>
...
...
<hyperlink 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 motion. Run the code and navigate to your map.
Gentle theme
Picture 4. Azure Map in Blazor (Gentle Theme)
Darkish theme
Picture 5. Azure Map in Blazor (Evening Theme)
Conclusion
I hope I used to be capable of share some invaluable data in the present day. These are the issues that matter: studying and understanding. Now we all know how C# communicates with JS, how JS communicates with the Azure Maps API, and the way maps are loaded in Blazor apps. Obtain the hooked up supply code on your reference. See you quickly!
Know extra about our firm at Skrots. Know extra about our companies at Skrots Companies, Additionally checkout all different blogs at Weblog at Skrots
