My map isn't working after upgrading to latest version of Syncfusion Blazor

Question

I recently upgraded my version to the newest one and am having issues with the Maps component. I see that there were major changes in v18.4.30 and have tried to change my map accordingly, but am still having issues with the map zooming, marker positioning, and marker tooltips, I am getting an error when the page tries to render and I figure that might be the root of my problem. The error is:Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Value cannot be null. (Parameter 'source')System.ArgumentNullException: Value cannot be null. (Parameter 'source') at System.Linq.ThrowHelper.ThrowArgumentNullException(ExceptionArgument argument) at System.Linq.Enumerable.ToList[Object](IEnumerable`1 source) at Syncfusion.Blazor.Maps.SfMaps.GetDataSourceDetails() at Syncfusion.Blazor.Maps.SfMaps.GetInstance() at Syncfusion.Blazor.Maps.SfMaps.OnAfterScriptRendered() at Syncfusion.Blazor.SfBaseComponent.OnAfterRenderAsync(Boolean firstRender) at Syncfusion.Blazor.Maps.SfMaps.OnAfterRenderAsync(Boolean firstRender) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)Here are snippets of the code in the page: @{

} @code {... private static IReadOnlyList StoresData; Location location; static double dblLat; static double dblLong;... protected override async Task OnInitializedAsync() {... StoresData = await StoreListService.GetStoresByLatLong(request); this.MarkerDataSource = MarkerData.GetData();...} public class MarkerData { public double latitude { get; set; } public double longitude { get; set; } public string name { get; set; } public static ObservableCollection GetData() { ObservableCollection MarkerDataSource = new ObservableCollection(); foreach (MobileStore store in StoresData) { MarkerDataSource.Add(new MarkerData { name = store.storename, latitude = Convert.ToDouble(store.latitude), longitude = Convert.ToDouble(store.longitude) }); } return MarkerDataSource; } }...I can give you the complete razor page if necessary. I tried to change from an Observable collection to a List and other things, but I still get the error. The markers are showing up if I refresh the page, but there is not the initial zoom, no tooltips, and it isn't firing the event when I click on them. It is a little frustrating because all of this was working flawlessly until the upgrade.Any help would be appreciated.Thanks,Millard

Swetha Babu · Accepted Answer

Hi Millard, 
  
Thank you for your patience. 
  
We have included the fix for the reported issue of "Marker template is not placed in the right place" in our Essential Studio 2021 Volume 1 Main release(v19.1.0.54) which is rolled out and is available for download under the following link. 
  
https://www.syncfusion.com/forums/164043/essential-studio-2021-volume-1-release-v19-1-0-54-is-available-for-download 
  
Please find the link of the package to be updated in your application below. 
  
https://www.nuget.org/packages/Syncfusion.Blazor.Maps/ 
  
We thank you for your support and appreciate your patience in waiting for our release. Please get in touch with us if you would require any further assistance. 
  
Regards, 
Swetha Babu

Sabari Anand Senthamarai Kannan · Answer

Hi Millard,Thank you for contacting Syncfusion support.We are able to reproduce the reported issue when rendering the markers using the template in the Maps component. We will check the reported issue and update you with further details on February 18, 2021. 
 However, when we render the image as a maker by setting the ImageUrl property and Shape property as "Image" in MapsMarker class, the markers render fine. Please use this approach to render the marker as an image until we check this issue. We have created a simple Blazor application to demonstrate the same and it can be downloaded from the following link.https://www.syncfusion.com/downloads/support/forum/162606/ze/Maps_(3)883941986In the above sample, we have modified your code snippet to render the image as a marker in the OSM map. Please let us know if the above sample meets your requirement. Regards,Sabari Anand

Millard Harris · Answer

Sabari,I tried your solution and can see that the markers are showing as requested, but there are still issues.  I need the map to center within a 30 mile radius, so when I add in a center position, it doesn't work.  Also, I need to be able to click on the marker and the marker click event isn't working for me.  One other thing is that when you move the map around, the markers don't stick with the map. I will just wait for what you have on 2/18 and in the meantime back out the upgrade.  Thanks for all your help!Millard

Swetha Babu · Answer

Hi Millard, 
  
Thank you for your update. 
  
Please find the details for your queries from the below table. 




Queries 

Details 


I need the map to center within a 30 mile radius, so when I add in a center position, it doesn't work. 

We are not able to reproduce the reported issue. We are able to set the center position for the map using the Latitude and Longitude property in MapsCenterPosition class in the Maps component. We have created a simple Blazor application to demonstrate the same and we have also recorded a video when we tried to reproduce the reported issue and it can be downloaded from the next query. 


I need to be able to click on the marker and the marker click event isn't working for me 

We are not able to reproduce this reported issue. The OnMarkerClick event is triggered in the Maps component. We have created a simple Blazor application with the OnMarkerClick event and an alert box will be shown in the event. Please find the sample application from the below link for your reference. 
  
https://www.syncfusion.com/downloads/support/forum/162606/ze/OSMMap-290361433


when you move the map around, the markers don't stick with the map 

We are not able to reproduce this reported issue. However, we have recorded the screen when we tried to reproduce the reported issue. Please find the video from the below link for your reference.https://www.syncfusion.com/downloads/support/forum/162606/ze/OSMMapVideo-742018395 


I will just wait for what you have on 2/18 and in the meantime back out the upgrade. 

Sorry for the inconvenience caused. 
  
As we mentioned earlier, we will provide the details about the reported issue in the marker template on February 18, 2021. We are working to improvise the Maps component. Please let us know the issues you are facing in our component. We will be happy to provide the solution for the same. 
  
Please provide us the code snippet or sample application to reproduce the reported issues. It will be helpful for us to analyze further and assist you better. 
Regards,Swetha Babu

Swetha Babu · Answer

Hi Millard, 
  
Thank you for your patience. 
  
We have confirmed the reported issue of "Marker template is not placed in the right position" as a defect and logged a defect report for the same. However, we will include the fix for the reported issue in our upcoming weekly NuGet release which is expected to be available by the start of March 2021. 
  
Regards, 
Swetha Babu

Swetha Babu · Answer

Hi Millard,Thank you for your patience.We have not included the fix for the reported issue of "Marker template is not placed in the right position" in our weekly NuGet release. However, we have fixed the reported issue and provided the fix as a custom patch. Please find the custom package from the below link.https://www.syncfusion.com/downloads/support/forum/162606/ze/MapsNuget1351982116Please clear the NuGet cache before installing the above packages in your application. We can render the marker template using the "MarkerTemplate" class in the "MapsMarker" class in the Maps component. Please find the below code snippet for your reference. @{ var data = context as MobileStore;

} We will include the fix for the reported issue in our 2021 Volume 1 release which is expected to be available by the mid of March 2021. Until then, please use the above package. Please let us know if you need any further assistance.Regards,Swetha Babu

Millard Harris · Answer

I just revisited this issue and decided to go ahead and upgrade to the newest version and see if the map works right now. The map does seem to work ok except for when I perform a call to a REST service. I then get the following error:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]

Unhandled exception rendering component: Value cannot be null. (Parameter 'source')

System.ArgumentNullException: Value cannot be null. (Parameter 'source')

at System.Linq.ThrowHelper.ThrowArgumentNullException(ExceptionArgument argument)

at System.Linq.Enumerable.ToList[Object](IEnumerable`1 source)

at Syncfusion.Blazor.Maps.SfMaps.MarkerAnimation()

at Syncfusion.Blazor.Maps.SfMaps.ClientSideFunctions()

at Syncfusion.Blazor.Maps.SfMaps.OnAfterScriptRendered()

at Syncfusion.Blazor.SfBaseComponent.OnAfterRenderAsync(Boolean firstRender)

at Syncfusion.Blazor.Maps.SfMaps.OnAfterRenderAsync(Boolean firstRender)

at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

It is the original error I had referenced before. I don't even have to use the data that was received in the form. It just happens when I first go into it. It will work ok sometimes if I just refresh the page. If I then go away from the page and use the "Back" button to go back to it, the error occurs. I will upload the page I'm executing. The call to the service will not work of course, but you should be able to see what I'm doing.

Thanks,

Millard

Attachment: TestMap_996b27f7.zip

Indumathi Ravi · Answer

Hi Millard, 
  
We are currently analyzing the reported scenario and will update you with further details on February 17, 2022. 
 
Regards, 
Indumathi R.

Indumathi Ravi · Answer

Hi Millard,

We are able to reproduce the reported issue with the provided code snippet. However, we can resolve the issue at the beginning of the rendering process by null-checking the data before rendering our Maps component. Please find the code snippet for the same.

Code Snippet:

@if (!double.IsNaN(dblLat) && !double.IsNaN(dblLong) && dblLat != 0 && dblLong != 0)

{

//..

</SfMaps>

}

Still, we are experiencing an issue when switching between pages. So, we have considered this as a defect and logged a defect report for the same. However, we will include the fix for the reported issue in our weekly patch release which is expected to be available by the start of March 2022. Please find the below feedback link to keep track of the reported issue.

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

Please let us know if you need any further assistance.

Regards,

Indumathi R

Millard Harris · Answer

Indumathi,Thanks for your reply.  I will test the interim fix and wait for the completed fix when the patch is released.Millard

Indumathi Ravi · Answer

Hi Millard,Thank you for your update. 
  
We'll let you know once the package is published. 
Regards,Indumathi R.

Indumathi Ravi · Answer

Hi Millard, 

Sorry for the inconvenience. 

We have not included the fix for the reported issue in our weekly patch release. However, the fix will be included in our next weekly patch release, which is expected to be available by next week. 

Regards, Indumathi R.

Indumathi Ravi · Answer

Hi Millard, 
  
Thank you for your patience. 
  
We have fixed the console exception issue in the Maps component and included the fix in our weekly patch release(v19.4.55). Please update the "Syncfusion.Blazor.Maps" package in your application to resolve the reported issue. Please find the link of the package below. 
https://www.nuget.org/packages/Syncfusion.Blazor.Maps. 
  
While resolving the exception issue, we noticed another issue. When navigating between the pages, the location of the marker is incorrect. When the browser is resized, the marker returns to its original position. However, the fix will be included in our next weekly patch release, which is expected to be available by next week.  
  
Please find the video of the issue and it can be download from the below link, 
https://www.syncfusion.com/downloads/support/directtrac/general/ze/WepAPIIssue-1422150865 
Please let us know if you need any further assistance.   
  
Regards, 
Indumathi R.

Queries	Details
I need the map to center within a 30 mile radius, so when I add in a center position, it doesn't work.	We are not able to reproduce the reported issue. We are able to set the center position for the map using the Latitude and Longitude property in MapsCenterPosition class in the Maps component. We have created a simple Blazor application to demonstrate the same and we have also recorded a video when we tried to reproduce the reported issue and it can be downloaded from the next query.
I need to be able to click on the marker and the marker click event isn't working for me	We are not able to reproduce this reported issue. The OnMarkerClick event is triggered in the Maps component. We have created a simple Blazor application with the OnMarkerClick event and an alert box will be shown in the event. Please find the sample application from the below link for your reference. https://www.syncfusion.com/downloads/support/forum/162606/ze/OSMMap-290361433
when you move the map around, the markers don't stick with the map	We are not able to reproduce this reported issue. However, we have recorded the screen when we tried to reproduce the reported issue. Please find the video from the below link for your reference. https://www.syncfusion.com/downloads/support/forum/162606/ze/OSMMapVideo-742018395
I will just wait for what you have on 2/18 and in the meantime back out the upgrade.	Sorry for the inconvenience caused. As we mentioned earlier, we will provide the details about the reported issue in the marker template on February 18, 2021. We are working to improvise the Maps component. Please let us know the issues you are facing in our component. We will be happy to provide the solution for the same.