Azure map control web sdk issue with chromium browsers

Question

Azure map control web sdk issue with chromium browsers

Kunta Paliwal 25

Azure map control web sdk behaving different on different resolution of browsers, works fine on firefox but in chromium based( chrome, edge, brave) its not working fine. It also varying on machine resolution and browser resolution combination. Works fine on certain combinations and not on some other combinations Attached HAr files and step recorder files for chrome and firefox browsers. Seems to be an issue with sdk once zoom in zoom out happens on browser.

User's image

rbrundritt 20,836 Reputation points Microsoft Employee Moderator

2023-10-05T17:06:18.2466667+00:00

Can you provide more details on what the issue actually is. The map uses vector data and renders in your browser, so if you change screen resolution, the map will adjust accordingly, and that's by design. I do recall a long time ago there being performance issues with Firefox, and at that time the map fell back to using raster image tiles instead of vector data. Raster tiles would render the map the same way regardless of screen resolution, but the labels may become blurry. Vector base maps will vary depending on the screen resolution as labels will resize and reposition so that they stay crisp.

Chrome and Edge are the two main browsers used by the developers of the Azure Maps Web SDK. I've been using the Web SDK since its original release in Edge almost daily and haven't noticed any issues. Also, I see you are looking at a map of China. There is some complications involved here as those maps would vary based on where you are located when loading the map. Someone in China will see a different map from someone outside of China. So its possible that if you are in China, this difference could be part of the cause, and reason why I haven't seen this issue.
Kunta Paliwal 25 Reputation points

2023-10-06T05:04:06.0733333+00:00

Issue: Azure Map Component SDK is being used by our Angular 6 application to render data points . Map component gets loaded correctly along with the API provided data points pinned at the specified geo locations, however a certain zoom in or zoom out on Chromium based browsers (Google Chrome and Microsoft Edge) results in disruption of the application workflow. Works fine in Mozilla Firefox. Below are step by step details.

Step 1: Map component gets loaded up correctly with Symbol layers completely rendered and being reflected in browser as expected.

Step 2: However when we zoom to 75% on browser( Machine Display Resolution 2560X1410), somehow the expected data display stops working on the data point image.

Please note that we had to take this picture via mobile as screen grab(prtsc) doesn’t works somehow and not shows the placed hand on the data point). Similar reason as to why screen recorder is not able to store screenshots while application sits under the resolution which is creating the issue.

Step 3: Zooming out to any other percentage with similar desktop resolution works.

Step 4: Works fine on Firefox with similar desktop resolution or any other screen and browser combinations.

Same issue is occurring on Edge and the combinations listed as follows:- 1920 X 1080 desktop resolution and browser zoom: 125% &150%.

Now it seems an issue with SDK’s compatibility with the browsers, as there is nothing getting recorded on network and console while we zoom in and zoom out.

I have tested in other than China region also, but the same thing is only happening. It's not a region-based issue but at certain condition mouseover and the mouse click event is not getting triggered.
rbrundritt 20,836 Reputation points Microsoft Employee Moderator

2023-10-06T16:40:17.0033333+00:00

I'm not able to reproduce this. Have you tried other computers to see if it reproduces there. This sounds 100% like a system related issue given that screen grab and screenshots don't work (those are completely independent of the map but would also leverage the graphics card).

With angular, the main issues I've seen usually revolve around CORs for data access, or CSS classes override each other.

That said, looking at your screenshots, I don't see any issue.
Kunta Paliwal 25 Reputation points

2023-10-09T05:18:33.3166667+00:00

Yes, I tried with different machines also but getting this issue on some and other combinations of browser zoom and machine resolution.

I also tried a fresh angular project with the sample from Microsoft Azure Map. I also noticed click event is triggering sometimes and sometimes it is not. On the other hand, the JavaScript sample is running very fine.
rbrundritt 20,836 Reputation points Microsoft Employee Moderator

2023-10-09T14:57:33.3166667+00:00
Looking at your images it looks like there is a white space on the right side of the map. This is unusual an is usually caused by a CSS issue, which may be causing your main issue. Try the following:

Ensure that the map has a position, width, and height property. Width/Height can be percentages, but if the map area grows, you may need to manually call the map.resize() function as some frameworks make it very difficult to detect when the container they put elements in changes size. If you can access the map object from the browsers console, try calling the map.resize() function to see if it resolves your issue.

Try comment out some of the other CSS script files. This will likely mess up some of your other layout, but do this as a test just to see if the map issue gets resolved. Go one by one, and if this resolves the issue, then you will have a better idea of where to look.
Kunta Paliwal 25 Reputation points

2023-10-10T13:36:55.47+00:00

Yes map has position, width, and height properties and I used ma0.resize() method on browser zoom and on timeout but no result came out.

Also, I removed all the CSS of my project and tried to go deep into it and get canvas height and width is change on browser zoom, and if the aspect ratio is not expected one then hovering on the pin is not working.

this is for browser zoom=100%

this is also for browser zoom=100% from 110%

if I go from 90% to 100% browser zoom then the issue is not coming because its canvas width and height are coming properly.

I tried to override the canvas element width and height to 100% of the div but in that case also its not work as the aspect ratio was different from the required ratio.
rbrundritt 20,836 Reputation points Microsoft Employee Moderator

2023-10-10T15:46:30.7933333+00:00

Ok, it wasn't clear that your issue was with click events on points earlier, but that does make sense looking at your screenshots. If you look at your last two images, there are white lines on the left/right of the map in the second image. That only happens under odd situations and indicates that the map canvas is a different size than the containing div that captures the mouse events, leading to this issue. There is definitely some CSS in your app that is causing this behavior as it does not occur when using Azure Maps on its own. You can test this here: https://samples.azuremaps.com/symbol-layer/symbol-layer-events
Kunta Paliwal 25 Reputation points

2023-10-12T12:21:52.5866667+00:00
Canvas was not resizing based on Zoom and that's why my map was not rendering properly, The mouse click and mouse over the event was not working so I tried to resize the map on timeout and it worked for me.

window.addEventListener('resize', () => { setTimeout(() =>{ this.map.resize(); },100); });

Thank you for your help your guidance really helped me to reach the exact root cause.
rbrundritt 20,836 Reputation points Microsoft Employee Moderator

2023-10-12T14:57:15.9633333+00:00

Great. I'll post that as the answer for this question incase someone else encounters this.
LeelaRajeshSayana-MSFT 17,766 Reputation points Moderator

2023-10-12T17:29:34.4333333+00:00

Hi @Kunta Paliwal I'm glad that you were able to resolve your issue and thank you for posting your solution so that others experiencing the same thing can easily reference this!

Kindly click Accept Answer and Yes for the answer provided below. Doing so would help other community members with similar issue identify the solution. I highly appreciate your contribution to the community.

Accepted answer

0 additional answers

Your answer

rbrundritt 20,836 Reputation points Microsoft Employee Moderator

2023-10-05T17:06:18.2466667+00:00

Can you provide more details on what the issue actually is. The map uses vector data and renders in your browser, so if you change screen resolution, the map will adjust accordingly, and that's by design. I do recall a long time ago there being performance issues with Firefox, and at that time the map fell back to using raster image tiles instead of vector data. Raster tiles would render the map the same way regardless of screen resolution, but the labels may become blurry. Vector base maps will vary depending on the screen resolution as labels will resize and reposition so that they stay crisp.

Chrome and Edge are the two main browsers used by the developers of the Azure Maps Web SDK. I've been using the Web SDK since its original release in Edge almost daily and haven't noticed any issues. Also, I see you are looking at a map of China. There is some complications involved here as those maps would vary based on where you are located when loading the map. Someone in China will see a different map from someone outside of China. So its possible that if you are in China, this difference could be part of the cause, and reason why I haven't seen this issue.
Kunta Paliwal 25 Reputation points

2023-10-06T05:04:06.0733333+00:00

Issue: Azure Map Component SDK is being used by our Angular 6 application to render data points . Map component gets loaded correctly along with the API provided data points pinned at the specified geo locations, however a certain zoom in or zoom out on Chromium based browsers (Google Chrome and Microsoft Edge) results in disruption of the application workflow. Works fine in Mozilla Firefox. Below are step by step details.

Step 1: Map component gets loaded up correctly with Symbol layers completely rendered and being reflected in browser as expected.

Step 2: However when we zoom to 75% on browser( Machine Display Resolution 2560X1410), somehow the expected data display stops working on the data point image.

Please note that we had to take this picture via mobile as screen grab(prtsc) doesn’t works somehow and not shows the placed hand on the data point). Similar reason as to why screen recorder is not able to store screenshots while application sits under the resolution which is creating the issue.

Step 3: Zooming out to any other percentage with similar desktop resolution works.

Step 4: Works fine on Firefox with similar desktop resolution or any other screen and browser combinations.

Same issue is occurring on Edge and the combinations listed as follows:- 1920 X 1080 desktop resolution and browser zoom: 125% &150%.

Now it seems an issue with SDK’s compatibility with the browsers, as there is nothing getting recorded on network and console while we zoom in and zoom out.

I have tested in other than China region also, but the same thing is only happening. It's not a region-based issue but at certain condition mouseover and the mouse click event is not getting triggered.
rbrundritt 20,836 Reputation points Microsoft Employee Moderator

2023-10-06T16:40:17.0033333+00:00

I'm not able to reproduce this. Have you tried other computers to see if it reproduces there. This sounds 100% like a system related issue given that screen grab and screenshots don't work (those are completely independent of the map but would also leverage the graphics card).

With angular, the main issues I've seen usually revolve around CORs for data access, or CSS classes override each other.

That said, looking at your screenshots, I don't see any issue.
Kunta Paliwal 25 Reputation points

2023-10-09T05:18:33.3166667+00:00

Yes, I tried with different machines also but getting this issue on some and other combinations of browser zoom and machine resolution.

I also tried a fresh angular project with the sample from Microsoft Azure Map. I also noticed click event is triggering sometimes and sometimes it is not. On the other hand, the JavaScript sample is running very fine.
rbrundritt 20,836 Reputation points Microsoft Employee Moderator

2023-10-09T14:57:33.3166667+00:00

Looking at your images it looks like there is a white space on the right side of the map. This is unusual an is usually caused by a CSS issue, which may be causing your main issue. Try the following:

Ensure that the map has a position, width, and height property. Width/Height can be percentages, but if the map area grows, you may need to manually call the map.resize() function as some frameworks make it very difficult to detect when the container they put elements in changes size. If you can access the map object from the browsers console, try calling the map.resize() function to see if it resolves your issue.

Try comment out some of the other CSS script files. This will likely mess up some of your other layout, but do this as a test just to see if the map issue gets resolved. Go one by one, and if this resolves the issue, then you will have a better idea of where to look.
Kunta Paliwal 25 Reputation points

2023-10-10T13:36:55.47+00:00

Yes map has position, width, and height properties and I used ma0.resize() method on browser zoom and on timeout but no result came out.

Also, I removed all the CSS of my project and tried to go deep into it and get canvas height and width is change on browser zoom, and if the aspect ratio is not expected one then hovering on the pin is not working.

this is for browser zoom=100%

this is also for browser zoom=100% from 110%

if I go from 90% to 100% browser zoom then the issue is not coming because its canvas width and height are coming properly.

I tried to override the canvas element width and height to 100% of the div but in that case also its not work as the aspect ratio was different from the required ratio.
rbrundritt 20,836 Reputation points Microsoft Employee Moderator

2023-10-10T15:46:30.7933333+00:00

Ok, it wasn't clear that your issue was with click events on points earlier, but that does make sense looking at your screenshots. If you look at your last two images, there are white lines on the left/right of the map in the second image. That only happens under odd situations and indicates that the map canvas is a different size than the containing div that captures the mouse events, leading to this issue. There is definitely some CSS in your app that is causing this behavior as it does not occur when using Azure Maps on its own. You can test this here: https://samples.azuremaps.com/symbol-layer/symbol-layer-events
Kunta Paliwal 25 Reputation points

2023-10-12T12:21:52.5866667+00:00

Canvas was not resizing based on Zoom and that's why my map was not rendering properly, The mouse click and mouse over the event was not working so I tried to resize the map on timeout and it worked for me.

window.addEventListener('resize', () => { setTimeout(() =>{ this.map.resize(); },100); });

Thank you for your help your guidance really helped me to reach the exact root cause.
rbrundritt 20,836 Reputation points Microsoft Employee Moderator

2023-10-12T14:57:15.9633333+00:00

Great. I'll post that as the answer for this question incase someone else encounters this.
LeelaRajeshSayana-MSFT 17,766 Reputation points Moderator

2023-10-12T17:29:34.4333333+00:00

Hi @Kunta Paliwal I'm glad that you were able to resolve your issue and thank you for posting your solution so that others experiencing the same thing can easily reference this!

Kindly click Accept Answer and Yes for the answer provided below. Doing so would help other community members with similar issue identify the solution. I highly appreciate your contribution to the community.

Answer 1

Extracting the answer from the comment discussion.

The issue in this case is that when the browser zoom changed, the map canvas wasn't resizing as it didn't detect the size change. This resulted in white bars on the sides of the map and mouse events not working correctly (click points were not over the pins). In this case manually calling the maps resize function after the browser zoom has changed resolved the issue. The code used was:

window.addEventListener('resize', () => {
setTimeout(() =>{
  this.map.resize();
},100);
});

Share via

Azure map control web sdk issue with chromium browsers

0 additional answers

Your answer