CODEWITHSUNDEEP
leafletpolylinevertices
Tim Autin
Tim Autin

Reputation: 6165

Leaflet - draw polyline vertices only

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?

Upvotes: 3

Views: 2040

Answers (1)

iH8
iH8

Reputation: 28638

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

Upvotes: 2

Related Questions