DT-5452 Show closed stops on map using badge icons

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

@@ -52,11 +52,11 @@ class Stops {
       this.tile.hilightedStops.includes(feature.properties.gtfsId);
     let hasTrunkRoute = false;
     let hasLocalTramRoute = false;
+    const routes = JSON.parse(feature.properties.routes);
     if (
       feature.properties.type === 'BUS' &&
       this.config.useExtendedRouteTypes
     ) {
-      const routes = JSON.parse(feature.properties.routes);
       if (routes.some(p => p.gtfsType === ExtendedRouteTypes.BusExpress)) {
         hasTrunkRoute = true;
       }
@@ -65,7 +65,6 @@ class Stops {
       feature.properties.type === 'TRAM' &&
       this.config.useExtendedRouteTypes
     ) {
-      const routes = JSON.parse(feature.properties.routes);
       if (routes.some(p => p.gtfsType === ExtendedRouteTypes.SpeedTram)) {
         hasLocalTramRoute = true;
       }
@@ -94,6 +93,9 @@ class Stops {
         mode = 'speedtram';
       }
 
+      const stopOutOfService = !!feature.properties.closedByServiceAlert;
+      const noRoutesForStop = !routes.length;
+
       drawStopIcon(
         this.tile,
         feature.geom,
@@ -107,6 +109,8 @@ class Stops {
           !isNull(feature.properties.code)
         ),
         this.config.colors.iconColors,
+        stopOutOfService,
+        noRoutesForStop,
       );
     }
   }
@@ -123,8 +127,13 @@ class Stops {
   }
 
   getPromise(lang) {
+    const zoom = this.tile.coords.z + (this.tile.props.zoomOffset || 0);
+    const stopsUrl =
+      zoom >= this.config.stopsMinZoom
+        ? this.config.URL.REALTIME_STOP_MAP
+        : this.config.URL.STOP_MAP;
     return fetchWithLanguageAndSubscription(
-      `${getLayerBaseUrl(this.config.URL.STOP_MAP, lang)}${
+      `${getLayerBaseUrl(stopsUrl, lang)}${
         this.tile.coords.z + (this.tile.props.zoomOffset || 0)
       }/${this.tile.coords.x}/${this.tile.coords.y}.pbf`,
       this.config,
@@ -145,19 +154,19 @@ class Stops {
             this.tile.hilightedStops.length &&
             this.tile.hilightedStops[0]
           );
+          const stopLayer = vt.layers.stops || vt.layers.realtimeStops;
 
           if (
-            vt.layers.stops != null &&
+            stopLayer != null &&
             (this.tile.coords.z >= this.config.stopsMinZoom ||
               hasHilightedStops)
           ) {
             const featureByCode = {};
             const hybridGtfsIdByCode = {};
-            const zoom = this.tile.coords.z + (this.tile.props.zoomOffset || 0);
             const drawPlatforms = this.config.terminalStopsMaxZoom - 1 <= zoom;
             const drawRailPlatforms = this.config.railPlatformsMinZoom <= zoom;
-            for (let i = 0, ref = vt.layers.stops.length - 1; i <= ref; i++) {
-              const feature = vt.layers.stops.feature(i);
+            for (let i = 0, ref = stopLayer.length - 1; i <= ref; i++) {
+              const feature = stopLayer.feature(i);
               if (
                 isFeatureLayerEnabled(feature, 'stop', this.mapLayers) &&
                 feature.properties.type &&

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

@@ -244,7 +244,7 @@ class TileContainer {
             }
             if (
               index < features.length - 1 &&
-              features[index + 1].feature.properties.code ===
+              features[index + 1]?.feature.properties.code ===
                 feature.feature.properties.code
             ) {
               isCombo = true;

app/configurations/config.waltti.js

@@ -15,6 +15,10 @@ export default {
       default: `${POI_MAP_PREFIX}/fi/stops,stations/`,
       sv: `${POI_MAP_PREFIX}/sv/stops,stations/`,
     },
+    REALTIME_STOP_MAP: {
+      default: `${POI_MAP_PREFIX}fi/realtimeStops,stations/`,
+      sv: `${POI_MAP_PREFIX}/sv/realtimeStops,stations/`,
+    },
     RENTAL_STATION_MAP: {
       default: `${POI_MAP_PREFIX}/fi/rentalStations/`,
     },

app/util/mapIconUtils.js

@@ -275,6 +275,19 @@ function drawIconImageBadge(
   );
 }
 
+function drawTopRightCornerIconBadge(
+  image,
+  tile,
+  iconTopLeftCornerX,
+  iconTopLeftCornerY,
+  width,
+  badgeSize,
+) {
+  const badgeX = iconTopLeftCornerX + width / 2; // badge left corner placed at the horizontal center of the icon
+  const badgeY = iconTopLeftCornerY - badgeSize / 3; // badge left corner placed a third above the icon
+  tile.ctx.drawImage(image, badgeX, badgeY);
+}
+
 function getSelectedIconCircleOffset(zoom, ratio) {
   if (zoom > 15) {
     return 94 / ratio;
@@ -350,6 +363,38 @@ function getSmallStopIcon(type, radius, color) {
   });
 }
 
+/**
+ * Draw a badge icon on top of the icon.
+ */
+function drawStopStatusBadge(
+  tile,
+  x,
+  y,
+  iconWidth,
+  stopOutOfService,
+  noRoutesForStop,
+) {
+  const badgeSize = iconWidth * 0.75; // badge size is 75% of the icon size
+  const badgeImageId = stopOutOfService
+    ? `icon-icon_stop-temporarily-closed-badge`
+    : `icon-icon_stop-closed-badge`;
+
+  if (noRoutesForStop || stopOutOfService) {
+    getImageFromSpriteCache(badgeImageId, badgeSize, badgeSize).then(
+      badgeImage => {
+        drawTopRightCornerIconBadge(
+          badgeImage,
+          tile,
+          x,
+          y,
+          iconWidth,
+          badgeSize,
+        );
+      },
+    );
+  }
+}
+
 const getMemoizedStopIcon = memoize(
   getSmallStopIcon,
   (type, radius, color, isHilighted) =>
@@ -369,6 +414,8 @@ export function drawStopIcon(
   isHilighted,
   isFerryTerminal,
   modeIconColors,
+  stopOutOfService,
+  noRoutesForStop,
 ) {
   if (type === 'SUBWAY') {
     return;
@@ -417,6 +464,7 @@ export function drawStopIcon(
       color,
     ).then(image => {
       tile.ctx.drawImage(image, x, y);
+      drawStopStatusBadge(tile, x, y, width, stopOutOfService, noRoutesForStop);
       if (drawNumber && platformNumber) {
         x += radius;
         y += radius;

test/unit/component/map/tile-layer/Stops.test.js

@@ -5,7 +5,9 @@ describe('Stops', () => {
   const config = {
     URL: {
       STOP_MAP: { default: 'https://localhost/stopmap/' },
+      REALTIME_STOP_MAP: { default: 'https://localhost/realtimestopmap/' },
     },
+    stopsMinZoom: 13,
   };
 
   const tile = {
@@ -37,5 +39,20 @@ describe('Stops', () => {
       new Stops({ ...tile, props: { zoomOffset: 1 } }, config, []).getPromise(); // eslint-disable-line no-new
       expect(mock.called()).to.equal(true);
     });
+
+    it('should make a get to realtime stops uri when zoomed in', () => {
+      const mock = fetchMock.get(
+        `${config.URL.REALTIME_STOP_MAP.default}13/1/2.pbf`,
+        {
+          status: 404,
+        },
+      );
+      new Stops(
+        { ...tile, props: { zoomOffset: 10 } },
+        config,
+        [],
+      ).getPromise();
+      expect(mock.called()).to.equal(true);
+    });
   });
 });