Bug when removing polyline with empty text from map

[vhpgomes]

Found a little bug. To reproduce:

• create some polyline
  var map = new L.map(...);
var layer = L.polyLine(...).addTo(map);
• add and remove some text (eg, using mouseover)
  layer.on('mouseover', function () {
this.setText(' ► ', {repeat: true, attributes: {fill: 'red'}});
});
layer.on('mouseout', function () {
this.setText(null);
});
• try to remove the polyline from the map:
  map.removeLayer(layer);

At this point the javascript will crash with (in Chrome):
Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

There's a jsfiddle that shows this issue. (shamelessly based this fiddle from a fiddle from another issue)
http://jsfiddle.net/vhpgomes/cmhbQ/19/

The error occurs because the textNode is removed when setting the text to null, but the plugin tries to remove it again when removing the polyline. I fixed it simply by deleting the text when it's first removed (the code already checks for it in the second removal):

delete this._textNode;

I'm new to this github stuff... what should I do? A pull request? Just for this one single line?

[leplatrem]

Thank you very much for this very detailed feedback !

If you found a fix, yes, open a pull-request with the fix (if you're sure about it, you can even edit the file on the github web page directly, can't be easier)

Thanks again !

[BobbyRuby]

So I downloaded a fresh copy because this just started happeing out of now where fellas.

          ` function addDeleteButtonToPolylinePopup(polyline, shapeData) {
		// Bind a popup to the polyline
		polyline.bindPopup('<button id="delete-btn-' + shapeData.id + '" data-shape-id="' + shapeData.id + '">Delete</button>' +
		 '');
		
		// Add an event listener for the polyline's 'popupopen' event
		polyline.on('popupopen', function (e) {				
			var popup = e.popup;
			
			// Get the delete button element from the popup content
			var deleteBtn = popup.getElement().querySelector('#delete-btn-' + shapeData.id);
			
			// Add click event listener to the delete button
			deleteBtn.addEventListener('click', function (e) {
				e.preventDefault();
				
				var shapeId = deleteBtn.getAttribute('data-shape-id');
				// Call the deleteShape function with the shapeData.id
				deleteShape(shapeId, polyline);
			});
		});
	}`

     ` // Function to delete the shape using AJAX
	function deleteShape(shapeId, polyline) {
	  var postId = window.featureRouteID; // Get the post ID if available		

	  // Send the data to the server via AJAX
	  jQuery.ajax({
	    url: ajaxUrl,
	    type: 'POST',
	    data: {
	      action: 'delete_shape_from_postmeta',
	      shape_id: shapeId,
	      post_id: postId
	    },
	    success: function(response) {
	      // console.log(response); // Optional: Handle the server response
	      // You can perform additional actions after shape deletion if needed
	      map.removeLayer(polyline);
	    },
	    error: function(error) {
	      console.error('Error:', error); // Optional: Handle errors
	    }
	  });
	}`

Any ideas on what the hell could make simple code like this stop working after, like more than a year due to this particular instance? Useing Lealet 1.7.0 and it did stop working after I switched the renderer to L.canvas() but I switched it back... still a big problem... You see this allows me to display fiber counts along a build pathway for my data collection web app.

[BobbyRuby]

Additionally this happens with text now... I'm very confused. Someone throw me a bone. I haven't messed with source nor have I changed this functionality. EVERYTHING works but deleting?

[leplatrem]

@submarcos is there a chance that someone at makinacorpus would give a look to the leaflet plugins issues and pull-requests?