New to Kendo UI for Angular? Start a free 30-day trial

Export Options

The Kendo UI for Angular Map supports exporting to PDF, image, or SVG through the Drawing API.

Change Theme

Theme

Loading ...

Exporting to PDF, Image, or SVG

To export the Kendo UI for Angular Map component to PDF, image, or SVG, you can use the Drawing API to render the Map component as a drawing Group. The following steps outline how to achieve this:

Access the native HTML element of the Map component by using a template reference variable in your template:
html
```
<kendo-map #map></kendo-map>
<button kendoButton (click)="exportToPDF(map)">Export Map to PDF</button>
```

Use the Drawing API's drawDOM function to render the element as a drawing Group. For PDF export, you can also provide PDFOptions such as paperSize and margin:

public exportToPDF(map: MapComponent): void {
  // Access the native HTML element of the Map component
  const mapElement: HTMLElement = map['element'].nativeElement;

  // Render the element as a drawing Group using drawDOM
  drawDOM(mapElement, {
    paperSize: 'A4',
    margin: '2cm' as PageMargin,
  })
    // Export the Group to PDF
    .then((group: Group) => exportPDF(group))
    // Save the exported PDF file
    .then((dataUri) => saveAs(dataUri, 'map-details.pdf'));
}

Export the drawing Group to your preferred format by passing it to exportPDF, exportImage, or exportSVG, and then save the exported file using saveAs with your desired file name and extension.

That's it! You can now export the Kendo UI for Angular Map component to PDF, image, or SVG using the Drawing API.

Export Options

Exporting to PDF, Image, or SVG

Suggested Links