Map Performance Issue on Production only

[Lee]

Hello,

I am using the map component which switches between 3 layers. When running on my local machine, the map works fantastically and takes about a second to load which is no problem.

However, when this application is deployed the map takes approximately 5 seconds to load, which is quite significant when it's each time someone wants to use the map. It was actually long enough that people believed the map wasn't working and had clicked away with that assumption before it had actually loaded.

I'm not sure what could be causing it to take significantly longer in deployment, but it's much faster when in a local environment.

[Swetha Babu]

Hi Lee,

Thank you for contacting Syncfusion support.

We are checking on the reported performance issue in the Maps component by hosting the application. However, we will analyze further and update you with further details on January 20, 2021.  

  

Meanwhile, please let us know whether the reported issue is faced in web assembly application or in server application. It will be helpful for us to analyze further and assist you better.

Regards,
Swetha Babu 

[Lee]

Hi Swetha,

Thanks for your reply.

Sorry I forgot to mention that I'm using Blazor Server Side. 

[Swetha Babu]

Hi Lee,

Thank you for your update

We are checking on the reported performance issue in the Maps component in the Blazor server application in the hosted environment. However, we will analyze and update you with further details on January 22, 2021.

Regards,
Swetha Babu

[Lee]

Hi Swetha,

Thank you for your response.

This is our first Blazor Server app. I'm wondering if perhaps there's some configuration for a hosted environment that might be recommended. I have read that Blazor Server uses SignalR, which will use WebSockets by default unless it's not available, then it will use LongPolling.

It sounds like LongPolling is slower, but I'm not sure if it could make it that much slower? I'm using IIS and not quite sure how to tell whether it's using LongPolling or WebSockets, would we need to do some extra setup to get WebSockets working or is it even something to be concerned about?

I realise this may be the totally wrong place for that question, I'll do some more digging tomorrow. Just wondered if you may have come across any issues with different configurations.

Thanks a lot!

Lee

[Swetha Babu]

Hi Lee,

Thank you for your update. 

  

As we updated earlier, we will analyze and update you the details about the performance issue in the maps on January 22, 2021. We will also check about the WebSockets and LongPolling in the hosting environment of the Blazor application.

Regards,
Swetha Babu 

[Sabari Anand Senthamarai Kannan]

Hi Lee, 

 

Sorry for the inconvenience caused. 

 

We are still analyzing the reported issue by hosting application in the Azure service in our environment. We also analyzing the difference in the long polling and web sockets techniques by enabling them and hosting the application in the Azure service to provide you the solution. We will analyze further and update you with further details on January 25, 2021. 

 

Regards, 

Sabari Anand

[Lee]

Thanks for looking into the issue.

A couple of updates from my side
I have managed to enable WebSockets, which unfortunately hasn't made a noticeable difference. 

I have also tried to increase performance by loading all the JSON map data on startup of the application and also setting the data in parallel inside OnInitializedAsync.

Locally hosted on my machine: no difference (the performance was already great)

Locally hosted on a slow machine: 50% increase (loading from 7 seconds to 3.5)

Hosted in IIS on AWS server: no difference to before enabling WebSockets and changing the data loading

EDIT:

I have done some further testing, where I realised the spinner to indicate the data loading was not displaying. Sometimes you could see it for a split second, then the delay was after that. It means that the data is loading into the component quickly, but rendering that data to the layers I think is what is taking time. (However, the reason for this taking much longer on deployment is a mystery)

The JSON map data file sizes are:

Layer 1: 373 KB

Layer 2: 475 KB

Layer 3: 875 KB

I removed map layer 2 and 3 from the map component, and there was no loading time, it was almost instant. 

I removed layer 3 and saw a short delay of about 0.5 seconds

I added all layers back, and I saw a delay of approximately 2 seconds (which I still think is fast)

Unfortunately all 3 layers is about 5 seconds delay in deployment, and because it's not the data that's null, I think it must be the map layer rendering the data that's taking the time, I don't think I can display a spinner to indicate that it is loading?

I'm not sure why the time to load the layers with this data would take so much longer when deployed, rather than on my local system. 

Is there a recommended way to handle or load in multiple layers? 

Thanks again, 

Lee

[Swetha Babu]

Hi Lee, 

  

Thank you for your update. 

  

We are able to reproduce the reported issue when the Maps component with multiple layers is rendered and hosted. As you have reported, the issue is due to the rendering of the layers in the component. When rendering the shape maps, we will read the JSON objects and retrieve the coordinates from the array in the JSON object. This information will be stored once for all the layers. When the layer matches the BaseLayerIndex property value, the data parse from the JSON object will be converted to path string. If the JSON file contains “MultiPolygon” geometric shape, it will take some time to parse as it will have more arrays of coordinates and the iteration takes the time. 

  

We are already facing this performance issue. We are trying to overcome this performance issue. We will resolve this and include the fix in any of our upcoming releases. 

  

Please let us know if you need any further assistance. 

  

Regards, 

Swetha Babu 

[Ayokunle Ajileye]

Hi Swetha Babu, can you confirm if this performance issue has been resolved in any of the recent releases.

Thanks.

[Swetha Babu]

Hi Ayokunle, 

 

Thank you for your update. 

 

We have not included the fix for the performance improvement in our latest releases. However, we will check this and update you with further details on April 21, 2021. 

 

Regards, 

Swetha Babu

[Swetha Babu]

Hi Ayokunle, 

 

Sorry for the inconvenience caused. 

 

We are still analyzing the reported issue in hosted environment. Meanwhile, please let us know whether the reported issue is faced in the server side application or web assembly application. Are you facing the issue while hosting the Blazor application or in the local environment? Please share us the code snippet or Blazor application to reproduce the exact issue that you are facing. It will be helpful for us to analyze further and assist you better. However, we will update you with further details on April 23, 2021. 

 

Regards, 

Swetha Babu

[Sabari Anand Senthamarai Kannan]

Hi Ayokunle, 

Thank you for your patience. 

We have checked the reported performance issue. The performance of the maps in the server application is optimized. However, we will improve the performance of the maps in the server application while hosted. We do not have immediate plans to implement this as it involves architectural level changes. So we are considering it as a feature. Please find the below feedback link to keep track of the reported issue. 

https://www.syncfusion.com/feedback/24662 

This improvement will be available in any of our upcoming releases. If you are using the web assembly application and facing performance issue, please follow the below steps to improve the performance. We have created the web assembly application to demonstrate the improvement in maps.  

https://www.syncfusion.com/downloads/support/forum/161590/ze/BlazorMapsWASM-1199817185 

We have added few configurations at the application level itself. To add the above-mentioned configuration to your application, please follow the steps below: 

1. We have created a class file called "MapsHelper.cs" in the above sample link. It is used to render the shape map in the Maps component by parsing the GeoJSON object as a class object. So, copy the "MapsHelper.cs" file and paste it into your application (alter namespace based on your application requirement). 

2. The JSON file should be passed as a URL to the ParseAsync() method, in the MapsHelper class, in the Razor component that initializes the Maps component. This method will return the object which is formatted for applying in the Maps component. The returned object must be set in the ShapeData property of the Maps component. Please find the code snippet below for your reference. 

<SfMaps> 

    <MapsLayers> 

        <MapsLayer ShapeData="@mapData" TValue="string"></MapsLayer> 

    </MapsLayers> 

</SfMaps> 

       …… 

    private object mapData; 

    protected override async Task OnInitializedAsync() 

    { 

        mapData = await MapsHelper.ParseAsync("https://localhost:44383/world-map.json"); 

    } 

If the JSON file is placed in the local webroot folder of the application, we must mention the JSON file path as URL with the port number of the application as highlighted above. 

Note: We have improved the performance of the Maps component which previously took 2 minutes to render. The Maps component now takes around few seconds to render. 

Please let us know if you have any problems in configuring the web assembly application for the Maps component. Please let us know if you need any further assistance. 

Regards, 

Sabari Anand