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
react-leaflet
v1
Usage example for ;; <Map center=101483459 2938926 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= { thisprintControl = ref; } position="topleft" sizeModes='Current' 'A4Portrait' 'A4Landscape' hideControlContainer=false /> <PrintControl position="topleft" sizeModes='Current' 'A4Portrait' 'A4Landscape' hideControlContainer=false title="Export as PNG" exportOnly /></Map>
react-leaflet
v2
Usage example for ;; // wrap `PrintControl` component with `withLeaflet` HOCconst PrintControl = ; // The rest of the codes requires no changes<Map center=101483459 2938926 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= { thisprintControl = 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= thisprintControl >Print Map</button> ...
Credits
Credits goes to rowanwins and all the contributors for the original work.
License
MIT License