Initial map size can only be read from inline styles

[Evan Sheffield]

I noticed that when exporting my map with the "Current Size" option, the resulting PNG was larger than the size of the map container. I determined that this was happening because my height and width were set in a CSS file rather than in the inline styles of the map container, and leaflet-easyPrint only seems to read from inline styles in determining original map size (e.g. https://github.com/rowanwins/leaflet-easyPrint/blob/gh-pages/src/index.js#L89).

I think it would be appropriate to use computed styles instead of the style attribute so that dimensions specified in CSS files are respected. If you agree, I would be more than happy to put together a PR for this. If not, I think it would be helpful to document in the README the fact that height and width must be defined inline.

Thanks! I look forward to hearing your thoughts.

[Rowan Winsemius]

Hmmm yes I should probably use map.getSize(), I suspect that's a bit safer.

[Aidas Klimas]

Same problem, would be great to be fixed.

[Greg Allensworth]

Thank you @evsheffield for mentioning this. I have a problem with printMap() and this Issue was a key to my working around it.

Issue: I have a map inside a much larger page, and need a custom print trigger (an external button). The prints do work, but are on a really large canvas with a whole lot of empty space around the map.

Workaround: My custom trigger sets some inline style on the #mapre-asserting the width and height in px instead of the CSS stylesheet which sets it in percentages and vh, before calling printMap() The resulting prints now come out the right size every time.

So yeah, some sort of issue when the map isn't sized with inline styles and px units... but easy to work around now that I know.

[Benjamin]

I'll simply add this ... it wasn't the perfect solution but it did the trick. I still had 50px of "blank" height at the top of my image representing the header.

_printOpertion: function(t) {
  var e = this,
    o = map.getSize().x + "px"; // fixed width here 
var oo = map.getSize().y  + "px"; // fixed height here which (see below)
  (this.originalState.widthWasAuto && "CurrentSize" === t || this.originalState.widthWasPercentage && "CurrentSize" === t) && (o = this.originalState.mapWidth), n.toPng(e.mapContainer, {
    width: parseInt(o),
    height: parseInt(oo), // fixed height here
cacheBust: true
  }).then(function(t) {
    var n = e._dataURItoBlob(t);
    e.options.exportOnly ? i.saveAs(n, e.options.filename + ".png") : e._sendToBrowserPrint(t, e.orientation), 
e._toggleControls(!0), 
e.outerContainer && (e.originalState.widthWasAuto ? e.mapContainer.style.width = "auto" : e.originalState.widthWasPercentage ? e.mapContainer.style.width = e.originalState.percentageWidth : e.mapContainer.style.width = e.originalState.mapWidth, e.mapContainer.style.height = e.originalState.mapHeight, e._removeOuterContainer(e.mapContainer, e.outerContainer, e.blankDiv), e._map.invalidateSize(), e._map.setView(e.originalState.center), e._map.setZoom(e.originalState.zoom)), 
e._map.fire("easyPrint-finished")
  }).catch(function(t) {
    console.error("Print operation failed", t)
  })