Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug when removing polyline with empty text from map #18

Closed
vhpgomes opened this issue Aug 13, 2014 · 4 comments
Closed

Bug when removing polyline with empty text from map #18

vhpgomes opened this issue Aug 13, 2014 · 4 comments

Comments

@vhpgomes
Copy link
Contributor

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
Copy link
Collaborator

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 !

vhpgomes added a commit to vhpgomes/Leaflet.TextPath that referenced this issue Aug 14, 2014
As I described in the issue: makinacorpus#18, this is a very small fix for a very specific scenario.

More details in the issue.
@BobbyRuby
Copy link

BobbyRuby commented Jan 10, 2024

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
Copy link

BobbyRuby commented Jan 10, 2024

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
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants