0

I am developing a portal in which map is shown & export it to pdf.

enter image description here

but i want to give such functionality that user select the scale and then map is fitted to that given scale then export it to pdf as like shown in the picture below

enter image description here

may any one help me to creat such user input scale functionality..

this is my code to export in 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) {
        console.log("hi");
  if (exportElement.className.indexOf('disabled') > -1) {
    return;
  }
  exportElement.className += ' disabled';

  var format = document.getElementById('format').value;
  var resolution = document.getElementById('resolution').value;
  var buttonLabelElement = document.getElementById('button-label');
  var label = buttonLabelElement.innerText;
  var dim = dims[format];
  var width = Math.round(dim[0] * resolution / 25.4);
  var height = Math.round(dim[1] * resolution / 25.4);
  var size = /** @type {ol.Size} */ (map.getSize());
  var extent = map.getView().calculateExtent(size);

  map.once('postcompose', function(event) {
    //var tileQueue = map.getTileQueue();

    // To prevent potential unexpected division-by-zero
    // behaviour, tileTotalCount must be larger than 0.

    //var tileTotalCount = tileQueue.getCount() || 1;
    var interval;
    interval = setInterval(function() {
      //var tileCount = tileQueue.getCount();
      //var ratio = 1 - tileCount / tileTotalCount;
      //buttonLabelElement.innerText = ' ' + (100 * ratio).toFixed(1) + '%';
      //if (ratio == 1 && !tileQueue.getTilesLoading()) {
        clearInterval(interval);
        buttonLabelElement.innerText = label;
        var canvas = event.context.canvas;
        var data = canvas.toDataURL('image/jpeg');
        var pdf = new jsPDF('landscape', undefined, format);
        pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
        pdf.save('map.pdf');
        map.setSize(size);
        map.getView().fit(extent, size);
        map.renderSync();
        exportElement.className =
            exportElement.className.replace(' disabled', '');
     // }
    }, 100);
  });

  map.setSize([width, height]);
  map.getView().fit(extent, /** @type {ol.Size} */ (map.getSize()));
  map.renderSync();

}, false);

but how to fix 1:4000 scale in it.

any help would be highly appriciated.

Your Answer

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

Browse other questions tagged or ask your own question.