Error in the leaflet plugin

I could use leaflet plugin with node.js under Windows 10.

However, I get an error message when I try to print out, open in a new window, and export as a static html.

The error message is

Visit the leaflet plugin website, and then click to Open in a new window for the first tiddler (i.e., Michel Strogoff from the sky). The same error will be produced.

Any ideas?

Yeah, I suspect the map canvas / container is unavailable in your new window. New windows will not have access to your TW solution.

After debugging the js codes, the error happens on this line in leaflet plugin.

Map[map] = L.map('lfltMap-' + map);

I am guessing Open in a new window (not sure the term in js/browser here), then create a new div element lfltMap-1 by leaflet plugin. Then leaflet.js tries to find the div element lfltMap-1 in the original window, but this new element is not existed in the original window. Consequently, an error is thrown out.

I guess it is a bug in leaflet plugin, but not sure how to fix it.

The similar behaviour happens to other js based figures (without correct rendering in Open in a new window)

These plugins are working in Open in a new window

Not tested for other plugins.

I you open in new window tiddlywiki only displays the rendered text field. If a plugin or solution provides additional features to the tiddler display via the view template you will need to ensure an open in new window button includes the template.

This package provides a open in new window buttons for edit and view. The view is currently incomplete and would need revising for your own need but try is, you will need to modify the view template used in $:/PSaT/new-windows/ViewTemplate

new-windows.json (13.4 KB)

I do not know the details of the plugins you mention but looking at how they display the content they generate will help you.

Thanks @TW_Tones

The leaflet is looking for a div element with known id (e.g. L.map('lfltMap-0')) to render a map.

Widget Message tm-open-window opens a new window in the browser. However, all js still run under in the old window. I can confirm with js window.title. Consequently, document.getElementById("lfltMap-0") cannot find the div element.

The plugins TW5-visjsTimeline, d3 and mermaid-tw5 create new html and then push into parent in the render function for the js widget.

The plugin leaflet create a div element and push into parent, then L.Map function is looking for the div element.

I guess this is related the scope to execute js codes in browser for tm-open-window. However, I have no idea about the solution.

Do trye the view in Window button I gave you above and see if it works. I do not know ort understand those plugins but there is a 60% chance it will work.

I tested with the same error.