Implement category icons

5 files changed, 38 insertions, 37 deletions

diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js
index d4b83e6e..7c9b5671 100644
--- a/modern/src/DevicePage.js
+++ b/modern/src/DevicePage.js
@@ -8,6 +8,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import EditAttributesView from './attributes/EditAttributesView';
 import deviceAttributes from './attributes/deviceAttributes';
 import SelectField from './form/SelectField';
+import { deviceCategories } from './common/deviceCategories';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -15,30 +16,6 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const deviceCategories = [
-  'default',
-  'animal',
-  'bicycle',
-  'boat',
-  'bus',
-  'car',
-  'crane',
-  'helicopter',
-  'motorcycle',
-  'offroad',
-  'person',
-  'pickup',
-  'plane',
-  'ship',
-  'tractor',
-  'train',
-  'tram',
-  'trolleybus',
-  'truck',
-  'van',
-  'scooter',
-];
-
 const DevicePage = () => {
   const classes = useStyles();
 
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index 28ead786..6f8cea02 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -21,6 +21,11 @@ const useStyles = makeStyles(() => ({
     maxHeight: '100%',
     overflow: 'auto',
   },
+  icon: {
+    width: '25px',
+    height: '25px',
+    filter: 'brightness(0) invert(1)',
+  },
 }));
 
 const DeviceView = ({ updateTimestamp, onMenuClick }) => {
@@ -43,7 +48,7 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => {
           <ListItem button key={item.id} onClick={() => dispatch(devicesActions.select(item))}>
             <ListItemAvatar>
               <Avatar>
-                <LocationOnIcon />
+                <img className={classes.icon} src={`images/icon/${item.category || 'default'}.svg`} />
               </Avatar>
             </ListItemAvatar>
             <ListItemText primary={item.name} secondary={item.uniqueId} />
diff --git a/modern/src/common/deviceCategories.js b/modern/src/common/deviceCategories.js
new file mode 100644
index 00000000..1eda1902
--- /dev/null
+++ b/modern/src/common/deviceCategories.js
@@ -0,0 +1,23 @@
+export const deviceCategories = [
+  'default',
+  'animal',
+  'bicycle',
+  'boat',
+  'bus',
+  'car',
+  'crane',
+  'helicopter',
+  'motorcycle',
+  'offroad',
+  'person',
+  'pickup',
+  'plane',
+  'ship',
+  'tractor',
+  'train',
+  'tram',
+  'trolleybus',
+  'truck',
+  'van',
+  'scooter',
+];
diff --git a/modern/src/map/MainMap.js b/modern/src/map/MainMap.js
index c93c26dd..0b7eea25 100644
--- a/modern/src/map/MainMap.js
+++ b/modern/src/map/MainMap.js
@@ -30,6 +30,7 @@ const MainMap = () => {
     return {
       deviceId: position.deviceId,
       name: device ? device.name : '',
+      category: device && device.category || 'default',
     }
   };
 
@@ -89,7 +90,7 @@ const MainMap = () => {
         'type': 'geojson',
         'data': positions,
       });
-      mapManager.addLayer('device-icon', 'positions', 'icon-marker', '{name}', markerClickHandler);
+      mapManager.addLayer('device-icon', 'positions', '{category}', '{name}', markerClickHandler);
 
       const bounds = mapManager.calculateBounds(positions.features);
       if (bounds) {
@@ -118,12 +119,7 @@ const MainMap = () => {
     }
   }, [positions]);
 
-  const style = {
-    width: '100%',
-    height: '100%',
-  };
-
-  return <div style={style} ref={containerEl} />;
+  return <div style={{ width: '100%', height: '100%' }} ref={containerEl} />;
 }
 
 export default MainMap;
diff --git a/modern/src/map/mapManager.js b/modern/src/map/mapManager.js
index 5c0510c4..e496a6c5 100644
--- a/modern/src/map/mapManager.js
+++ b/modern/src/map/mapManager.js
@@ -1,5 +1,6 @@
 import 'mapbox-gl/dist/mapbox-gl.css';
 import mapboxgl from 'mapbox-gl';
+import { deviceCategories } from '../common/deviceCategories';
 
 let readyListeners = [];
 
@@ -32,8 +33,9 @@ const loadIcon = async (key, background, url) => {
   const context = canvas.getContext('2d');
   context.drawImage(background, 0, 0, canvas.width, canvas.height);
 
-  const imageWidth = image.width * pixelRatio;
-  const imageHeight = image.height * pixelRatio;
+  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);
 
   map.addImage(key, context.getImageData(0, 0, canvas.width, canvas.height), { pixelRatio });
@@ -156,9 +158,7 @@ map.addControl(new mapboxgl.NavigationControl());
 
 map.on('load', async () => {
   const background = await loadImage('images/background.svg');
-  await Promise.all([
-    loadIcon('icon-marker', background, 'images/icon/marker.svg'),
-  ]);
+  await Promise.all(deviceCategories.map(async category => loadIcon(category, background, `images/icon/${category}.svg`)));
   if (readyListeners) {
     readyListeners.forEach(listener => listener());
     readyListeners = null;