Switching to Azure Maps v2 - Looking for Example

[leviatekllc]

Good evening - 

I currently have an app that works very well with the Sf Blazor Maps component, using your example.  However, the example only uses Azure Maps API v1, which Microsoft announced EoL for in 2026.  How can I migrate this to Azure Maps API v2, which no longer accepts subscription key in the URL and requires either the subscription-key or x-ms-client-id passed in the header?  Is there a way to customize request header as part of the Maps/MapsLayer component?

Ref:  Render V2 - Get Map Tile - REST API (Azure Maps) | Microsoft Learn

Thanks!

[Indumathi Ravi]

Hi Justin,

When we analyzed the Azure Maps API v2, we found that the tile server URL is available in that version. The tile server URL must follow the below format to render the map in the Syncfusion Maps component.

https://<domain_name>/maps/basic/{z}/{x}/{y}.png

”${z}” - It represents zoom factor (level).

”${x}” - It indicates tile image x-position (tileX).

”${y}” - It indicates tile image y-position (tileY).

When we studied the below documentation for Azure Maps, we found that the subscription key (API key) is needed to render the maps.

https://learn.microsoft.com/en-us/rest/api/maps/render-v2/get-map-tile?tabs=HTTP

To render the Azure Maps API v2 in the Syncfusion Maps component, the tile server URL must be like the below.

https://atlas.microsoft.com/map/tile?api-version=2022-08-01&tilesetId={tilesetId}&zoom=level&x=tileX&y=tileY

You can use the above URL to render the Azure Maps in the Syncfusion Maps component. If you are facing any issues rendering the map, please let us know. We will make every effort to resolve the reported issue.

[leviatekllc]

Good morning - 

The issue is still how to authenticate - v1 the Subscription Key was put in the Url (query), so the SfMaps works fine.  v2 it has to be put in the request header.  Without a place to put it, you get a 401 Unauthorized when trying to use v2 - see screenshot attached of the differences.

Attachment: SfAzureMapsv2_309b6a60.zip

[Indumathi Ravi]

Hi Justin,

We are currently validating the reported scenario of using a subscription key to render the Azure Maps API v2 with the Maps component. However, we will analyze and provide you with further details on October 10, 2023.

[Indumathi Ravi]

Hi Justin,

We have rendered the tile map of Azure Maps API v2 using the Syncfusion Maps component with reference to the tile server URL provided in the below documentation link.

https://learn.microsoft.com/en-us/rest/api/maps/render-v2/get-map-tile?tabs=HTTP

You need to use the tile server URL following a format like the one provided below. In this URL, we specified the “tilesetId” as “microsoft.base.darkgrey” and included the Azure map subscription key to render the map.

https://atlas.microsoft.com/map/tile?api-version=2022-08-01&tilesetId=microsoft.base.darkgrey&zoom=level&x=tileX&y=tileY&subscription-key=Your_Key

You can find the sample for demonstration from the below link.

https://blazorplayground.syncfusion.com/LXrUMtCXzGwnpNLM

NOTE: Please add your subscription key for the Azure Maps URL in the sample provided above to run it. However, please note that if the “tilesetId” is in a vector format, Syncfusion Maps does not support to render it. Only raster tile images will be supported in the Maps component.

Please let us know if you need any further assistance.

[leviatekllc]

Thank you for the update - I can confirm this does work with the raster (png) tiles, however, the performance, especially with markers on the map, is still rather choppy when panning/zooming - Looking at the web debugger, the tiles are returned quickly (sub 100ms), but [VIOLATION] piles up on the console with 1.5+ second delays:

[Violation] 'resize' handler took 1922ms

[Violation] 'resize' handler took 1866ms

[Violation] 'resize' handler took 1857ms

[Violation] 'mouseup' handler took 1641ms

[Violation] 'mouseup' handler took 1620ms

[Violation] 'wheel' handler took 1629ms

[Violation] Handling of 'wheel' input event was delayed for 1371 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive.

[Violation] 'mouseup' handler took 1624ms

[Violation] 'mouseup' handler took 1642ms

5[Violation] 'click' handler took <N>ms

[Violation] 'click' handler took 1655ms

[Violation] 'click' handler took 1659ms

[Violation] 'click' handler took 1640ms

[Violation] 'click' handler took 1647ms

This is present up to the most recent version (24.1.44) and present in both Edge and Chrome.

[Indumathi Ravi]

Hi Justin,

Please find the answers to your questions in the table below.

Queries	Details
Looking at the web debugger, the tiles are returned quickly (sub 100ms), but [VIOLATION] piles up on the console with 1.5+ second delays: [Violation] 'resize' handler took 1922ms [Violation] 'resize' handler took 1866ms [Violation] 'resize' handler took 1857ms [Violation] 'mouseup' handler took 1641ms [Violation] 'mouseup' handler took 1620ms [Violation] 'wheel' handler took 1629ms [Violation] Handling of 'wheel' input event was delayed for 1371 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive. [Violation] 'mouseup' handler took 1624ms [Violation] 'mouseup' handler took 1642ms 5[Violation] 'click' handler took <N>ms [Violation] 'click' handler took 1655ms [Violation] 'click' handler took 1659ms [Violation] 'click' handler took 1640ms [Violation] 'click' handler took 1647ms This is present up to the most recent version (24.1.44) and present in both Edge and Chrome.	We can reproduce the reported violation warnings with the Maps component in Blazor WASM application. We have considered this as a defect and logged a defect report for the same. However, we will include the fix for this issue in our weekly patch release, which is expected to be available by the third week of January 2024. Meanwhile, please find the feedback link below to keep track of the reported issue. https://www.syncfusion.com/feedback/49752
The performance, especially with markers on the map, is still rather choppy when panning/zooming	We do not support smoothness when zooming and panning of the Maps. The smoothness can only be achieved through animation implementation for the tile images of the online maps. However, we will consider this as a feature and have added it to our features request list. We do not have immediate plans to implement this feature. However, we will include this implementation in any of our upcoming releases. Meanwhile, please find the feedback link below to keep track of this feature. https://www.syncfusion.com/feedback/38009

[Indumathi Ravi]

Hi Justin, 

When we analyzed how to fix the violation warnings shown in the console window of the Chrome and Edge browser developer tools, we found that they are not a bug in the Maps component and that zooming, panning, and resizing in Maps work correctly. These warnings are displayed to optimize the execution of event functions on the script side of the Maps component and do not indicate an issue with the component. We have already optimized and improved the code for these functionalities. So, we have not fixed the violation warnings and don’t have any plans. However, with those warnings, you can use the Maps component as per your requirement. It will not affect your application. 

Please find the below Stack Overflow link for your reference, in which we referred to the violation warning. 

https://stackoverflow.com/questions/42218699/chrome-violation-violation-handler-took-83ms-of-runtime/44824402#44824402 

  

Please let us know if you need any further assistance. 

[leviatekllc]

Thanks for the update - much appreciated!

[Indumathi Ravi]

Hi Justin,

Thank you for the update.

Please get back to us if you need any further assistance.

[Arthur Robinson]

Are there any updates to this?  From my understanding azure maps V2 still is not supported by the syncfusion Maps control, are there any plans to address this before V1 is taken offline next year?

[Durga Gopalakrishnan]

Arthur,

We kindly request you to share the issue(screenshot or video) you are facing while rendering the maps in azure maps V2. This will be helpful for us to analyze further and assist you better.

[leviatekllc]

Here's a working example - I found you have to add in the Zoom Settings and Center Position, or the Azure Maps API complains about those 3 URL values.  I will say it is still excruciatingly slow trying to Pan/Zoom, and that's with the AnimationDuration property set and my MapsMarkers turned off.

[Durga Gopalakrishnan]

Hi Leviatekllc,

We have reviewed the reported scenario using your shared code snippet, and both zooming and panning work properly without any noticeable delay. For your reference, we have attached a sample and a GIF demonstrating the behavior:

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/MapZoomPan.zip

GIF : https://www.syncfusion.com/downloads/support/directtrac/general/ze/zoompan.zip

To help us analyze further, please provide the following details:

• Try to replicate the issue using the shared sample.
• Share your complete code snippet.
• Provide the steps or a video demonstrating the issue.
• Mention any additional customizations applied.

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.