Merge pull request #58 from Pewillia/53-add-language-button

add language button
Canadian-Geospatial-Platform · Nov 12, 2024 · 1a649b0 · 1a649b0
2 parents 5543a72 + cde9a24
commit 1a649b0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/src/components/GeoViewMap.tsx b/src/components/GeoViewMap.tsx
@@ -4,8 +4,6 @@ import MenuIcon from '@mui/icons-material/Menu';
 import DrawerTabs from './DrawerTabs';
 import { CGPVContext } from '../providers/cgpvContextProvider/CGPVContextProvider';
 import { MapRenderer } from './MapRenderer';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import { useNavigate } from 'react-router-dom';
 import { AppToolbar } from './AppToolbar';
 import { useSearchParams } from "react-router-dom";
 import { DEFAULT_CONFIG_FILE } from '@/constants';
@@ -20,7 +18,6 @@ interface GeoViewMapProps {
 
 function GeoViewMap(props: GeoViewMapProps) {
   const cgpvContext = useContext(CGPVContext);
-  const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
 
 

diff --git a/src/components/MapBuilder.tsx b/src/components/MapBuilder.tsx
@@ -13,7 +13,7 @@ import { useContext, useState } from 'react';
 import { CGPVContext } from '@/providers/cgpvContextProvider/CGPVContextProvider';
 import _ from 'lodash';
 import PillsAutoComplete from './PillsAutoComplete';
-import { componentsOptions, footerTabslist, navBarOptions, appBarOptions, mapInteractionOptions, mapProjectionOptions, zoomOptions, themeOptions, CONFIG_FILES_LIST, corePackagesOptions } from '@/constants';
+import { componentsOptions, footerTabslist, languageOptions, navBarOptions, appBarOptions, mapInteractionOptions, mapProjectionOptions, zoomOptions, themeOptions, CONFIG_FILES_LIST, corePackagesOptions } from '@/constants';
 import SingleSelectComplete from './SingleSelectAutoComplete';
 import { ConfigSaveUploadButtons } from './ConfigSaveUploadButtons';
 
@@ -25,11 +25,13 @@ export function MapBuilder() {
   if (!cgpvContext) {
     throw new Error('CGPVContent must be used within a CGPVProvider');
   }
-
-  const { configJson,handleApplyStateToConfigFile, handleConfigFileChange, handleConfigJsonChange, configFilePath, mapWidth, mapHeight, setMapWidth, setMapHeight } = cgpvContext;
+  const { mapId } = cgpvContext;
+  const { configJson, handleApplyStateToConfigFile,handleConfigFileChange, handleConfigJsonChange, configFilePath, mapWidth, mapHeight, setMapWidth, setMapHeight } = cgpvContext;
 
   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 };
@@ -73,8 +75,8 @@ export function MapBuilder() {
     handleConfigJsonChange(modifiedConfigJson);
     setIsModified(false);
   }
-
-  return (
+  
+  return(
     <Box sx={{ display: 'flex', flexDirection: 'column' }}>
 
       <ConfigSaveUploadButtons />
@@ -129,7 +131,14 @@ export function MapBuilder() {
           </Box>
         </FormGroup>
 
-        <Divider sx={{ my: 2 }} />
+         <SingleSelectComplete
+          options={languageOptions}
+          defaultValue={(isEn) ? 'English' : 'French'}
+          onChange={(event) => { 
+           (isEn) ? cgpv.api.maps[mapId].setLanguage('fr') : cgpv.api.maps[mapId].setLanguage('en');
+           setEn(!isEn);
+          }}
+        label="Change Language" placeholder="" />
 
         <SingleSelectComplete
           options={themeOptions}
@@ -229,4 +238,4 @@ export function MapBuilder() {
       </FormControl>
     </Box>
   );
-}
+}