aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-08-01 16:41:28 -0700
committerAnton Tananaev <anton@traccar.org>2022-08-01 16:41:28 -0700
commita15dd2a6a947672b576f474ad80a8902f1fb2ac2 (patch)
treebd6a9dea7eca449eccc18745aa175c7eb7bdc177 /modern/src
parent0bad707fd781a665426926d19d9775a9b0cca90b (diff)
downloadtrackermap-web-a15dd2a6a947672b576f474ad80a8902f1fb2ac2.tar.gz
trackermap-web-a15dd2a6a947672b576f474ad80a8902f1fb2ac2.tar.bz2
trackermap-web-a15dd2a6a947672b576f474ad80a8902f1fb2ac2.zip
Support icon scaling (fix #799)
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/common/attributes/useCommonUserAttributes.js4
-rw-r--r--modern/src/map/MapDirection.js4
-rw-r--r--modern/src/map/MapPositions.js7
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,