setText(null) does not work in this case

[fabs07]

When using code from sample

    polylineLayer.on('mouseover', function () {
        this.setText('            \u25BA    ', {repeat: true, offset: 0, attributes: {'fill': 'lightblue'}});
    });

    polylineLayer.on('mouseout', function () {
        this.setText(null);
    });

setText(null) works as expected

I tried to replace this by a zoom controled version

	map.on("zoomend", function() {
		var zoom = this.getZoom();
		console.log(zoom);
		if (zoom > 10) {
			console.log("show");
			polylineLayer.setText('            \u25BA    ', {repeat: true, offset: 0, attributes: {'fill': 'lightblue'}});
		} else {
			console.log("hide");
			polylineLayer.setText(null);
		}
	})

In this case, setText shows Text after zoom level 11 is reached, but it does not remove text after zoom level decreases to 10 or lower. Anyway console.log('hide') is called

[mabhub]

Hi @fabs07,

Thanks for this detailed bug report! The issue you're describing suggests a difference in context handling between mouseover/mouseout events and zoomend.

🔍 Problem Analysis

In your first example (which works), this in the callbacks refers to the layer itself. In the second example with zoomend, this refers to the map object, which could explain why setText(null) doesn't work as expected.

🧪 Suggested Test

Could you try this modified version with an explicit layer reference?

// Store an explicit reference to the layer
var textLayer = polylineLayer;

map.on("zoomend", function() {
    var zoom = this.getZoom();
    console.log(zoom);
    if (zoom > 10) {
        console.log("show");
        textLayer.setText('            \u25BA    ', {repeat: true, offset: 0, attributes: {'fill': 'lightblue'}});
    } else {
        console.log("hide");
        textLayer.setText(null);
    }
});

📋 Additional Information Needed

To help with diagnosis, could you please add the following information to your issue:

• Leaflet.TextPath version being used
• Leaflet version
• Browser and version (Chrome, Firefox, Safari, etc.)
• Complete reproducible example - you can use online services like:
  • JSFiddle
  • CodePen
  • JSBin
  • Plunker
• Result of the test suggested above

This information will help maintainers reproduce and fix the issue more efficiently.

Thanks for your contribution! 🙏

[fabs07]

Hello, thanks for your answer. Your suggestion does not work and does not. This is the code: var polylineLayer = L.geoJSON(poly, { style: myStyle }).addTo(map); map.fitBounds(polylineLayer.getBounds()); polylineLayer.on('mouseover', function () { console.log("mouseover"); this.setText(' \u25BA ', {repeat: true, offset: 0, attributes: {'fill': 'lightblue'}}); }); polylineLayer.on('mouseout', function () { console.log("mouseout"); this.setText(null); }); var textLayer = polylineLayer; map.on("zoomend", function() { var zoom = this.getZoom(); console.log(zoom); if (zoom > 10) { console.log("show"); textLayer.setText(' \u25BA ', {repeat: true, offset: 0, attributes: {'fill': 'lightblue'}}); } else { console.log("hide"); textLayer.setText(null); } }) What I wanted to get, is that textLayer is show either on mouseover or at zoom level > 10. In fact both actions now work as expected if used alone. But in this combination it fails: - map is shown at startup in zoom level 5 (no arrows) - mouseover/mouseout work fine - zoom in/out works as well - but once mouseover is called when zoom > 10, you don’t get rid of the arrows anymore. Neither by mouseout nor by zoomout Leaflet.TextPath version being used: I think it is latest one – there’s no version mentioned in code /* * Leaflet.TextPath - Shows text along a polyline * Inspired by Tom Mac Wright article : * https://web.archive.org/web/20130312131812/http://mapbox.com/osmdev/2012/11/20/getting-serious-about-svg/ <https://web.archive.org/web/20130312131812/http:/mapbox.com/osmdev/2012/11/20/getting-serious-about-svg/> */ Leaflet version: 1.6.0 Browser: Edge: 140 I can’t really offer an sample, as we use a commercial map license Regards Florian Von: mab ***@***.***> Gesendet: Dienstag, 30. September 2025 16:42 An: makinacorpus/Leaflet.TextPath ***@***.***> Cc: Florian ***@***.***>; Mention ***@***.***> Betreff: Re: [makinacorpus/Leaflet.TextPath] setText(null) does not work in this case (Issue #101) <https://avatars.githubusercontent.com/u/1846633?s=20&v=4> mabhub left a comment (makinacorpus/Leaflet.TextPath#101) <#101 (comment)> Hi @fabs07 <https://github.com/fabs07> , Thanks for this detailed bug report! The issue you're describing suggests a difference in context handling between mouseover/mouseout events and zoomend. 🔍 Problem Analysis In your first example (which works), this in the callbacks refers to the layer itself. In the second example with zoomend, this refers to the map object, which could explain why setText(null) doesn't work as expected. 🧪 Suggested Test Could you try this modified version with an explicit layer reference? // Store an explicit reference to the layer var textLayer = polylineLayer; map.on("zoomend", function() { var zoom = this.getZoom(); console.log(zoom); if (zoom > 10) { console.log("show"); textLayer.setText(' \u25BA ', {repeat: true, offset: 0, attributes: {'fill': 'lightblue'}}); } else { console.log("hide"); textLayer.setText(null); } }); 📋 Additional Information Needed To help with diagnosis, could you please add the following information to your issue: * Leaflet.TextPath version being used * Leaflet version * Browser and version (Chrome, Firefox, Safari, etc.) * Complete reproducible example - you can use online services like: * JSFiddle <https://jsfiddle.net/> * CodePen <https://codepen.io/> * JSBin <https://jsbin.com/> * Plunker <https://plnkr.co/> * Result of the test suggested above This information will help maintainers reproduce and fix the issue more efficiently. Thanks for your contribution! 🙏 — Reply to this email directly, view it on GitHub <#101 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABNRSAWINZB3RQUGZJ74ISL3VKJDXAVCNFSM6AAAAACFNVZZDWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTGNJSGU2DEMJXG4> . You are receiving this because you were mentioned. <https://github.com/notifications/beacon/ABNRSAVICS6MPJBOBYJ3JWT3VKJDXA5CNFSM6AAAAACFNVZZDWWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTWH2O56C.gif> Message ID: ***@***.*** ***@***.***> >

[mabhub]

Could you please try the following tests to help us isolate the problem?

Test 1 - Detailed state logging on mouseout:

polylineLayer.on('mouseout', function () {
    console.log("mouseout - before setText(null)");
    console.log("Current text state:", this._textPath);
    this.setText(null);
    console.log("State after setText(null):", this._textPath);
});

Test 2 - Explicit cleanup on zoomout:

else {
    console.log("hide");
    textLayer.setText(null);
    // Try: redraw the layer
    if (textLayer.redraw) textLayer.redraw();
}

Test 3 - Check detailed console logs:

• Do the console.log("hide") messages appear correctly on zoomout?
• Are there any errors in the browser console?

This would help us confirm whether it's truly a plugin bug or a complex interaction between the events.

[fabs07]

Hi, I added the changes and gave it a try. What I did: - open a map with a route - moving mouse over route (arrows are shown and hided as wanted) - zooming in until arrows are shown (correct) - zooming out until arrows are hided (correct) - zooming in until arrows are shown (correct) - moving mouse over route (nothing happens, which is correct as zoomlevel still is reached) - zooming out (error: arrows are not hided anymore) Console: If it helps, I can send you a video of it as well Regards Florian Von: mab ***@***.*** ***@***.***> > Gesendet: Dienstag, 4. November 2025 22:13 An: makinacorpus/Leaflet.TextPath ***@***.*** ***@***.***> > Cc: Florian ***@***.*** ***@***.***> >; Mention ***@***.*** ***@***.***> > Betreff: Re: [makinacorpus/Leaflet.TextPath] setText(null) does not work in this case (Issue #101) <https://avatars.githubusercontent.com/u/1846633?s=20&v=4> mabhub left a comment (makinacorpus/Leaflet.TextPath#101) <#101 (comment)> Could you please try the following tests to help us isolate the problem? Test 1 - Detailed state logging on mouseout: polylineLayer.on('mouseout', function () { console.log("mouseout - before setText(null)"); console.log("Current text state:", this._textPath); this.setText(null); console.log("State after setText(null):", this._textPath); }); Test 2 - Explicit cleanup on zoomout: else { console.log("hide"); textLayer.setText(null); // Try: redraw the layer if (textLayer.redraw) textLayer.redraw(); } Test 3 - Check detailed console logs: * Do the console.log("hide") messages appear correctly on zoomout? * Are there any errors in the browser console? This would help us confirm whether it's truly a plugin bug or a complex interaction between the events. — Reply to this email directly, view it on GitHub <#101 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABNRSAWT4UVZG5OCZZDGPBL33EJHFAVCNFSM6AAAAACFNVZZDWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTIOBYGAZTGNBRGY> . You are receiving this because you were mentioned. <https://github.com/notifications/beacon/ABNRSARWVRMTSOGZ4HZZECT33EJHFA5CNFSM6AAAAACFNVZZDWWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTWP44VIQ.gif> Message ID: ***@***.*** ***@***.***> >