Implement marker colors

3 files changed, 28 insertions, 10 deletions

diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index 014268cd..a973cf7d 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -4,10 +4,11 @@ import mapboxgl from 'mapbox-gl';
 import { SwitcherControl } from './switcher/switcher';
 import React, { useRef, useLayoutEffect, useEffect, useState } from 'react';
 import { deviceCategories } from '../common/deviceCategories';
-import { loadIcon, loadImage } from './mapUtil';
+import { prepareIcon, loadImage } from './mapUtil';
 import { styleCarto, styleMapbox, styleOsm } from './mapStyles';
 import t from '../common/localization';
 import { useAttributePreference } from '../common/preferences';
+import palette from '../theme/palette';
 
 const element = document.createElement('div');
 element.style.width = '100%';
@@ -36,12 +37,17 @@ const updateReadyValue = value => {
 };
 
 const initMap = async () => {
+  if (ready) return;
   const background = await loadImage('images/background.svg');
-  map.addImage('background', await loadIcon(background), { pixelRatio: window.devicePixelRatio });
+  map.addImage('background', await prepareIcon(background), {
+    pixelRatio: window.devicePixelRatio,
+  });
   await Promise.all(deviceCategories.map(async category => {
-    if (!map.hasImage(category)) {
-      const imageData = await loadIcon(background, `images/icon/${category}.svg`);
-      map.addImage(category, imageData, { pixelRatio: window.devicePixelRatio });
+    for (const color of ['green', 'red', 'gray']) {
+      const icon = await loadImage(`images/icon/${category}.svg`);
+      map.addImage(`${category}-${color}`, prepareIcon(background, icon, palette.common[color]), {
+        pixelRatio: window.devicePixelRatio,
+      });
     }
   }));
   updateReadyValue(true);
diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js
index 4a590b7b..a953ce3d 100644
--- a/modern/src/map/PositionsMap.js
+++ b/modern/src/map/PositionsMap.js
@@ -15,12 +15,24 @@ const PositionsMap = ({ positions }) => {
   const history = useHistory();
   const devices = useSelector(state => state.devices.items);
 
+  const deviceColor = device => {
+    switch (device.status) {
+      case 'online':
+        return 'green';
+      case 'offline':
+        return 'red';
+      default:
+        return 'gray';
+    }
+  };
+
   const createFeature = (devices, position) => {
     const device = devices[position.deviceId] || null;
     return {
       deviceId: position.deviceId,
       name: device ? device.name : '',
       category: device && (device.category || 'default'),
+      color: deviceColor(device),
     }
   };
 
@@ -81,7 +93,7 @@ const PositionsMap = ({ positions }) => {
       'source': id,
       'filter': ['!', ['has', 'point_count']],
       'layout': {
-        'icon-image': '{category}',
+        'icon-image': '{category}-{color}',
         'icon-allow-overlap': true,
         'text-field': '{name}',
         'text-allow-overlap': true,
diff --git a/modern/src/map/mapUtil.js b/modern/src/map/mapUtil.js
index 4780940d..ef6ff995 100644
--- a/modern/src/map/mapUtil.js
+++ b/modern/src/map/mapUtil.js
@@ -1,4 +1,5 @@
 import wellknown from 'wellknown';
+import canvasTintImage from 'canvas-tint-image';
 import circle from '@turf/circle';
 
 export const loadImage = (url) => {
@@ -9,7 +10,7 @@ export const loadImage = (url) => {
   });
 };
 
-export const loadIcon = async (background, url) => {
+export const prepareIcon = (background, icon, color) => {
   const pixelRatio = window.devicePixelRatio;
 
   const canvas = document.createElement('canvas');
@@ -21,12 +22,11 @@ export const loadIcon = async (background, url) => {
   const context = canvas.getContext('2d');
   context.drawImage(background, 0, 0, canvas.width, canvas.height);
 
-  if (url) {
-    const image = await loadImage(url);
+  if (icon) {
     const iconRatio = 0.5;
     const imageWidth = canvas.width * iconRatio;
     const imageHeight = canvas.height * iconRatio;
-    context.drawImage(image, (canvas.width - imageWidth) / 2, (canvas.height - imageHeight) / 2, imageWidth, imageHeight);
+    context.drawImage(canvasTintImage(icon, color, 1), (canvas.width - imageWidth) / 2, (canvas.height - imageHeight) / 2, imageWidth, imageHeight);
   }
 
   return context.getImageData(0, 0, canvas.width, canvas.height);