From 6b0c786079569c404ed317d49dbb048e6df3cbf0 Mon Sep 17 00:00:00 2001
From: ilyankou <ilyankou@gmail.com>
Date: Thu, 14 Mar 2024 14:49:41 +0000
Subject: [PATCH] Preserve polyline order in legend

---
 scripts/map.js | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/scripts/map.js b/scripts/map.js
index 9eef6132..cb79cb4f 100755
--- a/scripts/map.js
+++ b/scripts/map.js
@@ -783,6 +783,9 @@ $(window).on('load', function() {
    * Adds polylines to the map
    */
   function processPolylines(p) {
+
+    var lines = Array(p.length); // array to keep track of loaded geojson polylines
+
     if (!p || p.length == 0) return;
 
     var pos = (getSetting('_polylinesLegendPos') == 'off')
@@ -814,20 +817,19 @@ $(window).on('load', function() {
             }
           }
 
-          line = L.polyline(latlng, {
+          var line = L.polyline(latlng, {
             color: (p[index]['Color'] == '') ? 'grey' : p[index]['Color'],
             weight: trySetting('_polylinesWeight', 2),
             pane: 'shadowPane'
-          }).addTo(map);
+          })
+          
+          lines[index] = line;
+          line.addTo(map);
 
           if (p[index]['Description'] && p[index]['Description'] != '') {
             line.bindPopup(p[index]['Description']);
           }
 
-          polylinesLegend.addOverlay(line,
-            '<i class="color-line" style="background-color:' + p[index]['Color']
-            + '"></i> ' + p[index]['Display Name']);
-
           if (index == 0) {
             if (polylinesLegend._container) {
               polylinesLegend._container.id = 'polylines-legend';
@@ -850,8 +852,15 @@ $(window).on('load', function() {
             }
           }
 
-          if (p.length == index + 1) {
+          if ( lines.filter(Boolean).length == p.length ) { // only if all polylines loaded
             completePolylines = true;
+
+            // Add polylines to the legend - we do this after all lines are loaded
+            for (let j = 0; j < p.length; j++) {
+              polylinesLegend.addOverlay(lines[j],
+                '<i class="color-line" style="background-color:' + p[j]['Color']
+                + '"></i> ' + p[j]['Display Name']);
+            }
           }
         };
       }(i));