Fix geosolutions-it#9653 force load of font when fontAwesome css is l…

…oaded (geosolutions-it#9774) --------- Co-authored-by: allyoucanmap <[email protected]>
diegovargasg · Nov 29, 2023 · f466921 · f466921
1 parent 71c7a24
commit f466921
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -188,6 +188,7 @@
     "eventlistener": "0.0.1",
     "file-saver": "1.3.3",
     "filtrex": "2.1.0",
+    "font-awesome": "4.7.0",
     "fs-extra": "3.0.1",
     "git-revision-webpack-plugin": "5.0.0",
     "history": "4.6.1",

diff --git a/web/client/utils/styleparser/StyleParserUtils.js b/web/client/utils/styleparser/StyleParserUtils.js
@@ -501,11 +501,7 @@ export const getImageIdFromSymbolizer = ({
     wellKnownName
 }) => {
     if (image) {
-        return isObject(image?.args?.[0]) ? MarkerUtils.markers.extra.markerToDataUrl({
-            iconColor: image.args[0].color,
-            iconShape: image.args[0].shape,
-            iconGlyph: image.args[0].glyph
-        }) : image;
+        return image?.name === 'msMarkerIcon' ? `msMarkerIcon:${image?.args?.[0]?.color}:${image?.args?.[0]?.shape}:${image?.args?.[0]?.glyph}` : image;
     }
     return [wellKnownName, color, fillOpacity, strokeColor, strokeOpacity, (strokeDasharray || []).join('_'), strokeWidth, radius].join(':');
 };
@@ -852,25 +848,21 @@ export const parseSymbolizerExpressions = (symbolizer, feature) => {
     }), {});
 };
 
-
+let fontAwesomeLoaded = false;
 const loadFontAwesome = () => {
-    return new Promise((resolve) => {
-        const fontAwesomeHref = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css';
-        if (!document.querySelector(`link[href='${fontAwesomeHref}']`)) {
-            const fontAwesome = document.createElement('link');
-            fontAwesome.setAttribute('rel', 'stylesheet');
-            fontAwesome.setAttribute('href', fontAwesomeHref);
-            document.head.appendChild(fontAwesome);
-            fontAwesome.onload = () => {
-                resolve();
-            };
-            fontAwesome.onerror = () => {
-                resolve();
-            };
-        } else {
-            resolve();
-        }
-    });
+    if (fontAwesomeLoaded) {
+        return Promise.resolve();
+    }
+    // async load of font awesome
+    return import('font-awesome/css/font-awesome.min.css')
+        .then(() => {
+            // ensure the font is loaded
+            return document.fonts.load('1rem FontAwesome')
+                .then(() => {
+                    fontAwesomeLoaded = true;
+                    return fontAwesomeLoaded;
+                });
+        });
 };
 
 /**
@@ -899,7 +891,15 @@ export const drawIcons = (geoStylerStyle, options) => {
             ...markIconSymbolizers.reduce((newSymbolizers, symbolizer) => {
                 return [
                     ...newSymbolizers,
-                    ...(supportedFeatures || []).map((feature) => parseSymbolizerExpressions(symbolizer, feature))
+                    ...(supportedFeatures || []).map((feature) => {
+                        const newSymbolizer = parseSymbolizerExpressions(symbolizer, feature);
+                        return {
+                            ...newSymbolizer,
+                            // exclude msMarkerIcon from parsing
+                            // the getImageFromSymbolizer is already taking into account this case
+                            ...(symbolizer?.image?.name === 'msMarkerIcon' && { image: symbolizer.image })
+                        };
+                    })
                 ];
             }, [])
         ];