Implement category icons

2 files changed, 8 insertions, 12 deletions

diff --git a/modern/src/map/MainMap.js b/modern/src/map/MainMap.js
index c93c26d..0b7eea2 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 5c0510c..e496a6c 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;