react-leaflet-easyprint

React wrapper of leaflet-easyPrint for react-leaflet.

A simple leaflet plugin which adds an icon to print or export a map.

Tested with Leaflet 1.4.0 and React-Leaflet 1.9.1, React-Leaflet 2.2.0

Demos

| Version | Demo | | --- | --- | | [email protected] | CodePen | | [email protected] | CodePen |

Installation

Install via NPM

npm install react-leaflet-easyprint --save

Usage example for react-leaflet v1

import { Map, TileLayer } from 'react-leaflet';
import PrintControl from 'react-leaflet-easyprint';
		
<Map center={[101.483459, 2.938926]} zoom={12}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  <PrintControl ref={(ref) => { this.printControl = ref; }} position="topleft" sizeModes={['Current', 'A4Portrait', 'A4Landscape']} hideControlContainer={false} />
  <PrintControl position="topleft" sizeModes={['Current', 'A4Portrait', 'A4Landscape']} hideControlContainer={false} title="Export as PNG" exportOnly />
</Map>

Usage example for react-leaflet v2

import { Map, TileLayer, withLeaflet } from 'react-leaflet';
import PrintControlDefault from 'react-leaflet-easyprint';

// wrap `PrintControl` component with `withLeaflet` HOC
const PrintControl = withLeaflet(PrintControlDefault);

// The rest of the codes requires no changes
<Map center={[101.483459, 2.938926]} zoom={12}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  <PrintControl ref={(ref) => { this.printControl = ref; }} position="topleft" sizeModes={['Current', 'A4Portrait', 'A4Landscape']} hideControlContainer={false} />
  <PrintControl position="topleft" sizeModes={['Current', 'A4Portrait', 'A4Landscape']} hideControlContainer={false} title="Export as PNG" exportOnly />
</Map>

Options

Any props passed to PrintControl are passed down to leaflet-easyPrint.

Refer leaflet-easyPrint options for a complete list of options supported.

Methods / Using programmatically

Use react ref to call printMap(size, filename) function programmatically. Refer Doc for parameters accepted by printMap().

Example

...

<button onClick={() => this.printControl.printMap('A4Portrait', 'MyFileName')} >Print Map</button>

...

Credits

Credits goes to rowanwins and all the contributors for the original work.

License

MIT License