Skip to content

Commit a5d5fd3

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent d6a493b commit a5d5fd3

File tree

7 files changed

+900
-101
lines changed

7 files changed

+900
-101
lines changed

‎docs-aspnet/html-helpers/diagrams-and-maps/map/export.md

Lines changed: 352 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,352 @@
1+
---
2+
title: Export
3+
page_title: Exporting the Map to PDF, SVG, and PNG
4+
description: "Configure the export functionality of the Telerik UI Map component for {{ site.framework }} and print out its content to PDF, SVG, and PNG formats by using the available configurations of the Kendo UI Drawing graphics library."
5+
slug: export_map_aspnetcore
6+
position: 2
7+
---
8+
9+
# Export
10+
11+
You can export the Telerik UI for {{ site.framework }} 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](https://docs.telerik.com/kendo-ui/framework/drawing/overview).
12+
13+
You can also save all file formats through the Kendo UI [`saveAs()`](https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/saveas) client-side method.
14+
15+
## Exporting to PDF
16+
17+
To export the Map to a PDF format document, use the [`exportPdf()`](https://docs.telerik.com/kendo-ui/api/javascript/drawing/methods/exportpdf) client-side method provided by the Kendo UI Drawing library.
18+
19+
```HtmlHelper
20+
@{
21+
var coordinates = new double[] { 30.268107, -97.744821 };
22+
}
23+
24+
<div class="configurator">
25+
<div class="header">Export options</div>
26+
<div class="box-col">
27+
<button class='export-pdf'>Export as PDF</button>
28+
</div>
29+
</div>
30+
31+
@(Html.Kendo().Map()
32+
.Name("map")
33+
.Center(30.2681, -97.7448)
34+
.Zoom(3)
35+
.Layers(layers =>
36+
{
37+
layers.Add()
38+
.Style(style => style.Fill(fill => fill.Opacity(0.7)))
39+
.Type(MapLayerType.Shape)
40+
.DataSource(dataSource => dataSource
41+
.GeoJson()
42+
.Read(read => read.Url(Url.Content("~/shared/dataviz/map/countries-users.geo.json")))
43+
);
44+
})
45+
)
46+
47+
<!-- Load Pako ZLIB library to enable PDF compression -->
48+
<script src="@Url.Content("~/shared/pako.min.js")"></script>
49+
50+
<script>
51+
$(document).ready( function () {
52+
$(".export-pdf").click(function () {
53+
// Convert the DOM element to a drawing by using kendo.drawing.drawDOM.
54+
kendo.drawing.drawDOM($("#map"))
55+
.then(function (group) {
56+
// Render the result as a PDF file.
57+
return kendo.drawing.exportPDF(group, {
58+
paperSize: "auto",
59+
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
60+
});
61+
})
62+
.done(function (data) {
63+
// Save the PDF file.
64+
kendo.saveAs({
65+
dataURI: data,
66+
fileName: "Map.pdf",
67+
proxyURL: "@Url.Action("Export_Save", "Map")"
68+
});
69+
});
70+
});
71+
});
72+
</script>
73+
```
74+
{% if site.core %}
75+
```TagHelper
76+
@{
77+
var coordinates = new double[] { 30.268107, -97.744821 };
78+
}
79+
80+
<div class="configurator">
81+
<div class="header">Export options</div>
82+
<div class="box-col">
83+
<button class='export-pdf'>Export as PDF</button>
84+
</div>
85+
</div>
86+
87+
<kendo-map name="map" center="coordinates" zoom="3">
88+
<layers>
89+
<layer type="MapLayerType.Shape">
90+
<map-style>
91+
<fill opacity="0.7" />
92+
</map-style>
93+
<datasource custom-type="geojson">
94+
<transport>
95+
<read url="@Url.Content("~/shared/dataviz/map/countries-users.geo.json")" />
96+
</transport>
97+
</datasource>
98+
</layer>
99+
</layers>
100+
</kendo-map>
101+
102+
<!-- Load Pako ZLIB library to enable PDF compression -->
103+
<script src="@Url.Content("~/shared/pako.min.js")"></script>
104+
105+
<script>
106+
$(document).ready( function () {
107+
$(".export-pdf").click(function () {
108+
// Convert the DOM element to a drawing by using kendo.drawing.drawDOM.
109+
kendo.drawing.drawDOM($("#map"))
110+
.then(function (group) {
111+
// Render the result as a PDF file.
112+
return kendo.drawing.exportPDF(group, {
113+
paperSize: "auto",
114+
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
115+
});
116+
})
117+
.done(function (data) {
118+
// Save the PDF file.
119+
kendo.saveAs({
120+
dataURI: data,
121+
fileName: "Map.pdf",
122+
proxyURL: "@Url.Action("Export_Save", "Map")"
123+
});
124+
});
125+
});
126+
});
127+
</script>
128+
```
129+
{% endif %}
130+
131+
## Exporting to SVG
132+
133+
To export the Map to an SVG format document, use the [`exportSvg()`](https://docs.telerik.com/kendo-ui/api/javascript/drawing/methods/exportsvg) client-side method provided by the Kendo UI Drawing library.
134+
135+
```HtmlHelper
136+
@{
137+
var coordinates = new double[] { 30.268107, -97.744821 };
138+
}
139+
140+
<div class="configurator">
141+
<div class="header">Export options</div>
142+
<div class="box-col">
143+
<button class='export-svg'>Export as SVG</button>
144+
</div>
145+
</div>
146+
147+
@(Html.Kendo().Map()
148+
.Name("map")
149+
.Center(30.2681, -97.7448)
150+
.Zoom(3)
151+
.Layers(layers =>
152+
{
153+
layers.Add()
154+
.Style(style => style.Fill(fill => fill.Opacity(0.7)))
155+
.Type(MapLayerType.Shape)
156+
.DataSource(dataSource => dataSource
157+
.GeoJson()
158+
.Read(read => read.Url(Url.Content("~/shared/dataviz/map/countries-users.geo.json")))
159+
);
160+
})
161+
)
162+
163+
<script>
164+
$(document).ready( function () {
165+
166+
$(".export-svg").click(function () {
167+
// Convert the DOM element to a drawing by using kendo.drawing.drawDOM.
168+
kendo.drawing.drawDOM($("#map"))
169+
.then(function (group) {
170+
// Render the result as an SVG document.
171+
return kendo.drawing.exportSVG(group);
172+
})
173+
.done(function (data) {
174+
// Save the SVG document.
175+
kendo.saveAs({
176+
dataURI: data,
177+
fileName: "Map.svg",
178+
proxyURL: "@Url.Action("Export_Save", "Map")"
179+
});
180+
});
181+
});
182+
183+
});
184+
</script>
185+
```
186+
{% if site.core %}
187+
```TagHelper
188+
@{
189+
var coordinates = new double[] { 30.268107, -97.744821 };
190+
}
191+
192+
<div class="configurator">
193+
<div class="header">Export options</div>
194+
<div class="box-col">
195+
<button class='export-svg'>Export as SVG</button>
196+
</div>
197+
</div>
198+
199+
200+
<kendo-map name="map" center="coordinates" zoom="3">
201+
<layers>
202+
<layer type="MapLayerType.Shape">
203+
<map-style>
204+
<fill opacity="0.7" />
205+
</map-style>
206+
<datasource custom-type="geojson">
207+
<transport>
208+
<read url="@Url.Content("~/shared/dataviz/map/countries-users.geo.json")" />
209+
</transport>
210+
</datasource>
211+
</layer>
212+
</layers>
213+
</kendo-map>
214+
215+
<script>
216+
$(document).ready( function () {
217+
218+
$(".export-svg").click(function () {
219+
// Convert the DOM element to a drawing by using kendo.drawing.drawDOM.
220+
kendo.drawing.drawDOM($("#map"))
221+
.then(function (group) {
222+
// Render the result as a SVG document.
223+
return kendo.drawing.exportSVG(group);
224+
})
225+
.done(function (data) {
226+
// Save the SVG document.
227+
kendo.saveAs({
228+
dataURI: data,
229+
fileName: "Map.svg",
230+
proxyURL: "@Url.Action("Export_Save", "Map")"
231+
});
232+
});
233+
});
234+
235+
});
236+
</script>
237+
```
238+
{% endif %}
239+
240+
## Exporting to PNG
241+
242+
To export the Map to a PNG format document, use the [`exportPNG()`](https://docs.telerik.com/kendo-ui/api/javascript/drawing/methods/exportsvg) client-side method provided by the Kendo UI Drawing library.
243+
244+
```HtmlHelper
245+
@{
246+
var coordinates = new double[] { 30.268107, -97.744821 };
247+
}
248+
249+
<div class="configurator">
250+
<div class="header">Export options</div>
251+
<div class="box-col">
252+
<button class='export-img'>Export as Image</button>
253+
</div>
254+
</div>
255+
256+
@(Html.Kendo().Map()
257+
.Name("map")
258+
.Center(30.2681, -97.7448)
259+
.Zoom(3)
260+
.Layers(layers =>
261+
{
262+
layers.Add()
263+
.Style(style => style.Fill(fill => fill.Opacity(0.7)))
264+
.Type(MapLayerType.Shape)
265+
.DataSource(dataSource => dataSource
266+
.GeoJson()
267+
.Read(read => read.Url(Url.Content("~/shared/dataviz/map/countries-users.geo.json")))
268+
);
269+
})
270+
)
271+
272+
<script>
273+
$(document).ready( function () {
274+
275+
$(".export-img").click(function () {
276+
// Convert the DOM element to a drawing by using kendo.drawing.drawDOM.
277+
kendo.drawing.drawDOM($("#map"))
278+
.then(function (group) {
279+
// Render the result as a PNG image.
280+
return kendo.drawing.exportImage(group);
281+
})
282+
.done(function (data) {
283+
// Save the image file.
284+
kendo.saveAs({
285+
dataURI: data,
286+
fileName: "Map.png",
287+
proxyURL: "@Url.Action("Export_Save", "Map")"
288+
});
289+
});
290+
});
291+
292+
});
293+
</script>
294+
```
295+
{% if site.core %}
296+
```TagHelper
297+
@{
298+
var coordinates = new double[] { 30.268107, -97.744821 };
299+
}
300+
301+
<div class="configurator">
302+
<div class="header">Export options</div>
303+
<div class="box-col">
304+
<button class='export-img'>Export as Image</button>
305+
</div>
306+
</div>
307+
308+
309+
<kendo-map name="map" center="coordinates" zoom="3">
310+
<layers>
311+
<layer type="MapLayerType.Shape">
312+
<map-style>
313+
<fill opacity="0.7" />
314+
</map-style>
315+
<datasource custom-type="geojson">
316+
<transport>
317+
<read url="@Url.Content("~/shared/dataviz/map/countries-users.geo.json")" />
318+
</transport>
319+
</datasource>
320+
</layer>
321+
</layers>
322+
</kendo-map>
323+
324+
<script>
325+
$(document).ready( function () {
326+
327+
$(".export-img").click(function () {
328+
// Convert the DOM element to a drawing by using kendo.drawing.drawDOM.
329+
kendo.drawing.drawDOM($("#map"))
330+
.then(function (group) {
331+
// Render the result as a PNG image.
332+
return kendo.drawing.exportImage(group);
333+
})
334+
.done(function (data) {
335+
// Save the image file.
336+
kendo.saveAs({
337+
dataURI: data,
338+
fileName: "Map.png",
339+
proxyURL: "@Url.Action("Export_Save", "Map")"
340+
});
341+
});
342+
});
343+
344+
});
345+
</script>
346+
```
347+
{% endif %}
348+
349+
## See Also
350+
351+
* [Exporting the Map HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/map/export)
352+
* [Server-Side API of the Map for {{ site.framework }}](/api/map)

‎docs-aspnet/html-helpers/diagrams-and-maps/map/overview.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Overview
3-
page_title: Overview
3+
page_title: Map Overview
44
description: "Learn the basics when working with the Telerik UI Map component for {{ site.framework }}."
55
previous_url: /helpers/html-helpers/map, /helpers/diagrams-and-maps/map/overview
66
slug: htmlhelpers_map_aspnetcore
@@ -222,4 +222,4 @@ For a complete example on basic Map events, refer to the [demo on using the even
222222
{% if site.core %}
223223
* [Basic Usage of the Map TagHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/map/tag-helper)
224224
{% endif %}
225-
* [Server-Side API](/api/map)
225+
* [Server-Side API of the Map for {{ site.framework }}](/api/map)

0 commit comments

Comments
 (0)