Disable icon tinting in Firefox

2 files changed, 28 insertions, 7 deletions

diff --git a/modern/package.json b/modern/package.json
index e5489a6..4ac9184 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 e3c32f4..9910963 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);