report - GeoSmartCity-CIP/gsc-client GitHub Wiki

###Report The "Report" module be part of gsc-client. Its basic functionality provides the choice of printing a report with an image map taken from the screen.

##Dependencies Library supporting work with PDF— jsPDF is required in addition to “standard” libraries jQuery, OpenLayers 3.15 or higher (“Refresh” method of Layer object must be implemented).

##API The component has no user interface. It is responsibility of user create an interface to determine paper size, orientation, quality, etc., if needed. After print task is launched, underlying map makes a blink. This is because the component resizes the map to calculate size necessary according to the quality and the paper size indicated.

This functionality is available on GitHub at src/report/report.js.

##Examples ###Exapmle 1 A simple report in A3 landscape

var report = new gsc.Report(gsc.map,gsc.ReportConst.Formats.A3_landscape)
report.Print(); 

Or changing the paper size before printing (A4 portrait and 150 dpi’s)

var report = new gsc.Report(gsc.map)
report.Print(gsc.ReportConst.Formats.A4_portrait, 150); 

###Example 2 A full example, adding title and logo to final report and adding the HTML content of a DOM object. The logo is on the upper right corner and the title is on top centre of report

var print = new gsc.Report(gsc.map, gsc.ReportConst.Formats.A3_landscape, 150,
   {
      content:[
        { 
           type: gsc.ReportConst.ObjectType.Image,
           data: 'logoAyto.png', /*Or base64*/
           vAlign:gsc.ReportConst.VerticalAlign.Top,
           hAlign:gsc.ReportConst.HorizontalAlign.Left
        },{
           type: gsc.ReportConst.ObjectType.Text,
           data: 'Title',
           vAlign:gsc.ReportConst.VerticalAlign.Top,
           hAlign:gsc.ReportConst.HorizontalAlign.Center,
           size:26
        }],
      HTML:[{
           data: document.getElementById("data"),
           position:gsc.ReportConst.HTMLPosition.AfterMap
        }]
   });

Example of output produced by the module is in the next figure

The full code of the example can be found here.