Skip to content

Commit d5dc3be

Browse files
authored
Merge pull request #3665 from cnarbaitzsarsur/main
docs: add comprehensive workflow documentation with german translations
2 parents 6bc8663 + 37321bf commit d5dc3be

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+1284
-89
lines changed

apps/docs/docs/Scenarios/Scenarios.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
sidebar_position: 4
2+
sidebar_position: 7
33
---
44

55

@@ -21,7 +21,7 @@ Only **geographical layers** can be modified in scenarios. Tables and rasters ca
2121

2222
<div class="step">
2323
<div class="step-number">1</div>
24-
<div class="content">Click on <code>Scenarios</code> <img src={require('/img/icons/compass-drafting.png').default} alt="Scenarios" style={{ maxHeight: "20px", maxWidth: "20px", objectFit: "cover"}}/>.</div>
24+
<div class="content">Click on <code>Scenarios</code> <img src={require('/img/icons/compass.png').default} alt="Scenarios" style={{ maxHeight: "20px", maxWidth: "20px", objectFit: "cover"}}/>.</div>
2525
</div>
2626

2727
<div class="step">
@@ -95,7 +95,7 @@ Create multiple scenarios to test different configurations:
9595

9696
- **Select**: Click a scenario to view its changes
9797
- **Modify**: Use the options menu <img src={require('/img/icons/3dots.png').default} alt="Options" style={{ maxHeight: "20px", maxWidth: "20px", objectFit: "cover"}}/> to rename, delete, or edit
98-
- **Track changes**: Modified layers show <img src={require('/img/icons/compass-drafting.png').default} alt="Scenario indicator" style={{ maxHeight: "20px", maxWidth: "20px", objectFit: "cover"}}/> with a number
98+
- **Track changes**: Modified layers show <img src={require('/img/icons/compass.png').default} alt="Scenario indicator" style={{ maxHeight: "20px", maxWidth: "20px", objectFit: "cover"}}/> with a number
9999
- **Deselect**: Click the active scenario again to return to the original map
100100

101101
## 3. Street Network - Edges

apps/docs/docs/builder/_category_.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"label": "Dashboard",
3-
"position": 4,
3+
"position": 6,
44
"link": {
55
"type": "generated-index",
66
"description": "The Dashboard mode allows you to create customized maps and interactive dashboards. Choose from various indicators, layers, and visual settings to build a view that fits your project."

apps/docs/docs/data/data_types.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ You can easily check the data types of your layer attributes:
5454
</div>
5555

5656
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
57-
<img src={require('/img/data/view-data-layer.png').default} alt="More Options" style={{ maxHeight: "auto", maxWidth: "auto", objectFit: "cover"}}/>
57+
<img src={require('/img/data/view_data.png').default} alt="More Options" style={{ maxHeight: "auto", maxWidth: "auto", objectFit: "cover"}}/>
5858
<p style={{ textAlign: 'center', fontStyle: 'italic', marginTop: '8px', color: '#666' }}>Accessing the View Data option</p>
5959
</div>
6060

apps/docs/docs/getting_started/quickstart_guide.md

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ You've landed in the map view of your new project. Now it's time to add some dat
3434

3535
<div class="step">
3636
<div class="step-number">3</div>
37-
<div class="content">Click on <code>+ Add Layer</code> on the bottom left of the left panel. </div>
37+
<div class="content">Click on <code>+ Add Layer</code> on the left panel. </div>
3838
</div>
3939

4040
<div class="step">
@@ -106,33 +106,24 @@ You've landed in the map view of your new project. Now it's time to add some dat
106106
</TabItem>
107107
</Tabs>
108108

109-
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
110-
<img src={require('/img/getting_started/add_data.png').default} alt="Workspace at GOAT" style={{ maxHeight: "auto", maxWidth: "auto", objectFit: "cover"}}/>
111-
</div>
112-
113109
## Explore the analysis tools
114110
Depending on the layers you have added, you can run different analysis from the toolbox.
115111
<div class="step">
116112
<div class="step-number">7</div>
117-
<div class="content"> Click on the <code>Toolbox</code> button on the right panel.</div>
113+
<div class="content"> Locate and click on the <code>Toolbox</code> button, which appears as a tools icon on the right side of the left panel.</div>
118114
</div>
119115

120116
<div class="step">
121117
<div class="step-number">8</div>
122118
<div class="content"> Select the analysis tool you want to use. You can choose between our <b> Accessibility indicators</b>, <b>Data management</b>, <b>Geoanalysis</b>, or <b>Geoprocessing</b> tools, and complete the settings.</div>
123119
</div>
124120

125-
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
126-
<img src={require('/img/getting_started/toolbox.png').default} alt="Workspace at GOAT" style={{ maxHeight: "auto", maxWidth: "auto", objectFit: "cover"}}/>
127-
</div>
128-
129-
130121
## Style your map
131122
Once you have added the layers to your map and computed the analysis, you can customize their appearance to enhance visualization.
132123

133124
<div class="step">
134125
<div class="step-number">9</div>
135-
<div class="content">Click on <code>Layer design <img src={require('/img/icons/styling.png').default} alt="Styling Icon" style={{ maxHeight: "20px", maxWidth: "20px", objectFit: "cover"}}/></code>, open the <code> Style</code> menu, select the color you want or if you want to style by attribute, click on <code>options <img src={require('/img/icons/styling.png').default} alt="Options Icon" style={{ maxHeight: "20px", maxWidth: "20px", objectFit: "cover"}}/></code>, and set the field you want on the <code>Color based on </code> menu.</div>
126+
<div class="content">Click on any layer from your project, and the editing layer panel will appear on the right with the <code>Style</code> tab selected. Go to the <code>Style</code> section and select the color you want. If you want to style by attribute, click on <code>options <img src={require('/img/icons/styling.png').default} alt="Options Icon" style={{ maxHeight: "20px", maxWidth: "20px", objectFit: "cover"}}/></code> and set the field you want in the <code>Color based on</code> menu.</div>
136127
</div>
137128

138129
<div class="step">
@@ -145,10 +136,6 @@ Once you have added the layers to your map and computed the analysis, you can cu
145136
<div class="content">Then you can turn on the <code>Labels</code> if you want, edit your <code>Popups</code> and <code>Legend</code>.</div>
146137
</div>
147138

148-
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
149-
<img src={require('/img/getting_started/layer_design.png').default} alt="Workspace at GOAT" style={{ maxHeight: "auto", maxWidth: "auto", objectFit: "cover"}}/>
150-
</div>
151-
152139
## Ready to share your work
153140
Now that you have created your first project in GOAT, it's time to share it with others. You can easily share your project by generating a shareable link or inviting collaborators to work on the project with you.
154141

@@ -165,9 +152,4 @@ Now that you have created your first project in GOAT, it's time to share it with
165152
<div class="step">
166153
<div class="step-number">14</div>
167154
<div class="content">Now you can click on <code>Copy URL</code> and <b> share the direct link </b> so others can open the map in their browser. Or click on <code>Copy iframe Code</code> and <b> embed the map </b> in websites or tools that support HTML and iframes.</div>
168-
</div>
169-
170-
171-
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
172-
<img src={require('/img/getting_started/share.gif').default} alt="Workspace at GOAT" style={{ maxHeight: "auto", maxWidth: "75%", objectFit: "cover"}}/>
173-
</div>
155+
</div>

apps/docs/docs/map/layers.md

Lines changed: 50 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -17,30 +17,30 @@ import TabItem from '@theme/TabItem';
1717

1818
## How to manage your Layers
1919

20+
The Layers Panel is your central hub for organizing and controlling all the data in your GOAT project. Here you can **add new datasets, arrange layer order for optimal visualization, group related layers together, and control visibility**.
21+
22+
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
23+
<img src={require('/img/map/layers/add_layer.webp').default} alt="Add layers in GOAT" style={{ maxHeight: "flex", maxWidth: "flex", objectFit: "cover"}}/>
24+
</div>
25+
2026
### Add Layers
2127

2228
You can add layers from [different sources](../data/dataset_types) to your map. You can either:
2329
- Integrate **datasets from your data explorer or the catalog explorer**
2430
- Upload new **datasets from your local device** (GeoPackage, GeoJSON, Shapefile, KML, CSV, or XLSX).
2531
- Add external layers by inserting the **url of the external source** (WMS, WMTS, or MVT).
2632

27-
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
28-
<img src={require('/img/map/layers/add_layer.png').default} alt="Add layers in GOAT" style={{ maxHeight: "flex", maxWidth: "flex", objectFit: "cover"}}/>
29-
</div>
33+
3034

3135
<p></p>
36+
3237
<div class="step">
3338
<div class="step-number">1</div>
34-
<div class="content">Navigate to the <code>Layers</code> menu via the <strong>left sidebar</strong>.</div>
39+
<div class="content">On the left panel, click on <code>+ Add Layer</code> to <strong>open the layer options</strong>. </div>
3540
</div>
3641

3742
<div class="step">
3843
<div class="step-number">2</div>
39-
<div class="content">Click on <code>+ Add Layer</code> to <strong>open the layer options</strong>. </div>
40-
</div>
41-
42-
<div class="step">
43-
<div class="step-number">3</div>
4444
<div class="content">Select if you like to integrate a dataset using the: <code>Data Explorer</code>, <code>Dataset Upload</code>, <code>Dataset External</code> or <code>Dataset Catalog</code> to <strong>choose your data source</strong>.</div>
4545
</div>
4646

@@ -49,12 +49,12 @@ You can add layers from [different sources](../data/dataset_types) to your map.
4949

5050

5151
<div class="step">
52-
<div class="step-number">4</div>
52+
<div class="step-number">3</div>
5353
<div class="content">Select the file you want to <strong>import</strong>.</div>
5454
</div>
5555

5656
<div class="step">
57-
<div class="step-number">5</div>
57+
<div class="step-number">4</div>
5858
<div class="content">Click on <code>+ Add Layer</code> to <strong>add the selected file</strong>.</div>
5959
</div>
6060

@@ -64,17 +64,17 @@ You can add layers from [different sources](../data/dataset_types) to your map.
6464

6565

6666
<div class="step">
67-
<div class="step-number">4</div>
67+
<div class="step-number">3</div>
6868
<div class="content">Select the file you want to <strong>import</strong>.</div>
6969
</div>
7070

7171
<div class="step">
72-
<div class="step-number">5</div>
72+
<div class="step-number">4</div>
7373
<div class="content">Define the name of the dataset and <strong>add a description</strong>, if you like.</div>
7474
</div>
7575

7676
<div class="step">
77-
<div class="step-number">6</div>
77+
<div class="step-number">5</div>
7878
<div class="content">Check the information and click on <code>Upload</code> to <strong>upload the dataset</strong>.</div>
7979
</div>
8080

@@ -83,17 +83,17 @@ You can add layers from [different sources](../data/dataset_types) to your map.
8383
<TabItem value="Catalog Explorer" label="Catalog Explorer" className="tabItemBox">
8484

8585
<div class="step">
86-
<div class="step-number">4</div>
86+
<div class="step-number">3</div>
8787
<div class="content">Browse <code>GOAT Dataset Catalog</code> to <strong>explore available datasets</strong>.</div>
8888
</div>
8989

9090
<div class="step">
91-
<div class="step-number">5</div>
91+
<div class="step-number">4</div>
9292
<div class="content">Select the Dataset you want to <strong>import</strong>.</div>
9393
</div>
9494

9595
<div class="step">
96-
<div class="step-number">6</div>
96+
<div class="step-number">5</div>
9797
<div class="content">Click on <code>+ Add Layer</code> to <strong>add the selected dataset</strong>.</div>
9898
</div>
9999

@@ -102,7 +102,7 @@ You can add layers from [different sources](../data/dataset_types) to your map.
102102
<TabItem value="Dataset External" label="Dataset External" default className="tabItemBox">
103103

104104
<div class="step">
105-
<div class="step-number">4</div>
105+
<div class="step-number">3</div>
106106
<div class="content">Insert your <code>external URL</code> and <strong>follow the steps</strong> depending on the type of dataset you would like to add.</div>
107107
</div>
108108

@@ -139,31 +139,48 @@ You can manage all your datasets on the [Datasets page](../workspace/datasets).
139139

140140
:::
141141

142-
### Organize Layers
142+
### Order Layers
143143

144-
Once you have added a dataset to the map, **it will be visible in the Layer List**. From there you can organize the different layers.
144+
When visualizing several data sets at once, the layer order is crucial for creating clear, readable maps. Therefore, **the layer order can be changed interactively**.
145145

146-
#### Layer Order
146+
<strong> Click on the layer</strong> you want to move, then <strong>drag and drop</strong> the layer to your desired position.
147147

148-
When visualizing several data sets at once, the layer order is crucial for creating clear, readable maps. Therefore, **the layer order can be changed interactively**.
148+
### Show / Hide Layers
149149

150-
Hover over the <strong>left border</strong> of the layer in the layer list until an arrow symbol appears, then <strong>drag and drop to move</strong> the layer to your desired position.
150+
Click the <img src={require('/img/icons/eye.png').default} alt="Add layers in GOAT" style={{ maxHeight: "20px", maxWidth: "20px", objectFit: "cover"}}/> icon next to the layer name to <strong>temporarily hide</strong> a layer from the map view. Clicking the eye again will <strong>make the layer visible</strong> again.
151151

152-
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
153-
<img src={require('/img/map/layers/layer_order.gif').default} alt="Layer Order" style={{ maxHeight: "auto", maxWidth: "80%", objectFit: "cover"}}/>
154-
</div>
152+
### Group Layers
155153

156-
#### Show / Hide Layers
154+
Click the <img src={require('/img/icons/layer.png').default} alt="Group layers" style={{ maxHeight: "20px", maxWidth: "20px", objectFit: "cover"}}/> <code> Group Layers</code> button on top of the Layers Panel to **create layer groups** that help organize related datasets together.
157155

158-
Click the <img src={require('/img/icons/eye.png').default} alt="Add layers in GOAT" style={{ maxHeight: "20px", maxWidth: "20px", objectFit: "cover"}}/> icon next to the layer name to <strong>temporarily hide</strong> a layer from the map view. Clicking the eye again will <strong>make the layer visible</strong> again.
156+
<div class="step">
157+
<div class="step-number">1</div>
158+
<div class="content">Click the <code>Group Layers</code> button <img src={require('/img/icons/layer.png').default} alt="Group layers" style={{ maxHeight: "20px", maxWidth: "20px", objectFit: "cover"}}/> at the top of the Layers Panel.</div>
159+
</div>
159160

160-
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
161-
<img src={require('/img/map/layers/hide_layers.gif').default} alt="Hide Layer" style={{ maxHeight: "auto", maxWidth: "80%", objectFit: "cover"}}/>
162-
</div>
161+
<div class="step">
162+
<div class="step-number">2</div>
163+
<div class="content">Enter a <strong>name for your layer group</strong> in the dialog that appears.</div>
164+
</div>
165+
166+
<div class="step">
167+
<div class="step-number">3</div>
168+
<div class="content">Click <code>Create</code> to <strong>create the new layer group</strong>.</div>
169+
</div>
170+
171+
<div class="step">
172+
<div class="step-number">4</div>
173+
<div class="content"><strong>Drag and drop layers</strong> from the main layers list into your newly created group to organize them.</div>
174+
</div>
175+
176+
<div class="step">
177+
<div class="step-number">5</div>
178+
<div class="content">Use the <strong>expand/collapse arrow</strong> next to the group name to show or hide the group contents.</div>
179+
</div>
163180

164-
#### Options
181+
### Layer Options
165182

166-
By clicking on <code>more options</code> <img src={require('/img/icons/3dots.png').default} alt="Options" style={{ maxHeight: "20px", maxWidth: "20px", objectFit: "cover"}}/> icon you have further options to <strong>manage and organize</strong> the selected layer.
183+
By clicking on <img src={require('/img/icons/3dots.png').default} alt="Options" style={{ maxHeight: "20px", maxWidth: "20px", objectFit: "cover"}}/> <code>more options</code> icon next to each layer you have further options to <strong>manage and organize</strong> the selected layer.
167184

168185
<div style={{ display: 'flex', justifyContent: 'center' }}>
169186
<img src={require('/img/map/layers/layer_options.png').default} alt="Layer Options" style={{ maxHeight: "250px", maxWidth: "250px", objectFit: "cover", alignItems: 'center'}}/>

0 commit comments

Comments
 (0)