Fix #10448 Map plugin should not initizialize invalid maps (#10449) (#10650)

Author: allyoucanmap

web/client/plugins/Map.jsx

@@ -251,9 +251,8 @@ class MapPlugin extends React.Component {
         onMapTypeLoaded: () => {},
         pluginsCreator
     };
-    state = {
-        canRender: true
-    };
+
+    state = {};
 
     UNSAFE_componentWillMount() {
         // moved the font load of FontAwesome only to styleParseUtils (#9653)
@@ -378,7 +377,7 @@ class MapPlugin extends React.Component {
     };
 
     render() {
-        if (this.props.map && this.state.canRender && this.state.plugins) {
+        if (this.isValidMapConfiguration(this.props.map) && this.state.plugins) {
             const {mapOptions = {}} = this.props.map;
 
             return (
@@ -440,6 +439,15 @@ class MapPlugin extends React.Component {
             }
         });
     };
+    isValidMapConfiguration = (map) => {
+        // when the center is included inside the map config
+        // we know that the configuration has been loaded
+        // we should prevent to mount the map component
+        // in case we have a configuration like this one: { eventListeners: {}, mousePointer: '' }
+        // if we allow invalid configuration default props will be used instead
+        // initializing the map in the wrong position
+        return !!map?.center;
+    }
 }
 
 export default createPlugin('Map', {

web/client/plugins/__tests__/Map-test.jsx

@@ -113,4 +113,31 @@ describe('Map Plugin', () => {
             })
             .catch(done);
     });
+    it('should not mount the map if the configuration is not valid', (done) => {
+        const { Plugin } = getPluginForTest(MapPlugin, { map: { eventListeners: {} } });
+        ReactDOM.render(<Plugin
+            onLoadingMapPlugins={(loading) => {
+                if (!loading) {
+                    expect(document.querySelector('.mapLoadingMessage')).toBeTruthy();
+                    done();
+                }
+            }}
+            pluginsCreator={() => Promise.resolve({
+                Map: ({ children }) => <div className="map">{children}</div>,
+                Layer: ({ options }) => <div id={options.id} className="layers">{options.type}</div>,
+                Feature: () => null,
+                tools: {
+                    overview: () => null,
+                    scalebar: () => null,
+                    draw: () => null,
+                    highlight: () => null,
+                    selection: () => null,
+                    popup: () => null,
+                    box: () => null
+                },
+                mapType: 'openlayers'
+            })}
+            on
+        />, document.getElementById("container"));
+    });
 });