Support icon scaling (fix #799)

3 files changed, 14 insertions, 1 deletions

diff --git a/modern/src/common/attributes/useCommonUserAttributes.js b/modern/src/common/attributes/useCommonUserAttributes.js
index c813a912..e64299bd 100644
--- a/modern/src/common/attributes/useCommonUserAttributes.js
+++ b/modern/src/common/attributes/useCommonUserAttributes.js
@@ -77,4 +77,8 @@ export default (t) => useMemo(() => ({
     name: t('attributeWebMaxZoom'),
     type: 'number',
   },
+  iconScale: {
+    name: t('sharedIconScale'),
+    type: 'number',
+  },
 }), [t]);
diff --git a/modern/src/map/MapDirection.js b/modern/src/map/MapDirection.js
index 736d7166..7897cda7 100644
--- a/modern/src/map/MapDirection.js
+++ b/modern/src/map/MapDirection.js
@@ -1,10 +1,13 @@
 import { useEffect } from 'react';
+import { useAttributePreference } from '../common/util/preferences';
 
 import { map } from './core/MapView';
 
 const MapDirection = ({ position }) => {
   const id = 'directions';
 
+  const iconScale = useAttributePreference('iconScale', 1);
+
   useEffect(() => {
     map.addSource(id, {
       type: 'geojson',
@@ -19,6 +22,7 @@ const MapDirection = ({ position }) => {
       source: id,
       layout: {
         'icon-image': 'direction',
+        'icon-size': iconScale,
         'icon-rotate': ['get', 'rotation'],
         'icon-rotation-alignment': 'map',
       },
diff --git a/modern/src/map/MapPositions.js b/modern/src/map/MapPositions.js
index 1cf8e0b8..92e8de8d 100644
--- a/modern/src/map/MapPositions.js
+++ b/modern/src/map/MapPositions.js
@@ -6,6 +6,7 @@ import { getStatusColor } from '../common/util/formatter';
 import usePersistedState from '../common/util/usePersistedState';
 import { mapIconKey } from './core/preloadImages';
 import { findFonts } from './core/mapUtil';
+import { useAttributePreference } from '../common/util/preferences';
 
 const MapPositions = ({ positions, onClick, showStatus }) => {
   const id = 'positions';
@@ -13,6 +14,8 @@ const MapPositions = ({ positions, onClick, showStatus }) => {
 
   const devices = useSelector((state) => state.devices.items);
 
+  const iconScale = useAttributePreference('iconScale', 1);
+
   const [mapCluster] = usePersistedState('mapCluster', true);
 
   const createFeature = (devices, position) => {
@@ -77,11 +80,12 @@ const MapPositions = ({ positions, onClick, showStatus }) => {
       filter: ['!', ['has', 'point_count']],
       layout: {
         'icon-image': '{category}-{color}',
+        'icon-size': iconScale,
         'icon-allow-overlap': true,
         'text-field': '{name}',
         'text-allow-overlap': true,
         'text-anchor': 'bottom',
-        'text-offset': [0, -2],
+        'text-offset': [0, -2 * iconScale],
         'text-font': findFonts(map),
         'text-size': 12,
       },
@@ -97,6 +101,7 @@ const MapPositions = ({ positions, onClick, showStatus }) => {
       filter: ['has', 'point_count'],
       layout: {
         'icon-image': 'background',
+        'icon-size': iconScale,
         'text-field': '{point_count_abbreviated}',
         'text-font': findFonts(map),
         'text-size': 14,