Fitting an Image as Watermark on PrintPage

[Lauranna]

Hello, first of all, thanks for the great plugin and your work on it. I try to place a svg as watermark on the print page. On "Landscape" and "Portrait" Mode it works tolerably. On "Custom" mode the bounds don't work.

Here is my Code:

`

    var browserPrint = L.control.browserPrint({
        title: 'Bild exportieren',
        documentTitle: 'some Text',
        printModes: [
            L.BrowserPrint.Mode.Landscape("A4", {title: "Querformat"}),
            L.BrowserPrint.Mode.Portrait("A4", {title: "Hochformat"}),
            L.BrowserPrint.Mode.Custom("A4", {title: "Bereich wählen"}) 
        ],
        manualMode: false,
        closePopupsOnPrint: false
    }).addTo(map);

    var newBounds;
    var watermarkOverlay;

    map.on(L.BrowserPrint.Event.PrintInit, function(e) {
        newBounds = L.latLngBounds(e.target.getBounds());
        watermarkOverlay = L.imageOverlay("images/WasserzeichenTest.svg", newBounds, {
            opacity: 0.4
        }).addTo(map); 
        return newBounds;
    });
    map.on(L.BrowserPrint.Event.PrintEnd, function() {
        watermarkOverlay.removeFrom(map);
        map.fitBounds(newBounds);
    });

`

I tried to place it into the bounds of the selected area, but somehow it goes where it wants.

Here an example:

the image here is in the left upper corner, bat I want it centered and the hole image on the printed map. It should be much smaller. The bounds of the PrintInit Event doesn't work here.

Has anyone some ideas what I didn't notice or have other solutions for doing that?

Thanks in advance.

[Igor-Vladyka]

Hello.

When doing custom or auto mode tiles could not be loaded during pre-init actions. You can try instead get bounding box in L.BrowserPrint.Event.Print event. Also you can check parameters passed from the even (e.printLayer). Or just get map center and calculate your own bonds based on it.

[Lauranna]

Hello Igor, thank you very much for your reply. I've found a solution that works well for me. I followed your proposal to calculate my own boundingbox from map center.

` Here is the code:

    var watermarkOverlay;

    map.on(L.BrowserPrint.Event.PrintInit, function() {

        var overlayCenter = L.latLng(map.getCenter());
        var mapZoom = map.getZoom();
        var pixWidth = 511;
        var pixOffsetX = pixWidth / 2;
        var pixOffsetY = pixOffsetX * 15 / 27;

        var centerPoint = map.project(overlayCenter, mapZoom);
        var latLng1 = map.unproject(L.point([centerPoint.x - pixOffsetX, centerPoint.y + pixOffsetY]), mapZoom);
        var latLng2 = map.unproject(L.point([centerPoint.x + pixOffsetX, centerPoint.y - pixOffsetY]), mapZoom);
        var overlayBounds = L.latLngBounds(latLng1, latLng2);

        watermarkOverlay = L.imageOverlay("images/WasserzeichenNeu.png", overlayBounds, {
            opacity: 0.5
        }); 
        watermarkOverlay.addTo(map);
    });

    map.on(L.BrowserPrint.Event.PrintEnd, function() {
        watermarkOverlay.removeFrom(map);
        map.closePopup();
    });

`

Greetings, Anna