Fix #9653 embedded icons are correctly loaded

geosolutions-it · Oct 25, 2023 · fcc7c59 · fcc7c59
1 parent 99c69da
commit fcc7c59
Show file tree

Hide file tree

Showing 20 changed files with 29 additions and 368 deletions.
diff --git a/docs/developer-guide/mapstore-migration-guide.md b/docs/developer-guide/mapstore-migration-guide.md
@@ -22,6 +22,15 @@ This is a list of things to check if you want to update from a previous version
 
 ## Migration from 2023.02.xx to 2024.01.00
 
+### Removing possibility to add custom fonts to the Map
+
+From this version we limited the load of the font to FontAwesome.
+
+If you have changed the property **fonts** inside Map plugin it will not longer load the font. A possible fix would be to add the font to the `*.html` files in your application.
+
+- make sure that the `localConfig.json` does not have **fonts** property in  **Map**  plugin
+- add `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>` inside the *head* tag for every .html file you have in your project
+
 ### Fixing background config
 
 From this version in order to fix default 3d background config a change is needed here:

diff --git a/project/standard/templates/api.html b/project/standard/templates/api.html
@@ -8,6 +8,7 @@
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
         <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
         <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
         <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->
         <style>

diff --git a/project/standard/templates/apiTemplate.html b/project/standard/templates/apiTemplate.html
@@ -8,6 +8,7 @@
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
         <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
         <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
         <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->
         <style>

diff --git a/project/standard/templates/dashboard-embedded-template.html b/project/standard/templates/dashboard-embedded-template.html
@@ -95,6 +95,7 @@
         </style>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
         <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
         <script async type="text/javascript" src="https://unpkg.com/[email protected]/es5.js" onload="checkBrowser()"></script>
         <script type="text/javascript">

diff --git a/project/standard/templates/dashboard-embedded.html b/project/standard/templates/dashboard-embedded.html
@@ -95,6 +95,7 @@
         </style>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
         <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
     </head>
     <body>

diff --git a/project/standard/templates/embedded.html b/project/standard/templates/embedded.html
@@ -85,6 +85,7 @@
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
         <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
         <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
         <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->
     </head>

diff --git a/project/standard/templates/embeddedTemplate.html b/project/standard/templates/embeddedTemplate.html
@@ -85,6 +85,7 @@
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
         <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
         <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
         <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->
         <script async type="text/javascript" src="https://unpkg.com/[email protected]/es5.js" onload="checkBrowser()"></script>

diff --git a/project/standard/templates/geostory-embedded-template.html b/project/standard/templates/geostory-embedded-template.html
@@ -95,6 +95,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
     <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
     <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
     <script async type="text/javascript" src="https://unpkg.com/[email protected]/es5.js" onload="checkBrowser()"></script>
     <script type="text/javascript">

diff --git a/project/standard/templates/geostory-embedded.html b/project/standard/templates/geostory-embedded.html
@@ -95,6 +95,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
     <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
     <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
 </head>
 <body>

diff --git a/web/client/api.html b/web/client/api.html
@@ -7,6 +7,7 @@
         <title>Page with MapStore API</title>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
         <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
         <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
         <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->

diff --git a/web/client/apiTemplate.html b/web/client/apiTemplate.html
@@ -7,6 +7,7 @@
         <title>Page with MapStore API</title>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
         <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
         <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
         <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->

diff --git a/web/client/dashboard-embedded-template.html b/web/client/dashboard-embedded-template.html
@@ -95,6 +95,7 @@
         </style>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
         <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
         <script async type="text/javascript" src="https://unpkg.com/[email protected]/es5.js" onload="checkBrowser()"></script>
         <script type="text/javascript">

diff --git a/web/client/dashboard-embedded.html b/web/client/dashboard-embedded.html
@@ -95,6 +95,7 @@
         </style>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
         <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
     </head>
     <body>

diff --git a/web/client/embedded.html b/web/client/embedded.html
@@ -84,6 +84,7 @@
         </style>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
         <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
         <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
         <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->

diff --git a/web/client/embeddedTemplate.html b/web/client/embeddedTemplate.html
@@ -85,6 +85,7 @@
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
         <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
         <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
         <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->
         <script async type="text/javascript" src="https://unpkg.com/[email protected]/es5.js" onload="checkBrowser()"></script>

diff --git a/web/client/geostory-embedded-template.html b/web/client/geostory-embedded-template.html
@@ -95,6 +95,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
     <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
     <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
     <script async type="text/javascript" src="https://unpkg.com/[email protected]/es5.js" onload="checkBrowser()"></script>
     <script type="text/javascript">

diff --git a/web/client/geostory-embedded.html b/web/client/geostory-embedded.html
@@ -95,6 +95,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
     <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
     <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
 </head>
 <body>

diff --git a/web/client/plugins/Map.jsx b/web/client/plugins/Map.jsx
@@ -9,7 +9,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect, createPlugin } from '../utils/PluginsUtils';
-import { loadFont } from '../utils/AgentUtils';
 import Spinner from 'react-spinkit';
 import './map/css/map.css';
 import Message from '../components/I18N/Message';
@@ -108,8 +107,6 @@ import {getHighlightLayerOptions} from "../utils/HighlightUtils";
  *    {
  *      "name": "Map",
  *      "cfg": {
- *        "shouldLoadFont": true,
- *        "fonts": ['FontAwesome'],
  *        "tools": ["overview", "scalebar", "draw", {
  *          "leaflet": {
  *            "name": "test",
@@ -128,20 +125,8 @@ import {getHighlightLayerOptions} from "../utils/HighlightUtils";
  *  - name is a unique name for the tool
  *  - impl is a placeholder (“{context.ToolName}”) where ToolName is the name you gave the tool in plugins.js (TestSupportLeaflet in our example)
  *
- * You can also specify a list of fonts that have to be loaded before map rendering
- * if the shouldLoadFont is true
- * This font pre-load list is required if you're using canvas based mapping libraries (e.g. OpenLayers) and you need to show markers with symbols (e.g. Annotations).
- * For each font you must specify the font name used in the `@font-face` inside the "fonts" array property. Note: the `@font-face` declaration must be present in css of the page, otherwise the font can not be loaded anyway.
- * ```
- * {
- *    "name": "Map",
- *    "cfg": {
- *      "shouldLoadFont": true,
- *      "fonts": ['FontAwesome']
- *    }
- *  }
- * ```
- * For more info on metadata visit [fontfaceobserver](https://github.com/bramstein/fontfaceobserver)
+ * You can no longer specify a list of fonts that have to be loaded before map rendering, we are now only loading FontAwesome for the icons
+ * We will pre-load FontAwesome only if needed, i.e you need to show markers with symbols (e.g. Annotations).
  *
  * An additional feature to is limit the area and/or the minimum level of zoom in the localConfig.json file using "mapConstraints" property
  *
@@ -210,7 +195,6 @@ class MapPlugin extends React.Component {
         loadingSpinner: PropTypes.bool,
         loadingError: PropTypes.string,
         tools: PropTypes.array,
-        fonts: PropTypes.array,
         options: PropTypes.object,
         mapOptions: PropTypes.object,
         projectionDefs: PropTypes.array,
@@ -219,7 +203,6 @@ class MapPlugin extends React.Component {
         actions: PropTypes.object,
         features: PropTypes.array,
         securityToken: PropTypes.string,
-        shouldLoadFont: PropTypes.bool,
         elevationEnabled: PropTypes.bool,
         isLocalizedLayerStylesEnabled: PropTypes.bool,
         localizedLayerStylesName: PropTypes.string,
@@ -239,7 +222,6 @@ class MapPlugin extends React.Component {
         tools: ["scalebar", "draw", "highlight", "popup", "box"],
         options: {},
         mapOptions: {},
-        fonts: ['FontAwesome'],
         toolsOptions: {
             measurement: {},
             locate: {},
@@ -261,7 +243,6 @@ class MapPlugin extends React.Component {
         },
         securityToken: '',
         additionalLayers: [],
-        shouldLoadFont: false,
         elevationEnabled: false,
         onResolutionsChange: () => {},
         items: [],
@@ -274,25 +255,7 @@ class MapPlugin extends React.Component {
     };
 
     UNSAFE_componentWillMount() {
-        const {shouldLoadFont, fonts} = this.props;
-
-        // load each font before rendering (see issue #3155)
-        if (shouldLoadFont && fonts) {
-            this.setState({canRender: false});
-
-            Promise.all(
-                fonts.map(f =>
-                    loadFont(f, {
-                        timeoutAfter: 5000 // 5 seconds in milliseconds
-                    }).catch((error) => {
-                        console.warn("Fonts loading check for map style responded slowly or with an error. Fonts in map may not be rendered correctly. This is not necessarily an issue.", error);  // eslint-disable-line no-console
-                    }
-                    ))
-            ).then(() => {
-                this.setState({canRender: true});
-            });
-
-        }
+        // moved the font load of FontAwesome only to styleParseUtils (#9653)
         this.updatePlugins(this.props);
         this._isMounted = true;
     }

diff --git a/web/client/plugins/map/selector.js b/web/client/plugins/map/selector.js
@@ -21,11 +21,10 @@ export default createShallowSelectorCreator(isEqual)(
     state => state.mapInitialConfig && state.mapInitialConfig.loadingError && state.mapInitialConfig.loadingError.data,
     securityTokenSelector,
     isMouseMoveCoordinatesActiveSelector,
-    isOpenlayers,
     isLocalizedLayerStylesEnabledSelector,
     localizedLayerStylesNameSelector,
     currentLocaleLanguageSelector,
-    (projectionDefs, map, mapType, layers, features, loadingError, securityToken, elevationEnabled, shouldLoadFont, isLocalizedLayerStylesEnabled, localizedLayerStylesName, currentLocaleLanguage) => ({
+    (projectionDefs, map, mapType, layers, features, loadingError, securityToken, elevationEnabled, isLocalizedLayerStylesEnabled, localizedLayerStylesName, currentLocaleLanguage) => ({
         projectionDefs,
         map,
         mapType,
@@ -34,7 +33,6 @@ export default createShallowSelectorCreator(isEqual)(
         loadingError,
         securityToken,
         elevationEnabled,
-        shouldLoadFont,
         isLocalizedLayerStylesEnabled,
         localizedLayerStylesName,
         currentLocaleLanguage