Skip to content

Commit 8a8bcc9

Browse files
committed
fix: Documentation for Release
1 parent 11ad861 commit 8a8bcc9

File tree

4 files changed

+162
-25
lines changed

4 files changed

+162
-25
lines changed

.vscode/cody.json

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,26 @@
11
{
2-
"Improve variable names": {
3-
"prompt": "Suppose that you are writing code for a production level application which is shared by many developers in your team. Take the current code, and update the variable names so that it should improve the readability of the code and help the other developers maintain it without much difficulty.",
4-
"context": {
5-
"codebase": false,
6-
"selection": true
7-
}
8-
},
92
"readme": {
103
"description": "Readme for current dir",
114
"prompt": "Write a detailed README.md file to document the code located in the same directory as my current selection. Summarize what the code in this directory is meant to accomplish. Explain the key files, functions, classes, and features. Use Markdown formatting for headings, code blocks, lists, etc. to make the it organized and readable. Aim for a beginner-friendly explanation that gives a developer unfamiliar with the code a good starting point to understand it. Make sure to include: - Overview of directory purpose - Functionality explanations - Relevant diagrams or visuals if helpful. Write the README content clearly and concisely using complete sentences and paragraphs based on the shared context. Use proper spelling, grammar, and punctuation throughout. Surround your full README text with triple backticks so it renders properly as a code block. Do not make assumptions or fabricating additional details.",
125
"context": {
136
"currentDir": true,
147
"selection": true
158
}
9+
},
10+
"childrenmap": {
11+
"description": "Markdown for all Childrenmap",
12+
"prompt": "Write a markdown list for the childrenMap in the selected code. Summarize what it is meant to accomplish.Use markdown formating to make the it organized and readable.",
13+
"context": {
14+
"selection": true,
15+
"currentFile": true
16+
}
17+
},
18+
"smellcode": {
19+
"description": "Find code smells",
20+
"prompt": "Find code smells, potential bugs, and unhandled errors in my selected code. Create a list with the top five errors you can find, and include a short informative description and suggestion for each. Please only respond with the list of errors and nothing else.",
21+
"context": {
22+
"selection": true,
23+
"currentFile": true
24+
}
1625
}
1726
}

README.md

Lines changed: 79 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -29,36 +29,100 @@ Within the main directory you will find the following files creating the lowcode
2929

3030
GEOComp is configured through React props that control the map options and layers. Some key configuration props:
3131

32+
Map
33+
- `layers` - Array of layer configuration objects
34+
- `label` - Display label for layer
35+
- `title` - Layer menu text
36+
- `type` - Layer type dropdown (mvt, wms, etc)
37+
- `source` - Layer source settings
38+
- `url`: The URL of the tile or image service
39+
- `attributions`: Attribution text for the layer
40+
- `params`: Additional parameters for the service request
41+
- `serverType`: The type of WMS server (geoserver, mapserver, etc)
42+
- `crossOrigin`: Whether to request cross-origin access when fetching the layer
43+
- `data`: The GeoJSON data object for a vector layer
44+
- `projection`: The projection of the vector data
45+
- `tileSize`: Tile size for COG layers
46+
- `nodata`: Nodata value to use for COG layers
47+
- `ratio`: Scaling ratio for ArcGIS MapServer images
48+
- `visible` - Is layer visible initially
49+
- `selectable` - Can layer be toggled on/off
50+
- `userVisible` - Is layer visible to user
51+
- `order` - Display order in layers list
52+
- `minZoom` - Minimum zoom level to show layer
53+
- `maxZoom` - Maximum zoom level to show layer
54+
- `opacity` - Layer opacity
55+
- `groups` - Layer groups
56+
- `splitscreen` - Split screen position (no, left, right)
57+
- `timeline` - Timeline year/date of layer
3258
- `center` - Initial center point [lon, lat]
3359
- `zoom` - Initial zoom level
34-
- `layers` - Array of layer configuration objects
60+
- `maxZoom` - Initial maximum zoom level
61+
- `minZoom` - Initial minimum zoom level
62+
63+
Interaction
3564
- `events` - Object mapping event names to handlers
36-
- `feature` - Selected/edited feature state
65+
66+
Menu
67+
- `title` - Title used within menu
68+
- `content` - Content of the menu used
69+
- `feature` - Selected/edited feature state
70+
71+
Timeline
72+
- `Start Date` - Start Year/Date of the timeline
73+
- `End Date` - End Year/Date of the timeline
74+
75+
Style
76+
- Padding
77+
- Text sizing
78+
- Background color
79+
- Borders
80+
- Border radius
81+
82+
Behavior
83+
- `menu` - Whether to show the menu icon.
84+
- `zoom` - Show zoom buttons.
85+
- `fullscreen` - Show fullscreen toggle.
86+
- `layers` - Show layer visibility toggles.
87+
- `center` - Show map center button.
88+
- `modify` - Allow geometry editing.
89+
- `save` - Show save button.
90+
- `splitscreen` - Allow split screen.
91+
- `tracker` - Show tracker options.
92+
- `timeline` - Show timeline slider.
93+
- `gpsCentered` - Center map on user's location.
94+
- `north` - Show north button to reset bearing.
95+
- `scale` - Show map scale display.
96+
- `largeButtons` - Use large toolbar icons.
97+
- `scaleToBottom` - Put scale on bottom of toolbar.
98+
- `"modify:move"` - Allow moving geometries.
99+
- `"modify:point"` - Allow editing points.
100+
- `"modify:line"` - Allow editing lines.
101+
- `"modify:oval"` - Allow editing ovals.
102+
- `"modify:polygon"` - Allow editing polygons.
103+
- `"modify:delete"` - Show delete geometry button.
104+
- `"modify:redo"` - Show redo button.
105+
- `"modify:undo"` - Show undo button.
106+
- `"splitscreen:horizontal"` - Allow horizontal split screen.
107+
- `"splitscreen:vertical"` - Allow vertical split screen.
108+
- `debug` - Enable debug messages.
109+
37110

38111
## Events and Interactivity
39112

40113
GEOComp exposes events that can be handled in the parent component:
41114

42115
- `onInit` - Map initialized
43116
- `onLoad` - Layers loaded
117+
- `onModify` - User modifies feature on map
118+
- `onTimeline` - User interacts with timeline
44119
- `onClick` - Map clicked
45120
- `onSelect` - Feature clicked
46-
- `onModify` - Draw layer edited
121+
- `onBbox` - The bbox of the map changed
122+
- `onEvent` - Eventhandler for all other events
47123

48124
This allows integrating custom popup content, selection logic, etc.
49125

50-
## Styling
51-
52-
GEOComp uses CSS modules for styling control. The `styles` prop accepts configuration for:
53-
54-
- Padding
55-
- Text sizing
56-
- Background color
57-
- Borders
58-
- Border radius
59-
60-
This allows adapating the visual style.
61-
62126
# Building the plugin
63127

64128
Before you start make your you have a up-to-date version on node installed locally.

src/README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
This plugin enables the usage of [Openlayers GEO viewer](https://openlayers.org/) within lowcoder. To use this plugin. Open your lowcoder environment goto the app. Select insert tab, extensions and plugins and add: **lowcoder-comp-geo**
33

44
# Documentation
5-
We have created a [seperated documentation](https://sjhoeksma.github.io/lowcoder-comp-geo/) page explain all the features.
6-
[![documentation](https://github.com/sjhoeksma/lowcoder-comp-geo/blob/dev/images/documentation.png?raw=true)](https://sjhoeksma.github.io/lowcoder-comp-geo/)
5+
The ui of the plugin should be more or less self explaining. If you want a basic explination of all switches and settings look at the [README on Github](https://github.com/sjhoeksma/lowcoder-comp-geo)
76

87
# Example
98
To help you with understanding how you can use this plugin we have added an [example application](https://github.com/sjhoeksma/lowcoder-comp-geo/blob/main/lowcoder-example/lowcoder-comp-geo.json?raw=true). Just download the json application file and import it within lowcoder.
109

1110
#### Viewer
12-
![viewer](https://github.com/sjhoeksma/lowcoder-comp-geo/blob/main/images/viewer-example.png?raw=true)
11+
![viewer](https://github.com/sjhoeksma/lowcoder-comp-geo/blob/main/images/viewer-example.png?raw=true)
12+

src/vendors/README.md

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# Geo Component
2+
3+
This directory contains a React component called `Geo` that renders an interactive map using [OpenLayers](https://openlayers.org/).
4+
5+
## Overview
6+
7+
The `Geo` component provides a wrapper around an OpenLayers map to make it easy to integrate into a React application. It handles initializing the map, layers, controls, and other features based on props passed to it.
8+
9+
The component monitors map events and bubbles them up to the parent component via callback props like `onEvent`. This allows the parent to respond to map interactions.
10+
11+
The `Geo` component also supports dynamically updating the map by changing the props it receives. This allows features like layers, controls, and interactions to be added, removed, or updated on the fly.
12+
13+
## Functionality
14+
15+
The key capabilities of the `Geo` component include:
16+
17+
- Renders an OpenLayers map in a React component
18+
- Initializes map view, controls, layers, interactions based on props
19+
- Supports vector, tile, image, and overlay layer types
20+
- Adds various pre-configured controls like Zoom, FullScreen, LayerSwitcher
21+
- Handles OpenLayers map events and bubbles them up to parent
22+
- Allows map features to be dynamically updated by changing props
23+
- Provides helper methods for working with layers, geoJSON, etc.
24+
25+
The `Geo` component aims to handle the OpenLayers map initialization and management so the parent component can focus on data, state, UI, etc.
26+
27+
## Key Files
28+
29+
- `Geo.jsx`: Main React component that renders the map
30+
- `helpers/Layers.js`: Functions for generating layer configs
31+
- `helpers/index.js`: Helper utilities for map interactions
32+
- `RotateNorthControl.js`: Custom control example
33+
- `styles.css`: CSS styles for map elements
34+
35+
## Usage
36+
37+
The `Geo` component takes a `props` object with configuration like:
38+
39+
```jsx
40+
<Geo
41+
center={[0, 0]}
42+
zoom={2}
43+
features={{ zoom: true }}
44+
layers={[
45+
{
46+
name: 'Countries',
47+
type: 'geojson',
48+
source: countryGeoJson
49+
}
50+
]}
51+
/>
52+
```
53+
54+
It can be used like any other React component. See the code comments for details on all the supported props.
55+
56+
The parent component is notified of map events via the onEvent callback prop. It can update features like layers by passing new props to Geo.
57+
58+
## Additional Details
59+
- Uses OpenLayers v9+ and ol-ext library
60+
- Requires CSS imports of OpenLayers and ol-ext styles
61+
- Works well with React hooks for state management
62+
- helpers contains useful utilities for working with OpenLayers
63+
- Can be extended by creating custom OpenLayers controls
64+
- See the code and comments for more implementation details.The OpenLayers docs provide additional reference.

0 commit comments

Comments
 (0)