Implement marker colors

5 files changed, 38 insertions, 15 deletions

diff --git a/modern/package.json b/modern/package.json
index 6902d37c..b0522408 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -11,6 +11,7 @@
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@reduxjs/toolkit": "^1.5.1",
     "@turf/turf": "^5.1.6",
+    "canvas-tint-image": "^2.0.1",
     "mapbox-gl": "^1.12.0",
     "moment": "^2.28.0",
     "ol": "^6.4.3",
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);
diff --git a/modern/src/theme/palette.js b/modern/src/theme/palette.js
index 5c93cfd2..ac26e57b 100644
--- a/modern/src/theme/palette.js
+++ b/modern/src/theme/palette.js
@@ -1,17 +1,21 @@
+const traccarWhite = '#FFF';
 const traccarPurple = '#333366';
 const traccarGreen = '#4CAF50';
-const traccarWhite = '#FFF';
+const traccarRed = '#CC2222';
+const traccarGray = '#888888';
 
 export default {
   common: {
     purple: traccarPurple,
-    green: traccarGreen
+    green: traccarGreen,
+    red: traccarRed,
+    gray: traccarGray,
   },
   primary: {
-    main: traccarPurple
+    main: traccarPurple,
   },
   secondary: {
     main: traccarGreen,
-    contrastText: traccarWhite
-  }
+    contrastText: traccarWhite,
+  },
 };