We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Is there a way to isert a map being displayed in an open dialog into a pdf being built from scratch

 I am not sure how much of this is relevant but I am explaining for context in case some of it is important.

I have a server side Blazor app.   I have a page with a DataGrid in which a row button may be clicked which opens a dialog which displays a wealth of info (so much it is displayed in a tab control) pertaining to the current data row, including a map created using the map control.   The map is outside of the tab control

The dialog has a button to generate a pdf displaying the data from all the tabs which works well building the pdf line by line.  Is it possible to get the currently displayed map into my pdf ?


Many thanks


M


3 Replies

IR Indumathi Ravi Syncfusion Team March 6, 2023 12:48 PM UTC

Hi Martin,


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


Queries

Details

I have a server side Blazor app.   I have a page with a DataGrid in which a row button may be clicked which opens a dialog which displays a wealth of info (so much it is displayed in a tab control) pertaining to the current data row, including a map created using the map control.   The map is outside of the tab control

We suspect we are dealing with the reported scenario because the Maps component began to render before the Tab component. However, we can resolve this issue at the application level by rendering the Maps component after the Tab component. To properly render the Maps component, a boolean variable (i.e. IsInitialRender) must be created and used to determine the Maps component's rendering. For more information, please see the UG documentation link below.

https://blazor.syncfusion.com/documentation/maps/how-to/place-map-inside-other-components#maps-component-inside-tab

 

The sample and video are available at the link below.

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp61943599789

Video - https://www.syncfusion.com/downloads/support/directtrac/general/ze/maps1412338879

 

The dialog has a button to generate a pdf displaying the data from all the tabs which works well building the pdf line by line.  Is it possible to get the currently displayed map into my pdf ?

We can export Maps to PDF using the Maps component's "Export" method. Please see the sample code snippet below.

 

Code Snippet:

public async Task Export()

    {

        string expectedstring = await MapsOne.Export(Syncfusion.Blazor.Maps.ExportType.PNG, "Export", null, false);

        string encodedString = expectedstring.Split("base64,")[1];

        byte[] data = Convert.FromBase64String(encodedString);

        using (MemoryStream initialStream = new MemoryStream(data))

        {

            Stream stream = initialStream as Stream;

            using (PdfDocument document = new PdfDocument())

            {

                document.PageSettings.Orientation = PdfPageOrientation.Portrait;

                PdfPage page = document.Pages.Add();

                PdfGraphics graphics = page.Graphics;

                using (PdfBitmap image = new PdfBitmap(stream))

                {

                    graphics.DrawImage(image, 0, 0);

                    using (MemoryStream memoryStream = new MemoryStream())

                    {

                        document.Save(memoryStream);

                        memoryStream.Position = 0;

                        expectedstring = Convert.ToBase64String(memoryStream.ToArray());

                        document.Dispose();

                    }

                }

            }

        }

    }

 

NOTE 1: The sample is available in the table above.

 

NOTE 2: In the preceding example, we can export the Maps component rendered within the active tab by using the respective Maps component instance. Similarly, we can export the other maps rendered in the other tab items by using the respective Maps component instances.


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



MA Martin March 8, 2023 06:44 PM UTC

That all worked fine.  However a further question.  I would like to make the map referred to above able to be panned.   However the map defined below is pannable if and only if the line  <MapsZoomSettings ZoomFactor="5"></MapsZoomSettings> is removed.


Can you enable this map to be panned even when zoomed in?


            <SfMaps>

                <MapsZoomSettings Enable="true" EnablePanning="true" EnableSelectionZooming="true">

                </MapsZoomSettings>

                <MapsLayers>

                    <MapsLayer UrlTemplate="https://tile.openstreetmap.org/level/tileX/tileY.png" TValue="string">

                        <MapsZoomSettings ZoomFactor="5"></MapsZoomSettings>

                        <MapsCenterPosition Latitude="55.0" Longitude="-2.0"></MapsCenterPosition>

                    </MapsLayer>

                </MapsLayers>

            </SfMaps>



IR Indumathi Ravi Syncfusion Team March 9, 2023 06:24 AM UTC

Hi Martin,


When we examined the provided code snippet, we noticed the following errors:


  1. The "MapsZoomSettings" tag is used twice, which is incorrect.
  2. The "MapsZoomSettings" and "MapsCenterPosition" tags must be added directly to the "SfMaps" tag. The "MapsZoomSettings" and "MapsCenterPosition" tags should not be used within the "MapsLayer" tag.


On correcting #1 and #2, the panning works as expected. Please see the code snippet below.


Code Snippet:

<SfMaps>

    <MapsZoomSettings ZoomFactor="5" Enable="true" EnablePanning="true" EnableSelectionZooming="true"></MapsZoomSettings>

    <MapsCenterPosition Latitude="55.0" Longitude="-2.0"></MapsCenterPosition>

    <MapsLayers>

        <MapsLayer UrlTemplate=https://tile.openstreetmap.org/level/tileX/tileY.png TValue="string">

        </MapsLayer>

    </MapsLayers>

</SfMaps>


You can find the modified sample and video in the below link.


Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazAppMaps483933489

Video - https://www.syncfusion.com/downloads/support/directtrac/general/ze/panning-1682785511


Please let us know if the above solution meets your requirement.


Loader.
Live Chat Icon For mobile
Up arrow icon