I'm new in Leaflet and I need to add a red polyline using an array of LatLng points like

var latlngs = [
[45.51, -122.68],
[37.77, -122.43],
[34.04, -118.2]
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);

which changes color to blue only on hover:

polyline.on("mouseover", function (e) {
        polyline.setStyle({ color: 'blue' });

polyline.on("mouseout", function (e) {
        polyline.setStyle({ color: 'red' })

Is there a way to not connect points that are at a greater distance than x meters? Or hide the connection line? It should also change the displayed polyline color to blue on hover, even if some points are not connected (the ones that are not connected remain in that state, only the color changes). From what I've searched, I can calculate the distance between coordinates using map.distance(firstPoint, secondPoint) but I don't know if this can be added as a condition to the polyline option

As an example: I receive, when the page loads, a 4 points array: A,B,C and D with distance from A->B of 2 m, B->C 6m and C->D 3m. If I the max distance is 5m then I should have a connection only between A->B and C->D. When hover over the line between A->B it changes to blue and also C->D. Same for C->D connection on hover. C->D turns blue and also for A->B. When the mouse is not over the line it changes back to red

  • You ask about drawing line, but there is no linedraw code above. Also Leaflet itself has no drawing capability. It's also not clear what you mean by "but also color the entire line blue on hover, even if parts of it are missing?" Please edit your question and clarify all that, adding maybe a picture illustrating what you want.
    – TomazicM
    Apr 20, 2022 at 9:17
  • @TomazicM I've edited my question. Please let me know if I clarified my request
    – LAffair
    Apr 20, 2022 at 9:30
  • Yes, it's better now, but still some clarification needed: (1) So A, B, C, D are points on an existing polyline? (2) What is the initial style of this polyline? All red? Or sections above limit are not shown at all? Please edit your question with additional clarifications.
    – TomazicM
    Apr 20, 2022 at 9:46
  • @TomazicM Edited my question. The polyline is drawn once, but the coordinates can change when you load the page again. It should be red by default
    – LAffair
    Apr 20, 2022 at 9:59

1 Answer 1


Leaflet (unlike OpenLayers) does not have possibility to separately style individual elements of a single feature. Each feature can have only one style, so to achieve what you want, instead of having a single polyline you have to break it into individual segements, calculate the length of each segment and add only segments with length under max allowed value.

Code could then look something like this:

function segementedPolyStyle(feature) {
  var style;
  if (feature.properties.isTooLong)
    style = {
      color: 'transparent',
  else {
    style = {
      color: 'red',
      opacity: 1.0

var mouseoverStyle = {
  color: 'blue'

var maxLength = 5;

function createSegmentedPolyline(coords) {
  var polyLayer = L.geoJSON(null, {
    style: segementedPolyStyle,
    onEachFeature: function(feature, layer) {
      layer.on("mouseover", function (e) {
      layer.on("mouseout", function (e) {
  for (var i = 0; i < (coords.length - 1); i++) {
    var line = L.polyline([coords[i], coords[i + 1]]);
    var length = L.latLng(coords[i]).distanceTo(L.latLng(coords[i + 1]));
    var geoJSON = line.toGeoJSON();
    geoJSON.properties.isTooLong = (length > maxLength);

var segmentedPolyline = createSegmentedPolyline(coords);
  • The color change on hover happens only on segments of polyline. It should apply on the entire polyline, no mater the segment you hover on
    – LAffair
    Apr 21, 2022 at 10:57
  • See modified answer.
    – TomazicM
    Apr 21, 2022 at 11:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.