[Fixes #334] Implement support for MapStore annotations (#380)

GeoNode · Jul 27, 2021 · caa20be · caa20be
1 parent f615401
commit caa20be
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 15 deletions.
diff --git a/geonode_mapstore_client/client/js/apps/gn-catalogue.js b/geonode_mapstore_client/client/js/apps/gn-catalogue.js
@@ -34,6 +34,7 @@ import mapPopups from '@mapstore/framework/reducers/mapPopups';
 import catalog from '@mapstore/framework/reducers/catalog';
 import searchconfig from '@mapstore/framework/reducers/searchconfig';
 import widgets from '@mapstore/framework/reducers/widgets';
+import annotations from '@mapstore/framework/reducers/annotations';
 // end
 
 import SearchRoute from '@js/routes/Search';
@@ -200,6 +201,13 @@ Promise.all([
                             ...securityState,
                             maptype: {
                                 mapType
+                            },
+                            annotations: {
+                                config: {
+                                    multiGeometry: true,
+                                    validationErrors: {}
+                                },
+                                defaultTextAnnotation: 'New'
                             }
                         }
                     },
@@ -236,6 +244,7 @@ Promise.all([
                         widgets,
                         geostory,
                         gnsearch,
+                        annotations,
                         ...pluginsDefinition.reducers
                     },
                     appEpics: {

diff --git a/geonode_mapstore_client/client/js/components/CardGrid/CardGrid.jsx b/geonode_mapstore_client/client/js/components/CardGrid/CardGrid.jsx
@@ -182,7 +182,7 @@ const CardGrid = ({
                             {loading && <Spinner animation="border" role="status">
                                 <span className="sr-only">Loading...</span>
                             </Spinner>}
-                            {hasResources && !isNextPageAvailable && !loading && <FaIcon name="dot-circle" />}
+                            {hasResources && !isNextPageAvailable && !loading && <FaIcon name="dot-circle-o" />}
                         </div>
                     </div>
                 </div>

diff --git a/geonode_mapstore_client/client/js/components/ContentsEditable/ThumbnailEditable.jsx b/geonode_mapstore_client/client/js/components/ContentsEditable/ThumbnailEditable.jsx
@@ -33,7 +33,7 @@ const ThumbnailEditable = ({
                 message={<Message msgId="gnviewer.uploadImage"/>}
             />
             <div className={`icon-image-preview`} >
-                <FaIcon name="file-upload" />
+                <FaIcon name="upload" />
             </div>
         </>
     );

diff --git a/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
@@ -369,7 +369,7 @@ function DetailsPanel({
                                 {resource?.title}
                             </h1>
                             }
-                            {activeEditMode && !editModeTitle && <span onClick={handleEditModeTitle} ><FaIcon name={'edit'} /></span>}
+                            {activeEditMode && !editModeTitle && <span onClick={handleEditModeTitle} ><FaIcon name={'pencil-square-o'} /></span>}
 
 
                             {editModeTitle && <h1>
@@ -384,7 +384,7 @@ function DetailsPanel({
                                     <Button
                                         variant="default"
                                         onClick={debounce(handleFavorite, 500)}>
-                                        <FaIcon stylePrefix={favorite ? `fa` : `far`} name="star" />
+                                        <FaIcon name={favorite ? 'star' : 'star-o'} />
                                     </Button>
                                     }
                                     {documentDownloadUrl &&
@@ -444,7 +444,7 @@ function DetailsPanel({
                                     <span className="gn-details-panel-text" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(resource.abstract) }} />
                                     : null
                             }
-                            {activeEditMode && !editModeAbstract && <span onClick={handleEditModeAbstract} ><FaIcon name={'edit'} /></span>}
+                            {activeEditMode && !editModeAbstract && <span onClick={handleEditModeAbstract} ><FaIcon name={'pencil-square-o'} /></span>}
                         </div>
 
                         <p>

diff --git a/geonode_mapstore_client/client/js/plugins/actionnavbar/buttons.jsx b/geonode_mapstore_client/client/js/plugins/actionnavbar/buttons.jsx
@@ -93,3 +93,22 @@ export const LayerDownloadActionButton = connect(
         </Button>
     );
 });
+
+export const AnnotationsActionButton = connect(
+    () => ({}),
+    { onClick: setControlProperty.bind(null, 'annotations', 'enabled', true, true) }
+)(({
+    onClick,
+    variant,
+    size
+}) => {
+    return (
+        <Button
+            variant={variant}
+            size={size}
+            onClick={() => onClick()}
+        >
+            <Message msgId="annotationsbutton"/>
+        </Button>
+    );
+});
diff --git a/geonode_mapstore_client/client/js/plugins/index.js b/geonode_mapstore_client/client/js/plugins/index.js
@@ -13,7 +13,8 @@ import {
     PrintActionButton,
     CatalogActionButton,
     MeasureActionButton,
-    LayerDownloadActionButton
+    LayerDownloadActionButton,
+    AnnotationsActionButton
 } from '@js/plugins/actionnavbar/buttons';
 
 function toLazyPlugin(name, imp, overrides) {
@@ -326,6 +327,22 @@ export const plugins = {
     DashboardPlugin: toLazyPlugin(
         'Dashboard',
         import(/* webpackChunkName: 'plugins/dashboard-plugin' */ '@mapstore/framework/plugins/Dashboard')
+    ),
+    AnnotationsPlugin: toLazyPlugin(
+        'Annotations',
+        import(/* webpackChunkName: 'plugins/annotations-plugin' */ '@mapstore/framework/plugins/Annotations'),
+        {
+            containers: {
+                ViewerLayout: {
+                    priority: 2
+                },
+                ActionNavbar: {
+                    name: 'Annotations',
+                    Component: AnnotationsActionButton,
+                    priority: 2
+                }
+            }
+        }
     )
 
 };

diff --git a/geonode_mapstore_client/client/js/utils/GNSearchUtils.js b/geonode_mapstore_client/client/js/utils/GNSearchUtils.js
@@ -78,7 +78,7 @@ function updateUrlQueryParameter(requestUrl, query) {
 
 export const getResourceTypesInfo = () => ({
     'dataset': {
-        icon: 'layer-group',
+        icon: 'database',
         formatEmbedUrl: (resource) => updateUrlQueryParameter(resource.embed_url, {
             config: 'layer_preview',
             theme: 'preview'
@@ -87,7 +87,7 @@ export const getResourceTypesInfo = () => ({
         name: 'Dataset'
     },
     'map': {
-        icon: 'map-marked',
+        icon: 'map',
         formatEmbedUrl: (resource) => updateUrlQueryParameter(resource.embed_url, {
             config: 'map_preview',
             theme: 'preview'
@@ -101,17 +101,17 @@ export const getResourceTypesInfo = () => ({
         formatDetailUrl: (resource) => (`/catalogue/#/document/${resource.pk}`)
     },
     'geostory': {
-        icon: 'book-open',
+        icon: 'book',
         name: 'GeoStory',
         formatDetailUrl: (resource) => (`/catalogue/#/geostory/${resource.pk}`)
     },
     'image': {
-        icon: 'file-image',
+        icon: 'file-image-o',
         name: 'Image',
         formatDetailUrl: (resource) => (`/catalogue/#/document/${resource.pk}`)
     },
     'video': {
-        icon: 'file-video',
+        icon: 'file-video-o',
         name: 'Video',
         formatDetailUrl: (resource) => (`/catalogue/#/document/${resource.pk}`)
     }

diff --git a/geonode_mapstore_client/client/package.json b/geonode_mapstore_client/client/package.json
@@ -30,7 +30,7 @@
     "@mapstore/project": "1.0.16"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "5.15.1",
+    "font-awesome": "4.7.0",
     "dompurify": "2.2.6",
     "mapstore": "file:MapStore2",
     "react-helmet": "6.1.0"

diff --git a/geonode_mapstore_client/client/static/mapstore/configs/localConfig.json b/geonode_mapstore_client/client/static/mapstore/configs/localConfig.json
@@ -2345,7 +2345,12 @@
                         {
                             "type": "plugin",
                             "name": "Save",
-                            "perms": [{ "type": "resource", "value": "change_resourcebase" }]
+                            "perms": [
+                                {
+                                    "type": "resource",
+                                    "value": "change_resourcebase"
+                                }
+                            ]
                         },
                         {
                             "type": "plugin",
@@ -2399,6 +2404,10 @@
                         {
                             "type": "plugin",
                             "name": "LayerDownload"
+                        },
+                        {
+                            "type": "plugin",
+                            "name": "Measure"
                         }
                     ]
                 }
@@ -2896,7 +2905,12 @@
                     "leftMenuItems": [
                         {
                             "labelId": "gnviewer.save",
-                            "perms": [{ "type": "resource", "value": "change_resourcebase" }],
+                            "perms": [
+                                {
+                                    "type": "resource",
+                                    "value": "change_resourcebase"
+                                }
+                            ],
                             "type": "dropdown",
                             "items": [
                                 {
@@ -2947,6 +2961,18 @@
                         {
                             "type": "plugin",
                             "name": "Catalog"
+                        },
+                        {
+                            "type": "plugin",
+                            "name": "Print"
+                        },
+                        {
+                            "type": "plugin",
+                            "name": "Annotations"
+                        },
+                        {
+                            "type": "plugin",
+                            "name": "Measure"
                         }
                     ]
                 }
@@ -3312,6 +3338,13 @@
                     "editingAllowedRoles": null,
                     "enableSetDefaultStyle": true
                 }
+            },
+            {
+                "name": "Annotations",
+                "cfg": {
+                    "measurementAnnotationEdit": false,
+                    "geodesic": false
+                }
             }
         ],
         "geostory_viewer": [

diff --git a/geonode_mapstore_client/client/themes/geonode/less/geonode.less b/geonode_mapstore_client/client/themes/geonode/less/geonode.less
@@ -23,7 +23,7 @@
 @import '_variables.less';
 @import '_media-viewer.less';
 
-@import '~@fortawesome/fontawesome-free/css/all.min.css';
+@import '~font-awesome/css/font-awesome.min.css';
 @import '~ol/ol.css';
 
 :root {