From a0db36e5d341956fc67895c53772b9f9dd8fc9fc Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@gmail.com>
Date: Mon, 27 Jul 2020 09:38:21 +0200
Subject: [PATCH] Different colours for widths

---
 Customizations/Layers/Widths.ts | 8 +++++---
 index.html                      | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/Customizations/Layers/Widths.ts b/Customizations/Layers/Widths.ts
index 951f0e4c8..df29c7b02 100644
--- a/Customizations/Layers/Widths.ts
+++ b/Customizations/Layers/Widths.ts
@@ -90,17 +90,19 @@ export class Widths extends LayerDefinition {
         const width = parseFloat(properties["width:carriageway"]);
 
 
-        const targetWidth =
+        const targetWidthIgnoringPedestrians =
             carWidth +
             cyclistWidth +
-            Math.max(0, pedestrianFlowNeeded) * this.pedestrianWidth +
             parallelParkingCount * this.carWidth;
 
+        const targetWidth = targetWidthIgnoringPedestrians +  Math.max(0, pedestrianFlowNeeded) * this.pedestrianWidth;
+
         return {
             parkingLanes: parallelParkingCount,
             parkingStateKnown: parkingStateKnown,
             width: width,
             targetWidth: targetWidth,
+            targetWidthIgnoringPedestrians: targetWidthIgnoringPedestrians,
             onewayBike: onewayBike,
             pedestrianFlowNeeded: pedestrianFlowNeeded,
             cyclingAllowed: cyclingAllowed
@@ -141,7 +143,7 @@ export class Widths extends LayerDefinition {
 
 
             const props = self.calcProps(properties);
-            if (props.pedestrianFlowNeeded > 0) {
+            if (props.width >= props.targetWidthIgnoringPedestrians) {
                 c = "#fa0"
             }
             if (props.width >= props.targetWidth || !props.cyclingAllowed) {
diff --git a/index.html b/index.html
index 4e30fb945..168e78778 100644
--- a/index.html
+++ b/index.html
@@ -42,7 +42,7 @@
     <div id="filter__selection"></div>
 </div>
 
-<div id="centermessage"></div>
+<div id="centermessage">Loading...</div>
 <div id="bottomRight" style="display: none">ADD</div>
 
 <div id="geolocate-button"></div>