Leaflet.TextPath | Show text along Polyline with Leaflet | User Interface library

I am currently trying to draw some lines, circles and polygons into a leaflet map using JavaScript.

I have been able to insert lines, circles, and polygons, and by using TooolTip text is inserted to polylines in a Leaflet map. I am using this to embed this map to a Pyqt5 GUI.

The type of text I want to achieve is as the one on picture 1, therefore ToolTip is not suitable as I can only get text as picture 2.

Have tried so far

I have look for other solutions and found the Leaflet.TextPath plugin. I tried to use it in this context, but I have no experience with JavaScript and have not been able to make it work.

Below there are 3 files, the map.html, map.js and leaflet.textpath.js. The map.html file include the Qt WebChannel, the LeafLet map, the JS script and the leaflet.textpath file from the GitHub https://github.com/makinacorpus/Leaflet.TextPath.

Problem

Error occurs when I try to set the text to an example polyline, so this is trying to use the plugin. I believe that the error is in the map.html file, but I am not familiar enough with JS or HTML to catch the error. I tried using other plugins as Leaflet Rotated Marker, but this one did work.

Error

js: Uncaught TypeError: Cannot read property 'setAttribute' of undefined

I would appreciate any guidance.

(1)

(2)

Files

map.html