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 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
    – Dana D
    Apr 27 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 at 7:27

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.