Here is my code that displays wms image on map.

filter="VILL_NAME" + "=" + "'" +cad+ "'"+ " AND TEH_NAME" + "=" +"'" +tahsil+ "'"+ " AND DIST_NAME" + "=" +"'" +dist+ "'";
          cadLayer =new ol.layer.Image({
                    name: 'Cad layer',
              source: new ol.source.ImageWMS({
                   ratio: 1,
                url: 'http://localhost:8080/geoserver/wms',
                params: {
                    'LAYERS': 'soil_health:RAIPUR_CAD_WITH_VILL_NAME_WGS84',
                    'VERSION': '1.1.1',
                    'FORMAT': 'image/png',
                    'TRANSPARENT': true,
                    'TILED': true,

                serverType: 'geoserver'                                            

and here is my code to export map to pdf.

var dims = {
  a0: [1189, 841],
  a1: [841, 594],
  a2: [594, 420],
  a3: [420, 297],
  a4: [297, 210],
  a5: [210, 148]

  var exportElement =  document.getElementById("export-pdf");
  exportElement.addEventListener('click', function(e) {

        exportElement.disabled = true;
        document.body.style.cursor = 'progress';

  var format = document.getElementById('format').value;
  var resolution = document.getElementById('resolution').value;
  var buttonLabelElement = document.getElementById('button-label');
  var label = buttonLabelElement.innerText;
 var scale = 4000;

var mapView = map.getView();
var mapProjection = mapView.getProjection();
var mapResolutionAtEquator = mapView.getResolution();
var viewCenter = mapView.getCenter();
var mapPointResolution = ol.proj.getPointResolution(mapProjection, mapResolutionAtEquator, viewCenter);

var dim = dims[format];
var width = Math.round(dim[0] * resolution / 25.4);
var height = Math.round(dim[1] * resolution / 25.4);
var size = map.getSize();
var extent = map.getView().calculateExtent(size);

var mapView = map.getView();
var mapProjection = mapView.getProjection();
var mapResolutionAtEquator = mapView.getResolution();
var viewCenter = mapView.getCenter();
var mapResolutionAtEquator = mapView.getResolution();
var mapPointResolution = ol.proj.getPointResolution(mapProjection, mapResolutionAtEquator, viewCenter);
var mapResolutionFactor = mapResolutionAtEquator / mapPointResolution;
var pdf_name = dist + "_" + tahsil + "_"+village+ ".pdf";
map.once('rendercomplete', function(event) {

               // WriteLegendtoCanvas(event);
     buttonLabelElement.innerText = label;
      var canvas = event.context.canvas;
      /* event.context.textAlign = 'left';
        event.context.fillText('© My Copyright Text', canvas.width - 5, canvas.height - 5);*/
      var data = canvas.toDataURL('image/jpeg');
      var pdf = new jsPDF('landscape', undefined, format);
      pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
      map.getView().fit(extent, size);
      exportElement.disabled = false;
          document.body.style.cursor = 'auto';

var printPointResolution = (scale * 25.4) /(resolution * 1000); 
var printResolutionAtEquator = mapResolutionFactor * printPointResolution;
var printZoom = mapView.getZoomForResolution(printResolutionAtEquator);        

map.setSize([width, height]);

}, false);

but when i open pdf my map is ok but text labeling is blur up to some extent. It is not clear up to the mark.

enter image description here

here i add sld or style for this layer in geoserver when i publish the map.Here is my sld code.

<?xml version="1.0" encoding="UTF-8"?>
<StyledLayerDescriptor version="1.0.0" 
 xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" 

  <!-- a Named Layer is the basic building block of an SLD document -->
    <!-- Styles can have names, titles and abstracts -->
      <Title>Default Polygon</Title>
      <Abstract>A sample style that draws a polygon</Abstract>
      <!-- FeatureTypeStyles describe how to render different features -->
      <!-- A FeatureTypeStyle for rendering polygons -->
          <Title>Gray Polygon with Black Outline</Title>
          <Abstract>A polygon with a gray fill and a 1 pixel black outline</Abstract>
              <CssParameter name="fill"></CssParameter>
              <CssParameter name="stroke">#000000</CssParameter>
              <CssParameter name="stroke-width">0.5</CssParameter>

           <CssParameter name="fill">#FF0000</CssParameter>

Can anyone tell why text labelling is blur here.

  • 1
    At what resolution are you exporting to PDF? – TomazicM Mar 14 at 7:28
  • A0, 70dpi as welll as A0, 150dpi...but is is vrey slow. – sanju verma Mar 14 at 8:08
  • how are you specifying the dpi to geoserver? – Ian Turton Mar 14 at 8:10
  • pragmatically i am doing this A0, 70dpi as welll as A0, 150dpi..i am not specifying dpi for geoserver. – sanju verma Mar 14 at 8:13
  • why not just request the map as a pdf? Then it would be a vector file and would scale to page size – Ian Turton Mar 14 at 11:33

To get GeoServer to produce images at any DPI other than the OGC standard of 90dpi you need to tell GeoServer what you would like. This is done using the format_options parameter.

dpi: sets the rendering DPI (dots-per-inch) for raster outputs. The OGC standard output resolution is 90 DPI. If you need to create high resolution images (e.g for printing) it is advisable to request a larger image size and specify a higher DPI. In general, the image size should be increased by a factor equal to targetDPI/90, with the target dpi set in the format options. For example, to print a 100x100 image at 300 DPI request a 333x333 image with the DPI value set to 300: &width=333&height=333&format_options=dpi:300

  • map is showing perfectly all right on web but when i export it to pdf then it is getting blur in pdf. – sanju verma Mar 14 at 9:49
  • exactly - when you view it on web you are using 90dpi, in the printer it is probably more like 300dpi so 90 dpi text looks blury – Ian Turton Mar 14 at 9:55
  • still text labeling is blur in pdf. I just add format option as dpi:200 in WMS layer parameter. – sanju verma Mar 14 at 11:12
  • did you increase the size of the image too? – Ian Turton Mar 14 at 11:26
  • size of image is adjusted like a0: [1189, 841], a1: [841, 594], a2: [594, 420], a3: [420, 297], a4: [297, 210], a5: [210, 148] – sanju verma Mar 14 at 11:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.