width undefined when using "printMap(size, filename)"

[barbalex]

The output in the console is:

    proxyConsole.js:56 oops, something went wrong! TypeError: Cannot read property 'width' of undefined
        at NewClass._resizeAndPrintMap (bundle.js:1)
        at bundle.js:1
        at <anonymous>
    __stack_frame_overlay_proxy_console__ @ proxyConsole.js:56
    (anonymous) @ bundle.js:1
    Promise rejected (async)
    _createImagePlaceholder @ bundle.js:1
    printMap @ bundle.js:1
    (anonymous) @ PrintControl.js:42
    (anonymous) @ withHandlers.js:92
    ./node_modules/react-dom/lib/ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:69
    executeDispatch @ EventPluginUtils.js:85
    executeDispatchesInOrder @ EventPluginUtils.js:108
    executeDispatchesAndRelease @ EventPluginHub.js:43
    executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:54
    forEachAccumulated @ forEachAccumulated.js:24
    processEventQueue @ EventPluginHub.js:254
    runEventQueueInBatch @ ReactEventEmitterMixin.js:17
    handleTopLevel @ ReactEventEmitterMixin.js:27
    handleTopLevelImpl @ ReactEventListener.js:72
    perform @ Transaction.js:143
    batchedUpdates @ ReactDefaultBatchingStrategy.js:62
    batchedUpdates @ ReactUpdates.js:97
    dispatchEvent @ ReactEventListener.js:147

My component is:

    import React, { Component } from 'react'
    import PropTypes from 'prop-types'
    import 'leaflet'
    import 'leaflet-easyprint'
    import Control from 'react-leaflet-control'
    import FontIcon from 'material-ui/FontIcon'
    import styled from 'styled-components'
    import compose from 'recompose/compose'
    import withState from 'recompose/withState'
    import withHandlers from 'recompose/withHandlers'
    import getContext from 'recompose/getContext'
    import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
    import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme'
    import getMuiTheme from 'material-ui/styles/getMuiTheme'

    const StyledButton = styled.button`
      background-color: white;
      width: 47px;
      height: 47px;
      border-radius: 5px;
      border: 2px solid rgba(0, 0, 0, 0.2);
      background-clip: padding-box;
      span {
        color: rgba(0, 0, 0, 0.54) !important;
      }
    `

    const theme = Object.assign({}, darkBaseTheme, {
      appBar: {
        height: 51,
      },
    })

    const enhance = compose(
      getContext({ map: PropTypes.object.isRequired }),
      withState('printPlugin', 'changePrintPlugin', {}),
      withHandlers({
        savePng: props => () => {
          const { printPlugin } = props
          printPlugin.printMap('Current', 'apfloraKarte')
        },
      })
    )

    class PrintControl extends Component {
      props: {
        savePng: () => void,
        printPlugin: object,
        changePrintPlugin: () => void,
      }

      componentDidMount() {
        const { map, changePrintPlugin } = this.props
        const options = {
          hidden: true,
          position: 'topright',
          // sizeModes may not be needed?
          sizeModes: ['Current'],
          exportOnly: true,
          filename: 'apfloraKarte',
        }
        const pp = window.L.easyPrint(options).addTo(map)
        changePrintPlugin(pp)
      }

      render() {
        const { savePng } = this.props

        return (
          <Control position="topright">
            <StyledButton onClick={savePng} title="Karte als png speichern">
              <MuiThemeProvider muiTheme={getMuiTheme(theme)}>
                <FontIcon id="karteAlsPngSpeichern" className="material-icons">
                  file_download
                </FontIcon>
              </MuiThemeProvider>
            </StyledButton>
          </Control>
        )
      }
    }

    export default enhance(PrintControl)

Seems like the same problem as https://github.com/rowanwins/leaflet-easyPrint/issues/32

[barbalex]

I checked the code in http://rowanwins.github.io/leaflet-easyPrint

You use CurrentSize instead of Current in printPlugin.printMap('CurrentSize', 'fileName') there. I tried this in my own code.

Result: the map is now printed :-)

New issue: all the map controls have disappeared after printing. Including the PrintControl :-(

[barbalex]

duh, CurrentSize is actually mentioned in the readme so please excuse my oversight. It is very easy to assume that the same expressions as in options.sizeModes are used

[rowanwins]

Hi @barbalex

I've had a report on the disappearing controls in #38 so I'll get that patched and release a new version.

Yeah unfortunately that naming thing is a bit clunky at the moment, I'll see if I can think of a better way to handle it because it is likely to cause confusion...

[rowanwins]

Give v2.1.7 a gothat should bring the missing controls back :)

[barbalex]

yes, that solves it. Thanks a lot!!!

[jstie]

I have the same issues replicating the simple example from the github-page.

This 'works' (with Leaflet-controls disappearing and reappearing):

`var printPlugin = L.easyPrint({ title: 'My awesome print button', hidden: true, exportOnly: true, }).addTo(map);

$('#map').click(function() { printPlugin.printMap('CurrentSize', 'MyFileName'); }) `

But using 'Current', 'A4Landscape', 'A4Portrait' and self-defined sizes i get:

index.js:141 oops, something went wrong! TypeError: Cannot read property 'width' of undefined at b._resizeAndPrintMap (index.js:151) at index.js:138 at

[sommerbernd]

I see the same problems and errors. Today I had the idea for a workaround.

I hide the controls and use solely two manual print buttons (1 for png, 1 for printer).

E.g. have a look at https://bsommer.de/nsbapps/WoBinIch/index.html . This works with Chrome and Firefox. Not (yet?) with Edge, Firefox, Safari.

Bernd

Von: jstie [mailto:notifications@github.com] Gesendet: Mittwoch, 10. Januar 2018 14:21 An: rowanwins/leaflet-easyPrint leaflet-easyPrint@noreply.github.com Cc: Subscribed subscribed@noreply.github.com Betreff: Re: [rowanwins/leaflet-easyPrint] width undefined when using "printMap(size, filename)" (#41)

I have the same issues replicating the simple example from the github-page. I use carto.js (includes Leaflet 0.7.3).

This 'works' (with Leaflet-controls disappearing and reappearing):

`var printPlugin = L.easyPrint({ title: 'My awesome print button', hidden: true, exportOnly: true, }).addTo(map);

$('#map').click(function() { printPlugin.printMap('CurrentSize', 'MyFileName'); }) `

But using 'Current', 'A4Landscape', 'A4Portrait' and self-defined sizes i get:

index.js:141 oops, something went wrong! TypeError: Cannot read property 'width' of undefined at b._resizeAndPrintMap (index.js:151) at index.js:138 at

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/rowanwins/leaflet-easyPrint/issues/41#issuecomment-356600190 , or mute the thread https://github.com/notifications/unsubscribe-auth/AF5h5bM3Eplu9lnkNuCfEBoS6aL7Q6Qhks5tJLkygaJpZM4PBjUZ . https://github.com/notifications/beacon/AF5h5YL1hxUxq_nft8dNuQz-4yHP-axDks5tJLkygaJpZM4PBjUZ.gif

[hankerspace]

Found a solution, simply use these values:

• "A4Portrait page"
• "A4Landscape page"
• "CurrentSize"

Example: printPlugin.printMap('A4Landscape page', 'MyFileName');

Best ;)

[vikramajeetregur]

Found a solution, simply use these values:

• "A4Portrait page"
• "A4Landscape page"
• "CurrentSize"

Example: printPlugin.printMap('A4Landscape page', 'MyFileName');

Best ;)

Thanks! @hankerspace it works for me.