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
react-leaflet@1.9.1	CodePen
react-leaflet@2.x	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