How to make a SfMap full screen with a scale of 1 so heights get determined automatically?

[Niels Schutte]

Hi all,

I'm trying to add a map to my blazor page which needs to be full screen width and display the entire world ONCE, the height of the component will be automatically determined. Right now I got the width set to 100% but its showing the world map 3 times because height is still the same. How can I achieve something like this? See attachment for what i got right now.

Thanks in advance

Attachment: worldmap3times_54633470.7z

[Swetha Babu]

Hi Niels, 

Thank you for contacting Syncfusion support. 

We have analyzed the provided image and came to know that you are trying to render the maps based on the browser window size. We can render the maps to the desired size using the height and width property in maps. We have handled the OSM map with some specific height and width. So the maps gets repeated in the extra space in the control and the maps features like markers and navigation lines will be added in the center map. However, we can zoom the maps in the center using ZoomFactor property. We have created a sample to demonstrate the same and it can be downloaded from the following link. 

https://www.syncfusion.com/downloads/support/directtrac/281187/ze/BlazorApp1_(5)1500115174 

In the above sample, we have rendered the OSM map with “ZoomFactor” property in “MapsZoomSettings” in maps.  

Please let us know that 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, 

Swetha Babu

[Stephen Wileman]

Hello @Swetha Babu

I have a very similar issue and cannot get the height of the map to change. I want the height to be 100% height of my page. I'm using the default css of a blazor (server-side) app. I have tried amending css styles as per https://www.syncfusion.com/kb/8266/how-to-set-desired-height-and-width-for-maps-control-in-asp-net-mvc-platform but without any luck. 

To clarify, I am setting ZoomFactor="6" as an initial value so the map is already "zoomed in".

Width can be amended without issue. Please can you advise what I need to do?

Many thanks,

Steve

[Indumathi Ravi]

Hi Stephen, 

  

Thank you for your update. 

  

We tried to reproduce the reported issue by setting the height and width as 100%  to the Maps component with OSM type. But we are unable to reproduce the reported issue. Please find the sample application for your reference. 

  

 https://www.syncfusion.com/downloads/support/forum/155192/ze/BlazorApp1625895708

  

In the above sample, we have set 100% height and 100% width for the map component. The map is rendered as 100% to the parent element. We have tested by resizing the browser, the map is rendered based on the browser size. We have added the border to the parent element to highlight the control bounds. You can use the CircularGaugeMargin class to set the margin values as zero to reduce the white spaces within the control. 

  

Please let us know if the above solution solves the reported issue. If not, please modify the above sample and share the same to us or provide us the code snippet to reproduce the reported issue. It will be helpful for us to analyze further and assist you better. 

  

Regards, 

Indumathi R 

[Stephen Wileman]

Hi Indumathi R,

I haven't amended the sample you provided at all and can reproduce the issue. Please see the attachment which hopefully indicates the expectation of setting Height=100%. I'm not sure if this is a css issue or not. 

Many thanks,

Steve

Attachment: MapExample_3ed48e3b.zip

[Swetha Babu]

Hi Stephen,

Thank you for your update.

We have checked the provided screenshot. The map component gets the height and width from its parent element when height and width is set as 100%. So, we need to remove the styles that restrict the full page size from the application. However, we are getting the white space at the side of the maps. We are analyzing on the styles and we will update you with further details on 8^th September, 2020.  We have created the simple Blazor application to demonstrate the same and it can be downloaded from the following link.

https://www.syncfusion.com/downloads/support/forum/155192/ze/MapFullSize1774026147

In the above sample, we have rendered the map component to the full size by removing the styles that restrict the style for full-page size.

Please let us know if you need any further assistance.

Regards,
Swetha Babu

[Stephen Wileman]

Thank you for the update however I think the MapFullSize1774026147.zip attachment is for something else (Fleet management?)

Please could you let me know what css needs to be changed?

Thanks,

Steve

[Swetha Babu]

Hi Stephen,

Sorry for the inconvenience caused. 

  

We have provided the requested sample with the solution in the below link. To achieve the full screen map, we have removed the styles from the MainLayout.razor file and the styles that restrict the full page style. Please find the below code snippet for the styles that we have removed from the MainLayout.razor file. 

<div class="main"> 

    <div class="top-row px-4"> 

        <a rel='nofollow' href="https://docs.microsoft.com/aspnet/" target="_blank">About</a> 

    </div>  

    <div class="content px-4"> 

        @Body 

    </div> 

</div> 

Please find the below code snippet after removing the styles from the MainLayout.razor file. 

<div class="main"> 

        @Body 

</div> 

In the above code snippet, the main class denotes the full page size. Since the maps component gets rendered based on the parent element, we have removed the style that restricts the full page size. We have created a simple sample to demonstrate the same and it can be downloaded from the below link.

https://www.syncfusion.com/downloads/support/forum/155192/ze/OSMMap-9096217
 
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,
Swetha Babu 

[Stephen Wileman]

Hello @Swetha Babu,

Thank you very much for following this up. For now I have simply set the height in pixels. I also determined the issue was with using the "content" css class but I still don't (currently) understand why it has the effect it has! That's purely my lack of knowledge of css though and I'll learn.

For me you can consider this issue resolved.

Thanks again,

Steve

[Swetha Babu]

Hi Stephen,

Thank you for your update. 

  

We are glad to know that the issue is resolved in your application. The CSS styles were used to style the pages in the Blazor application. It was affecting the full screen style in the view page. Once the unwanted elements and styles are removed, we can achieve this.

Please let us know if you need any further assistance.

Regards,
Swetha Babu 

[Miquel]

Hello @Swetha Babu,

I'm trying to follow your sample, and works perfectly with the original nuget package version, but after upgrade to the last version (20.1.0.55), the map don't render/resize properly when the browser resizes. See on the attachment your sample updated with the latest package.

Thanks in advance

Miquel

Attachment: OSMMap9096217_with_latest_393fdf0b.zip

[Indumathi Ravi]

Hi Miquel,

 

Sorry for the inconvenience.

 

We have already fixed the reported issue internally. However, the fix will be included in our weekly patch release which is expected to be available on May 24, 2022.  Please follow the below feedback link to keep track of the reported issue.

 

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

 

Regards,

Indumathi R.

[Miquel]

Hello Indumathi,

Thank you very much for the prompt reply. 

Regards,

Miquel

[Indumathi Ravi]

Hi Miquel,

We have fixed the reported issue “Maps component is not rendering in full screen height” and included the fix in our weekly patch release(v20.1.56). Please update the latest “Syncfusion.Blazor.Maps” package in your application to resolve the reported issue. Please find the package link below.

https://www.nuget.org/packages/Syncfusion.Blazor.Maps/

Please let us know if you need any further assistance.

Regards,

Indumathi R.