Merge pull request #63 from Pewillia/48-add-basemap-shaded-labeled-bu…

…tton add basemap shaded and labeled button
Canadian-Geospatial-Platform · Dec 10, 2024 · 08e0fa6 · 08e0fa6
2 parents 30d9fc3 + dd8a946
commit 08e0fa6
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git a/src/components/MapBuilder.tsx b/src/components/MapBuilder.tsx
@@ -13,7 +13,9 @@ import { useContext, useState } from 'react';
 import { CGPVContext } from '@/providers/cgpvContextProvider/CGPVContextProvider';
 import _ from 'lodash';
 import PillsAutoComplete from './PillsAutoComplete';
-import { componentsOptions, footerTabslist, languageOptions, navBarOptions, basemapOptions,appBarOptions, mapInteractionOptions, mapProjectionOptions, zoomOptions, themeOptions, CONFIG_FILES_LIST, corePackagesOptions } from '@/constants';
+import {
+  componentsOptions, basemapShading, basemapLabelling, footerTabslist, languageOptions, navBarOptions, basemapOptions,appBarOptions,mapInteractionOptions, mapProjectionOptions, zoomOptions, themeOptions, CONFIG_FILES_LIST, corePackagesOptions
+} from '@/constants';
 import SingleSelectComplete from './SingleSelectAutoComplete';
 import { ConfigSaveUploadButtons } from './ConfigSaveUploadButtons';
 
@@ -25,8 +27,9 @@ export function MapBuilder() {
   if (!cgpvContext) {
     throw new Error('CGPVContent must be used within a CGPVProvider');
   }
+
   const { mapId } = cgpvContext;
-  const { configJson, handleApplyStateToConfigFile,handleConfigFileChange, handleConfigJsonChange, configFilePath, mapWidth, mapHeight, setMapWidth, setMapHeight } = cgpvContext;
+  const { configJson, handleApplyStateToConfigFile, handleConfigFileChange, handleConfigJsonChange, configFilePath, mapWidth, mapHeight, setMapWidth, setMapHeight } = cgpvContext;
 
   const [modifiedConfigJson, setModifiedConfigJson] = useState<object>(configJson);
   const [isModified, setIsModified] = useState<boolean>(false);
@@ -157,7 +160,22 @@ export function MapBuilder() {
           defaultValue={getProperty('map.basemapOptions.basemapId')}
           onChange={(value) => updateProperty('map.basemapOptions.basemapId', value)}
           label="Base Map" placeholder="" />
-
+
+        <SingleSelectComplete
+          options={basemapShading}
+          defaultValue={Boolean(getProperty('map.basemapOptions.shaded')) ? 'true':'false' }
+          onChange={(value) => {
+            updateProperty('map.basemapOptions.shaded', JSON.parse(value)); 
+            console.log("value of unshaded=",value,"boolean=", JSON.parse(value));
+          }}
+          label="Base Map Shaded" placeholder="" />
+
+         <SingleSelectComplete
+          options={basemapLabelling}
+          defaultValue={Boolean(getProperty('map.basemapOptions.labeled')) ? 'true':'false' }
+          onChange={(value) => updateProperty('map.basemapOptions.labeled', JSON.parse(value))}
+          label="Base Map Labeled" placeholder="" />
+
         <FormGroup aria-label="position">
           <FormLabel component="legend">Zoom Levels</FormLabel>
 
@@ -244,5 +262,7 @@ export function MapBuilder() {
 
       </FormControl>
     </Box>
+
   );
-}
+
+}
diff --git a/src/constants.ts b/src/constants.ts
@@ -90,6 +90,16 @@ export const basemapOptions: ListOptionType[] = [
   { title: 'Imagery', value: 'imagery' }
 ];
 
+export const basemapShading: ListOptionType[] = [
+  { title: 'shaded', value: 'true' },
+  { title: 'unshaded', value: 'false' }
+];
+
+export const basemapLabelling: ListOptionType[] = [
+  { title: 'labelled', value: 'true' },
+  { title: 'unlabelled', value: 'false' }
+];
+
 export const mapProjectionOptions: ListOptionType[] = [
   { title: 'LCC', value: 3978 },
   { title: 'Web Mercator', value: 3857 }
@@ -100,7 +110,6 @@ export const mapInteractionOptions: ListOptionType[] = [
   { title: 'Dynamic', value: 'dynamic' }
 ];
 
-
 export const componentsOptions: ListOptionType[] = [
   { title: 'North Arrow', value: 'north-arrow' },
   { title: 'Overview Map', value: 'overview-map' }

diff --git a/src/providers/cgpvContextProvider/cgpvHook.ts b/src/providers/cgpvContextProvider/cgpvHook.ts
@@ -267,7 +267,7 @@ export function useCgpvHook(): ICgpvHook {
       const str = json.replaceAll(`'`, `"`);
       JSON.parse(str);
       cgpv.api.config.createMapConfig(str, 'en');
-    } catch (e: any) {
+    } catch (e: any) { 
       return cgpv.api.utilities.core.escapeRegExp(e.message);
     }
     return null;