Leaflet – Handling Tooltips Not Captured by Leaflet-Image

htmlhtml5leaflet

I am trying to capture my map with leaflet-image, but the tooltips are not captured. I enabled preferCanvas in the mapOptions and everything except from the tooltips is captured. Each one of my markers has tooltips. The tooltips seem to be drawn in HTML. I have even tried to do something like this:

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText(feature.properties.test_number,10,50);
return canvas;

The numbers are now in canvas. But the wrapper still is in HTML – I believe by default from Leaflet. I have no problem modifying my tooltips (they're just numbers) to be in canvas or modify the way I am doing things in general to make the capture possible.

Why are tooltips not being captured in screenshot?

My goal is the ability for leaflet-image to be able to capture the tooltips that are bound to the markers.

Map Actual
Leaflet-Image Output

Map Doesn't render (due to Bing Maps issue — different Issue)

Best Answer

L.tooltip is a built-in feature of Leaflet since version 1.0.0 based on the plugin Leaflet.label. leaflet-image in turn says in their README:

Plugins that will not work with leaflet-image

  • Leaflet.label: will not work because it uses HTML to display labels.

This answer on Stackoverflow regarding the conversion of a HTML element to a <canvas> element might help you:

There is a library that try to do what you say.

See this examples and get the code

http://hertzen.com/experiments/jsfeedback/

http://html2canvas.hertzen.com/

Reads the DOM, from the html and render it to a canvas, fail on some, but in general works.

Related Question