aboutsummaryrefslogtreecommitdiff
path: root/modern/src/map/Map.js
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2021-06-26 23:17:37 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2021-06-26 23:17:37 -0700
commitd86a3ef187359fbe83a5dd950295868c4ef39d09 (patch)
tree9dab403a24a75bc9d25e0c9ae6af29c6d5341682 /modern/src/map/Map.js
parentde199fa668b61ca1def0b8d18de8d666d8148361 (diff)
downloadtrackermap-web-d86a3ef187359fbe83a5dd950295868c4ef39d09.tar.gz
trackermap-web-d86a3ef187359fbe83a5dd950295868c4ef39d09.tar.bz2
trackermap-web-d86a3ef187359fbe83a5dd950295868c4ef39d09.zip
Implement marker colors
Diffstat (limited to 'modern/src/map/Map.js')
-rw-r--r--modern/src/map/Map.js16
1 files changed, 11 insertions, 5 deletions
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index 014268cd..a973cf7d 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -4,10 +4,11 @@ import mapboxgl from 'mapbox-gl';
import { SwitcherControl } from './switcher/switcher';
import React, { useRef, useLayoutEffect, useEffect, useState } from 'react';
import { deviceCategories } from '../common/deviceCategories';
-import { loadIcon, loadImage } from './mapUtil';
+import { prepareIcon, loadImage } from './mapUtil';
import { styleCarto, styleMapbox, styleOsm } from './mapStyles';
import t from '../common/localization';
import { useAttributePreference } from '../common/preferences';
+import palette from '../theme/palette';
const element = document.createElement('div');
element.style.width = '100%';
@@ -36,12 +37,17 @@ const updateReadyValue = value => {
};
const initMap = async () => {
+ if (ready) return;
const background = await loadImage('images/background.svg');
- map.addImage('background', await loadIcon(background), { pixelRatio: window.devicePixelRatio });
+ map.addImage('background', await prepareIcon(background), {
+ pixelRatio: window.devicePixelRatio,
+ });
await Promise.all(deviceCategories.map(async category => {
- if (!map.hasImage(category)) {
- const imageData = await loadIcon(background, `images/icon/${category}.svg`);
- map.addImage(category, imageData, { pixelRatio: window.devicePixelRatio });
+ for (const color of ['green', 'red', 'gray']) {
+ const icon = await loadImage(`images/icon/${category}.svg`);
+ map.addImage(`${category}-${color}`, prepareIcon(background, icon, palette.common[color]), {
+ pixelRatio: window.devicePixelRatio,
+ });
}
}));
updateReadyValue(true);