Comments (5)
Hi!
If you mean having the same pattern look not depending on the map zoom, you have to define the pattern repeat
property in pixels. See the line under "Pattern definition" in the README.
In your example, I guess you've defined it in percents, so their number is constant and the decorator have to shrink or enlarge spaces between them to cover the full line.
If you meant changing the size of the symbols themselves depending on the zoom, like in your example keeping the same number of arrows, the arrow heads in the same relative position, and changing the arrow line size, it's a bit more difficult. Your arrows are markers, and Leaflet markers don't scale with zoom.
You would have to define a new pattern type drawn with vector overlays (Polyline, Polygon, etc.). You can use L.Symbol.ArrowHead
as an inspiration. Let me know if there are missing pieces to do it. Maybe I'll do it on my side too.
from leaflet.polylinedecorator.
Hello,
First, thanks for this great plug-in !
This is a feature that is very useful. Arrows look great but once the zoom is activated, they become either too big or too small.
At the moment, my workaround is to modify the pixel size every time there is a zoomend event, but it really is not a great solution.
I'm not talented enough to create a new pattern type as suggested but would very much like to be kept in the loop of any developments
Thanks
from leaflet.polylinedecorator.
Hi @JoceM!
Do you have screenshots of the result, or better a working example of your workaround, so I can see more explicitely what features are missing? It would definitely help, as it's not always easy to see what everybody means by "too big" or "too small" :)
Thanks
from leaflet.polylinedecorator.
Hi @bbecquet
Thanks for your reply.
I have attached 2 print screens that hopefully make my point clearer.
The first one is titled "Flèches Europe" and shows a "reasonable" arrow size.
The second one is a focus on one polyline. The arrow remained at the same "pixelSize" but look now far too big.
My idea is to find an option to show the arrow at the same size no matter what the zoom level is. In other words, ideally, the "Flèches details" should show an arrow that has a same size as in Flèches Europe.
Does it clarify ?
from leaflet.polylinedecorator.
@JoceM Did you ever resolve the autoscaling issue? I am facing the same problem now.
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
- Is there any option to prevent collision between arrows?
- How to add multiple arrows in one line? HOT 2
- How do I make my arrowhead pointy? HOT 2
- Issue with Leaflet.PolylineOffset
- 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.