|
1 |
| -# Using the Lowcoder GEO plugin |
| 1 | +# GEOComp Component |
2 | 2 |
|
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. |
4 | 4 |
|
5 |
| -# Documentation |
| 5 | +## Overview |
6 | 6 |
|
7 |
| -We have created a [seperated documentation](https://sjhoeksma.github.io/lowcoder-comp-geo/) page explain all the features. |
8 |
| -[](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. |
9 | 8 |
|
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: |
12 | 10 |
|
13 |
| -#### Viewer |
14 |
| - |
| 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