Print and export in Blazor Maps Component

4 Nov 20253 minutes to read

Print

The rendered Maps component can be printed directly from the browser by calling the PrintAsync method. Enable printing by setting the AllowPrint property to true.

@using Syncfusion.Blazor.Maps

<button @onclick="PrintMap">Print</button>
<SfMaps @ref="maps" AllowPrint="true">
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
            <MapsLayerTooltipSettings Visible="true" ValuePath="name">
            </MapsLayerTooltipSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {
    SfMaps maps;

    public async Task PrintMap()
    {
        // using Maps component reference call 'Print' method
        await this.maps.PrintAsync();
    }
}

Export

Image Export

Enable image export by setting the AllowImageExport property to true. Export the rendered Maps as an image using the ExportAsync method. The method accepts the image type and file name. Supported formats:

• JPEG
• PNG
• SVG

@using Syncfusion.Blazor.Maps

<button @onclick="ExportMap">Export</button>
<SfMaps @ref="Maps" AllowImageExport="true">
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {
    SfMaps Maps;

    public async Task ExportMap()
    {
        await this.Maps.ExportAsync(ExportType.PNG, "Maps");
    }
}

PDF Export

Enable PDF export by setting the AllowPdfExport property to true. Export the rendered Maps to PDF using the ExportAsync method. This method requires the file type, file name, and the PDF orientation. The orientation value can be set as 0 (portrait) or 1 (landscape).

@using Syncfusion.Blazor.Maps

<button @onclick="ExportMap">Export</button>
<SfMaps @ref="Maps" AllowPdfExport="true">
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {
    SfMaps Maps;

    public async Task ExportMap()
    {
        await this.Maps.ExportAsync(ExportType.PDF, "Maps", 0);
    }
}

Exporting Maps as base64 string of the file

An image or PDF can be exported as a base64 string for JPEG, PNG, and PDF formats. Export the rendered Maps to a base64 string using the ExportAsync method. Provide the image type, file name, orientation (set null for image export and 0 or 1 for PDF), and set allowDownload to false to return a base64 string.

@using Syncfusion.Blazor.Maps

<button @onclick="export">Export</button>
<SfMaps @ref="Maps" AllowPdfExport="true">
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {
    SfMaps Maps;
    string exportString;

    public async Task export()
    {
        exportString = await this.Maps.ExportAsync(ExportType.PDF, "Maps", 0, false);
        Console.WriteLine(exportString);
    }
}

NOTE

Add the below service in Program.cs file if the size of the Maps is too large.
builder.Services.AddServerSideBlazor().AddHubOptions(o => { o.MaximumReceiveMessageSize = 102400000; });

Export the tile Maps

Maps using tile providers such as OSM, Bing, and other providers can be exported using the ExportAsync method. Supported export formats:

• JPEG
• PNG
• PDF

@using Syncfusion.Blazor.Maps

<button @onclick="ExportMap">Export</button>
<SfMaps @ref="Maps" AllowPdfExport="true" AllowImageExport="true">
    <MapsLayers>
        <MapsLayer UrlTemplate="https://tile.openstreetmap.org/level/tileX/tileY.png" TValue="string">
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {
    SfMaps Maps;

    public async Task ExportMap()
    {
        await this.Maps.ExportAsync(ExportType.PNG, "OSM Map");
    }
}