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

```bash npm install react-leaflet-easyprint --save ```

Usage example for react-leaflet v1

```javascript import { Map, TileLayer } from 'react-leaflet'; import PrintControl from 'react-leaflet-easyprint';

101.483459, 2.938926} zoom={12}> url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

/> { this.printControl = ref; }} position="topleft" sizeModes={'Current', 'A4Portrait', 'A4Landscape'} hideControlContainer={false} /> 'Current', 'A4Portrait', 'A4Landscape'} hideControlContainer={false} title="Export as PNG" exportOnly /> ```

Usage example for react-leaflet v2

```javascript 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 101.483459, 2.938926} zoom={12}> url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

/> { this.printControl = ref; }} position="topleft" sizeModes={'Current', 'A4Portrait', 'A4Landscape'} hideControlContainer={false} /> 'Current', 'A4Portrait', 'A4Landscape'} hideControlContainer={false} title="Export as PNG" exportOnly /> ```

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

```javascript ... this.printControl.printMap('A4Portrait', 'MyFileName')} >Print Map ... ``` Credits goes to rowanwins and all the contributors for the original work. MIT License