An SfMap inside an SfSplitter does not resize can causes weird behavior

[richardv]

Hello, I'm having an issue with using the SfMaps component in conjunction with an SfSplitter. I want to build a layout based on (nested) SfSplitters and one of the panes should contain a map. 

When I create a razor page as written below the layout it rendered fine initially, but as soon as I drag the splitter the map just stays static and on top causing all kinds of problems.

Below a simplified version of what I'm trying to achieve.

Is there something I'm doing wrong? Should I handle resize events myself? (I've tried this, but was unable to change the size of the SfMaps after it had been rendered once by changing width/height properties afterwards)

Any help would be greatly apreciated. 

###

@page "/test"

@using Syncfusion.Blazor

@using Syncfusion.Blazor.Layouts

@using Syncfusion.Blazor.Maps

@using Syncfusion.Blazor.Navigations

<SfSplitter SeparatorSize="3" Height="100%" CssClass="maxgrootte">

    <SplitterPanes>

        <SplitterPane Size="20%" CssClass="maxgrootte">

            <ContentTemplate>

                <div>

                    Left

                </div>

            </ContentTemplate>

        </SplitterPane>

        <SplitterPane>

            <ContentTemplate>

                <SfMaps Width="100%" Height="100%">

                    <MapsLayers>

                        <MapsZoomSettings Enable="@true" EnablePanning="@true" MouseWheelZoom="@true" DoubleClickZoom="@true"></MapsZoomSettings>

                        <MapsLayer LayerType="ShapeLayerType.OSM" UrlTemplate="https://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level" />

                    </MapsLayers>

                </SfMaps>

            </ContentTemplate>

        </SplitterPane>

    </SplitterPanes>

</SfSplitter>

<style>

    .maxgrootte {

        height: 100%;

    }

    .e-tab, .e-item, .e-content {

        height: 100%;

    }

</style>

[Swetha Babu]

Hi Richardv, 

Thank you for contacting Syncfusion support. 

We have checked with the provided code snippet and came to know that you are trying to resize the Maps component while resizing the Splitter component. We can resize the Maps component on Splitter resize using the Resizing event in the Splitter component. We have created the sample and the same can be downloaded from the following link. 

https://www.syncfusion.com/downloads/support/forum/153842/ze/BlazorApp1_(2)-661144249 

Please find the code snippet below for your reference. 

@using Syncfusion.Blazor 

@using Syncfusion.Blazor.Layouts 

@using Syncfusion.Blazor.Maps 

 

<SfSplitter SeparatorSize="3" Height="100%" CssClass="maxgrootte"> 

    <SplitterEvents Resizing="Resize"></SplitterEvents> 

    <SplitterPanes> 

        <SplitterPane Size="20%" CssClass="maxgrootte"> 

            <ContentTemplate> 

                <div> 

                    Left 

                </div> 

            </ContentTemplate> 

        </SplitterPane> 

        <SplitterPane> 

            <ContentTemplate> 

               <SfMaps> 

                    <MapsCenterPosition Latitude=40.7209 Longitude=-73.9680></MapsCenterPosition> 

                    <MapsZoomSettings Enable="false" ZoomFactor=10></MapsZoomSettings> 

                    <MapsLayers> 

                        <MapsLayer LayerType="ShapeLayerType.OSM" UrlTemplate="https://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level" /> 

                    </MapsLayers> 

                </SfMaps>            </ContentTemplate> 

        </SplitterPane> 

    </SplitterPanes> 

</SfSplitter> 

 

 

 

<style> 

    .maxgrootte { 

        height: 100%; 

    } 

 

    .e-tab, .e-item, .e-content { 

        height: 100%; 

    } 

</style> 

 

@code { 

    SfMaps Maps; 

    public void Resize(Syncfusion.Blazor.Layouts.ResizingEventArgs args) 

    { 

        Maps.Refresh(); 

    } 

} 

In the above sample, we have refreshed the maps component in the Resizing event of the Splitter component.   

Please let us know if you need any further assistance. 

Regards, 

Swetha Babu