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
| Version | Demo |
|---|---|
[email protected] |
CodePen |
[email protected] |
CodePen |
npm install react-leaflet-easyprint --saveimport { 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='© <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>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='© <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>Any props passed to PrintControl are passed down to leaflet-easyPrint.
Refer leaflet-easyPrint options for a complete list of options supported.
Use react ref to call printMap(size, filename) function programmatically. Refer Doc for parameters accepted by printMap().
...
<button onClick={() => this.printControl.printMap('A4Portrait', 'MyFileName')} >Print Map</button>
...Credits goes to rowanwins and all the contributors for the original work.
MIT License
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent