How to export maps with legends to PDF?

2 mins read

You can export the secondary elements of maps using Syncfusion PDF libraries. To export the maps with secondary elements, draw the map SVG element into canvas element, and then export it to PDF. Here, the legend is rendered as a canvas image element and then exported to PDF.

Follow the below steps to export the maps with legend:

Step 1: Create maps with a legend sample.

@(Html.EJ().Map("container")

.Layers(lr =>

{

.LegendSettings(ls =>

{

ls.ShowLegend(true)

})

.ShapeSettings(ss =>

{

ss.ValuePath("population")

.RangeColorMappings(cm =>

{

cm.From(10000001).To(40000000).GradientColors(new List<string> { "#F1ECD8", "#DEE2B9" }).Add();

cm.From(5000001).To(10000000).GradientColors(new List<string> { "#DEE2B9", "#CBD89A" }).Add();

});

})

.ShapeData(_USA_PopulationData).Add();

})

)

Step 2: Create the canvas element and use it for drawing the SVG element.

[Index.cshtml]

Canvas element used for drawing the svg element

</canvas>

$("#pdf").click(function () {

var canvas = document.getElementById('canvas1');

var ctx = canvas.getContext('2d');

var DOMURL = window.URL || window.webkitURL || window;

$("#svgDocument").attr("xmlns", "http://www.w3.org/2000/svg");

var data = document.getElementById('svgDocument').outerHTML;

var img = new Image();

var svg = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });

var url = DOMURL.createObjectURL(svg);

img.src = url;

Drawn the svg element into canvas element

img.onload = function () {

ctx.drawImage(img, 20, 20, 600, 400);

DOMURL.revokeObjectURL(url);

}

Step 3: Get the legend elements, and then pass data to server by appending in form.

//Passing the data to server by appending in form

setTimeout(function () {

var canvas = document.getElementById('canvas1');

var dataUrl = canvas.toDataURL();

var mapEle = document.getElementById('container');

// Getting the legend elements here

var canvasEle = mapEle.getElementsByTagName('canvas');

var attr, form, input1, data;

//...

// Appending individual legend element to form

for (var i = 0; i < canvasEle.length; i++) {

var leg1 = canvasEle[i];

var dataUrl2 = leg1.toDataURL();

var data2 = { name: 'Data'+(i+1), type: 'hidden', value: dataUrl2 };

var input2 = ej.buildTag('input', "", null, data2);

form.append(input2);

}

$('body').append(form);

form.submit();

}, 2000);

return true;

});

Step 4: Draw the individual elements into PDF.

[HomeController.cs]

public void ExportChart()

{

string Data = System.Web.HttpContext.Current.Request.Params["Data"];

Data = Data.Remove(0, Data.IndexOf(',') + 1);

//...

MemoryStream stream = new MemoryStream(Convert.FromBase64String(Data));

//...

PdfDocument pdfDoc = new PdfDocument();

// Draw the individual elements into pdf

pdfDoc.Pages[0].Graphics.DrawImage(PdfImage.FromStream(stream), new RectangleF(10,2,550,450));

//...

pdfDoc.Save("Map" + ".pdf", System.Web.HttpContext.Current.Response, HttpReadType.Save);

pdfDoc.Close();

}

Sample link: Export-map-with-legend

Did you find this information helpful?

Yes

Comments (0)

How to export maps with legends to PDF?

Access denied