geostyler · jansule · May 11, 2023
diff --git a/geostyler-app/package-lock.json b/geostyler-app/package-lock.json
diff --git a/geostyler-app/package.json b/geostyler-app/package.json
@@ -7,13 +7,13 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "antd": "^4.16.1",
-    "geostyler": "^7.2.1",
-    "geostyler-openlayers-parser": "^3.0.1",
-    "geostyler-sld-parser": "^3.2.0",
-    "geostyler-wfs-parser": "^1.0.1",
-    "ol": "^6.5.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "geostyler": "^12.0.0",
+    "geostyler-openlayers-parser": "^4.1.1",
+    "geostyler-sld-parser": "^5.0.1",
+    "geostyler-wfs-parser": "^2.0.0",
+    "ol": "^7.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-scripts": "3.4.1"
   },
   "scripts": {

diff --git a/geostyler-app/src/App.js b/geostyler-app/src/App.js
@@ -13,9 +13,11 @@ function App() {
 
   const wfsParams = {
     url: 'https://ows-demo.terrestris.de/geoserver/terrestris/ows',
-    version: '1.1.0',
-    typeName: 'terrestris:bundeslaender',
-    srsName: 'EPSG:4326'
+    requestParams: {
+      version: '1.1.0',
+      typeName: 'terrestris:bundeslaender',
+      srsName: 'EPSG:4326'
+    }
   };
 
   const olStyle = new OlStyle({
@@ -70,4 +72,3 @@ function App() {
 }
 
 export default App;
-
diff --git a/geostyler-app/src/index.js b/geostyler-app/src/index.js
@@ -1,14 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
 
 // If you want your app to work offline and load faster, you can change

diff --git a/workshop/README.md b/workshop/README.md
@@ -10,6 +10,7 @@ In this workshop, we will create a basic application that allows users to style
 
 The final application will look like this:
 
+<!-- TODO replace gif with new one -->
 [![Final application](./images/geostyler-workshop.gif)](./images/geostyler-workshop.gif)
 
 ## Overview
@@ -29,7 +30,7 @@ The following instructions and exercises require some already installed programs
 Please make sure that the following programs are installed:
 
 - A usable text editor, e.g. [VSCode](https://code.visualstudio.com/).
-- [NodeJS](https://nodejs.org/en/) in version 12.
+- [NodeJS](https://nodejs.org/en/) in version 16.
 
 ## Authors
 

diff --git a/workshop/first-steps/install-geostyler.md b/workshop/first-steps/install-geostyler.md
@@ -6,13 +6,13 @@
 Since we are using npm, the installation of GeoStyler is straightforward.
 Open a terminal and run the following command from the root of your application directory:
 
-<pre><xmp>npm i geostyler@7.2.1</xmp></pre>
+<pre><xmp>npm i geostyler@12.0.0</xmp></pre>
 
 Additionally, we have to install a few dependencies, which can be installed in the same manner:
 
-<pre><xmp>npm i ol@6 antd@4</xmp></pre>
+<pre><xmp>npm i ol@7 antd@4</xmp></pre>
 
-Through this, we install [OpenLayers](https://openlayers.org/) in version 6 and [antd](https://ant.design/) in version 4. OpenLayers will be used
+Through this, we install [OpenLayers](https://openlayers.org/) in version 7 and [antd](https://ant.design/) in version 4. OpenLayers will be used
 for the displaying of (preview-) maps and antd provides the very basic ui components, such as buttons.
 
 # Install GeoStyler Parsers
@@ -22,6 +22,6 @@ In this workshop, we will use the SLD and OpenLayers Style Parser, as well as th
 
 Execute following command to install the parsers:
 
-<pre><xmp>npm i geostyler-sld-parser@3.0.1</xmp></pre>
-<pre><xmp>npm i geostyler-openlayers-parser@3.0.0</xmp></pre>
-<pre><xmp>npm i geostyler-wfs-parser@1.0.1</xmp></pre>
+<pre><xmp>npm i geostyler-sld-parser@5.0.1</xmp></pre>
+<pre><xmp>npm i geostyler-openlayers-parser@4.1.1</xmp></pre>
+<pre><xmp>npm i geostyler-wfs-parser@2.0.0</xmp></pre>
diff --git a/workshop/introduction/README.md b/workshop/introduction/README.md
@@ -9,7 +9,7 @@ We will be using the node package manager ([npm](https://www.npmjs.com/)) for th
 Furthermore, we will use the JavaScript standard [EcmaScript 6](https://en.wikipedia.org/wiki/ECMAScript) as programming language when developing.
 We therefore suggest to do so as well, when using GeoStyler.
 
-Since GeoStyler is a React-based component library, it is crucial to take a look at [React](https://reactjs.org/).
+Since GeoStyler is a React-based component library, it is crucial to take a look at [React](https://react.dev/).
 
 # GeoStyler Architecture
 

diff --git a/workshop/style-parser/parse-ol.md b/workshop/style-parser/parse-ol.md
@@ -8,7 +8,7 @@ the `geostyler-openlayers-parser` and do not use an SLD string, but rather an Op
 The installation of the `geostyler-openlayers-parser` was already done in a previous chapter via
 
 ```bash
-npm i geostyler-openlayers-parser
+npm i geostyler-openlayers-parser@4.1.1
 ```
 
 Next, we have to import the parser

diff --git a/workshop/style-parser/parse-sld.md b/workshop/style-parser/parse-sld.md
@@ -10,7 +10,7 @@ In order to parse SLD, we need two things. The `geostyler-sld-parser` and a SLD
 We already installed the `geostyler-sld-parser` via
 
 ```bash
-npm i geostyler-sld-parser
+npm i geostyler-sld-parser@4.1.1
 ```
 
 in a previous chapter. So now, we just have to import it into our application.