1

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)

  • Can you add one of your screenshots and maybe a mockup of what you are trying to achieve? – Stefan Jun 26 '18 at 10:46
  • 1
    Stefan, no problem. Give me a moment. – GrafixMastaMD Jun 26 '18 at 10:46
2

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.

  • Stefan, as you can see I have already tried things of this nature. I understand that lelaflet-image won't do that. I wrote in my post that I understand that it renders in HTML and that's why. My request is for help (maybe code example) to try to figure out a way to have labels that render in canvas. – GrafixMastaMD Jun 26 '18 at 12:38
  • I will however mark this answer acceptable as you lead me to an article with html2canvas + leaflet and will probably use this method to achieve the goal. Thank you very much. – GrafixMastaMD Jun 26 '18 at 12:42
  • Thanks! I invite you to improve my answer with the link to that article. – Stefan Jun 26 '18 at 12:59
  • It's worth noting that L.Tooltip is built-in into Leaflet since version 1.0.0 (it was a plugin for 0.7.x, based on the leaflet.label plugin). Your answer still stands, though, as the built-in L.Tooltip (and L.Popup and L.DivIcon) use HTML elements that leaflet-image cannot flatten into a <canvas>. – IvanSanchez Jun 26 '18 at 13:39
  • @IvanSanchez I added the information about L.Tooltip being built in to the answer. Thanks! – Stefan Jun 26 '18 at 13:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.