Forums Ignite UI for Blazor
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Richard Carlin
1255
Blazor Map performance
posted

I have question on optimizing the Blazor map performance. Lets look at a simple map with a series

<GeographicMap Height="100%" Width="100%" Zoomable="true">
    <GeographicSymbolSeries DataSource="DataSource"
        MarkerType="MarkerType.Circle"
        LatitudeMemberPath="Lat"
        LongitudeMemberPath="Lon"
        MarkerBrush="LightGray"
        MarkerOutline="Black" />
</GeographicMap>

Lets say I want to animate the series by changing the Datasource or the MarkerBrush only.

In WPF I would have a property which was data bound and as I change the property the series would never be recreated, only the change in the property would be displayed.  This is much much faster than recreation of the map or series.

In Javascript I would just change the option for the property and get the same high performance of not recreating the map or the series.

So how does this work in your Blazor product?  If I execute a StateHasChanged() it appears from the above razor code that both the map and the series will be recreated. 

Question 1) Does the map and series get recreated or does the Infragistics code know not to recreate it for every StateHasChanged()?

Question 2) What is the best practice to maximize the performance when only changing a single property such as the Datasource or the MarkerBrush?

  • 34810
    Offline posted

    Hello Richard,

    I have been investigating into the questions you have in this case, and I have some information for you on this matter. I will answer the questions in the order they were asked:

    1. I would not recommend calling StateHasChanged() in this case to update your data source or the marker brush of a series in your GeographicMap. While we are not doing anything expensive on StateHasChanged() this does not necessarily mean that the platform will not, as StateHasChanged needs to recreate the layout of the page.

    2. The best things I can recommend in this case are to use an ObservableCollection for your DataSource, as this implements INotifyCollectionChanged out of the box. This way, if you add a point or remove a point from your data source, it will automatically reflect on the map. If you are looking to update an existing point, you will need to call the NotifyUpdateItem method off of the map, passing the data source, the index of the item in your data source that you are updating, and the item itself.

    Regarding the MarkerBrush, I am seeing that you should be able to update the MarkerBrush property of your series directly or update a bound property to it and it should be reflected in the map automatically.

    I am attaching a sample project to demonstrate the above.

    Please let me know if you have any other questions or concerns on this matter.

    GeoMapBlazorUpdates.zip