How to load in map data the correct way

[Lee]

Hi there,

I am using Syncfusion maps in Blazor, where I have map data for UK regions and UK sub regions (which are on two different layers).

Currently, I am using MapsLayer parameter `ShapeData="new {dataOptions=MapData}"`, where MapData is a URL to an uploaded JSON file of my mapdata.

This has worked on my machine, however there are a few issues I have been facing:

• It can be pretty slow on the first time loading and won't appear until I manually refresh
• I don't want to rely on URLs being available, but I can't figure out a way to load the data from disk - 'Resource could not load' is the error in the console.
• It does not seem to be as reliable on other machines, maps were not showing then randomly one of the two started to show

I would like to be able to load the map data in quicker and from disk rather than URL. Is there a way to achieve this, or is there another alternative/recommended solution to loading in and using map data?

Many thanks!

[Swetha Babu]

Hi Lee,

Thank you for contacting Syncfusion support.

We have checked your query and came to know that you are trying to read the JSON file and render the shapes in the Maps component. We have created a simple application to demonstrate the same and it can be downloaded from the below link.

https://www.syncfusion.com/downloads/support/forum/160640/ze/SyncFusionBlazerTry423749728

In the above sample, we have converted the JSON string from the file to an object using the Newtonsoft.Json library. We have then rendered the sublayer by assigning the converted object to the "ShapeData" property. Please let us know if the provided sample meets your requirement.

Regards,
Swetha Babu

[Lee]

Hi Swetha,

That's really helpful! It was exactly what I was looking for (thank you for that). I do seem to have a few other issues that would be great if you could shine some light on.

Tooltip

Since I have changed the way the map data is loaded in the tooltip seems to be slow (it worked great before). It seems to be about half a second off catching up to the cursor, which feels like quite a difference to the user experience (this has been tested on another PC too). I'm not sure what could be causing this.

Map loading the first time

I have noticed that loading the map can takes several seconds, once it has loaded once it is great. Is it expected that the map takes seconds to load the first time, or is there something that I might be able to adjust to improve that?

Map switching between layers

I have a button to switch the base layer index between 0 and 1 to display regions or subregions. This works great most of the time, however it does sometimes get stuck and not load one of the layers. It's quite difficult to tell when this happens exactly, but it feels like it could be when I try and switch the map while the map data is already loading?

Is there a way that I might be able to track whether the map is currently loading or finished loading? Just wondering if I might be able to prevent a new request being made if the map is currently loading

Sorry, I realise there's quite a few different issues there. If you have any advice on any of them I'd really appreciate it!

EDIT: It appears that removing TooltipRendendering has solved the issues. It's running flawlessly now (on my machine at least, still need to test this further). I copied this from the Maps Tooltip source, assuming that it was required to display the tooltip when you mouse over, but the tooltip is still working without this.

If you could explain what this line was doing and why it might have been causing such a problem I'd appreciate it! Thank you 

[Sabari Anand Senthamarai Kannan]

Hi Lee, 

 

Thank you for your update. 

 

Please find the details for your queries from the below table. 

 

Query	Details
Tooltip	TooltipRendering event is used to notify that the tooltip is displayed in the Maps component. Normally when the event function is triggered in the Blazor application, the StateHasChanged() method of the Blazor component will be called. So the component will re-render. So the tooltip is slow in the application. TooltipRendering event is not necessary to render the tooltip. If it is not needed in your application, you can remove the event for proper working of the component.
Map loading the first time	When the Maps component is initially loaded,  the GeoJSON will be parsed as object in the compoenent. If the tile maps is rendered, the images will be retrieved. Due to this, there is some delay in the initial rendering of the Maps component.
Map switching between layers	We are not able to reproduce the reported issue. We have created a simple Blazor sample to demonstrate the same and it can be downloaded from the below sample link. https://www.syncfusion.com/downloads/support/forum/160640/ze/SyncFusionBlazerTry2-503127146 In the above sample, we have rendered USA and Texas maps as two layers with two buttons to decide which layer to be displayed. It is working as expected. Please provide us the code snippet or modify the above application and share the same to us. It will be helpful for us to analyze further and assist you better.

 

Please let us know if you need any further assistance. 

 

Regards, 

Sabari Anand

[Lee]

It's working great now and it's good to understand more about how it's working. Thanks so much for the information!

[Swetha Babu]

Hi Lee,

Thank you for your update.

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

Regards,
Swetha Babu