3

The title is quite clear, I'm using Leaflet and I need to show only the vertices of a polyline. For exemple see this image :

enter image description here

Currently I can only have the black line, I'd like only the red squares. Using markers is not an option for performance issue, my lines can be huge (500 000 vertices) and the use of smoothFactor is a need.

Is that possible? If not, does someone knows a plugin that does that, or have a hint on how could I do that by extending the Polyline class?

Tim Autin
  • 6,043
  • 5
  • 46
  • 76
  • If you cannot use markers, even in Canvas mode, It sounds like you want an svg `path` with significant sections of it removed/cloaked to only show the vertex sections.(and how would you make them red squares anyway? - a thick red polyline style I guess?).I am not exactly sure how that work would in the SVG spec. – snkashis Oct 08 '15 at 18:20
  • Well I'm a total noob in svg, so I absolutely don't know ^^. I don't have to draw red squares, it can be dots (for example). – Tim Autin Oct 08 '15 at 20:14

1 Answers1

2

What you could do here is every time the polyline gets rendered, get the segments of it's SVG path, use those points to add SVG rectangle elements to the polyline's container:

var polyline = L.Polyline([]).addTo(map),
    list = polyline._path.pathSegList

// Iterate segments
for (var i = 0; i < list.length; i++) {

    // Create SVG rectangle element
    rectangle = document.createElementNS('http://www.w3.org/2000/svg', 'rect')

    // Set rectangle size attributes
    rectangle.setAttributeNS(null, 'height', 4)
    rectangle.setAttributeNS(null, 'width', 4)

    // Set position attributes, compensate for size
    rectangle.setAttributeNS(null, 'x', list[i].x - 2)
    rectangle.setAttributeNS(null, 'y', list[i].y - 2)

    // Set rectangle color
    rectangle.setAttributeNS(null, 'fill', 'red')

    // Append rectangle to polyline container
    polyline._container.appendChild(rectangle)
  }

enter image description here

Seems to work as far as i had time to test it ;) Had to use a timeout though, don't know why, look in to that when i've got more time on my hands.

Example on Plunker: http://embed.plnkr.co/vZI7aC/preview

iH8
  • 27,722
  • 4
  • 67
  • 76
  • That's a good start, thanks! I'm using Leaflet v1.0 beta so it needs some adjustments. I'm no longer on this problem for the next weeks, but I'll come back if I solve it. If you are using this code, beware, it doesn't work on Safari. – Tim Autin Oct 12 '15 at 13:12
  • I see they no longer add a `g` element per path and append all `path` elements into one `g` element. Would need some minor modification to get it to work with 1.0.0-b1. As for the Safari issue, just tried it, you're right. Kinda weird because it doesn't throw any errors at all for me. I'm not really at home with Safari's inspector but i'll look into it when i find the time. – iH8 Oct 12 '15 at 13:40
  • No thanks, always glad to help. Just accept the answer once we've reached a satifactory solution. I've updated the example to use 1.0.0-b1. Appending the grouped rectangles directly to `parentElement` of `this._path`. Works now. I'll get back to you on the Safari issue. – iH8 Oct 12 '15 at 14:09
  • Great, that's working! I accepted the answer, but still, if you have time for the Safari problem, it would be great! Thanks again. – Tim Autin Oct 12 '15 at 14:22