Merge pull request #201 from DANS-KNAW/feature/draw-map

Feature/draw map

.gitignore

@@ -30,4 +30,7 @@ dist-ssr
 
 # Testing related
 playwright-report
-test-results
+test-results
+
+# Rollup visualiser
+stats.html

apps/4tu/package.json

@@ -18,13 +18,13 @@
     "@dans-framework/user-auth": "workspace:*",
     "@dans-framework/utils": "workspace:*",
     "@fontsource/roboto": "^5.0.7",
-    "@mui/material": "^5.14.3",
+    "@mui/material": "^5.16.7",
     "framer-motion": "^10.15.0",
-    "lz-string": "^1.5.0",
-    "notistack": "^3.0.1",
     "i18next": "^23.4.1",
     "i18next-browser-languagedetector": "^7.1.0",
     "i18next-resources-to-backend": "^1.1.4",
+    "lz-string": "^1.5.0",
+    "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^13.0.3",

apps/cat/package.json

@@ -10,16 +10,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dans-framework/user-auth": "workspace:*",
     "@dans-framework/deposit": "workspace:*",
-    "@dans-framework/utils": "workspace:*",
     "@dans-framework/layout": "workspace:*",
     "@dans-framework/pages": "workspace:*",
-    "@dans-framework/theme": "workspace:*",
     "@dans-framework/rdt-search-ui": "workspace:*",
+    "@dans-framework/theme": "workspace:*",
+    "@dans-framework/user-auth": "workspace:*",
+    "@dans-framework/utils": "workspace:*",
     "@fontsource/roboto": "^5.0.7",
     "@mui/icons-material": "^5.14.3",
-    "@mui/material": "^5.14.3",
+    "@mui/material": "^5.16.7",
     "html-react-parser": "^4.2.2",
     "i18next": "^23.4.1",
     "i18next-browser-languagedetector": "^7.1.0",
@@ -40,4 +40,3 @@
     "vite-plugin-checker": "^0.6.2"
   }
 }
-

apps/digitaltwins/.env

@@ -23,6 +23,7 @@ VITE_OIDC_SCOPE = 'openid profile'
 
 ## API keys
 VITE_GEONAMES_API_KEY = ''
+VITE_MAPTILER_API_KEY = ''
 
 ## Freshdesk ticketing
 VITE_FRESHDESK_API_KEY = ''

apps/digitaltwins/package.json

@@ -18,7 +18,7 @@
     "@dans-framework/user-auth": "workspace:*",
     "@dans-framework/utils": "workspace:*",
     "@fontsource/roboto": "^5.0.7",
-    "@mui/material": "^5.14.3",
+    "@mui/material": "^5.16.7",
     "i18next": "^23.4.1",
     "i18next-browser-languagedetector": "^7.1.0",
     "i18next-resources-to-backend": "^1.1.4",
@@ -35,6 +35,7 @@
     "@vitejs/plugin-react": "^4.0.3",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "rollup-plugin-visualizer": "^5.12.0",
     "vite": "^4.4.5",
     "vite-plugin-checker": "^0.6.2"
   }

apps/digitaltwins/src/config/formsections/citation.ts

@@ -48,19 +48,18 @@ const section: InitialSectionType = {
       },
     },
     {
-      type: "autocomplete",
+      type: "drawmap",
       label: {
-        en: "Publisher",
-        nl: "Uitgever",
+        en: "Indicate location",
+        nl: "Map",
       },
-      name: "publisher",
+      name: "map",
       required: true,
       description: {
-        en: "Institution - often the rights holder",
-        nl: "Instituut - vaak de rechthebbende",
+        en: "Search and select to open and focus a map on this location. Then select a shape type and start drawing.",
+        nl: "Iets van beschrijving",
       },
-      options: "ror",
-      allowFreeText: true,
+      fullWidth: true,
     },
     {
       type: "group",

apps/digitaltwins/vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import checker from "vite-plugin-checker";
+import { visualizer } from "rollup-plugin-visualizer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -9,5 +10,6 @@ export default defineConfig({
     checker({
       typescript: true,
     }),
+    visualizer(),
   ],
 });

apps/ohsmart/package.json

@@ -17,7 +17,7 @@
     "@dans-framework/user-auth": "workspace:*",
     "@dans-framework/utils": "workspace:*",
     "@fontsource/roboto": "^5.0.7",
-    "@mui/material": "^5.14.3",
+    "@mui/material": "^5.16.7",
     "i18next": "^23.4.1",
     "i18next-browser-languagedetector": "^7.1.0",
     "i18next-resources-to-backend": "^1.1.4",

apps/rda/package.json

@@ -10,16 +10,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dans-framework/user-auth": "workspace:*",
     "@dans-framework/deposit": "workspace:*",
-    "@dans-framework/utils": "workspace:*",
     "@dans-framework/layout": "workspace:*",
     "@dans-framework/pages": "workspace:*",
-    "@dans-framework/theme": "workspace:*",
     "@dans-framework/rdt-search-ui": "workspace:*",
+    "@dans-framework/theme": "workspace:*",
+    "@dans-framework/user-auth": "workspace:*",
+    "@dans-framework/utils": "workspace:*",
     "@fontsource/roboto": "^5.0.7",
     "@mui/icons-material": "^5.14.3",
-    "@mui/material": "^5.14.3",
+    "@mui/material": "^5.16.7",
     "html-react-parser": "^4.2.2",
     "i18next": "^23.4.1",
     "i18next-browser-languagedetector": "^7.1.0",
@@ -40,4 +40,3 @@
     "vite-plugin-checker": "^0.6.2"
   }
 }
-

apps/swh/package.json

@@ -10,14 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dans-framework/user-auth": "workspace:*",
     "@dans-framework/deposit": "workspace:*",
-    "@dans-framework/utils": "workspace:*",
     "@dans-framework/layout": "workspace:*",
     "@dans-framework/pages": "workspace:*",
     "@dans-framework/theme": "workspace:*",
+    "@dans-framework/user-auth": "workspace:*",
+    "@dans-framework/utils": "workspace:*",
     "@fontsource/roboto": "^5.0.7",
-    "@mui/material": "^5.14.3",
+    "@mui/material": "^5.16.7",
     "i18next": "^23.4.1",
     "i18next-browser-languagedetector": "^7.1.0",
     "i18next-resources-to-backend": "^1.1.4",

docs/deposit.md

@@ -129,6 +129,7 @@ Each section is a collapsible accordion in the front-end. A section is formatted
       // * group - a field group, this group contains another fields array
       // * radio - a radio button selection field (one option is always selected)
       // * check - a checkbox selection field (select zero or more options)
+      // * drawmap - a map that indicating location: gives user the ability to draw shapes, change and convert coordinates to different coordinate systems, requires a Maptiler and Geonames API key in the .env file: VITE_MAPTILER_API_KEY and VITE_GEONAMES_API_KEY
       type: "text",
 
       // Label can be a string or preferably a language object

packages/deposit/package.json

@@ -9,25 +9,27 @@
     "@dans-framework/utils": "workspace:*",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@mapbox/mapbox-gl-draw": "^1.4.3",
     "@mui/icons-material": "^5.14.3",
-    "@mui/material": "^5.14.3",
+    "@mui/material": "^5.16.7",
     "@mui/x-date-pickers": "^6.11.0",
     "@reduxjs/toolkit": "^1.9.5",
-    "@types/jest": "^29.5.3",
-    "@types/node": "^20.4.7",
     "axios": "^1.6.0",
     "fast-xml-parser": "^4.2.7",
     "framer-motion": "^10.15.0",
     "html-react-parser": "^4.2.2",
     "i18next": "^23.4.1",
     "i18next-browser-languagedetector": "^7.1.0",
     "i18next-resources-to-backend": "^1.1.4",
+    "mapbox-gl": "^3.6.0",
+    "maplibre-gl": "^4.5.2",
     "moment": "^2.29.4",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-i18next": "^13.0.3",
+    "react-map-gl": "^7.1.7",
     "react-oidc-context": "^2.2.2",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.14.2",
@@ -38,6 +40,11 @@
   },
   "devDependencies": {
     "@dans-framework/pages": "workspace:*",
+    "@types/geojson": "^7946.0.14",
+    "@types/jest": "^29.5.3",
+    "@types/mapbox-gl": "^3.4.0",
+    "@types/mapbox__mapbox-gl-draw": "^1.4.7",
+    "@types/node": "^20.4.7",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@types/react-transition-group": "^4.4.6",