Print Text in a textbox on the map

[astridx]

I am using https://github.com/Leaflet/Leaflet.draw for drawing shapes and https://github.com/justinmanley/Leaflet.Illustrate for adding text to the map.

Here you can see how the two plugins add their elements:

The expression of a shape is not a problem - but the text. Instead of the text unfortunately only a small white rectangle is displayed. You can see the small white rectangle in the following PDF to the left of the blue triangle.

test.pdf

It would be nice if you could give me a hint, how I can also print the text.

[Igor-Vladyka]

Hi, Have you tried to register Illustrate plugin? Please check this section of documentation.

Regards, Igor

[astridx]

Thank you for your answer. Yes, I tried (because of https://github.com/justinmanley/Leaflet.Illustrate/blob/f49ee6957c659f0abeaf6b23de59c4922f75b8fa/dist/Leaflet.Illustrate.js#L333)

        L.Control.BrowserPrint.Utils.registerLayer(
            L.Illustrate.Textbox,
            'L.Illustrate.Textbox',
            function (layer, utils) {
                return L.Illustrate.Textbox(
                    layer.getLatLng(),
                    utils.cloneOptions(layer.options)
                    );
            }
        );

and (because of https://github.com/justinmanley/Leaflet.Illustrate/blob/f49ee6957c659f0abeaf6b23de59c4922f75b8fa/dist/Leaflet.Illustrate.js#L50)

        L.Control.BrowserPrint.Utils.registerLayer(
            L.RotatableMarker,
            'L.RotatableMarker',
            function (layer, utils) {
                return L.RotatableMarker(
                    layer.getLatLng(),
                    utils.cloneOptions(layer.options));
            }
        );

and I get the message TypeError: this.callInitHooks is not a function.

With

        L.Control.BrowserPrint.Utils.registerLayer(
            L.Illustrate.Control,
            'L.Illustrate.Control',
            function (layer, utils) {
                return L.Illustrate.Control(layer.getLatLng(), utils.cloneOptions(layer.options));
            }
        );

I see no error, but in the print I do not see the text - only the little white rectangle.

[Igor-Vladyka]

Hi,

TypeError: this.callInitHooks is not a function.

means that you are not creating object properly. Please check my answer here - idea is the same.

[astridx]

Thank you for your help. The registration it is probably not the problem. I do not register anything anymore. The lower right corner of the text-area field was already printed out before. This was the little rectangle. I have seen that the text-area in the Leaflet.Illustrate plugin has been assigned a width and a height of 100%. I have changed this to a pixel value. Now the text-area is printed in the size of this pixel value. Unfortunately, only the initial text is printed. Text-Changes in the text-area field are not used for the printout with your plugin. But that's certainly because I do not use the right layer. I have not understood the Leaflet.Illustrate plugin yet :(.

May I ask you some final questions? Leaflet.Illustrate plugin offer an GeoJson export (https://github.com/justinmanley/Leaflet.Illustrate/blob/f49ee6957c659f0abeaf6b23de59c4922f75b8fa/dist/Leaflet.Illustrate.js#L533) Do you think it is easier to put this GeoJson export on a layer and print? Do you know another way to write text on a leaflet map and print it out?

[astridx]

I could not solve the problem. That's why we will use the GeoServer print module. Thank you for your help so far.