[1] About
React-OlExt, the React OpenLayers Extension is a Open Source Toolkit that provides collection of components to build a professional Map Application. Its implementation is based on OpenLayers, Ant Design and React library. With a few lines of code you will be able to create a powerfull Map application.
React-OlExt is under the MIT License, which allow you to develop open-source or commercial applications free of charge and modify the source code as well.
React-OlExt 0.1 is the first base version which uses currently the versions OpenLayers 6.13 and React 17.0.2.
For a complete description of all components with a LIVE CODE EDITOR, check our API Documentation .
For the source code of some application examples, check our examples .
[2] UI Components
As shown in the figure below, some included components are: Layer Tree, WFS Feature Grid, WMS Get Feature Info, Overview Map, etc. Click in the link Basic React-OlExt Application to access this application on-line. The source code for this application can be found here.
There are hundreds of UI components ready to be used or to be extended. For the complete list and description of all components, check the section UI Components: there you can also find the usage of each component with description of the parameters and a LIVE EDITOR on where you can modify the code and see interactively the result.
[2.1] WFS Feature Grid
The WFS Feature Grid allows to retrieve features using the standard WFS GetFeature request.
Some of the functionalities are:
- Build complexes queries using several OGC operators: Equal To, Like, Greater Than, Less Than, etc.
- Build complexes queries using OGC spatial operators: Filter by Polygon, Bounding Box, etc.
- The Grid column names are automatically retrieved from WFS query
- Highlight in the map the selected feature in Grid (selection of multiple rows are possible)
- Zoom in the map to the selected feature(s) in the Grid or Zoom to all retrieved features
- Clear in the map the selected feature(s) in the Grid or clear all the retrieved features
- Etc.
In the figure below, as result of the option "Search by Polygon", the user is defining a polygon area to retrieve all the addresses inside it.
[2.2] Tree Layer
The Tree Layer will allow the user to show/hide the configured layers in the map. Additionally, this UI component provides a powerfull context menu once the user right clicks in the tree node representing the layer. The context menu will provide the following functionalities:
- Edit the layer: rename, change opacity, style, etc...
- Creation of different types of layers: Group Layer, OSM, WMS Layer, Tile WMS Layer
- WMS Get Feature info to retrieve the attributes from the feature picked in the map
- Remove Layer
- Clear Layer (for vector layer)
- Etc...
As show in the figure below, the "Feature Info" option present in the context menu will:
- Request the user to select the feature in the map
- Once the feature is selected, a dialog will be shown with all the attributes for the selected feature
[2.3] Overview Map
This control is a child map with a view in a large area of the map, allowing a better map navigation. The dragging box present in the overview map represents the area of the parent map (See figure below, map in the right side presenting a dragging box). This control has the following properties:
- If the user pan the overview map (dragging the box to a different position), the parent map will also be re-centered accordinlgy.
- Conversely, if the user pan the parent map, the overview map will be re-centered accordingly.
- If the user click a point in the overview map outside the dragging box:
- The overview map will be re-centered in the clicked point
- The parent map will be re-centered accordingly
