fix(ui): fix formatting of speed and cost (#412)

Author: DennisOSRM

bundle.js

@@ -27,6 +27,21 @@
     <div style="color: white;">km/h:</div><div style="background: #5e4fa2">0-10</div><div style="background: #3288bd">10-20</div><div style="background: #66c2a5">20-30</div><div style="background: #abdda4">30-40</div><div style="background: #e6f598">40-50</div><div style="background: #fee08b">50-60</div><div style="background: #fdae61">60-70</div><div style="background: #f46d43">70-80</div><div style="background: #d53e4f">80-90</div><div style="background: #9e0142">90+</div>
 </div>
 <script>
+function numberFieldText(fieldName, suffix) {
+    return [
+        "concat",
+        [
+            "number-format",
+            ["get", fieldName],
+            {
+                "min-fraction-digits": 0,
+                "max-fraction-digits": 2
+            }
+        ],
+        suffix || ""
+    ];
+}
+
 var simple = {
     "version": 8,
     "name": "OSRM debug",
@@ -893,7 +908,7 @@
                 "text-rotation-alignment": "map",
                 "text-anchor": "center",
                 "text-keep-upright": false,
-                "text-field": "{speed} km/h ➜"
+                "text-field": numberFieldText("speed", " km/h ➜")
             },
             "metadata": {},
             "filter": [
@@ -916,7 +931,7 @@
         {
          "id": "osrm-0", "type": "symbol", "source": "osrm", "source-layer": "turns",
          "layout": { "icon-image": "0", "icon-offset": {stops: [[15,[10,0]],[18,[20,0]]]}, "icon-allow-overlap": true, "icon-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] },
-                    "text-field": "{cost}", "text-offset": {"base": 1, stops: [[15,[0.2,0.0]],[18,[3,0]]]}, "text-allow-overlap": true, "text-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] } ,
+                    "text-field": numberFieldText("cost"), "text-offset": {"base": 1, stops: [[15,[0.2,0.0]],[18,[3,0]]]}, "text-allow-overlap": true, "text-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] } ,
                      "text-size": { "base": 1, "stops": [ [ 10, 8 ], [ 18, 11 ] ] }, "text-font": ["Noto Sans Bold"], "symbol-avoid-edges": false},
          "paint": { "icon-color" : "#ffffff", "icon-halo-color" : "#ffffff", "icon-halo-width" : 2,
             "text-color": "hsl(0, 0%, 100%)", "text-halo-width": 1, "text-halo-color": "hsl(0, 0%, 0%)", "text-halo-blur": 0},
@@ -925,7 +940,7 @@
         {
          "id": "osrm-45", "type": "symbol", "source": "osrm", "source-layer": "turns",
          "layout": { "icon-image": "45", "icon-offset": {stops: [[15,[15,15]],[18,[30,30]]]}, "icon-allow-overlap": true, "icon-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] },
-                    "text-field": "{cost}", "text-offset": {"base": 1, stops: [[15,[0.2,0.2]],[18,[3,3]]]}, "text-allow-overlap": true, "text-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] } ,
+                    "text-field": numberFieldText("cost"), "text-offset": {"base": 1, stops: [[15,[0.2,0.2]],[18,[3,3]]]}, "text-allow-overlap": true, "text-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] } ,
                      "text-size": { "base": 1, "stops": [ [ 10, 8 ], [ 18, 11 ] ] }, "text-font": ["Noto Sans Bold"], "symbol-avoid-edges": false},
          "paint": { "icon-color" : "#ffffff", "icon-halo-color" : "#ffffff", "icon-halo-width" : 2,
             "text-color": "hsl(0, 0%, 100%)", "text-halo-width": 1, "text-halo-color": "hsl(0, 0%, 0%)", "text-halo-blur": 0},
@@ -934,7 +949,7 @@
         {
          "id": "osrm-90", "type": "symbol", "source": "osrm", "source-layer": "turns",
          "layout": { "icon-image": "90", "icon-offset": {stops: [[15,[15,15]],[18,[30,30]]]}, "icon-allow-overlap": true, "icon-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] },
-                    "text-field": "{cost}", "text-offset": {"base": 1, stops: [[15,[0.2,0.2]],[18,[3,3]]]}, "text-allow-overlap": true, "text-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] } ,
+                    "text-field": numberFieldText("cost"), "text-offset": {"base": 1, stops: [[15,[0.2,0.2]],[18,[3,3]]]}, "text-allow-overlap": true, "text-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] } ,
                      "text-size": { "base": 1, "stops": [ [ 10, 8 ], [ 18, 11 ] ] }, "text-font": ["Noto Sans Bold"], "symbol-avoid-edges": false},
          "paint": { "icon-color" : "#ffffff", "icon-halo-color" : "#ffffff", "icon-halo-width" : 2,
             "text-color": "hsl(0, 0%, 100%)", "text-halo-width": 1, "text-halo-color": "hsl(0, 0%, 0%)", "text-halo-blur": 0},
@@ -943,7 +958,7 @@
         {
          "id": "osrm-135", "type": "symbol", "source": "osrm", "source-layer": "turns",
          "layout": { "icon-image": "135", "icon-offset": {stops: [[15,[15,15]],[18,[30,30]]]}, "icon-allow-overlap": true, "icon-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] },
-                    "text-field": "{cost}", "text-offset": {"base": 1, stops: [[15,[0.2,0.2]],[18,[3,3]]]}, "text-allow-overlap": true, "text-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] } ,
+                    "text-field": numberFieldText("cost"), "text-offset": {"base": 1, stops: [[15,[0.2,0.2]],[18,[3,3]]]}, "text-allow-overlap": true, "text-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] } ,
                      "text-size": { "base": 1, "stops": [ [ 10, 8 ], [ 18, 11 ] ] }, "text-font": ["Noto Sans Bold"], "symbol-avoid-edges": false},
          "paint": { "icon-color" : "#ffffff", "icon-halo-color" : "#ffffff", "icon-halo-width" : 2,
             "text-color": "hsl(0, 0%, 100%)", "text-halo-width": 1, "text-halo-color": "hsl(0, 0%, 0%)", "text-halo-blur": 0},
@@ -952,7 +967,7 @@
         {
          "id": "osrm-n45", "type": "symbol", "source": "osrm", "source-layer": "turns",
          "layout": { "icon-image": "n45", "icon-offset": {stops: [[15,[15,30]],[18,[30,60]]]}, "icon-allow-overlap": true, "icon-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] },
-                    "text-field": "{cost}", "text-offset": {"base": 1, stops: [[15,[0.15,0.4]],[18,[2.5,6]]]}, "text-allow-overlap": true, "text-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] } ,
+                    "text-field": numberFieldText("cost"), "text-offset": {"base": 1, stops: [[15,[0.15,0.4]],[18,[2.5,6]]]}, "text-allow-overlap": true, "text-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] } ,
                      "text-size": { "base": 1, "stops": [ [ 10, 8 ], [ 18, 11 ] ] }, "text-font": ["Noto Sans Bold"], "symbol-avoid-edges": false},
          "paint": { "icon-color" : "#ffffff", "icon-halo-color" : "#ffffff", "icon-halo-width" : 2,
             "text-color": "hsl(0, 0%, 100%)", "text-halo-width": 1, "text-halo-color": "hsl(0, 0%, 0%)", "text-halo-blur": 0},
@@ -961,7 +976,7 @@
         {
          "id": "osrm-n90", "type": "symbol", "source": "osrm", "source-layer": "turns",
          "layout": { "icon-image": "n90", "icon-offset": {stops: [[15,[15,30]],[18,[30,60]]]}, "icon-allow-overlap": true, "icon-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] },
-                    "text-field": "{cost}", "text-offset": {"base": 1, stops: [[15,[0.15,0.4]],[18,[2.5,6]]]}, "text-allow-overlap": true, "text-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] } ,
+                    "text-field": numberFieldText("cost"), "text-offset": {"base": 1, stops: [[15,[0.15,0.4]],[18,[2.5,6]]]}, "text-allow-overlap": true, "text-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] } ,
                      "text-size": { "base": 1, "stops": [ [ 10, 8 ], [ 18, 11 ] ] }, "text-font": ["Noto Sans Bold"], "symbol-avoid-edges": false},
          "paint": { "icon-color" : "#ffffff", "icon-halo-color" : "#ffffff", "icon-halo-width" : 2,
             "text-color": "hsl(0, 0%, 100%)", "text-halo-width": 1, "text-halo-color": "hsl(0, 0%, 0%)", "text-halo-blur": 0},
@@ -970,7 +985,7 @@
         {
          "id": "osrm-n135", "type": "symbol", "source": "osrm", "source-layer": "turns",
          "layout": { "icon-image": "n135", "icon-offset": {stops: [[15,[15,30]],[18,[30,60]]]}, "icon-allow-overlap": true, "icon-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] },
-                    "text-field": "{cost}", "text-offset": {"base": 1, stops: [[15,[0.15,0.4]],[18,[2.5,6]]]}, "text-allow-overlap": true, "text-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] } ,
+                    "text-field": numberFieldText("cost"), "text-offset": {"base": 1, stops: [[15,[0.15,0.4]],[18,[2.5,6]]]}, "text-allow-overlap": true, "text-rotate": { property: "bearing_in", stops: [[0, 0], [360, 360]] } ,
                      "text-size": { "base": 1, "stops": [ [ 10, 8 ], [ 18, 11 ] ] }, "text-font": ["Noto Sans Bold"], "symbol-avoid-edges": false},
          "paint": { "icon-color" : "#ffffff", "icon-halo-color" : "#ffffff", "icon-halo-width" : 2,
             "text-color": "hsl(0, 0%, 100%)", "text-halo-width": 1, "text-halo-color": "hsl(0, 0%, 0%)", "text-halo-blur": 0},
@@ -992,4 +1007,4 @@
 </script>
 
 </body>
-</html>
+</html>