aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2021-09-08 21:48:21 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2021-09-08 21:48:21 -0700
commit5e990d01056efffbd69b06938d8d2397382e94ee (patch)
treecfdb5e180afa02ad2b0ba569491a1faf35896e1e
parenta7b243a894f9b1b09cc9478104b920ec47a94380 (diff)
downloadtrackermap-web-5e990d01056efffbd69b06938d8d2397382e94ee.tar.gz
trackermap-web-5e990d01056efffbd69b06938d8d2397382e94ee.tar.bz2
trackermap-web-5e990d01056efffbd69b06938d8d2397382e94ee.zip
Disable icon tinting in Firefox
-rw-r--r--modern/package.json1
-rw-r--r--modern/src/map/mapUtil.js34
2 files changed, 28 insertions, 7 deletions
diff --git a/modern/package.json b/modern/package.json
index e5489a6b..4ac91845 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -13,7 +13,6 @@
"@tmcw/togeojson": "^4.5.0",
"@turf/circle": "^6.5.0",
"@turf/turf": "^6.4.0",
- "canvas-tint-image": "^2.0.1",
"mapbox-gl": "^1.13.1",
"maplibre-gl": "^1.15.0",
"material-ui-dropzone": "^3.5.0",
diff --git a/modern/src/map/mapUtil.js b/modern/src/map/mapUtil.js
index e3c32f46..99109635 100644
--- a/modern/src/map/mapUtil.js
+++ b/modern/src/map/mapUtil.js
@@ -1,5 +1,4 @@
import { parse, stringify } from 'wellknown';
-import canvasTintImage from 'canvas-tint-image';
import circle from '@turf/circle';
export const loadImage = (url) => new Promise((imageLoaded) => {
@@ -8,12 +7,31 @@ export const loadImage = (url) => new Promise((imageLoaded) => {
image.src = url;
});
-export const prepareIcon = (background, icon, color) => {
- const pixelRatio = window.devicePixelRatio;
+const canvasTintImage = (image, color) => {
+ const canvas = document.createElement('canvas');
+ canvas.width = image.width * devicePixelRatio;
+ canvas.height = image.height * devicePixelRatio;
+ canvas.style.width = `${image.width}px`;
+ canvas.style.height = `${image.height}px`;
+
+ const context = canvas.getContext('2d');
+ context.save();
+ context.fillStyle = color;
+ context.globalAlpha = 1;
+ context.fillRect(0, 0, canvas.width, canvas.height);
+ context.globalCompositeOperation = "destination-atop";
+ context.globalAlpha = 1;
+ context.drawImage(image, 0, 0, canvas.width, canvas.height);
+ context.restore();
+
+ return canvas;
+}
+
+export const prepareIcon = (background, icon, color) => {
const canvas = document.createElement('canvas');
- canvas.width = background.width * pixelRatio;
- canvas.height = background.height * pixelRatio;
+ canvas.width = background.width * devicePixelRatio;
+ canvas.height = background.height * devicePixelRatio;
canvas.style.width = `${background.width}px`;
canvas.style.height = `${background.height}px`;
@@ -24,7 +42,11 @@ export const prepareIcon = (background, icon, color) => {
const iconRatio = 0.5;
const imageWidth = canvas.width * iconRatio;
const imageHeight = canvas.height * iconRatio;
- context.drawImage(canvasTintImage(icon, color, 1), (canvas.width - imageWidth) / 2, (canvas.height - imageHeight) / 2, imageWidth, imageHeight);
+ if (navigator.userAgent.indexOf("Firefox") > 0) {
+ context.drawImage(icon, (canvas.width - imageWidth) / 2, (canvas.height - imageHeight) / 2, imageWidth, imageHeight);
+ } else {
+ context.drawImage(canvasTintImage(icon, color), (canvas.width - imageWidth) / 2, (canvas.height - imageHeight) / 2, imageWidth, imageHeight);
+ }
}
return context.getImageData(0, 0, canvas.width, canvas.height);