diff options
-rw-r--r-- | modern/src/common/attributes/useCommonUserAttributes.js | 4 | ||||
-rw-r--r-- | modern/src/map/MapDirection.js | 4 | ||||
-rw-r--r-- | modern/src/map/MapPositions.js | 7 | ||||
-rw-r--r-- | web/l10n/en.json | 1 |
4 files changed, 15 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, diff --git a/web/l10n/en.json b/web/l10n/en.json index 3a7be25d..528c66c5 100644 --- a/web/l10n/en.json +++ b/web/l10n/en.json @@ -31,6 +31,7 @@ "sharedName": "Name", "sharedDescription": "Description", "sharedSearch": "Search", + "sharedIconScale": "Icon Scale", "sharedGeofence": "Geofence", "sharedGeofences": "Geofences", "sharedCreateGeofence": "Create Geofence", |