Export
You can export the Telerik UI for ASP.NET MVC Map to a Document Format (PDF), Scalable Vector Graphics (SVG), and Portable Network Graphics (PNG) file format by using the Kendo UI Drawing graphics library.
You can also save all file formats through the Kendo UI saveAs() client-side method.
Exporting to PDF
To export the Map to a PDF format document, use the exportPdf() client-side method provided by the Kendo UI Drawing library.
@{
var coordinates = new double[] { 30.268107, -97.744821 };
}
<div class="configurator">
<div class="header">Export options</div>
<div class="box-col">
<button class='export-pdf'>Export as PDF</button>
</div>
</div>
@(Html.Kendo().Map()
.Name("map")
.Center(30.2681, -97.7448)
.Zoom(3)
.Layers(layers =>
{
layers.Add()
.Style(style => style.Fill(fill => fill.Opacity(0.7)))
.Type(MapLayerType.Shape)
.DataSource(dataSource => dataSource
.GeoJson()
.Read(read => read.Url(Url.Content("~/shared/dataviz/map/countries-users.geo.json")))
);
})
)
<!-- Load Pako ZLIB library to enable PDF compression -->
<script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>
<script>
$(document).ready( function () {
$(".export-pdf").click(function () {
// Convert the DOM element to a drawing by using kendo.drawing.drawDOM.
kendo.drawing.drawDOM($("#map"))
.then(function (group) {
// Render the result as a PDF file.
return kendo.drawing.exportPDF(group, {
paperSize: "auto",
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
});
})
.done(function (data) {
// Save the PDF file.
kendo.saveAs({
dataURI: data,
fileName: "Map.pdf",
proxyURL: "@Url.Action("Export_Save", "Map")"
});
});
});
});
</script>
Exporting to SVG
To export the Map to an SVG format document, use the exportSvg() client-side method provided by the Kendo UI Drawing library.
@{
var coordinates = new double[] { 30.268107, -97.744821 };
}
<div class="configurator">
<div class="header">Export options</div>
<div class="box-col">
<button class='export-svg'>Export as SVG</button>
</div>
</div>
@(Html.Kendo().Map()
.Name("map")
.Center(30.2681, -97.7448)
.Zoom(3)
.Layers(layers =>
{
layers.Add()
.Style(style => style.Fill(fill => fill.Opacity(0.7)))
.Type(MapLayerType.Shape)
.DataSource(dataSource => dataSource
.GeoJson()
.Read(read => read.Url(Url.Content("~/shared/dataviz/map/countries-users.geo.json")))
);
})
)
<script>
$(document).ready( function () {
$(".export-svg").click(function () {
// Convert the DOM element to a drawing by using kendo.drawing.drawDOM.
kendo.drawing.drawDOM($("#map"))
.then(function (group) {
// Render the result as an SVG document.
return kendo.drawing.exportSVG(group);
})
.done(function (data) {
// Save the SVG document.
kendo.saveAs({
dataURI: data,
fileName: "Map.svg",
proxyURL: "@Url.Action("Export_Save", "Map")"
});
});
});
});
</script>
Exporting to PNG
To export the Map to a PNG format document, use the exportPNG() client-side method provided by the Kendo UI Drawing library.
@{
var coordinates = new double[] { 30.268107, -97.744821 };
}
<div class="configurator">
<div class="header">Export options</div>
<div class="box-col">
<button class='export-img'>Export as Image</button>
</div>
</div>
@(Html.Kendo().Map()
.Name("map")
.Center(30.2681, -97.7448)
.Zoom(3)
.Layers(layers =>
{
layers.Add()
.Style(style => style.Fill(fill => fill.Opacity(0.7)))
.Type(MapLayerType.Shape)
.DataSource(dataSource => dataSource
.GeoJson()
.Read(read => read.Url(Url.Content("~/shared/dataviz/map/countries-users.geo.json")))
);
})
)
<script>
$(document).ready( function () {
$(".export-img").click(function () {
// Convert the DOM element to a drawing by using kendo.drawing.drawDOM.
kendo.drawing.drawDOM($("#map"))
.then(function (group) {
// Render the result as a PNG image.
return kendo.drawing.exportImage(group);
})
.done(function (data) {
// Save the image file.
kendo.saveAs({
dataURI: data,
fileName: "Map.png",
proxyURL: "@Url.Action("Export_Save", "Map")"
});
});
});
});
</script>