#9840: StreetView plugin ability to set parameters for the default size of panel

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 i.e `width` and `height`
  * @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;
  }