Background layers are now saved in the mapConfig.

geonode_mapstore_client/client/js/epics/__tests__/gnresource-test.js

@@ -16,7 +16,8 @@ import {
     closeDatasetCatalogPanel,
     gnZoomToFitBounds,
     closeResourceDetailsOnMapInfoOpen,
-    gnUpdateResourceExtent
+    gnUpdateResourceExtent,
+    gnUpdateBackgroundEditEpic
 } from '@js/epics/gnresource';
 import { SAVE_SUCCESS } from '@mapstore/framework/actions/featuregrid';
 import {
@@ -33,6 +34,7 @@ import {
 } from '@mapstore/framework/actions/notifications';
 import { newMapInfoRequest } from '@mapstore/framework/actions/mapInfo';
 import { SET_SHOW_DETAILS } from '@mapstore/framework/plugins/ResourcesCatalog/actions/resources';
+import { CREATE_BACKGROUNDS_LIST } from '@mapstore/framework/actions/backgroundselector';
 
 let mockAxios;
 
@@ -345,4 +347,34 @@ describe('gnresource epics', () => {
             testState
         );
     });
+
+    it('should set canEdit true for MAP resource with change_resourcebase permission', (done) => {
+        const NUM_ACTIONS = 1;
+        const testState = {
+            gnresource: {
+                type: "map",
+                data: {
+                    pk: 1,
+                    title: 'Test Map',
+                    perms: ['view_resourcebase', 'change_resourcebase']
+                }
+            }
+        };
+
+        testEpic(
+                gnUpdateBackgroundEditEpic,
+                NUM_ACTIONS,
+                { type: CREATE_BACKGROUNDS_LIST },
+                (actions) => {
+                    try {
+                        expect(actions.length).toBe(1);
+                        expect(actions[0].resource.canEdit).toBe(true);
+                    } catch (e) {
+                        done(e);
+                    }
+                    done();
+                },
+                testState
+            );
+        });
 });

geonode_mapstore_client/client/js/epics/gnresource.js

@@ -128,7 +128,7 @@ import {
     loadFinished,
     setCreationStep
 } from '@mapstore/framework/actions/contextcreator';
-import { setContext } from '@mapstore/framework/actions/context';
+import { setContext, setResource as setResourceContext } from '@mapstore/framework/actions/context';
 import { REDUCERS_LOADED } from '@mapstore/framework/actions/storemanager';
 import { wrapStartStop } from '@mapstore/framework/observables/epics';
 import { parseDevHostname } from '@js/utils/APIUtils';
@@ -138,6 +138,7 @@ import { VisualizationModes } from '@mapstore/framework/utils/MapTypeUtils';
 import { forceUpdateMapLayout } from '@mapstore/framework/actions/maplayout';
 import { getShowDetails } from '@mapstore/framework/plugins/ResourcesCatalog/selectors/resources';
 import { searchSelector } from '@mapstore/framework/selectors/router';
+import { CREATE_BACKGROUNDS_LIST, allowBackgroundsDeletion } from '@mapstore/framework/actions/backgroundselector';
 
 const FIT_BOUNDS_CONTROL = 'fitBounds';
 
@@ -835,10 +836,24 @@ export const gnUpdateResourceExtent = (action$, store) =>
             );
         });
 
+export const gnUpdateBackgroundEditEpic = (action$, store) =>
+    action$.ofType(CREATE_BACKGROUNDS_LIST)
+        .switchMap(() => {
+            const state = store.getState();
+            const resource = state.gnresource?.data || {};
+            const resourceType = state.gnresource?.type;
+            const canEdit = resourceType === ResourceTypes.MAP && resource?.perms?.includes('change_resourcebase') ? true : false;
+            return Observable.of(
+                setResourceContext({ canEdit }),
+                ...(canEdit ? [allowBackgroundsDeletion(true)] : [])
+            );
+        });
+
 export default {
     gnViewerRequestNewResourceConfig,
     gnViewerRequestResourceConfig,
     gnViewerSetNewResourceThumbnail,
+    gnUpdateBackgroundEditEpic,
     closeInfoPanelOnMapClick,
     closeOpenPanels,
     closeDatasetCatalogPanel,

geonode_mapstore_client/client/js/plugins/index.js

@@ -21,6 +21,8 @@ import TOCPlugin from '@mapstore/framework/plugins/TOC';
 import Isochrone from "@mapstore/framework/plugins/Isochrone";
 import Itinerary from "@mapstore/framework/plugins/Itinerary";
 import SecurityPopup from "@mapstore/framework/plugins/SecurityPopup";
+import BackgroundSelector from '@mapstore/framework/plugins/BackgroundSelector';
+import MetadataExplorer from '@mapstore/framework/plugins/MetadataExplorer';
 
 import OperationPlugin from '@js/plugins/Operation';
 import MetadataEditorPlugin from '@js/plugins/MetadataEditor';
@@ -87,6 +89,8 @@ export const plugins = {
     IsochronePlugin: Isochrone,
     ItineraryPlugin: Itinerary,
     SecurityPopupPlugin: SecurityPopup,
+    BackgroundSelectorPlugin: BackgroundSelector,
+    MetadataExplorerPlugin: MetadataExplorer,
     LayerDownloadPlugin: toModulePlugin(
         'LayerDownload',
         () => import(/* webpackChunkName: 'plugins/layer-download' */ '@mapstore/framework/plugins/LayerDownload'),
@@ -131,10 +135,6 @@ export const plugins = {
         'StyleEditor',
         () => import(/* webpackChunkName: 'plugins/style-editor' */ '@mapstore/framework/plugins/StyleEditor')
     ),
-    MetadataExplorerPlugin: toModulePlugin(
-        'MetadataExplorer',
-        () => import(/* webpackChunkName: 'plugins/metadata-explorer' */ '@mapstore/framework/plugins/MetadataExplorer')
-    ),
     QueryPanelPlugin: toModulePlugin(
         'QueryPanel',
         () => import(/* webpackChunkName: 'plugins/query-panel' */ '@mapstore/framework/plugins/QueryPanel')
@@ -258,10 +258,6 @@ export const plugins = {
         'MapLoading',
         () => import(/* webpackChunkName: 'plugins/map-loading-plugin' */ '@mapstore/framework/plugins/MapLoading')
     ),
-    BackgroundSelectorPlugin: toModulePlugin(
-        'BackgroundSelector',
-        () => import(/* webpackChunkName: 'plugins/background-selector-plugin' */ '@mapstore/framework/plugins/BackgroundSelector')
-    ),
     ZoomInPlugin: toModulePlugin(
         'ZoomIn',
         () => import(/* webpackChunkName: 'plugins/zoom-in-plugin' */ '@mapstore/framework/plugins/ZoomIn')

geonode_mapstore_client/client/js/utils/ResourceUtils.js

@@ -620,28 +620,9 @@ export function toGeoNodeMapConfig(data) {
     };
 }
 
-export function compareBackgroundLayers(aLayer, bLayer) {
-    return aLayer.type === bLayer.type
-        && aLayer.name === bLayer.name
-        && aLayer.source === bLayer.source
-        && aLayer.provider === bLayer.provider
-        && aLayer.url === bLayer.url;
-}
-
 export function toMapStoreMapConfig(resource, baseConfig) {
     const { maplayers = [], data } = resource || {};
-    const baseMapBackgroundLayers = (baseConfig?.map?.layers || []).filter(layer => layer.group === 'background');
-    const currentBackgroundLayer = (data?.map?.layers || [])
-        .filter(layer => layer.group === 'background')
-        .find(layer => layer.visibility && baseMapBackgroundLayers.find(bLayer => compareBackgroundLayers(layer, bLayer)));
-
-    const backgroundLayers = !currentBackgroundLayer
-        ? baseMapBackgroundLayers
-        : baseMapBackgroundLayers.map((layer) => ({
-            ...layer,
-            visibility: compareBackgroundLayers(layer, currentBackgroundLayer)
-        }));
-
+    const backgroundLayers = (data?.map?.layers || []).filter(layer => layer.group === 'background');
     const layers = (data?.map?.layers || [])
         .filter(layer => layer.group !== 'background')
         .map((layer) => {

geonode_mapstore_client/client/js/utils/__tests__/ResourceUtils-test.js

@@ -17,7 +17,6 @@ import {
     setAvailableResourceTypes,
     getGeoNodeMapLayers,
     toGeoNodeMapConfig,
-    compareBackgroundLayers,
     toMapStoreMapConfig,
     parseStyleName,
     canCopyResource,
@@ -198,9 +197,6 @@ describe('Test Resource Utils', () => {
         const geoNodeMapConfig = toGeoNodeMapConfig(data, mapState);
         expect(geoNodeMapConfig.maplayers.length).toBe(1);
     });
-    it('should be able to compare background layers with different ids', () => {
-        expect(compareBackgroundLayers({ type: 'osm', source: 'osm', id: '11' }, { type: 'osm', source: 'osm' })).toBe(true);
-    });
     it('should transform a resource to a mapstore map config', () => {
         const resource = {
             maplayers: [
@@ -249,7 +245,7 @@ describe('Test Resource Utils', () => {
                 map: {
                     sources: {},
                     layers: [
-                        { type: 'osm', source: 'osm', group: 'background', visibility: true },
+                        { id: '01', type: 'osm', source: 'osm', group: 'background', visibility: true },
                         { id: '02', type: 'vector', features: [] },
                         {
                             id: '03',
@@ -327,7 +323,7 @@ describe('Test Resource Utils', () => {
                 map: {
                     sources: {},
                     layers: [
-                        { type: 'osm', source: 'osm', group: 'background', visibility: true },
+                        { id: '01', type: 'osm', source: 'osm', group: 'background', visibility: true },
                         { id: '02', type: 'vector', features: [] },
                         {
                             id: '03',
@@ -354,7 +350,7 @@ describe('Test Resource Utils', () => {
             }
         );
     });
-    it('should transform a resource to a mapstore map config and update backgrounds', () => {
+    it('should transform a resource to a mapstore map config and to not update backgrounds', () => {
         const resource = {
             maplayers: [
                 {
@@ -410,12 +406,11 @@ describe('Test Resource Utils', () => {
                     sources: {},
                     layers: [
                         {
-                            name: 'OpenTopoMap',
-                            provider: 'OpenTopoMap',
-                            source: 'OpenTopoMap',
-                            type: 'tileprovider',
-                            visibility: true,
-                            group: 'background'
+                            id: '01',
+                            type: 'osm',
+                            source: 'osm',
+                            group: 'background',
+                            visibility: true
                         },
                         { id: '02', type: 'vector', features: [] },
                         {
@@ -492,8 +487,8 @@ describe('Test Resource Utils', () => {
         const mapStoreMapConfig = toMapStoreMapConfig(resource, baseConfig);
         expect(mapStoreMapConfig).toBeTruthy();
         const layers = mapStoreMapConfig.map.layers;
-        expect(layers.length).toBe(2);
-        expect(layers[1].featureInfo).toEqual({ template, format: FEATURE_INFO_FORMAT });
+        expect(layers.length).toBe(1);
+        expect(layers[0].featureInfo).toEqual({ template, format: FEATURE_INFO_FORMAT });
     });
 
     it('should parse style name into accepted format', () => {

geonode_mapstore_client/templates/geonode-mapstore-client/_geonode_config.html

@@ -185,6 +185,23 @@
                     endpointV1: siteUrl + 'api',
                     endpointV2: siteUrl + 'api/v2/'
                 },
+                initialState: {
+                    defaultState: {
+                        catalog: {
+                            default: {
+                                staticServices: {
+                                    default_map_backgrounds: {
+                                        type: 'backgrounds',
+                                        title: 'Default Backgrounds',
+                                        titleMsgId: 'defaultMapBackgroundsServiceTitle',
+                                        autoload: true,
+                                        backgrounds: baseLayers
+                                    }
+                                }
+                            }
+                        }
+                    }
+                },
                 projectionDefs: projectionDefs,
                 geoNodeCustomFilters: customFilters,
                 geoNodeCardsMenuItems: cardsMenuItems,