diff --git a/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
index 0fb9c351d5..589ae1d14a 100644
--- a/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
+++ b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
@@ -22,13 +22,12 @@ import debounce from 'lodash/debounce';
import CopyToClipboardCmp from 'react-copy-to-clipboard';
import { TextEditable, ThumbnailEditable } from '@js/components/ContentsEditable/';
import ResourceStatus from '@js/components/ResourceStatus/';
-import turfBbox from '@turf/bbox';
import BaseMap from '@mapstore/framework/components/map/BaseMap';
import mapTypeHOC from '@mapstore/framework/components/map/enhancers/mapType';
-import { boundsToExtentString, getFeatureFromExtent } from '@js/utils/CoordinatesUtils';
import AuthorInfo from '@js/components/AuthorInfo/AuthorInfo';
import Loader from '@mapstore/framework/components/misc/Loader';
import { getUserName } from '@js/utils/SearchUtils';
+import FitBounds from '@mapstore/framework/components/geostory/common/map/FitBounds';
const Map = mapTypeHOC(BaseMap);
Map.displayName = 'Map';
@@ -122,37 +121,18 @@ const DefinitionListContainer = ({itemslist}) => {
);
};
-function getExtent({
- features,
- layers
-}) {
- if (features && features.length > 0) {
- return turfBbox({ type: 'FeatureCollection', features });
- }
- const { bbox } = layers.find(({ isDataset }) => isDataset) || {};
- const { bounds, crs } = bbox || {};
- if (bounds && crs === 'EPSG:4326') {
- const { minx, miny, maxx, maxy } = bounds;
- return [ minx, miny, maxx, maxy ];
- }
- return null;
-}
-
-const MapThumbnailView = ({ layers, featuresProp = [], onMapThumbnail, onClose, savingThumbnailMap } ) => {
+const MapThumbnailView = ({ initialBbox, layers, onMapThumbnail, onClose, savingThumbnailMap } ) => {
- const [currentExtent, setCurrentExtent] = useState();
const [currentBbox, setCurrentBbox] = useState();
function handleOnMapViewChanges(center, zoom, bbox) {
- const { bounds, crs } = bbox;
- const newExtent = boundsToExtentString(bounds, crs);
setCurrentBbox(bbox);
- setCurrentExtent(newExtent);
}
- const [extent] = useState(getExtent({ layers, features: featuresProp }));
-
- const featureFromExtent = currentExtent ? currentExtent : extent?.join();
+ const { bounds, crs } = initialBbox;
+ const { minx, miny, maxx, maxy } = bounds;
+ const extent = [minx, miny, maxx, maxy];
+ const projection = crs;
return (
@@ -164,7 +144,7 @@ const MapThumbnailView = ({ layers, featuresProp = [], onMapThumbnail, onClose,
mapType="openlayers"
map={{
registerHooks: false,
- projection: 'EPSG:3857' // da usare paramentro projection
+ projection: 'EPSG:3857' // to use parameter projection
}}
styleMap={{
position: 'absolute',
@@ -175,32 +155,24 @@ const MapThumbnailView = ({ layers, featuresProp = [], onMapThumbnail, onClose,
onMapViewChanges: handleOnMapViewChanges
}}
layers={[
- ...(layers ? layers : []),
- ...(featureFromExtent
- ? [{
- id: 'highlight',
- type: 'vector',
- features: [getFeatureFromExtent(featureFromExtent)],
- style: {
- color: '#397AAB',
- opacity: 0.8,
- fillColor: '#397AAB',
- fillOpacity: 0.4,
- weight: 0.001
- }
- }]
- : []
- )
+ ...(layers ? layers : [])
]}
>
+
{savingThumbnailMap &&
-
+
}
-
+
);
@@ -235,7 +207,8 @@ function DetailsPanel({
layers,
isThumbnailChanged,
onResourceThumbnail,
- resourceThumbnailUpdating
+ resourceThumbnailUpdating,
+ initialBbox
}) {
const detailsContainerNode = useRef();
const isMounted = useRef();
@@ -549,6 +522,7 @@ function DetailsPanel({
onMapThumbnail={onMapThumbnail}
onClose={handleEnableMapViewer}
savingThumbnailMap={savingThumbnailMap}
+ initialBbox={initialBbox}
/>
}
}
diff --git a/geonode_mapstore_client/client/js/components/Permissions/GeoLimits.jsx b/geonode_mapstore_client/client/js/components/Permissions/GeoLimits.jsx
index 6c39f4fcf3..8db2615575 100644
--- a/geonode_mapstore_client/client/js/components/Permissions/GeoLimits.jsx
+++ b/geonode_mapstore_client/client/js/components/Permissions/GeoLimits.jsx
@@ -15,27 +15,11 @@ import FitBounds from '@mapstore/framework/components/geostory/common/map/FitBou
import Button from '@js/components/Button';
import FaIcon from '@js/components/FaIcon';
import Spinner from '@js/components/Spinner';
-import turfBbox from '@turf/bbox';
+import { getExtent } from '@js/utils/CoordinatesUtils';
const Map = mapTypeHOC(BaseMap);
Map.displayName = 'Map';
-function getExtent({
- features,
- layers
-}) {
- if (features && features.length > 0) {
- return turfBbox({ type: 'FeatureCollection', features });
- }
- const { bbox } = layers.find(({ isDataset }) => isDataset) || {};
- const { bounds, crs } = bbox || {};
- if (bounds && crs === 'EPSG:4326') {
- const { minx, miny, maxx, maxy } = bounds;
- return [ minx, miny, maxx, maxy ];
- }
- return null;
-}
-
function GeoLimits({
projection,
layers,
diff --git a/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx b/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx
index 9bc9851d09..62360c76b6 100644
--- a/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx
+++ b/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx
@@ -39,6 +39,7 @@ import { withRouter } from 'react-router';
import { hashLocationToHref } from '@js/utils/SearchUtils';
import Message from '@mapstore/framework/components/I18N/Message';
import { layersSelector } from '@mapstore/framework/selectors/layers';
+import { mapSelector } from '@mapstore/framework/selectors/map';
const ConnectedDetailsPanel = connect(
createSelector([
@@ -48,15 +49,17 @@ const ConnectedDetailsPanel = connect(
state => state?.gnsave?.savingThumbnailMap || false,
layersSelector,
isThumbnailChanged,
- updatingThumbnailResource
- ], (resource, loading, favorite, savingThumbnailMap, layers, thumbnailChanged, resourceThumbnailUpdating) => ({
+ updatingThumbnailResource,
+ mapSelector
+ ], (resource, loading, favorite, savingThumbnailMap, layers, thumbnailChanged, resourceThumbnailUpdating, mapData) => ({
layers: layers,
resource,
loading,
savingThumbnailMap,
favorite,
isThumbnailChanged: thumbnailChanged,
- resourceThumbnailUpdating
+ resourceThumbnailUpdating,
+ initialBbox: mapData?.bbox
})),
{
closePanel: setControlProperty.bind(null, 'rightOverlay', 'enabled', false),
diff --git a/geonode_mapstore_client/client/js/utils/CoordinatesUtils.js b/geonode_mapstore_client/client/js/utils/CoordinatesUtils.js
index f7166c3d91..e4527e2eb1 100644
--- a/geonode_mapstore_client/client/js/utils/CoordinatesUtils.js
+++ b/geonode_mapstore_client/client/js/utils/CoordinatesUtils.js
@@ -10,6 +10,7 @@
import isNil from 'lodash/isNil';
import join from 'lodash/join';
import { reprojectBbox, getViewportGeometry } from '@mapstore/framework/utils/CoordinatesUtils';
+import turfBbox from '@turf/bbox';
/**
* Utilities for api requests
@@ -120,3 +121,27 @@ export function bboxToPolygon(bbox, crs) {
]]
};
}
+
+/**
+ * Get the extent of area of interest from map bbox
+ * the values of the extent are expressed in the unit of the projection
+ * @param {Object} Options containing layers and features
+ * @returns {Array} containng minx, miny, maxx, maxy
+ * minx, miny -> bottom-left corner of square
+ * maxx, maxy -> top-right corner of square
+ */
+export const getExtent = ({
+ features,
+ layers
+}) => {
+ if (features && features.length > 0) {
+ return turfBbox({ type: 'FeatureCollection', features });
+ }
+ const { bbox } = layers.find(({ isDataset }) => isDataset) || {};
+ const { bounds, crs } = bbox || {};
+ if (bounds && crs === 'EPSG:4326') {
+ const { minx, miny, maxx, maxy } = bounds;
+ return [minx, miny, maxx, maxy];
+ }
+ return null;
+};
diff --git a/geonode_mapstore_client/client/js/utils/ResourceUtils.js b/geonode_mapstore_client/client/js/utils/ResourceUtils.js
index 588f4ab91a..eff1a2ebb3 100644
--- a/geonode_mapstore_client/client/js/utils/ResourceUtils.js
+++ b/geonode_mapstore_client/client/js/utils/ResourceUtils.js
@@ -575,5 +575,3 @@ export const parseMapConfig = (mapResponse, resource = {}) => {
type: 'map'
};
};
-
-
diff --git a/geonode_mapstore_client/client/js/utils/__tests__/CoordinatesUtils-test.js b/geonode_mapstore_client/client/js/utils/__tests__/CoordinatesUtils-test.js
index 2780f7a58c..823a06db81 100644
--- a/geonode_mapstore_client/client/js/utils/__tests__/CoordinatesUtils-test.js
+++ b/geonode_mapstore_client/client/js/utils/__tests__/CoordinatesUtils-test.js
@@ -9,7 +9,8 @@
import expect from 'expect';
import {
- bboxToPolygon
+ bboxToPolygon,
+ getExtent
} from '../CoordinatesUtils';
describe('Test Coordinates Utils', () => {
@@ -28,4 +29,16 @@ describe('Test Coordinates Utils', () => {
[-10, -10]
]]);
});
+
+ it('should get extent from Bbox', () => {
+ const layers = [{
+ isDataset: true,
+ bbox: {
+ bounds: { minx: -10, miny: -10, maxx: 10, maxy: 10 },
+ crs: 'EPSG:4326'
+ }
+ }];
+
+ expect(getExtent({ layers, features: [] })).toEqual([-10, -10, 10, 10]);
+ });
});
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less b/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
index 7117854f72..2513a9b361 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
@@ -225,12 +225,20 @@
.gn-detail-extent {
position: relative;
width: 250px;
- height: 250px;
+ height: 180px;
}
- .gn-detail-extent-action .btn-default {
- width: 50%;
- }
+ .gn-detail-extent-action {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+
+ .btn {
+ margin: 0.6rem;
+ }
+ }
.upload-thumbnail{
position: absolute;
top: 10px;