Can the Blazor Maps control use custom background image for marker ?

[Jacky]

Dear All ,

Can the Blazor Maps control use custom background image for marker ?

same as the ASP.NET MVC - EJ 2 forums example : https://www.syncfusion.com/forums/142679/map-chart-with-custom-background-image

Best Regards,

Jacky

[Indumathi Ravi]

Hi Jacky, 

  

Thank you for contacting Syncfusion support. 

  

Maps component do not support adding background image in the map layer. However, we have tried to achieve your requirement as a workaround by adding the background image as marker template using the “MarkerTemplate” class in the “MapsMarker” class. The background image is not rendered properly in the center while we assign in the MarkerTemplate class. So we have made some calculation in the “Loaded” event which calls a JS interop method to provide size to the background image synchronous to the map component. Please find the code snippet for the same below.

Code snippet: 

[_Host.cshtml] 

<script> 

function resizeMarkerTemplate() { 

        // code for sizing the marker template 

} 

</script> 

  

[Index.razor] 

<SfMaps> 

<MapsEvents Loaded="Loaded"></MapsEvents> 

</SfMaps> 

  

@code 

{ 

    private async void Loaded() { 

        await jsRuntime.InvokeAsync<object>("resizeMarkerTemplate"); 

    } 

} 

  

Please find the sample below for your reference. 

https://www.syncfusion.com/downloads/support/forum/169380/ze/BlazorApp2_(2)897133926 

  

In the above sample, we created a shape layer with appropriate coordinate points synchronous to the background image. Still there are some issues in the sample while resizing the web browser. We are currently analyzing the calculation for sizing the background image in the Maps component. We will update you with further details on October 7, 2021. 

  

Regards, 

Indumathi R 

[Jacky]

Dear  Indumathi ,

Thanks, I will try it first and look forward to your  further details.

Best Regards,

Jacky

[Sabari Anand Senthamarai Kannan]

Hi Jacky, 

Sorry for the inconvenience. 

We are still analyzing the calculation to render the background image at the center of the Maps component. We will update you with further details on or before October 11, 2021. 

Regards, 

Sabari Anand

[Indumathi Ravi]

Hi Jacky,

Thank you for your patience. 

  

In the "Loaded" event of the Maps component, we found a calculation for the size of the background image that is synchronized with the map layer. Please find the modified sample application and the screen capture video of the same below. 

  

Sample Application: https://www.syncfusion.com/downloads/support/forum/169380/ze/Maps1318790444 

Screen Capture (Video): https://www.syncfusion.com/downloads/support/forum/169380/ze/blazorbackgroundimage73387243 

  

Please let us know if the above sample meets your requirement. If not, please provide us more details about your requirement. It will be helpful for us to analyze further and assist you better. 

Regards,
Indumathi R 

[Jacky]

Dear  Indumathi ,

Thanks for your reply.

my requirement as befor sample still have two  :

1 . Can use the MapsZoomSettings to Resize the map ?

2 . And also place the marker for custom shapes by passing the coordinates into the marker latitude and longitude properties

Best regards,

Jacky

Screen 1

Screen 2

Attachment: BlazorApp2_de88ff99.zip

[Indumathi Ravi]

Hi Jacky, 

  

Thank you for the update. 

  

When we analyzed your query, we came to know the background image will have synchronous issues when all the features of the Maps component such as zooming, panning and markers are used. So we suggest you to create the floor plan image as a GeoJSON and set it in the “ShapeData” property of “MapsLayer” class in the Maps component. Since this GeoJSON is a custom shape data, we need to set the “GeometryType” property as “Normal”. Now we can place the markers over the map and zooming will work fine. 

  

We have created a sample to demonstrate the same and it can be found from the below link. 

https://www.syncfusion.com/downloads/support/forum/169380/ze/BlazorApp2-69421609 

  

In the above sample, we have created simple shapes in the GeoJSON and rendered it in the Maps component. Similarly, you can create the floor plan as GeoJSON and render it in the Maps component. 

  

Please let us know that the above sample meets your requirement and let us know if you need any further assistance. 

 

Regards, 

Indumathi R 

[Jacky]

Hi Indumathi ,

My requirement is combine previous sample MarkerTemplate background image with boolon Marker,

Please see attach Combine Sample project index1.razor,

I try use shapdata for sublayer seems not work.

Kindly help. Thanks

Jacky

Attachment: BlazorApp2_228a969c.zip

[Indumathi Ravi]

Hi Jacky, 

  

Thank you for providing an update. 

  

When we analyzed your requirement using the provided sample, we observed that the marker was placed in various positions over the background image when zooming and resizing was performed. 

  

As previously stated, we do not support rendering images in the Blazor platform's Maps component. We worked hard to meet your requirements in the Maps component, but it did not result in a prompt solution. 

  

Our Maps component is designed to work with shapes and online map providers. It does not handle images in the same way that an image viewer does. Also, because it isn't a generic requirement, we don't have any immediate plans to render and work on images in the Maps component. 

  

Sorry for the inconvenience. 

  

Regards, 

Indumathi R. 

[Jacky]

Dear Sir,

Thank you for your assistance.

If you don't consider the resizing problems caused by zoom (Zoom in/out), is it possible to simply mark the Ballon Marker on the Custom image map and display the Data Label information?

As mentioned in the previous forum, if Syncfusion ASP.NET MVC-EJ 2 can be implemented, Blazor Map control should be more advanced to be achieved.

I think that Geo Maps combined with Custom images to display in the manufacturing industry is a very straightforward application. Can it be included in the future plan of Syncfusion Blazor Map control?

Thank you for your time.

Best regards,

Jacky

[Indumathi Ravi]

Hi Jacky, 

  

Thank you for the update. 

  

Please find the details of the queries in the below table. 

Query	Details
If you don't consider the resizing problems caused by zoom (Zoom in/out), is it possible to simply mark the Ballon Marker on the Custom image map and display the Data Label information?	We can achieve your requirement by placing the balloon type marker over the background image (rendered as marker template) if the zooming and resizing is not considered. We can use “z-index” CSS style to render the marker over the background image. Since the background image and marker will have synchronizing issues while resizing the window, we need to set fixed size to the Maps component.     Usually, data labels are rendered based on the shapes in the Maps. Since the layer has only marker template (background image), we can render the label as annotation using “MapsAnnotation” class. We have modified the provided sample to add markers and annotations above the background image and it can be found from the below link.     https://www.syncfusion.com/downloads/support/forum/169380/ze/MapsBackgroundImage890381401     In the above sample, we have used the ”MapsAnnotation” class to specify the HTML element for adding the text to be displayed above the background image. We can place an annotation anywhere above the background image by specifying the "X" and "Y" properties using pixel.     We need to set the "ZIndex" property to place the annotation above the background image.
As mentioned in the previous forum, if Syncfusion ASP.NET MVC-EJ 2 can be implemented, Blazor Map control should be more advanced to be achieved.	We achieved something similar but not identical using the ASP.NET MVC EJ2 component, and only as a workaround by using the "loaded" event. In that example, we would not have enabled the zooming feature, and the markers would have been placed as shapes. However, the requirement in your query is different, as you have requested a zooming feature and marker templates with images. As a result, the sample prepared in the ASP.NET MVC EJ2 component is not exactly equivalent to your requirement.
I think that Geo Maps combined with Custom images to display in the manufacturing industry is a very straightforward application. Can it be included in the future plan of Syncfusion Blazor Map control?	As updated earlier, our Maps component is designed to work with shapes and online map providers. It does not handle images in the same way that an image viewer does. Also, because it isn't a generic requirement, we don't have any immediate plans to render and work on images in the Maps component.

  

Regards, 

Indumathi R. 

[Jacky]

Dear Indumathi  ,

Thank you for your prompt reply.

Your details explanation and example already met some of my requirement.

Thank you for taking time to reponse my email.

Best regards,

Jacky Liu

[Indumathi Ravi]

Hi Jacky, 

Thank you for the update. 

  

Please let us know if you need any further assistance. 

Regards,
Indumathi R