Skip to content

Commit 5063f27

Browse files
committed
fix: update Readme
1 parent 2ea8e72 commit 5063f27

File tree

1 file changed

+77
-9
lines changed

1 file changed

+77
-9
lines changed

src/README.md

Lines changed: 77 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,82 @@
1-
# Using the Lowcoder GEO plugin
1+
# GEOComp Component
22

3-
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**
3+
The `src` directory contains the source code for the GEOComp React component. GEOComp renders an interactive geographic map using the OpenLayers library.
44

5-
# Documentation
5+
## Overview
66

7-
We have created a [seperated documentation](https://sjhoeksma.github.io/lowcoder-comp-geo/) page explain all the features.
8-
[![documentation](https://github.com/sjhoeksma/lowcoder-comp-geo/blob/dev/images/documentation.png?raw=true)](https://sjhoeksma.github.io/lowcoder-comp-geo/)
7+
GEOComp is a reusable map component that can be configured and integrated into other applications. It allows displaying geographic data layers, interactivity through popups and drawing, and exposes events for integrating custom functionality.
98

10-
# Example
11-
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.
9+
Some key capabilities provided by GEOComp:
1210

13-
#### Viewer
14-
![viewer](https://github.com/sjhoeksma/lowcoder-comp-geo/blob/main/images/viewer-example.png?raw=true)
11+
- Configurable base map layers
12+
- Overlay vector data layers from files or API sources
13+
- Interaction through popups, selection, and drawing tools
14+
- Expose map events and selected features
15+
- Timeline animation of temporal data
16+
- Customizable styling
17+
18+
## Key Files
19+
20+
Within the main directory you will find the following files creating the lowcoder plugin
21+
22+
- `GEOComp.tsx` - Main component definition and configuration
23+
- `LayersControl.tsx` - Builds layer configuration UI
24+
- `FeaturesControl.tsx` - Feature flags configuration
25+
- `vendors/index.ts` - OpenLayers map initialization and helpers
26+
- `styles.module.css` - Component styling
27+
28+
## Component Configuration
29+
30+
GEOComp is configured through React props that control the map options and layers. Some key configuration props:
31+
32+
- `center` - Initial center point [lon, lat]
33+
- `zoom` - Initial zoom level
34+
- `layers` - Array of layer configuration objects
35+
- `events` - Object mapping event names to handlers
36+
- `feature` - Selected/edited feature state
37+
38+
## Events and Interactivity
39+
40+
GEOComp exposes events that can be handled in the parent component:
41+
42+
- `onInit` - Map initialized
43+
- `onLoad` - Layers loaded
44+
- `onClick` - Map clicked
45+
- `onSelect` - Feature clicked
46+
- `onModify` - Draw layer edited
47+
48+
This allows integrating custom popup content, selection logic, etc.
49+
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+
62+
# Building the plugin
63+
64+
Before you start make your you have a up-to-date version on node installed locally.
65+
66+
Start with cloning the repository on to you local hard drive. Install all dependecies and start te component test environment. Make any changes to the code you want and the will be visible in the test environment.
67+
68+
```bash
69+
git clone https://github.com/sjhoeksma/lowcoder-comp-geo.git
70+
cd lowcoder-comp-geo
71+
yarn install
72+
yarn start
73+
```
74+
75+
When you are finished you can build your own version or deploy it to npmjs
76+
77+
```bash
78+
# Building
79+
yarn build
80+
# Or Publishing
81+
yarn build --publish
82+
```

0 commit comments

Comments
 (0)