Order lines by increasing number

src/front/map.js

@@ -25,22 +25,41 @@ h0NmFsdzQ3emxqIn0.cyxF0h36emIMTk3cc4VqUw`;
 const simulation = require('../tam/simulation');
 const network = require('../tam/network.json');
 
-const getRouteColors = routes =>
+const getRoutesLines = routes => routes.filter(
-{
-    const colors = routes.filter(
     // Only consider normal routes (excluding alternate routes)
     ([lineRef, routeRef]) =>
     network.lines[lineRef].routes[routeRef].state === 'normal'
-    ).map(([lineRef]) => network.lines[lineRef].color);
+).map(([lineRef]) => lineRef);
 
-    if (colors.length >= 1)
+const getLinesColors = lines =>
+{
+    if (lines.length >= 1)
     {
-        return colors;
+        return lines.map(lineRef => network.lines[lineRef].color);
     }
 
     return ['#FFFFFF'];
 };
 
+const lineFeaturesOrder = (feature1, feature2) =>
+{
+    const lines1 = feature1.get('lines');
+
+    if (lines1.length === 0)
+    {
+        return -1;
+    }
+
+    const lines2 = feature2.get('lines');
+
+    if (lines2.length === 0)
+    {
+        return 1;
+    }
+
+    return Math.min(...lines1) - Math.min(...lines2);
+};
+
 const makeDataSources = () =>
 {
     const segmentsSource = new VectorSource();
@@ -49,7 +68,8 @@ const makeDataSources = () =>
     segmentsSource.addFeatures(
         Object.values(network.segments).map(({routes, nodes}) =>
             new Feature({
-                colors: getRouteColors(routes),
+                lines: getRoutesLines(routes),
+                colors: getLinesColors(getRoutesLines(routes)),
                 geometry: new LineString(nodes.map(
                     ({lat, lon}) => proj.fromLonLat([lon, lat])
                 )),
@@ -60,7 +80,8 @@ const makeDataSources = () =>
     stopsSource.addFeatures(
         Object.values(network.stops).map(({routes, lon, lat}) =>
             new Feature({
-                colors: getRouteColors(routes),
+                lines: getRoutesLines(routes),
+                colors: getLinesColors(getRoutesLines(routes)),
                 geometry: new Point(proj.fromLonLat([lon, lat])),
             })
         )
@@ -192,6 +213,7 @@ const createMap = target =>
 
     const segmentsBorderLayer = new VectorLayer({
         source: segmentsSource,
+        renderOrder: lineFeaturesOrder,
         style: segmentBorderStyle,
 
         updateWhileInteracting: true,
@@ -200,6 +222,7 @@ const createMap = target =>
 
     const segmentsInnerLayer = new VectorLayer({
         source: segmentsSource,
+        renderOrder: lineFeaturesOrder,
         style: segmentInnerStyle,
 
         updateWhileInteracting: true,
@@ -208,6 +231,7 @@ const createMap = target =>
 
     const stopsLayer = new VectorLayer({
         source: stopsSource,
+        renderOrder: lineFeaturesOrder,
         style: stopStyle,
 
         minZoom: 13,