Leaflet Polyline - Added SVG text elements are not visible

Question

I want to create a measuring tool for leaflet. Therefore I'm writing a plugin, that extends the polyline functionality. In the plugin I'm adding SVG text-path elements to the group of the layer. My problem is that the added elements are not visible on the map. I've tried to redraw the layer but this had no effect on the visibility of the added elements.

Here's my fiddle.

(function () {
    var __onAdd = L.Polyline.prototype.onAdd,
        __onRemove = L.Polyline.prototype.onRemove,
        __updatePath = L.Polyline.prototype._updatePath,
        __bringToFront = L.Polyline.prototype.bringToFront;

    L.Polyline.include({
      onAdd: function (map) {
          __onAdd.call(this, map);
          this._textRedraw();
      },

      onRemove: function (map) {
          __onRemove.call(this, map);
      },

      bringToFront: function () {
          __bringToFront.call(this);
          this._textRedraw();
      },

      setText: function () {
            var path = this._path,
                points = this.getLatLngs(),
                pathSeg,
                prevPathSeg,
                center,
                angle,
                rotation,
                textNode;

          /* 
           * If not in SVG mode or Polyline not added to map yet return
           * setText will be called by onAdd, using value stored in this._text
           */
          if (!L.Browser.svg || typeof this._map === 'undefined') {
              return this;
          }

          for (pathSeg = 0; pathSeg < path.pathSegList.length; pathSeg += 1) {
                if (pathSeg > 0) {
                    prevPathSeg = path.pathSegList[pathSeg - 1];
                  center = this._calcCenter(
                      prevPathSeg.x,
                      prevPathSeg.y,
                      path.pathSegList[pathSeg].x,
                      path.pathSegList[pathSeg].y
                  );                  
                  angle = this._calcAngle(
                          prevPathSeg.x,
                      prevPathSeg.y,
                      path.pathSegList[pathSeg].x,
                      path.pathSegList[pathSeg].y
                  );
                  rotation = 'rotate(' + angle + ' ' + 
                        center.x + ',' + center.y + ')';

                  textNode = document.createElement("text");
                  textNode.setAttribute('text-anchor', 'middle');
                  textNode.setAttribute('x', center.x);
                  textNode.setAttribute('y', center.y);
                  textNode.setAttribute('transform', rotation);
                  textNode.textContent = points[pathSeg - 1]
                        .distanceTo(points[pathSeg]);

                  this._path.parentElement.appendChild(textNode);
              } else {
                    continue;
              }
          }
      },

      _calcCenter: function (x1, y1, x2, y2) {
            return {
            x: (x1 + x2) / 2,
            y: (y1 + y2) / 2
          }
      },

      _calcAngle: function (x1, y1, x2, y2) {
              return Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
      },

      _textRedraw: function () {
            var textNodes = this._path.parentElement.getElementsByTagName('text'),
                tnIndex;

                    if (textNodes.length > 0) {
                for (tnIndex = textNodes.length - 1; tnIndex >= 0; tnIndex -= 1) {
                    textNodes[tnIndex].parentNode.removeChild(textNodes[tnIndex]);
              }
          }

          if (this.options.measurements) {
              this.setText();
          }
      },

      _updatePath: function () {
          __updatePath.call(this);
          this._textRedraw();
      }
  });
})();

Answer 1

You need create a SVG namespaced element using createElementNS :

Creates an element with the specified namespace URI and qualified name.

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS

Switch:

textNode = document.createElement("text");

to:

textNode = document.createElementNS("http://www.w3.org/2000/svg", "text");

Example: http://jsfiddle.net/w8yz18rf/1/