Add a guide how to deal with CORS issues during development

docs/docs/developers/adding-a-simple-type-of-layer.md

@@ -4,6 +4,8 @@ building within the platform.
 _Note: Steps 6 and 7 may change as functionalities become more independent, reducing the need for adjustments in the 
 Twin application._
 
+---
+
 ### Step 1: Pick a Functionality, or Create a New One
 
 ![Adding a functionality with prefabs](../imgs/adding-a-simple-type-of-layer/adding-a-functionality-with-prefabs.png){ align=right width="275" }
@@ -14,6 +16,8 @@ your own.
 To create a Functionality, create a subfolder in `Assets/_Functionalities` and name it after the functionality that will 
 manage this new layer, and add a new subfolder `Prefabs` to it; here we will place our new layer prefab.
 
+---
+
 ### Step 2: Create a Prefab to Visualize the Layer
 
 Create a new prefab to represent your layer. This can include 3D objects as needed for the layer's visual appearance.
@@ -22,6 +26,8 @@ This prefab serves as the visual representation of your data in the 3D viewer.
 _An example of this could be a Prefab that we call '2 Cubes', where we add two Cubes from Unity's '3D Object' creation 
 menu._
 
+---
+
 ### Step 3: Attach the `HierarchicalObjectLayerGameObject` Component
 
 ![Attach a HierarchicalObjectLayerGameObject component](../imgs/adding-a-simple-type-of-layer/attach-hierarchical-object-layer-game-object.png){ align=right width="275" }
@@ -35,6 +41,8 @@ added to the scene._
 
 !!! info "Leaving the `Prefab Identifier` empty will allow for the `PrefabLibrary` (see Step 6) to assign a unique identifier, thus populating it when the prefab is added to the library."
 
+---
+
 ### Step 4: Add the WorldTransform Component
 
 ![Attach a world transform](../imgs/adding-a-simple-type-of-layer/attach-a-world-transform.png){ align=right width="275" }
@@ -48,6 +56,8 @@ located in a real world position and to track that._
 
 !!! warning "When you want to move a GameObject with a WorldTransform, it is highly recommended to do that by changing the Coordinates on the WorldTransform instead of the `transform.position`."
 
+---
+
 ### Step 5: (Optional) Add Transform properties to your layer
 
 ![Add a transform property section](../imgs/adding-a-simple-type-of-layer/add-transform-property-section.png){ align=right width="275" }
@@ -59,11 +69,15 @@ If you want users to reposition, rotate, or scale this layer in the viewer, add
 
 _You can learn more about properties and property sections in the explanation section of the documentation._
 
+---
+
 ### Step 6: Register the Prefab in the PrefabLibrary
 
 To ensure the layer system recognizes and loads this layer, add your prefab to the `PrefabLibrary` ScriptableObject. In 
 it, you can either create a new prefab group or add it to an existing one for organization.
 
+---
+
 ### Step 7: (If Needed) Create UI Elements to Add Your Layer
 
 If you created a new prefab group, or added your prefab to a group without the `auto-populate UI` toggle enabled, add 

docs/docs/developers/adding-behaviour-to-a-layer-with-data.md

@@ -16,6 +16,7 @@ within the layer’s data but without displaying them in the properties panel UI
     for users to change the colour randomly by clicking on a cube, and where that colour is persisted between sessions.
     It is expected that for your own use-case you can adapt these examples to suit your situation.
 
+---
 
 ### Step 1: Create a Controller Script with `ILayerWithPropertyData`
 
@@ -51,6 +52,8 @@ public class TwoCubesColorChangingBehaviour : MonoBehaviour, ILayerWithPropertyD
 
 In subsequent code samples some parts will be omitted for brevity -such as the import statements-.
 
+---
+
 ### Step 2: Define a Property Data Class
 
 Next, create a dedicated class to represent the data fields you want to persist. This class should extend the
@@ -75,6 +78,8 @@ public class TwoCubesColorPropertyData : LayerPropertyData
 
 ```
 
+---
+
 ###  Step 3: Add Fields to the Property Data Class
 
 Now, add the fields to the property data class that you want to persist. For serialization and future compatibility, use
@@ -125,6 +130,8 @@ public class TwoCubesColorPropertyData : LayerPropertyData
 
 ```
 
+---
+
 ### Step 4: Wiring the Controller Script to the Property Data
 
 With your property data class in place, return to the controller script and establish the connection between it and your
@@ -193,6 +200,8 @@ public class TwoCubesColorChangingBehaviour : MonoBehaviour, ILayerWithPropertyD
 }
 ```
 
+---
+
 ### Step 5: Add the New Behavior to the Layer Prefab
 
 To integrate your new persistent behavior with the layer, attach the behaviour script to the prefab for your layer.

docs/docs/developers/guides/dealing-with-cors-issues.md

@@ -0,0 +1,78 @@
+# Dealing with CORS issues during development
+
+When using external web services (e.g., WFS, WMS, 3D Tiles) with Netherlands3D, 
+[Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) restrictions can disrupt 
+development. To avoid waiting on backend adjustments from a DevOps team, you can use a local CORS proxy like 
+`local-cors-proxy`, which circumvents these issues while developing.
+
+!!! info "What is CORS, and Why Does It Affect Web Applications?"
+
+    CORS (Cross-Origin Resource Sharing) is a security feature in web browsers that restricts web applications from 
+    making requests to a different domain than the one that served the initial page. This policy prevents unauthorized 
+    access to sensitive data from other origins (e.g., servers) that didn’t explicitly permit the connection. Desktop 
+    applications, unlike web applications, aren’t bound by browser-enforced CORS rules, which is why they can access 
+    multiple origins without restrictions.
+
+---
+
+### Step 1: Install Node.js and NPM
+
+If you don’t already have Node.js, [download and install it from Node.js](https://nodejs.org/en/download/package-manager).
+
+---
+
+### Step 2: Install `local-cors-proxy`
+
+Open your terminal (or PowerShell in Windows) and install 
+[local-cors-proxy](https://www.npmjs.com/package/local-cors-proxy) globally:
+
+```bash
+npm install -g local-cors-proxy
+```
+
+---
+
+### Step 3: Start the Local CORS Proxy
+
+To start, run the following command, where `<TARGET_WEBSERVICE_URL>` is the service URL you need to access:
+
+```bash
+lcp --proxyUrl <TARGET_WEBSERVICE_URL>
+```
+
+By default, this will run on port `8010`. For a custom port, specify it as `--port <PORT_NUMBER>`.
+
+---
+
+### Step 4: Handling Self-Signed Certificates
+
+If the target service uses a self-signed certificate, you may need to disable SSL verification by setting the
+`NODE_TLS_REJECT_UNAUTHORIZED` environment variable to `0`.
+
+=== "Linux / macOS"
+
+    ```bash
+    export NODE_TLS_REJECT_UNAUTHORIZED=0
+    ```
+
+=== "Windows PowerShell"
+
+    ```powershell
+    $env:NODE_TLS_REJECT_UNAUTHORIZED=0
+    ```
+
+This setting should be applied before running the proxy.
+
+---
+
+### Step 5: Pass Proxied URLs in Netherlands3D
+
+Point service requests to the proxy URL, e.g., `http://localhost:8010/<original_service_url_path>`, allowing requests to
+pass through the proxy for CORS management. This includes importing services by URL in the layers panel.
+
+---
+
+### Step 6: Test the Setup
+
+Run Netherlands3D, confirming that requests are passing through the proxy. Use browser developer tools or monitor the
+terminal to check for successful CORS handling.

mkdocs.yml

@@ -19,6 +19,7 @@ nav:
           - 'docs/developers/quickstart.md'
           - 'docs/developers/adding-a-simple-type-of-layer.md'
           - 'docs/developers/adding-behaviour-to-a-layer-with-data.md'
+          - 'docs/developers/guides/dealing-with-cors-issues.md'
       - 'Explanation':
         - 'Core Concepts':
             - 'Overview': 'docs/developers/core-concepts.md'
@@ -99,6 +100,7 @@ theme:
     - navigation.path
     - navigation.footer
     - navigation.tracking
+    - content.tabs.link
 
 extra_css:
   - stylesheets/extra.css
@@ -126,3 +128,5 @@ markdown_extensions:
   - pymdownx.emoji:
       emoji_index: !!python/name:material.extensions.emoji.twemoji
       emoji_generator: !!python/name:material.extensions.emoji.to_svg
+  - pymdownx.tabbed:
+      alternate_style: true