CODEWITHSUNDEEP
javascriptleaflet
Simon The
Simon The

Reputation: 43

Good way to draw a directional (arrowed) marker in Leaflet?

I need to create a custom Marker class in Leaflet: the marker must include a direction arrow. The arrow size should not depend on a zoom level. The direction should be editable (the arrow head should be draggable itself).

It was pretty easy to create a class and draft basic editing and events. And now...

  1. I'm not sure what is the best way to draw it. At present, I'm adding a Polyline and changing its end coordinate every time a zoom changes. I believe there should be a way to "just draw a line in pixel coordinates", but the abstractions there are too deep to dive recklessly - things like L.Browser.ie are pretty scary. Can anyone please tell me, is there a better way to draw an arrow, or should I go with Polyline?
  2. On a second stage, the arrow head needs to be draggable. I apparently hooked the necessary events, but WHAT object should be dragged here? Should an arrow head be an Icon itself (that's what I do now)? Or is there a layer/extension that can apply dragging without creating a map object?

Thanks.

Upvotes: 3

Views: 15339

Answers (2)

Dmitrii Lipatov
Dmitrii Lipatov

Reputation: 1

Use plugin https://www.npmjs.com/package/leaflet-canvas-markers You can create a direction arrow by simply pointing to the previous waypoint! Or set custom rotate.

Upvotes: 0

Stubbies
Stubbies

Reputation: 3124

You can do this by using plain .png icons.

http://codepen.io/anon/pen/qJbgm

Upvotes: 2

Related Questions