Comments (10)
Hi, and sorry for the long wait, I haven't had much time to work on this project lately.
I couldn't reproduce your case, but I miss details.
I tried the following:
var pl = L.polyline([[51.51462, -0.12377], [51.5133, -0.12207]], {color: "#ff7800", weight: 1});
var pd = L.polylineDecorator(pl, {
patterns: [{offset: 0, repeat: 10, symbol: L.Symbol.dash({pixelSize: 0})}]
});
var lg = L.layerGroup([pl, pd]);
map.addLayer(lg);
map.removeLayer(lg);
Namely: adding a polyline and a decorator to the same LayerGroup, adding this group to the map, then removing it. And it's working.
Is it what you meant? Do you still experience the problem?
from leaflet.polylinedecorator.
I am having a similar issue..
leaflet 0.7.2.
Using the leaflet-0.7.2 branch of PolylineDecorator.
So in our project the requirement is if one polyline is clicked, it should add the decorators. When a different polyline is clicked, it should remove the decorators from the previous polyline and add them to the newly selected polyline.
I have a feature group containing many polylines that are displayed on the map. Each has an on click event which adds the polyline decorator(s) to the feature group so they show up on the polyline on the map. That works flawlessly.
During the on click, any decorators added to the polyline are placed into an array for access later when they need to be removed.
When the next polyline is clicked, it checks to see if there are any decorators in that array. If so, it loops through them and calls removeLayer on the feature group passing in the decorator. This is where I experience the error...
Uncaught TypeError: layer.off is not a function L.FeatureGroup.L.LayerGroup.extend.removeLayer @ leaflet-src.js:4423 (anonymous function) @ origindestination.js:197 forEach @ angular.js:323 (anonymous function) @ origindestination.js:196 L.Mixin.Events.fireEvent @ leaflet-src.js:461 L.Path.L.Browser.canvas.L.Path.extend._onClick @ leaflet-src.js:5176 L.Mixin.Events.fireEvent @ leaflet-src.js:473 L.Map.L.Class.extend._fireMouseEvent @ leaflet-src.js:2224 L.Map.L.Class.extend._onMouseClick @ leaflet-src.js:2204 L.DomEvent.addListener.handler @ leaflet-src.js:6402
from leaflet.polylinedecorator.
Can i ask why the clearLayer() method not working for polyline decorators???
As it gives console error : Uncaught TypeError: layer.off is not a function
I been trying to figure out as i am new to javascript, couldn't quite understand the problem....
Although line decorator did brilliant job, thanks to you sir
from leaflet.polylinedecorator.
Hi, and thanks for using my plugin.
As I had problems in the past trying to reproduce this bug, can you please provide some minimal code that shows the issue?
from leaflet.polylinedecorator.
Thanks for reply, yes like where currentFeatureGroup() is having these decorators
new L.Marker(e.latlng, { icon: wallIcon, draggable: false }).addTo(currentFeatureGroup);
polylineWall.addLatLng([e.latlng.lat,e.latlng.lng]).addTo(currentFeatureGroup);
// Add coordinate to the polyline
//polylineWall.addLatLng(e.latlng).addTo(currentFeatureGroup);
var decorator = L.polylineDecorator(polylineWall, {
patterns: [
// define a pattern of 10px-wide dashes, repeated every 20px on the line
{ offset: 0, endOffset: 0, repeat: '30px', symbol: new L.Symbol.dash({pixelSize: 5 })}
]
}).addTo(currentFeatureGroup);
from leaflet.polylinedecorator.
By what I can guess, this code is a click event callback, where you add a point to a polyline, right?
Indeed, when I use it like that and call clearLayer
on the currentFeatureGroup
, I get the error.
I'll see what I can do, thanks for your help.
from leaflet.polylinedecorator.
ok thanks, looking forward to the fix
from leaflet.polylinedecorator.
Ok, the cause of the bug is because Leaflet's implementation of FeatureGroup
assumes every layer it includes is event-enabled, and thus has the on()
& off()
methods… which isn't the case for the LayerGroup
class, from which PolylineDecorator
derives.
I'm writing this down as a reference, I didn't decide the best way to fix it yet. I could add the methods, but I would like to avoid side-effects. And actually, it even looks like a Leaflet bug to me.
As a workaround until it's fixed, if you don't need events on the group itself (it's ok with the individual layers like the polyline or markers), you could use a LayerGroup
instead of a FeatureGroup
.
from leaflet.polylinedecorator.
As I thought, it is actually a bug in Leaflet, and I just found it has been fixed some days ago: Leaflet/Leaflet#3869
So I won't change anything on my side, as it's not where the problem is.
For a better workaround until the fixed Leaflet version is released, I suggest you add this line at the beginning of your program:
L.PolylineDecorator.include(L.Mixin.Events);
This adds the event methods to PolylineDecorator
, so it's usable in current FeatureGroup
s without error.
from leaflet.polylinedecorator.
Brilliant, thanks, problem resolved, i appreciate your effort,,,cheers
from leaflet.polylinedecorator.
Related Issues (20)
- How in leaflet add custom data to polyline?
- I'd like to ask you how to add slashes to polygons, like this
- how do i delete some arrow on the map HOT 1
- Separate colors for stroke, fill HOT 1
- Markers Color HOT 9
- Leaflet polyline decorator HOT 1
- Decorator onclick event retrieve property HOT 1
- How to disable arrow auto scale? HOT 2
- Using polylineDecorator with ant-path is not working HOT 1
- Show/Hide Polylinedecorators dynamically (based on other variable) in React Leaflet
- Decorators drawn outside of line boundaries when zoomed out HOT 2
- Adding an arrow to a Line with GeoJson
- Further development HOT 2
- How can I make polylineDecorator not interactive ? HOT 1
- rotationAngle conflicts with Leaflet.RotatedMarker HOT 4
- L.polylineDecorator is Undefined HOT 2
- PolylineDecorator always top layer even when calling bringToBack() HOT 3
- Polyline decorator doesn't preserve the state of symbol styling HOT 1
- Problem with fullscreen control
- Problem with using method setPaths
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from leaflet.polylinedecorator.