Merge pull request #3159 from HSLdevcom/DT-3463

DT-3463

app/component/map/tile-layer/CityBikes.js

@@ -5,10 +5,10 @@ import pick from 'lodash/pick';
 
 import { isBrowser } from '../../../util/browser';
 import {
-  drawAvailabilityBadge,
   drawAvailabilityValue,
   drawIcon,
   drawRoundIcon,
+  drawCitybikeNotInUseIcon,
   getMapIconScale,
 } from '../../../util/mapIconUtils';
 
@@ -113,25 +113,17 @@ class CityBikes {
             ),
           );
 
-          if (result.state === BIKESTATION_CLOSED) {
-            // Draw just plain grey base icon
-            return drawIcon(
-              `${iconName}_off`,
-              this.tile,
-              geom,
-              this.citybikeImageSize,
-            );
-          }
-
-          if (result.state === BIKESTATION_OFF) {
+          if (
+            result.state === BIKESTATION_CLOSED ||
+            result.state === BIKESTATION_OFF
+          ) {
             return drawIcon(
-              `${iconName}_off`,
+              iconName,
               this.tile,
               geom,
               this.citybikeImageSize,
             ).then(() =>
-              drawAvailabilityBadge(
-                'no',
+              drawCitybikeNotInUseIcon(
                 this.tile,
                 geom,
                 this.citybikeImageSize,

app/util/mapIconUtils.js

@@ -276,12 +276,20 @@ export function drawParkAndRideIcon(tile, geom, width, height) {
   );
 }
 
-export function drawCitybikeNotInUseIcon(tile, geom, imageSize) {
+export function drawCitybikeNotInUseIcon(
+  tile,
+  geom,
+  imageSize,
+  badgeSize,
+  scaleratio,
+) {
   return getImageFromSpriteCache(
     'icon-icon_not-in-use',
-    imageSize,
-    imageSize,
-  ).then(image => drawIconImage(image, tile, geom, imageSize, imageSize));
+    badgeSize,
+    badgeSize,
+  ).then(image =>
+    drawIconImageBadge(image, tile, geom, imageSize, badgeSize, scaleratio),
+  );
 }
 
 export function drawAvailabilityBadge(