maximize screen size

closes(78)
Canadian-Geospatial-Platform · Feb 20, 2025 · 4136bcc · 4136bcc
1 parent 768367b
commit 4136bcc
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 8 deletions.
diff --git a/src/components/AppToolbar.tsx b/src/components/AppToolbar.tsx
@@ -25,7 +25,7 @@ export const AppToolbar = (props: AppToolbarProps) => {
       {children}
       <img src={`${GEOVIEW_CORE_URL}/img/Logo.png`} alt="GeoView" style={{ height: 40, marginRight: 16 }} />{/* Adjust height and margin as needed */}
       <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-        Canadian Geospatial Platform (CGP) - GeoView  # 3
+        Canadian Geospatial Platform (CGP) - GeoView
       </Typography>
       <div>
       <IconButton

diff --git a/src/components/MapBuilder.tsx b/src/components/MapBuilder.tsx
@@ -9,7 +9,7 @@ import {
   Switch,
   TextField,
 } from '@mui/material';
-import { useContext, useState } from 'react';
+import { useContext, useState ,useEffect } from 'react';
 import { CGPVContext } from '@/providers/cgpvContextProvider/CGPVContextProvider';
 import _ from 'lodash';
 import PillsAutoComplete from './PillsAutoComplete';
@@ -24,6 +24,9 @@ import { ConfigSaveUploadButtons } from './ConfigSaveUploadButtons';
 export function MapBuilder() {
   const cgpvContext = useContext(CGPVContext);
 
+  const mapContainer = "";
+
+
   if (!cgpvContext) {
     throw new Error('CGPVContent must be used within a CGPVProvider');
   }
@@ -35,7 +38,20 @@ export function MapBuilder() {
   const [isModified, setIsModified] = useState<boolean>(false);
   const [isEn, setEn] = useState<boolean>(true);
 
+  const [winmapWidth, setmapWidth] = useState<string>("1000");
+
+  useEffect(() => {
+    window.dispatchEvent(new Event('resize')); //resize on rerender to update width
+  }, []);
 
+  const handleResize = () => {
+    if ( document.getElementById(mapId) !== null) {
+      setmapWidth(window.getComputedStyle(document.getElementById(mapId) as Element).getPropertyValue("width"));
+      }
+    };
+
+  window.addEventListener('resize', handleResize);
+
   const _updateConfigProperty = (property: string, value: any) => {
     const newConfig = { ...modifiedConfigJson };
     if (value === undefined) {
@@ -117,21 +133,30 @@ export function MapBuilder() {
                 id="map-width"
                 label="Width"
                 defaultValue={mapWidth}
-                onChange={(event) => { setMapWidth(event.target.value); setIsModified(true); }}
-                helperText="e.g. 100% or 500px"
+                onChange={(event) => {
+                  setMapWidth(event.target.value);
+                  setIsModified(true);
+                }}
+                helperText={"e.g. 100% or 1000px / width=" + winmapWidth} 
                 variant="outlined" />
             </FormControl>
+
             <FormControl>
               <TextField
                 size="small"
                 id="map-height"
                 label="Height"
                 defaultValue={mapHeight}
-                onChange={(event) => { setMapHeight(event.target.value); setIsModified(true); }}
-                helperText="e.g. 100% or 500px"
+                onChange={(event) => {
+                  setMapHeight(event.target.value);
+                  setIsModified(true);
+                }}
+                helperText={"e.g. 100% or 1000px / heigth="+mapHeight}
                 variant="outlined" />
             </FormControl>
           </Box>
+
+
         </FormGroup>
 
          <SingleSelectComplete
@@ -184,7 +209,7 @@ export function MapBuilder() {
               <SingleSelectComplete
                 options={zoomOptions}
                 defaultValue={getProperty('map.viewSettings.minZoom')}
-                onChange={(value) => updateProperty('map.viewSettings.minZoom', value)}
+                onChange={(value) =>  updateProperty('map.viewSettings.minZoom', value) }
                 label="Min Zoom" placeholder="" />
             </FormControl>
             <FormControl>

diff --git a/src/constants.ts b/src/constants.ts
@@ -4,8 +4,10 @@ import { ListOptionType } from './types';
 export const DEFAULT_DISPLAY_LANGUAGE = 'en';
 export const DEFAULT_DISPLAY_THEME = 'geo.ca';
 export const DEFAULT_DISPLAY_PROJECTION = 3978;
-export const DEFAULT_MAP_WIDTH = '800px';
+export const DEFAULT_MAP_WIDTH = '100%';
 export const DEFAULT_MAP_HEIGHT = '900px';
+
+
 export const DEFAULT_CONFIG_FILE = '01-basemap-LCC-TLS.json';
 
 export const DEFAULT_CONFIG = {