igor-vladyka / leaflet.browser.print Goto Github PK

Hi,
When I print "landscape" on http://ao35.free.fr/rennesatlas/ipa.html#lon=-1.68499&lat=48.13936&zoom=18, the zoom change from 18 to 17.
It's the same in the custom mode.

Hi,

I use your print plugin and everything works fine until I added leaflet.draw plugin.
When I draw something, I cant print map.
There was an error in console
TypeError: this._renderer._bounds is undefined

Here is your example code with Leaflet.Draw plugin.

Can you help me solve this issue please?

Hi,
first of all thanks for the great tool. Works great!
I have one question though: Is there the opportunity to add a title or subtitle to the map?
(I don't know if this is right place to ask of if there is something like a mailing list.)

Regards,
Peter

I have a demo page, https://gvarela1981.github.io/leaflet.browser.print/examples/v1.0.3.html
It has a filled red circle and a green circle.
When I press the print button 'browser-print-start' fires and it should set the red circle's fill to 'false' but it does not.
Then I set a new event 'pre-print' into the <leaflet.browser.print.min.js> before calling to L.browserPrintUtils.cloneLayer.
The second demo page https://gvarela1981.github.io/leaflet.browser.print/examples/v1.0.3-pre-print-example.html shows the red circle's fill get transparent before the printing, and then returning to a red fill as the event browser-print-end is executed.

I have a map with one background layer and some wms layers. it prints only one of the tile layers(the last one that added to the map)... is there any way to get all of the tile layers when printing?
thanks

Is it possible to add this plugin on R for Leaflet?

If the map has overlapping layers , is there any way to print map with selected layer as the printLayer ?

https://igor-vladyka.github.io/leaflet.browser.print/examples/v1.2.0.html

I am trying to follow the example codes, but this one is not working.

No print icon is shown on the map.

Error in Chrome Console:

Uncaught TypeError: Cannot read property 'printModesNames' of undefined
    at Function.L.control.browserPrint (leaflet.browser.print.js:598)
    at v1.2.0.html:47

Solution, you can add a title and documentTitle

    ctlPrint = L.control.browserPrint({
        title: 'mapName',
        documentTitle: 'mapName'
    }).addTo(map);

Hi
when using the plugin my basemaps are desync: tiles around print area aren't refreshed and zoom is impossible (no console error). A workaround is to manually select another basemap after printing but I don't know how to code that in my page.
I've attached my map and code.
Greetings
bug_print_fdc_google.zip

I need to print the map not as defined A or B sizes. Rather, the print should follow the size of the displayed map in the client's screen. Is it possible to do so?

I tried this branch (using a rotated leaflet map):
https://github.com/fnicollet/Leaflet/tree/rotate-master

Your plugin works but the print does not end up rotated. I tried to see if I could make that change myself but cant figure out where to change it. Any ideas?

Hello,

I'm trying to integrate your plugin in an angular application but I've not succeeded...

My map looks like this in my html code :
``<div leaflet style="height: 450px;"
[leafletLayers]="layers"
[leafletLayersControl]="layersControl"
[leafletFitBounds]="fitBounds">

Do you have un example ?

Thanks in advance for your help.

Reproduces on: https://igor-vladyka.github.io/leaflet.browser.print/examples/v1.2.0.html

This is a regression.

When I print a layerGroup of markers your package works great but when trying to print a layerGroup of drawn polygons I get the error: Uncaught TypeError: Cannot read property 'min' of undefined

Hello, I am incorporating the option to print in my report, at the moment of generating the impression view the points change drastically. I'm using R, leaflet 0.7+ for R, easyprint 0.4. The code to include the plugin is:

m <- leaflet ()%>%
   onRender ("function (el, x)
            {L.control.browserPrint (
            {title: 'Print Map',
             documentTitle: 'DIGESA - VECTORS',
             printModes: ['Portrait', 'Landscape', 'Auto', 'Custom'],
             manualMode: false,
             printModesNames: {Portrait: 'Vertical', Landscape: 'Horizontal', Auto: 'Auto', Custom: 'Select'}
            }
            ) .addTo (this);} ")%>%

All printing modes have the same behavior.
Some clue as to how to solve it myself would be of great help, thanks in advance, apologies for using google translator.

Print View

Can you delivery minified and uncompressed in your dist folder?

your webpack.config.js:

entry: ['./src/leaflet.browser.print.js', './src/leaflet.browser.print.utils.js'],
output: { filename: 'leaflet.browser.print.min.js', path: path.resolve(__dirname, 'dist') },

evolution track:

entry: {
    "leaflet.browser.print": ['./src/leaflet.browser.print.js', './src/leaflet.browser.print.utils.js'],
    "leaflet.browser.print.min": ['./src/leaflet.browser.print.js', './src/leaflet.browser.print.utils.js'],
},
output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') },

More information on https://stackoverflow.com/questions/25956937/how-to-build-minified-and-uncompressed-bundle-with-webpack

Hello
I just integrated the pluggin into an application. It works but I would like to know why I can not print a graphic. I test manual mode or the graph is displayed but when printing it is no longer there.
thank you for your understanding

Hi,
I use this plugin to print WMS layers with CQL filters but the cql_filter does not apply when printing...
for example the following wms layer has a cql_filter that filters the states with population over 2M:
L.tileLayer.wms('https://ahocevar.com/geoserver/wms', { layers: 'topp:states', CQL_FILTER: 'PERSONS > 2000000', styles: '', format: 'image/png', transparent: true, }).addTo(map);
result:

Hi,
I have this small issue which i dont undertand. when i print the map the leafeltIcons are not show. I use another plugin leaflet.awesome-markers which has a base icon and another glyphicon or fontawesome icon on top.
the glyphicon and fontawesome icons are shown however the base icon which comes from the plugin are not.
here are images for a better understanding

Any help is appreciated.
Thanks in advance.

hi, there!
thanks for this lib, it helps a lot
After binding tooltips to polygons print can't proceed to the end, and there are no tooltips on polygons.

Hello,

Thanks for the library. It helps a lot to print the map for leaflet!
It is found that the tooltips and markerclusters are unable to be printed with styles. Is there documentation or demo for solving these issues? Thanks a lot.

It works now. I updated css and fixed the issues. Thank you.

How can i adjust to add A3 landscape print as an option, i thought i'd seen this on one of the demos but clicking again it's not there. When i use landscape or portrait it defaults to an A4 page size

Hi Igor,

Thanks for your simple yet useful plugin.
I can use your plugin with very easy steps. But when I located the plugin in 'topright' or 'bottomright', the printer icon is disappear when I hover the mouse over it.

Need your guidance please.
Thanks.

note: L.browserPrint({position: 'topright'}).addTo(map);

I didn't notice any warning in the readme about this, so posting here.

Using the demo site here:
https://igor-vladyka.github.io/leaflet.browser.print/

in IE 11, the background map (stamen watercolor) and markers show up, but not the feature polygons, or popup "balloon" layer (only popup text shows). I'm attempting to print directly to a PDF with a "print to PDF" print driver. There is no "print preview", but I assume that is an artifact of IE versus Chrome capabilities. Also, the orange CSS background colors are lost, in the IE 11 print

pic from IE 11 PDF output:

This workflow (print to PDF) does work with Chrome browser.
pic from Chrome PDF output:

Please let me know if there is another option to make this work in IE 11...

Dear Igor,
I would like your help with the following:
I have a markerClusterGroup with almost 500 markers, when I zoom in and marker.ClusterGroup shows many markes, browser.print works ok, but when zoomed out and marker.ClusterGroup shows only a few or no markers, browser.print throws me an error: too much recursion.

What am I doing wring?
Please advice

I'm trying to print a map div using only L.browserPrint({ position: 'topright' }).addTo(map); and it works fine when map is empty.

As soon as I put my polygons and layers it doesn't work anymore. I'm gettint this error:

I've tried to disable messagebox, canvas and an L.control I use to display a legend, but no success :(

That's the code I use to plot my polygons on map:

var camadas = L.featureGroup().addTo(map);
 var popup = L.popup();
 function plotarPoligonos() {
     map.closePopup();
     camadas.clearLayers();
     // var WEIGHT = 1, FILL_OPACITY = .50;
     for (var i = 0; i < $scope.retornoPesquisa.length; i++) {
         var polParse = JSON.parse($scope.retornoPesquisa[i].Poligono);

         if ($scope.retornoPesquisa[i].HtmlRetorno && $scope.retornoPesquisa[i].HtmlRetorno.length > 0) {
             polParse.properties.HtmlRetorno = $scope.retornoPesquisa[i].HtmlRetorno;
             var _templateScope = $scope.$new();
             var compiled = $compile(polParse.properties.HtmlRetorno)(_templateScope);
             polParse.properties.Popup = compiled[0];
         }
         polParse.properties.CorPoligono = $scope.retornoPesquisa[i].CorPoligono;

         var pol = L.geoJSON(polParse, {
             onEachFeature: function (feature, layer) {
                 if (polParse.properties.HtmlRetorno && polParse.properties.HtmlRetorno.length > 0) {
                     layer.on('click', function (e) {
                         popup.setLatLng(e.latlng).setContent(feature.properties.Popup);
                         popup.openOn(map);
                     });
                 }
             },
             style: function (feature) {
                 return {
                     fillColor: polParse.properties.CorPoligono,
                     color: 'grey',
                     weight: 1,
                     fillOpacity: 0.5
                 };
             }
         }).addTo(camadas);
     }
     map.fitBounds(camadas.getBounds());
 };

I want to have the print button outside the map, so i appended that button on a div outside the map, but nothing happend when i click on the options.
Any advice?

hello, dear lgor:
I define a new type VectorGrid by :

L.VectorGrid = L.GridLayer.extend({
// A factory method which will be used to instantiate the per-tile renderers.
rendererFactory: L.svg.tile,
// A data structure holding initial symbolizer definitions for the vector features.

vectorTileLayerStyles: {},
initialize:function(option){L.setOptions(this, options);
        L.GridLayer.prototype.initialize.apply(this, arguments);
        if (this.options.getFeatureId) {
            this._vectorTiles = {};
            this._overriddenStyles = {};
            this.on('tileunload', function(e) {
                var key = this._tileCoordsToKey(e.coords),
                    tile = this._vectorTiles[key];

                if (tile && this._map) {
                    tile.removeFrom(this._map);
                }
                delete this._vectorTiles[key];
            }, this);
        }
        this._dataLayerNames = {};}
)

now i use the VectorGrid type to define a city's boundarys ,how to add the register?
very thanks !
han

Having no luck with attempts to register layer. I am wondering if it is possible?

Hello!
I have map with Leaflet.markercluster layer. When I trying to print it I have only text labels from clusters and all text labels from original makers (without clustering).
Is Leaflet.markercluster compatible with browser.print or here are some bugs exists?
Thank you for help!

Hi,
In my project, the service takes 4 seconds to get data and until I got a 200 response nothing happen. And when I have a response, the window.print is fired.

Have a way to display some loading or something like that?

Thanks.

leaflet.browser.print.min.js:10 Uncaught TypeError: Cannot read property 'addTo' of undefined
at NewClass._setupPrintMap (leaflet.browser.print.min.js:10)
at NewClass._addPrintMapOverlay (leaflet.browser.print.min.js:10)
at NewClass._print (leaflet.browser.print.min.js:10)
at NewClass._printPortrait (leaflet.browser.print.min.js:10)
at HTMLLIElement.handler (DomEvent.js:72)

To reproduce, simply include leaflet routing machine in any of your examples, and add a routing control to the map:

var routingControl = L.Routing.control({
routeWhileDragging: false,
showAlternatives: false,
useZoomParameter: true,
show: false,
collapsible: true,
lineOptions: {
addWaypoints: true
},
position: 'bottomright'
}).addTo(map);

Plugin will crash, cause it cannot clone/use some layer that is added by the routing machine.

Hello, I am using your plugin and I would like to know if there would be the possibility of instead of loading the map alone and calling the browser function to print that would create an image directly. Thank you

I'm using leaflet 1.3.1 and the search engines for firefox and chrome

Hi,
I have the following warning in console with your plugin since Leaflet v.1.3.1: "L.browserPrint(options) is obsolete and will be removed shortly, please use L.control.browserPrint(options) instead."

When I use Leaflet.markercluster: any clusters display fine on the print preview page BUT when you actually get the print off the printer the clusters have lost their colour settings and the circles are just white.

To see this go to https://www.derbyramblers.org.uk/walk-details/map-of-walk-locations.html
Print the page either to paper or PDF
I would have expected the same attributes of the clusters to get printed, color, font etc
This happens if I am using Firefox 64. but works fine in Chrome.

PS thanks for great extension.

Hi,

Have a way to display leaflet controls? Like scale, wind rose, etc...

Thanks.

Hello,

It is not possible to change page orientation on IE 11, Edge and Fifrefox.
For firefox :

• The last page print orientation is saved and it is not automatically changed/forced by the plugin option.

For IE11 / Edge

• Orientation is always set to "Portrait"
• When I change orientation to landscape, some layers / controls are lost or broken (I lose color on countries).

This can be reproduced on the leaflet.browser.print demo :
https://igor-vladyka.github.io/leaflet.browser.print/

Best regards,

Hello
I have just added your extension to a leaflet map.
I added the js file and added the print control
When I hover over the print icon the four options appear.
Whichever of the four I click on the screen goes completely blank and then the printer dialogue appears.
I am using Leaflet 1.3.1
I get one error message that I do not understand
Unknown property 'size'. Declaration dropped. index.php:1:333
as line one is doctype and line 133 is blank.

I am not sure how to debug this?

Is your feature request related to a problem? Please describe.
Hello. I use your plugin in a page witch contain several leaflet maps.
So I have multiple id leaflet-browser-print in my page !

Describe the solution you'd like
Could you avoid using id and use class instead ?

Hi,
when setting closePopupsOnPrint to false, the plugin prints the popup ignoring its options.
For example in my code I set popup option to 'maxWidth:400' to display all my content inside the popup box but when printing with your plugin, the content stick out the popup box.
Standard print through browser menu is ok.
Thx

Hello,
I love your plugin, it is super simple and easy to set up, however I am having trouble figuring out how to include my maps legend in the print? Is there an option that I am missing?
Thanks for your help.

Hi, good work !

my questions :

1. Is it possible to print map in scale ?
2. Is it possible start print scale with external button ? (no inside map like your sample)

I use the mutant-google and the leaflet-bing plugins to display google and bing basemaps. When I use browser-print, the Google basemap is not displayed and I have a "No value provided for variable {subdomain}" error for Bing. Other basemaps (cartoDB, OSM...) are printed fine.
When using the standard chrome print menu, all basemaps are correctly printed.

A sample code reproducing the case is provided (I've just hidden my API key values).
bug print plugin.html.txt

Is there any way to export to png instead of printing? Would be a nice feature to add to a Print / Export menu.

this is not issue,
Is there any option to add title to the printed content before print event fires?

i've just single idea is to add option, that will add event that will postpone print events till title had not been set

Describe the bug
When utilizing multiple map renderers such as SVG and Canvas, the print overlay shows duplicates for records tied to the non-default map renderer.

To Reproduce
Steps to reproduce the behavior:

1. Create simple map with default options (uses default SVG renderer)
2. Create new canvas renderer with L.canvas();
3. Add object to map using the canvas renderer.
4. Click the print button using any mode
5. Duplicate copies of the canvas rendered object are shown in the print overlay and print preview

Expected behavior
There should only be one copy of each layer showing in the print overlay and print preview

Example
https://jsfiddle.net/shannonthurston_nuvolo/9hn73j84/

Additional context
I experimented with the code and found that when the layers are cloned for the print overlay the 'renderer' option isn't getting tied to the cloned renderer(L.SVG or L.Canvas), but instead is being left to the original renderer from the underlying map and that is what seems to be causing the issue of duplication. I can make the problem go away partially by modifying the builder functions to set the renderer option to null, but ideally the cloned layers should link to the cloned renderer.

Hi,
first thank you for your great work on this plugin.
I m using leaflet and angular5.
I add geojson layers to a map with custom pane option like this:

this.layerOne = L.geoJSON(this.levelOne, { pane: "firstPane", style: style, onEachFeature:onEachFeature}); this.layerOne.addTo(this.mapService.map)

But i get an error:

TypeError: Cannot read property 'appendChild' of undefined

If i remove the "pane" option in each layer i get no error. Is the pane option supported on this plugin?

I am trying to print leaflet map with A0 size but map does'nt completely fit on print screen. Print screen discards half of map width. Same issue occurs in A1, A2, A3. Print after size A4 works perfect.

I have attached screen shots of issue and jsfiddle of my code.

One more thing I need to know. Is there any way to increase font size of header and discard URL in footer?

Code Sample

http://jsfiddle.net/sirajjunior/LnzN2/6288/

hello lgor!
when i print my map with a scale control ,it works well in (please copy it to browser url for visit)
hancc.xyz
but when i deploy the plugin in my own project built with vue ,troubles came and i could find the key to solve it, could u give me a hand ? thanks!
the code below i used both in the two demo, set the BrowserPrint options [manualMode:true] and see what happens in printed page.
L.control.browserPrint({//etc... manualMode: true}); L.control.scale({position:'topleft'}).addTo(map);
the printing progress :
css(the white background) works in manualMode:true printing page:

when i push the 'print' button i shoud get the pdf like :

in face it is like:

the css is removed , and the words (100KM and 50mi) in the scale control can be selected like other words in html. actually, all the css will be eliminated when i push [print] button..
thanks a lot!
han

Hi, can I disable the zoom change on print? I want it to print the exact same zoom level as is.