geosolutions-it#9840: StreetView plugin ability to set parameters for…

… the default size of panel (geosolutions-it#9842)

web/client/plugins/StreetView/StreetView.jsx

@@ -20,14 +20,14 @@ import streetView from './reducers/streetview';
 import * as epics from './epics/streetView';
 import './css/style.css';
 
-const StreetViewPluginComponent = ({onMount, onUnmount, apiKey, useDataLayer, dataLayerConfig, panoramaOptions}) => {
+const StreetViewPluginComponent = ({onMount, onUnmount, apiKey, useDataLayer, dataLayerConfig, panoramaOptions, panelSize}) => {
     useEffect(() => {
         onMount({apiKey, useDataLayer, dataLayerConfig, panoramaOptions});
         return () => {
             onUnmount();
         };
     }, [apiKey, useDataLayer, dataLayerConfig, JSON.stringify(panoramaOptions ?? {})]);
-    return <StreetViewContainer />;
+    return <StreetViewContainer panelSize={panelSize} />;
 };
 
 const StreetViewPluginContainer = connect(() => ({}), {
@@ -49,6 +49,7 @@ const StreetViewPluginContainer = connect(() => ({}), {
  * @property {boolean} [cfg.useDataLayer=true] If true, adds to the map a layer for street view data availability when the plugin is turned on.
  * @property {object} [cfg.dataLayerConfig] configuration for the data layer. By default `{provider: 'custom', type: "tileprovider", url: "https://mts1.googleapis.com/vt?hl=en-US&lyrs=svv|cb_client:apiv3&style=40,18&x={x}&y={y}&z={z}"}`
  * @property {object} [cfg.panoramaOptions] options to configure the panorama. {@link https://developers.google.com/maps/documentation/javascript/reference/street-view#panoramaOptions|Reference for google maps API}
+ * @property {object} [cfg.panelSize] option to configure default street view modal panel size `width` and `height`. Example: `{"width": 500, "height": 500}`.
  * @class
  */
 export default createPlugin(

web/client/plugins/StreetView/components/EmptyStreetView.js

@@ -3,6 +3,14 @@ import Message from '../../../components/I18N/Message';
 
 import EmptyView from '../../../components/misc/EmptyView';
 const EmptyStreetView = () => {
-    return <EmptyView iconFit={false} glyph="road" title={<Message msgId="streetView.emptyTitle"/>} description={<Message msgId="streetView.emptyDescription"/>} />;
+    return (
+        <EmptyView
+            style={{display: "flex", justifyContent: "center"}}
+            iconFit={false}
+            glyph="road"
+            title={<Message msgId="streetView.emptyTitle"/>}
+            description={<Message msgId="streetView.emptyDescription"/>}
+        />
+    );
 };
 export default EmptyStreetView;

web/client/plugins/StreetView/containers/StreetViewContainer.jsx

@@ -17,9 +17,9 @@ import { toggleStreetView } from '../actions/streetView';
  * @param {*} param0
  * @returns
  */
-function Panel({enabled, onClose = () => {}}) {
+function Panel({enabled, onClose = () => {}, panelSize}) {
     const margin = 10;
-    const [size, setSize] = useState({width: 400, height: 300});
+    const [size, setSize] = useState({width: 400, height: 300, ...panelSize});
     if (!enabled) {
         return null;
     }