HSLayers.Printer

HSLayers.Printer() is another Ext.Panel with special functionality. When the panel is activated, it will draw paper on the map. You can set several options and let the map be printed.

HSLayers.Print.printerUrl has to be set, which will point you to the printing script http://redmine.ccss.cz/projects/hsprinter

See working printing example.

1
2
3
4
5
6
        <script type="text/javascript" src="http://hslayers.org/lib/source/HSLayers.js"></script>
        <script type="text/javascript" src="http://hslayers.org/lib/source/HSLayers/Util.js"></script>
        <script type="text/javascript" src="http://hslayers.org/lib/source/HSLayers/Format/PrinterContext.js"></script>
        <script type="text/javascript" src="http://hslayers.org/lib/source/HSLayers/Print/Printer.js"></script>
        <script type="text/javascript" src="http://hslayers.org/lib/source/HSLayers/Print/PrintDialog.js"></script>
        <script type="text/javascript" src="http://hslayers.org/lib/source/HSLayers/Print/PrintForm.js"></script>

The PrinterDialog is derived from Ext.Panel.

Don’t forget to set all necessary variables

1
2
            OpenLayers.ProxyHost = "/cgi-bin/olproxy.cgi?url=";
            HSLayers.Print.printerUrl = "/hsprinter/print";

Define the printing dialog with templates

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
            dialog = new HSLayers.Print.PrintDialog({
                width: 400,
                printResolution: 200,
                renderTo: Ext.get("printer"),
                printTemplates: [
                    ["landscapeA4.html", "html", "A4 "+OpenLayers.i18n("landscape")+" (HTML)",[1058,566]],
                    ["landscapeA4.html", "pdf", "A4 "+OpenLayers.i18n("landscape")+" (PDF)",[1058,566]],

                    ["landscapeA3.html", "html", "A3 "+OpenLayers.i18n("landscape")+" (HTML)",[1400,850]],
                    ["landscapeA3.html", "pdf", "A3 "+OpenLayers.i18n("landscape")+" (PDF)",[1400,850]],

                    ["portraitA4.html", "html", "A4 "+OpenLayers.i18n("portrait")+" (HTML)",[700,850]],
                    ["portraitA4.html", "pdf", "A4 "+OpenLayers.i18n("portrait")+" (PDF)",[700,850]],

                    ["portraitA3.html", "html", "A3 "+OpenLayers.i18n("portrait")+" (HTML)",[1058,1325]],
                    ["portraitA3.html", "pdf", "A3 "+OpenLayers.i18n("portrait")+" (PDF)",[1058,1325]]
                ],
                closeAction: "hide"
            });
            dialog.setMap(map);

HSLayers will send content of current map to the server. Server will render resulting image (using UMN MapServer), render the given template with the result, and send it back to the user.

Printing Templates

The templates are simple HTML pages, which can have following []-marked tags:

  • title – map tittle
  • attribution – attribution and copyright informations for all layres
  • legend – legend for all layres
  • mapImg – where the map image will be placed
  • scale – scale number
  • scaleimg – scale image
  • left – map extent left coordinate
  • bottom – map extent bottom coordinate
  • top – map extent top coordinate
  • right – map extent right coordinate
  • referencemap – image with reference map
  • text – some free text

For Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
    <body>
        <div id="page1">
            <div class="head">
		<div class="portal_logos">
                    <a href="http://bnhelp.cz/hslayres">
                        <img src="http://bnhelp.cz/wwwlibs/hslayers/hslayers-3.3/doc/hslayers.png" class="portallogo" width="349" height="94" />
                    </a>
		</div>
		<h1>[title]</h1>
            </div>
            <div id="map">
                <img id="mapContainer" src="[mapImage]" width="1058" height="566" />
            </div>
            <div id="attribution">
		<div id="scaleimg">
			[scale] <br />
			<img src="[scaleimg]" />
		</div>
                Attribution: <br /> [attribution]
            </div>
        </div>

        <div style="clear:both"> </div>

        <div id="page2">
            <div class="head">
		<div class="portal_logos">
                    <img src="http://bnhelp.cz/wwwlibs/hslayers/hslayers-3.3/doc/hslayers.png" class="portallogo" width="349" height="94" />
		</div>
		<h1>[title]</h1>
            </div>
            <div id="otherContainer">
		<div id="text">
			[text]
		</div>
		<div id="reference">
			<img src="[referencemap]" />
		</div>
	    </div>
            <div id="legendContainer" >
		[legend]
	    </div>
        </div>
    </body>

Main Menu


Table Of Contents

Previous topic

HSLayers.OWS

Next topic

HSLayers.Control.LayerSwitcher

This Page