maximize screen size

closes(78)
Canadian-Geospatial-Platform · Feb 18, 2025 · 6bbc119 · 6bbc119
1 parent 768367b
commit 6bbc119
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 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
@@ -34,8 +34,7 @@ export function MapBuilder() {
   const [modifiedConfigJson, setModifiedConfigJson] = useState<object>(configJson);
   const [isModified, setIsModified] = useState<boolean>(false);
   const [isEn, setEn] = useState<boolean>(true);
-
-
+
   const _updateConfigProperty = (property: string, value: any) => {
     const newConfig = { ...modifiedConfigJson };
     if (value === undefined) {
@@ -112,26 +111,36 @@ export function MapBuilder() {
 
           <Box sx={{ display: 'flex', flexDirection: 'row', gap: 2 }}>
             <FormControl>
-              <TextField
+              <TextField 
                 size="small"
                 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={mapWidth.includes("%") ? "e.g. 100% or 1000px / width="+String(10*Number(mapWidth.replace("%","")))+"px" : "e.g. 100% or 1000px / width="+mapWidth
+              }
                 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={mapHeight.includes("%") ? "e.g. 100% or 1000px / heigth="+String(10*Number(mapHeight.replace("%","")))+"px" : "e.g. 100% or 1000px / heigth="+mapHeight}
                 variant="outlined" />
             </FormControl>
           </Box>
+
+
         </FormGroup>
 
          <SingleSelectComplete
@@ -184,7 +193,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 = {