Search results

Print and export in Blazor Maps component

Print

To use the print functionality, we should set the AllowPrint property to true. The rendered map can be printed directly from the browser by calling the method print. You can get the Maps component object using @ref="maps".

@using Syncfusion.Blazor.Maps

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

@code {
    SfMaps maps;
    void PrintMap()
    {
        // using Maps component reference call 'Print' method
        this.maps.Print();
    }
}

Maps with print option

Export

Image Export

To use the image export functionality, we should set the AllowImageExport property to true. The rendered map can be exported as an image using the export method. The method requires two parameters: image type and file name. The map can be exported as an image in the following 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"}'>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {
    SfMaps Maps;
    void ExportMap()
    {
        this.Maps.Export(ExportType.PNG, "Maps");
    }
}

Maps with export option

PDF Export

To use the PDF export functionality, we should set the AllowPdfExport property to true. The rendered map can be exported as PDF using the export method. The export method requires three parameters: file type, file name and orientation of the PDF document. The orientation setting is optional and “0” indicates portrait and “1” indicates 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"}'>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {
    SfMaps Maps;
    void ExportMap()
    {
        this.Maps.Export(ExportType.PDF, "Maps", 0);
    }
}

Maps with export option

Export the tile maps

The rendered map with providers such as OSM, Bing and Google static maps can be exported using the Export method. It supports the following export formats.

  • JPEG
  • PNG
  • PDF
@using Syncfusion.Blazor.Maps

<button @onclick="ExportMap">Export</button>
<SfMaps @ref="Maps" AllowPdfExport="true" AllowImageExport="true">
    <MapsLayers>
        <MapsLayer LayerType="ShapeLayerType.OSM">
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {
    SfMaps Maps;
    void ExportMap()
    {
        this.Maps.Export(ExportType.PNG, "OSM Map");
    }
}

Maps with export option