From d86a3ef187359fbe83a5dd950295868c4ef39d09 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sat, 26 Jun 2021 23:17:37 -0700 Subject: Implement marker colors --- modern/src/map/Map.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) (limited to 'modern/src/map/Map.js') diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js index 014268c..a973cf7 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); -- cgit v1.2.3