Add support for 3dtiles dataset

geonode_mapstore_client/client/js/actions/gnresource.js

@@ -39,7 +39,7 @@ export const SET_RESOURCE_PATH_PARAMETERS = 'GEONODE:SET_RESOURCE_PATH_PARAMETER
 export const SET_MAP_VIEWER_LINKED_RESOURCE = 'GEONODE:SET_MAP_VIEWER_LINKED_RESOURCE';
 export const MANAGE_LINKED_RESOURCE = 'GEONODE:MANAGE_LINKED_RESOURCE';
 export const SET_DEFAULT_VIEWER_PLUGINS = 'GEONODE:SET_DEFAULT_VIEWER_PLUGINS';
-export const SET_SELECTED_LAYER_DATASET = 'GEONODE:SET_SELECTED_LAYER_DATASET';
+export const SET_SELECTED_LAYER = 'GEONODE:SET_SELECTED_LAYER';
 
 /**
 * Actions for GeoNode resource
@@ -366,9 +366,9 @@ export function setDefaultViewerPlugins(plugins) {
  * Set selected layer type is from dataset
  * @param {Object} layer selected
  */
-export function setSelectedLayerType(layer) {
+export function setSelectedLayer(layer) {
     return {
-        type: SET_SELECTED_LAYER_DATASET,
+        type: SET_SELECTED_LAYER,
         layer
     };
 }

geonode_mapstore_client/client/js/actions/gnsearch.js

@@ -59,11 +59,12 @@ export function loadingResources(loading) {
     };
 }
 
-export function requestResource(pk, ctype) {
+export function requestResource(pk, ctype, subtype) {
     return {
         type: REQUEST_RESOURCE,
         pk,
-        ctype
+        ctype,
+        subtype
     };
 }
 

geonode_mapstore_client/client/js/api/geonode/v2/index.js

@@ -27,7 +27,7 @@ import pick from 'lodash/pick';
 import isEmpty from 'lodash/isEmpty';
 import isNil from 'lodash/isNil';
 import { getUserInfo } from '@js/api/geonode/user';
-import { ResourceTypes, availableResourceTypes, setAvailableResourceTypes, getDownloadUrlInfo } from '@js/utils/ResourceUtils';
+import { ResourceTypes, availableResourceTypes, setAvailableResourceTypes, getDownloadUrlInfo, isDefaultDatasetSubtype } from '@js/utils/ResourceUtils';
 import { getConfigProp } from '@mapstore/framework/utils/ConfigUtils';
 import { mergeConfigsPatch } from '@mapstore/patcher';
 import { parseIcon } from '@js/utils/SearchUtils';
@@ -200,34 +200,31 @@ export const getDatasets = ({
     q,
     pageSize = 20,
     page = 1,
-    sort,
-    ...params
+    sort
 }) => {
     return axios
         .get(
-            parseDevHostname(endpoints[DATASETS]), {
+            parseDevHostname(endpoints[RESOURCES]), {
                 // axios will format query params array to `key[]=value1&key[]=value2`
                 params: {
-                    ...params,
+                    'filter{resource_type.in}': 'dataset',
+                    'filter{metadata_only}': false,
                     ...(q && {
                         search: q,
                         search_fields: ['title', 'abstract']
                     }),
                     ...(sort && { sort: isArray(sort) ? sort : [ sort ]}),
                     page,
                     page_size: pageSize,
-                    api_preset: API_PRESET.DATASETS
+                    api_preset: API_PRESET.CATALOGS
                 },
                 ...paramsSerializer()
             })
         .then(({ data }) => {
             return {
                 totalCount: data.total,
                 isNextPageAvailable: !!data.links.next,
-                resources: (data.datasets || [])
-                    .map((resource) => {
-                        return resource;
-                    })
+                resources: (data.resources || [])
             };
         });
 };
@@ -823,12 +820,14 @@ export const deleteExecutionRequest = (executionId) => {
     return axios.delete(`${parseDevHostname(endpoints[EXECUTIONREQUEST])}/${executionId}`);
 };
 
-export const getResourceByTypeAndByPk = (type, pk) => {
+export const getResourceByTypeAndByPk = (type, pk, subtype) => {
     switch (type) {
     case "document":
         return getDocumentByPk(pk);
     case "dataset":
-        return getDatasetByPk(pk);
+        return isDefaultDatasetSubtype(subtype)
+            ? getDatasetByPk(pk)
+            : getResourceByPk(pk);
     // Add type condition based on requirement
     default:
         return getResourceByPk(pk);

geonode_mapstore_client/client/js/apps/gn-map.js

@@ -118,6 +118,7 @@ document.addEventListener('DOMContentLoaded', function() {
                         setConfigProp('mapLayout', mapLayout[query.theme] || mapLayout.viewer);
 
                         const resourceId = geoNodePageConfig.resourceId;
+                        const resourceSubtype = geoNodePageConfig.resourceSubtype;
 
                         const appEpics = {
                             ...standardEpics,
@@ -185,7 +186,11 @@ document.addEventListener('DOMContentLoaded', function() {
                                 loadPrintCapabilities.bind(null, getConfigProp('printUrl')),
                                 setControlProperty.bind(null, 'toolbar', 'expanded', false),
                                 ...(resourceId !== undefined
-                                    ? [ requestResourceConfig.bind(null, geoNodePageConfig.resourceType || ResourceTypes.MAP, resourceId) ]
+                                    ? [ requestResourceConfig.bind(null, geoNodePageConfig.resourceType || ResourceTypes.MAP, resourceId, {
+                                        params: {
+                                            subtype: resourceSubtype
+                                        }
+                                    }) ]
                                     : []),
                                 changeMapInfoFormat.bind(null, 'application/json')
                             ]

geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx

@@ -84,7 +84,6 @@ const DetailsPanelTools = ({
     name,
     toolbarItems = []
 }) => {
-
     const isMounted = useRef();
     const [copiedUrl, setCopiedUrl] = useState({
         resource: false,

geonode_mapstore_client/client/js/components/ResourceCard/ResourceCard.jsx

@@ -33,8 +33,12 @@ const ResourceCard = forwardRef(({
     featured,
     onClick,
     downloading,
-    getDetailHref = (res) => formatHref({
-        pathname: `/detail/${res.resource_type}/${res.pk}`
+    getDetailHref = res => formatHref({
+        query: {
+            'd': `${res.pk};${res.resource_type}${res.subtype ? `;${res.subtype}` : ''}`
+        },
+        replaceQuery: true,
+        excludeQueryKeys: []
     })
 }, ref) => {
     const abstractRef = useRef();

geonode_mapstore_client/client/js/components/ResourcesCompactCatalog/ResourcesCompactCatalog.jsx

@@ -8,7 +8,6 @@
 
 import React, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import isNil from 'lodash/isNil';
 import { FormControl as FormControlRB, Glyphicon } from 'react-bootstrap';
 import Message from '@mapstore/framework/components/I18N/Message';
 import Button from '@js/components/Button';
@@ -37,7 +36,8 @@ function ResourcesCompactCatalog({
     onClose,
     titleId,
     noResultId,
-    loading: resourceLoading
+    loading: resourceLoading,
+    params
 }) {
 
     const scrollContainer = useRef();
@@ -48,9 +48,9 @@ function ResourcesCompactCatalog({
     const [q, setQ] = useState('');
     const isMounted = useRef();
 
-    useEffect(()=>{
-        !isNil(resourceLoading) && setLoading(resourceLoading);
-    }, [resourceLoading]);
+    const loadingActive = loading
+        ? loading
+        : !!resourceLoading;
 
     useInfiniteScroll({
         scrollContainer: scrollContainer.current,
@@ -68,6 +68,7 @@ function ResourcesCompactCatalog({
 
             setLoading(true);
             request({
+                ...params,
                 q,
                 page: options.page,
                 pageSize
@@ -157,7 +158,7 @@ function ResourcesCompactCatalog({
             </ul>
 
         </div>
-        {loading && <div
+        {loadingActive && <div
             style={{
                 position: 'absolute',
                 top: 0,

geonode_mapstore_client/client/js/epics/datasetscatalog.js

@@ -41,7 +41,7 @@ export const gnUpdateDatasetsCatalogMapLayout = (action$, store) =>
                 },
                 boundingSidebarRect: {
                     ...boundingSidebarRect,
-                    ...layout.boundingSidebarRect
+                    ...layout?.boundingSidebarRect
                 }
             });
             return { ...action, source: LayoutSections.PANEL }; // add an argument to avoid infinite loop.

geonode_mapstore_client/client/js/epics/gnresource.js

@@ -19,6 +19,7 @@ import {
 } from '@js/api/geonode/config';
 import {
     getDatasetByPk,
+    getResourceByPk,
     getGeoAppByPk,
     getDocumentByPk,
     getMapByPk,
@@ -81,7 +82,8 @@ import {
     toMapStoreMapConfig,
     parseStyleName,
     getCataloguePath,
-    getResourceWithLinkedResources
+    getResourceWithLinkedResources,
+    isDefaultDatasetSubtype
 } from '@js/utils/ResourceUtils';
 import {
     canAddResource,
@@ -113,19 +115,24 @@ import { wrapStartStop } from '@mapstore/framework/observables/epics';
 import { parseDevHostname } from '@js/utils/APIUtils';
 import { ProcessTypes } from '@js/utils/ResourceServiceUtils';
 import { catalogClose } from '@mapstore/framework/actions/catalog';
+import { VisualizationModes } from '@mapstore/framework/utils/MapTypeUtils';
+import { forceUpdateMapLayout } from '@mapstore/framework/actions/maplayout';
 
 const FIT_BOUNDS_CONTROL = 'fitBounds';
 
 const resourceTypes = {
     [ResourceTypes.DATASET]: {
         resourceObservable: (pk, options) => {
             const { page, selectedLayer, map: currentMap } = options || {};
+            const { subtype } = options?.params || {};
             return Observable.defer(() =>
                 axios.all([
                     getNewMapConfiguration(),
                     options?.isSamePreviousResource
                         ? new Promise(resolve => resolve(options.resourceData))
-                        : getDatasetByPk(pk)
+                        : isDefaultDatasetSubtype(subtype)
+                            ? getDatasetByPk(pk)
+                            : getResourceByPk(pk)
                 ])
                     .then((response) => {
                         const [mapConfig, gnLayer] = response;
@@ -163,6 +170,7 @@ const resourceTypes = {
                             map: {
                                 ...mapConfig.map,
                                 ...currentMap, // keep configuration for other pages when resource id is the same (eg: center, zoom)
+                                visualizationMode: ['3dtiles'].includes(subtype) ? VisualizationModes._3D : VisualizationModes._2D,
                                 layers: [
                                     ...mapConfig.map.layers,
                                     {
@@ -179,6 +187,7 @@ const resourceTypes = {
                             : []),
                         setControlProperty('toolbar', 'expanded', false),
                         setControlProperty('rightOverlay', 'enabled', 'DetailViewer'),
+                        forceUpdateMapLayout(),
                         selectNode(newLayer.id, 'layer', false),
                         setResource(gnLayer),
                         setResourceId(pk),
@@ -236,11 +245,16 @@ const resourceTypes = {
                         })
                     );
                 }),
-        newResourceObservable: (options) =>
-            Observable.defer(() => axios.all([
+        newResourceObservable: (options) => {
+            const queryDatasetParts = (options?.query?.['gn-dataset'] || '').split(':');
+            const queryDatasetPk = queryDatasetParts[0];
+            const quryDatasetSubtype = queryDatasetParts[1];
+            return Observable.defer(() => axios.all([
                 getNewMapConfiguration(),
-                ...(options?.query?.['gn-dataset']
-                    ? [ getDatasetByPk(options.query['gn-dataset']) ]
+                ...(queryDatasetPk !== ''
+                    ? [isDefaultDatasetSubtype(quryDatasetSubtype)
+                        ? getDatasetByPk(queryDatasetPk)
+                        : getResourceByPk(queryDatasetPk)]
                     : [])
             ]))
                 .switchMap(([ response, gnLayer ]) => {
@@ -254,6 +268,11 @@ const resourceTypes = {
                                 ...mapConfig,
                                 map: {
                                     ...mapConfig?.map,
+                                    ...(queryDatasetPk !== undefined && {
+                                        visualizationMode: ['3dtiles'].includes(quryDatasetSubtype)
+                                            ? VisualizationModes._3D
+                                            : VisualizationModes._2D
+                                    }),
                                     layers: [
                                         ...(mapConfig?.map?.layers || []),
                                         newLayer
@@ -266,7 +285,8 @@ const resourceTypes = {
                             : []),
                         setControlProperty('toolbar', 'expanded', false)
                     );
-                })
+                });
+        }
     },
     [ResourceTypes.GEOSTORY]: {
         resourceObservable: (pk, options) =>
@@ -664,6 +684,7 @@ function validateGeometry(extent, projection) {
     }
     return extent;
 }
+
 export const gnZoomToFitBounds = (action$) =>
     action$.ofType(SET_CONTROL_PROPERTY)
         .filter(action => action.control === FIT_BOUNDS_CONTROL && !!action.value)
@@ -673,7 +694,7 @@ export const gnZoomToFitBounds = (action$) =>
                 .switchMap(() => {
                     const extent = validateGeometry(action.value);
                     return Observable.of(
-                        zoomToExtent(extent, 'EPSG:4326'),
+                        zoomToExtent(extent, 'EPSG:4326', undefined, { duration: 0 }),
                         setControlProperty(FIT_BOUNDS_CONTROL, 'geometry', null)
                     );
                 })

geonode_mapstore_client/client/js/epics/gnsearch.js

@@ -283,11 +283,13 @@ export const gnsRequestResourceOnLocationChange = (action$, store) =>
             const { location } = action.payload || {};
             const { query } = url.parse(location?.search || '', true);
             const resource = getResourceData(state) || { pk: '', resource_type: '' };
-            const [pk, resourceType] = (query?.d || '').split(';');
-            if (`${resource?.pk}` === pk && `${resource?.resource_type}` === resourceType) {
+            const [pk, resourceType, subtype] = (query?.d || '').split(';');
+            if (`${resource?.pk}` === pk
+            && `${resource?.resource_type}` === resourceType
+            && `${resource?.subtype ? resource?.subtype : ''}` === subtype) {
                 return Observable.empty();
             }
-            return Observable.of(requestResource(pk ? pk : undefined, resourceType));
+            return Observable.of(requestResource(pk ? pk : undefined, resourceType, subtype));
         });
 
 export const gnsSelectResourceEpic = (action$, store) =>
@@ -300,7 +302,7 @@ export const gnsSelectResourceEpic = (action$, store) =>
             const resources = state.gnsearch?.resources || [];
             const selectedResource = resources.find(({ pk, resource_type: resourceType}) =>
                 pk === action.pk && action.ctype === resourceType);
-            return Observable.defer(() => getResourceByTypeAndByPk(action.ctype, action.pk))
+            return Observable.defer(() => getResourceByTypeAndByPk(action.ctype, action.pk, action.subtype))
                 .switchMap((resource) => {
                     return Observable.of(setResource({
                         ...resource,

geonode_mapstore_client/client/js/epics/index.js

@@ -18,7 +18,7 @@ import { getDatasetByName, getDatasetsByName } from '@js/api/geonode/v2';
 import { MAP_CONFIG_LOADED } from '@mapstore/framework/actions/config';
 import { setPermission } from '@mapstore/framework/actions/featuregrid';
 import { SELECT_NODE, updateNode, ADD_LAYER } from '@mapstore/framework/actions/layers';
-import { setSelectedDatasetPermissions, setSelectedLayerType } from '@js/actions/gnresource';
+import { setSelectedDatasetPermissions, setSelectedLayer } from '@js/actions/gnresource';
 import { updateMapLayoutEpic as msUpdateMapLayoutEpic } from '@mapstore/framework/epics/maplayout';
 
 // We need to include missing epics. The plugins that normally include this epic is not used.
@@ -45,13 +45,13 @@ export const gnCheckSelectedDatasetPermissions = (action$, { getState } = {}) =>
                     setPermission({canEdit}),
                     setEditPermissionStyleEditor(canEditStyles),
                     setSelectedDatasetPermissions(permissions),
-                    setSelectedLayerType(layer)
+                    setSelectedLayer(layer)
                 )
                 : Rx.Observable.of(
                     setPermission({canEdit: false}),
                     setEditPermissionStyleEditor(false),
                     setSelectedDatasetPermissions([]),
-                    setSelectedLayerType(null)
+                    setSelectedLayer(null)
                 );
         });
 

geonode_mapstore_client/client/js/epics/visualstyleeditor.js

@@ -188,7 +188,7 @@ export const gnUpdateVisualStyleEditorMapLayout = (action$, store) =>
                 },
                 boundingSidebarRect: {
                     ...boundingSidebarRect,
-                    ...layout.boundingSidebarRect
+                    ...layout?.boundingSidebarRect
                 }
             });
             return { ...action, source: LayoutSections.PANEL }; // add an argument to avoid infinite loop.