Get event after custom select + change custom style

[luispina]

Hi! First all, your plugin works so good! I started using the leaflet-easyprint of romanwins, but your plugin has fixed more things and for me is an essential plugin in all my leaflet projects.

However, there are a few things that i want to know if you could help to me:

• When the map has a big render (choropleth map with geojson with +150 MB size) and the user click in some option to print, there is a 'freeze time', before "browser-pre-print" event. The same thing after "browser-print-end", when the map comes back to his original zoom. In this case, it is very important give info to user than map 'is-doing-something-to-print' to avoid questions while processing. In proyects whose data viz is not too high this feature can be useless or not neccesary, but otherwise is essential.

To fix partially this, i added a jQuery 'blockUI' functionality to show some message while printing is loading to portrait, landscape and auto, but for 'custom' i can't catch just the event after select the rectangle and before "browser-pre-print" event (as i exposed above).

Do you know how can i get these two moments to show some status info?

(This issue is soft using Chrome but using Firefox the delay/freeze-time is too big so it is necessary give some info to user before and after save map image/PDF)

• Is there a way to change style options of custom print on the js code? When i select the custom mode, the L.rectangle has a similar color with my map background and it draw below all other tiles/panes. I want to change the colors (boundary and background's rectangle) and his z-index passing them as params if possible.

---

Here is a GIF to show the two points above, with Chrome [Version 76.0.3809.100 (Official Build) (64-bit)] and Firefox [68.0.2 (64-bit)], and a minimal reproducible example.

Example GIF in Chrome:

Example GIF in Firefox:

Thanks a lot!

[Igor-Vladyka]

Hi there.

I just added an option to style custom print rectangle with default pane zIndex = 9999. You can change the style or just update the color for it ;)

Also added new event as a first action when printing is initialized. This should help in your case.

Please let me know if any.

Regards, Igor

[luispina]

Thanks for the answer. I've tested the update code:

• Style custom print: it worked great. I could pass any arguments inherited of L.rectangle (docs leaflet).
• Event as a first action when printing: i tested using a console.log (it works) but blockUI didn't work at the event.

This 'blockUI' keep working inside of custom function (printFunction), except for custom function mode print (as the minimal reproducible example shows).

var printFunction = (context, mode) => {
    return () => {
        $.blockUI({ message: '<h2><span><img src="'+require('./images/rolling202.gif')+'" /> Cargando impresión...</span></h2>' });
        // Slight delay to make sure BlockUI has time rendering the overlay.                    
        setTimeout(() => {
            if(mode.Mode === 'Portrait'){
                context._printPortrait(mode);
            }else if(mode.Mode === 'Landscape'){
                context._printLandscape(mode);
            }else if(mode.Mode === 'Auto'){
                context._printAuto(mode);
            }
        }, 200);                    
    }
}

var customPrintFunction = (context, mode) => {
    return () => {
        // **** Where put this blockUI? ****
        //$.blockUI({ message: '<h2><span><img src="'+require('./images/rolling202.gif')+'" /> Cargando impresión...</span></h2>' });       
        context._printCustom(mode);
    }
}

var printButton = L.control.browserPrint({
    title: 'Imprimir mapa',
    closePopupsOnPrint: false,
    customPrintStyle: { color: "black", fillColor: "black", dashArray: "5, 10", pane: "customPrintPane" },
    printModes: [
        L.control.browserPrint.mode("Portrait","Vertical","LETTER",printFunction, false),
        L.control.browserPrint.mode("Landscape","Horizontal","LETTER",printFunction, false),
        L.control.browserPrint.mode("Auto","Automático","LETTER",printFunction, false),
        L.control.browserPrint.mode("Custom","Seleccionar la zona","LETTER",customPrintFunction, true),
    ],
});

---

Do you know what else can i do to catch the moment after selected the rectangle?

[Igor-Vladyka]

Hi there.

Can you try to use events instead? It can be clearer and more maintainable. Example:

map.on(L.Control.BrowserPrint.Event.PrintInit, function(mode) {
$.blockUI({ message: '<h2><span><img src="'+require('./images/rolling202.gif')+'" /> Cargando impresión...</span></h2>' });
});

Regards, Igor