1

It's my first time using multiOptionsPolyline to draw a multicolor polyline from an array of LatLng points, with red segments if distance is smaller or equal to 90m and green if bigger.

var polyLine = L.multiOptionsPolyline(latlngs, {
        multiOptions: {
            optionIdxFn: function (latLng, prevLatLng, index) {
                //if (index == 0) return 0;
                if (map.distance(latLng, prevLatLng) <= 90)
                    return 0;
                return 1;
            },
            options: [{
                color: 'red',
                className: 'polyline-fill'
            },
            {
                color: 'green',
                className: 'polyline-nofill',
                interactive: false
            }
            ]
        },
        weight: 3
    }).addTo(map);

If I have an array of elements var latlngs = [A, B, C, D, E, F, G, H, I, J] and only D->E (D-prevLatLng and E-latLng in optionIdxFn function) is bigger than 90m, the segment between D and E should be green and the other red.

My only issue is that the green color is attached to the next segment (E->F), instead of the correct one and I cannot understand what am I doing wrong. The same thing happens even if I have, let's say D->E and E->F greater than 90m. E->F becomes green and F->G. The green color applies with an offset of one segment.

3
  • Use latlngs[index-1] and latlngs[index-2] instead of latLng and prevLatLng. Apr 27, 2022 at 6:35
  • @IvanSanchez Can you please give me an example? I've tried changing to latlngs[index-1] and latlngs[index-2] instead of latLng and prevLatLng inside optionIdxFn but still doesn't apply the color right
    – LAffair
    Apr 27, 2022 at 7:02
  • 1
    Turns out the off-by-one error is in the opposite direction: use latlngs[index] and latlngs[index+1] (which should be easy to notice, since using i and i-1 shifted the colouring even further). I suggest you polish up plnkr.co/edit/7qx3YZ2JirwGhZyX , answer yourself, and submit a bug report & fix to the multioptionspolyline repo. Apr 27, 2022 at 7:27

0

Your Answer

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

Browse other questions tagged or ask your own question.