Having SfMaps within a DashboardLayoutPanel object

[Claus Råe]

I'm having an issue - I cannot get SfMap objects to render within a DashboardPanel object

The most simplistic construct that I tried is this:

          <DashboardLayoutPanel Id="21" Row="1" Col="0" SizeX="2" SizeY="2">

                <HeaderTemplate><div>Anvendte behandlingsgrundlag</div></HeaderTemplate>

                <ContentTemplate>

                    <SfMaps>

                        <MapsLayers>

                            <MapsLayer Visible="true" ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'>

                            </MapsLayer>

                        </MapsLayers>

                    </SfMaps>

                </ContentTemplate>

            </DashboardLayoutPanel>

No error messages - and no core map rendered

What I'm I missing here?

Thanks

Claus

[Swetha Babu]

Hi Claus,

Thank you for contacting Syncfusion support.

We have checked your code and came to know that you have provided the size for the layout panel. The maps gets hidden somewhere in the page as we have provided the size property in layout panel. We have removed the size property to render the maps in the center of the layout panel. Please find the below code snippet to render the map in the layout panel. 

<SfDashboardLayout> 

    <DashboardLayoutPanels>         

        <DashboardLayoutPanel> 

            <HeaderTemplate><div>Anvendte behandlingsgrundlag</div></HeaderTemplate> 

            <ContentTemplate> 

                        <SfMaps> 

                            <MapsLayers> 

                                <MapsLayer Visible="true" ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'> 

                                </MapsLayer> 

                            </MapsLayers> 

                        </SfMaps> 

            </ContentTemplate> 

        </DashboardLayoutPanel>       

    </DashboardLayoutPanels> 

</SfDashboardLayout> 

Please let us know if the above solution 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 

[Claus Råe]

I cannot just remove the sizing parameters as they define how large the panel should be the LayoutPanel has 20 columns 

The SfDashboardLayout is defined like this 

 <SfDashboardLayout @ref="dashboardObject" AllowResizing="@AllowResizing" AllowFloating="@AllowFloating" CellSpacing="@CellSpacing" Columns="@Columns" ShowGridLines="@ShowGridLines">

Where the parameters is set to:

     public double[] CellSpacing = { 10, 10 };

     public bool FloatCheck = true;

   public bool ResizeCheck = true;

   public int Columns = 20;

   public bool AllowFloating { get; set; } = true;

   public bool AllowResizing { get; set; } = true;

And the panel that holds the Map the following definition:

                    <DashboardLayoutPanel Id="24" Row="2" Col="15" SizeX="5" SizeY="7">

                <HeaderTemplate><div>Geografisk placering af datamodtagere </div></HeaderTemplate>

                <ContentTemplate>

                    <SfMaps>

                        <MapsTitleSettings Text="Datamodtagere">

                            <MapsTitleTextStyle Size="16px" />

                        </MapsTitleSettings>

                        <MapsZoomSettings Enable="true" />

                        <MapsLayers>

                            <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'

                                       ShapePropertyPath='@("name")'

                                       ShapeDataPath="Country">

                                <MapsMarkerSettings>

                                    <MapsMarker Visible="true"

                                                DataSource="@_dataReceiver"

                                                ShapeValuePath="Shape"

                                                ColorValuePath="Color">

                                        <MapsMarkerBorder Color="#285255" Width="2" />

                                        <MapsMarkerTooltipSettings Visible="true" ValuePath="Name"

                                                                   Format="<b>${Name}</b><br>Land: <b>${Country}</b><br>Tredje land: <b>${ThirdPartyCountry}</b><br>Sikkert land: <b>${SecureCountry}</b><br>Overførselstype: <b>${TransferType}</b>" />

                                    </MapsMarker>

                                </MapsMarkerSettings>

                            </MapsLayer>

                        </MapsLayers>

                    </SfMaps>

                </ContentTemplate>

            </DashboardLayoutPanel>

[Claus Råe]

Even outside the panel I cannot render a Map

[Swetha Babu]

Hi Claus,

Thank you for your update.

We have checked your query. We are unable to reproduce the reported issue of maps not rendered in the layout panel. However, we have created a simple Blazor application with the size property of the dashboard layout and maps components and it can be downloaded from the below link.

https://www.syncfusion.com/downloads/support/forum/156808/ze/MapsLayout553411675

In the above sample, we have rendered a world map inside the layout panel. Please let us know if the above sample meets your requirement.

Please let us know if you need any further assistance.

Regards,
Swetha Babu

[Christoph]

Unfortunately, this sample seems not to work in the current version 19.4.0.38 - the height of the map does not adopt to the height of the DashboardElement.

When adding Heigth="100%" on the SfMap it even gets worse - after a single resize the browser complains about negative values in the dev console. 

[Indumathi Ravi]

Hi Christoph, 

  

Thank you for the update. 

  

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

Queries	Details
Unfortunately, this sample seems not to work in the current version 19.4.0.38 - the height of the map does not adopt to the height of the DashboardElement.	The sample application provided previously in this forum is of older version. So we have updated the sample to the new version with updated code and packages. We need to make the following changes to resolve the reported issue in the Maps component with the Dashboard layout component.     When the Maps component is rendered within the panel of the Dashboard layout, the size of the Maps is not got properly from the panel of the Dashboard layout. The same issue is reproduced in the drag and resize of the panel. To resolve this issue, we need to call the “Refresh” method in the “OnResizeStop” and “OnWindowResize” events of Dashboard layout. Since the size of panel of the Dashboard layout is got after the some delay in the Maps component, a time delay of 1000 milliseconds must be provided before refreshing the Maps component. Please find the code snippet below.     Code Snippet:  <SfDashboardLayout>         <DashboardLayoutEvents  OnResizeStop="@ResizingHandler"                    OnWindowResize="@ResizingHandler">         </DashboardLayoutEvents>          <DashboardLayoutPanels>                 <DashboardLayoutPanel>                 <ContentTemplate>                       <SfMaps ID="Maps" @ref="Maps" Height="100%">                     </SfMaps>                <ContentTemplate>            </DashboardLayoutPanel>      </DashboardLayoutPanels>  </SfDashboardLayout>  @code {     public SfMaps Maps;      public async void ResizingHandler()      {          await Task.Delay(1000);          Maps.Refresh();      }   }     We have created a sample to demonstrate the same and it can be downloaded from the below link.  Sample Application: https://www.syncfusion.com/downloads/support/forum/156808/ze/MapsLayout563769815  Screen Capture (Video): https://www.syncfusion.com/downloads/support/forum/156808/ze/dashboard887073354
When adding Heigth="100%" on the SfMap it even gets worse - after a single resize the browser complains about negative values in the dev console.	We are unable to reproduce the issue with the reported scenario. Please modify the above sample to reproduce the reported issue. It will be helpful for us to analyze and assist you further.

  

Please let us know if you need any further assistance. 

  

Regards, 

Indumathi R. 

[Christoph]

Idumathi,

thank you very much - it is now working this way.

In my code I encapsulated the SfMap in another <div> that caused the behavior described when setting height="100%" - To clarify the issue, I changed your sample:

<SfDashboardLayout @ref="dashboardObject" AllowResizing="@AllowResizing"  AllowFloating="@AllowFloating" CellSpacing="@CellSpacing" Columns="@Columns">
<DashboardLayoutEvents  OnResizeStop="@ResizingHandler" OnWindowResize="@ResizingHandler"></DashboardLayoutEvents>
    <DashboardLayoutPanels>
        <DashboardLayoutPanel Id="24" Row="0" Col="5" SizeX="5" SizeY="7">
            <HeaderTemplate><div> Maps </div></HeaderTemplate>
            <ContentTemplate>
                <div>
                    <SfMaps ID="Maps" @ref="Maps" Height="100%">
                        <MapsTitleSettings Text="Maps">
                            <MapsTitleTextStyle Size="16px" />
                        </MapsTitleSettings>
                        <MapsZoomSettings Enable="true" />
                        <MapsLayers>
                            <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                                       TValue="string">
                                <MapsMarkerSettings>
                                    <MapsMarker Visible="true" DataSource="California" Height="25" Width="15" TValue="City" AnimationDuration="0">
                                        <MapsMarkerBorder Color="#285255" Width="2" />
                                        <MapsMarkerTooltipSettings Visible="true" ValuePath="Name"
                                                                   Format="<b>${Name}</b>" />


                                    </MapsMarker>
                                    <MapsMarker Visible="true" DataSource="NewYork" Height="25" Width="15" TValue="City" AnimationDuration="0">
                                        <MapsMarkerBorder Color="#285255" Width="2" />
                                        <MapsMarkerTooltipSettings Visible="true" ValuePath="Name"
                                                                   Format="<b>${Name}</b>" />
                                    </MapsMarker>
                                    <MapsMarker Visible="true" DataSource="Iowa" Height="25" Width="15" TValue="City" AnimationDuration="0">
                                        <MapsMarkerBorder Color="#285255" Width="2" />
                                        <MapsMarkerTooltipSettings Visible="true" ValuePath="Name"
                                                                   Format="<b>${Name}</b>" />
                                    </MapsMarker>
                                </MapsMarkerSettings>


                            </MapsLayer>
                        </MapsLayers>
                    </SfMaps>
                </div>
            </ContentTemplate>
        </DashboardLayoutPanel>
    </DashboardLayoutPanels>
</SfDashboardLayout>

Please verify, this causes the behavior mentioned.

However, we ran in a whole lot of resizing issues with components incorporating in the dashboard (CircularGauge fixed with 19.4, Chart, Grid) that are all solvable with some Delays and Refresh "vodoo". It would be really helpful, if you could provide some comprehensive guide for embedding the various controls into the dashboard to avoid that painful experience...

Again, thank you and keep up the good work!

[Indumathi Ravi]

Hi Christoph, 

  

Thank you for the update. 

  

We can resolve the reported scenario in the application by setting the width and height CSS style of the div element that encapsulates the Maps component as “inherit” or “100%”. This will render the Maps component within the panel of the Dashboard layout component. Please find the code snippet below. 

  

Code Snippet: 

<SfDashboardLayout>  

       <DashboardLayoutEvent>  

       </DashboardLayoutEvents>  

        <DashboardLayoutPanels>  

               <DashboardLayoutPanel>  

               <ContentTemplate>  

                    <div style="width:inherit; height:inherit"> 

                     <SfMaps ID="Maps" @ref="Maps" Height="100%">  

                   </SfMaps>  

                  </div> 

              <ContentTemplate>  

          </DashboardLayoutPanel>  

    </DashboardLayoutPanels>  

</SfDashboardLayout> 

  

We have modified the sample to demonstrate the same and it can be downloaded from the below link. 

https://www.syncfusion.com/downloads/support/forum/156808/ze/Maps19507614592085906076 

  

For further reference, to render the various controls into the dashboard sample, please check our online demo for further details. 

https://blazor.syncfusion.com/demos/dashboard-layout/overview?theme=bootstrap5 

  

For the Maps component, we will not receive correct size of the panel when the resize of the Dashboard layout or its panel is performed. So it is enough to refresh the Maps component with time delay as explained in our previous update. However, we have forwarded your query to our Dashboard layout component team to check with various components. We will update you the response on your query on December 29, 2021. 

  

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

  

Regards,
Indumathi R. 

[Christoph]

Dear Indumathi,

thank you for your clarification and suggested solution, it is perfectly working for me now. 

Looking forward to hearing about the interaction with the dashboard team. The user expectation for dashboard look-and-feel is pretty high, so it would be important to have some out-of-the-box (on any device and resolution) working dashboard samples/guides embedding the most important components you provide.

Regards,

Christoph

[Indumathi Ravi]

Hi Christoph, 

  

Thank you for the update. 

  

Please find the details about the Dashboard Layout component below. 

  

The Dashboard Layout will transform the entire layout to a stacked layout (vertical columns) in lower resolutions/mobile device. 

  

UG Link: https://blazor.syncfusion.com/documentation/dashboard-layout/responsive-adaptive 

  

For including header and content(embedding components) within panels, refer to the following demo and UG links. 

  

Demo: https://blazor.syncfusion.com/demos/dashboard-layout/overview?theme=bootstrap5 

  

UG Link: https://blazor.syncfusion.com/documentation/dashboard-layout/panels/setting-header-of-panels 

  

For your requirement of Dashboard Layout with various components, some forums are available which addresses similar scenario. Please find the forum links below. 

  

https://www.syncfusion.com/forums/153264/sggrid-inside-dashboard-layout 

  

https://www.syncfusion.com/forums/158478/dynamic-dashboard-with-syncfusion-components-sometimes-component-inside-panel-is-not 

  

Please let us know if you need any further assistance. 

  

Regards, 

Indumathi R.