openlayers-style-editor 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +137 -40
- package/dist/openlayers-style-editor.js +30943 -30939
- package/dist/openlayers-style-editor.umd.cjs +1602 -1602
- package/dist/src/RendererObjects.d.ts +1 -1
- package/dist/src/StyleEditor.d.ts +3 -3
- package/dist/src/StyleEditorComponent.d.ts +3 -3
- package/dist/src/components/categorized.d.ts +3 -3
- package/dist/src/components/geometryEditor.d.ts +3 -3
- package/dist/src/components/graduated.d.ts +1 -1
- package/dist/src/locales/en/translation.json.d.ts +3 -3
- package/dist/src/locales/pt/translation.json.d.ts +3 -3
- package/package.json +14 -1
package/README.md
CHANGED
|
@@ -1,50 +1,147 @@
|
|
|
1
|
-
|
|
1
|
+
<p align="center"><img src="https://land-it.github.io/openlayers-style-editor/favicons/android-chrome-192x192.png"></p>
|
|
2
|
+
<h1 align="center">Welcome to <code>openlayers-style-editor</code></h1>
|
|
3
|
+
<p>
|
|
4
|
+
<a href="https://www.npmjs.com/package/openlayers-style-editor" target="_blank">
|
|
5
|
+
<img alt="Version" src="https://img.shields.io/npm/v/openlayers-style-editor.svg">
|
|
6
|
+
</a>
|
|
7
|
+
<a href="https://www.npmjs.com/package/openlayers-style-editor" target="_blank">
|
|
8
|
+
<img alt="Downloads" src="https://img.shields.io/npm/dw/openlayers-style-editor">
|
|
9
|
+
</a>
|
|
10
|
+
<a href="https://openlayers-style-editor.rajinwonderland.vercel.app" target="_blank">
|
|
11
|
+
<img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" />
|
|
12
|
+
</a>
|
|
2
13
|
|
|
3
|
-
|
|
14
|
+
[//]: # ( <a href="#" target="_blank">)
|
|
4
15
|
|
|
5
|
-
|
|
16
|
+
[//]: # ( <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />)
|
|
6
17
|
|
|
7
|
-
|
|
8
|
-
|
|
18
|
+
[//]: # ( </a>)
|
|
19
|
+
</p>
|
|
9
20
|
|
|
10
|
-
## Expanding the ESLint configuration
|
|
11
21
|
|
|
12
|
-
|
|
22
|
+
### ✨ [Demo](https://land-it.github.io/openlayers-style-editor/#/demo)
|
|
13
23
|
|
|
14
|
-
|
|
24
|
+
## Contents
|
|
15
25
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
+
- [Background](#background)
|
|
27
|
+
- [Presentation](#presentation)
|
|
28
|
+
- [Installation](#installation)
|
|
29
|
+
- [Usage](#usage)
|
|
30
|
+
- [Props Details](#props-details)
|
|
31
|
+
- [TODOs](#todos)
|
|
32
|
+
- [Show your support](#show-your-support)
|
|
33
|
+
- [Author & Maintainer](#author--maintainer)
|
|
34
|
+
|
|
35
|
+
## Background
|
|
36
|
+
|
|
37
|
+
This package was created in the context of the [LAND IT](https://land-it.github.io/) project,
|
|
38
|
+
a decision support system to help stakeholders planning a new
|
|
39
|
+
landscape for the most affected areas by wildfires in Portugal.
|
|
40
|
+
LAND IT uses OpenLayers as its main GIS dependency,
|
|
41
|
+
and throughout the project the need to edit layers styles increased.
|
|
42
|
+
|
|
43
|
+
## Presentation
|
|
44
|
+
|
|
45
|
+
This Style Editor for OpenLayers allows the user to change the style of layers. This editor was inspired in both QGIS and ArcMap editors.
|
|
46
|
+
|
|
47
|
+
**There are three edition modes:**
|
|
48
|
+
|
|
49
|
+
- **Unique Symbol:** Allows the user to change the layer's color, opacity, and stroke.
|
|
50
|
+
- **Categorized:** Allows the user to change the layer's color, opacity, and stroke based on the values of an attribute.
|
|
51
|
+
- **Graduated:** Allows the user to change the layer's color, opacity, and stroke based on a numeric attribute and the
|
|
52
|
+
mode used to group its values. This package has six modes implemented, some of them are implemented using the
|
|
53
|
+
[GeoBuckets](https://www.npmjs.com/package/geobuckets) package. The implemented modes are:
|
|
54
|
+
- Manual
|
|
55
|
+
- Equal Intervals
|
|
56
|
+
- Defined Intervals
|
|
57
|
+
- Quantile
|
|
58
|
+
- Natural Breaks (Jenks)
|
|
59
|
+
- Standard Deviation
|
|
60
|
+
|
|
61
|
+
A detailed explanation of each mode can be found [here](https://resources.arcgis.com/en/help/main/10.2/index.html#//00s50000001r000000).
|
|
62
|
+
|
|
63
|
+
## Installation
|
|
64
|
+
|
|
65
|
+
Depending on the installed package provider, this package can be installed with one of the following commands.
|
|
66
|
+
|
|
67
|
+
```
|
|
68
|
+
npm install openlayers-style-editor
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
```
|
|
72
|
+
yarn add openlayers-style-editor
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Usage
|
|
76
|
+
|
|
77
|
+
It is possible to enjoy this package by adding the following code snippets to your code.
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
import { Render, RenderType, StyleEditor } from "openlayers-style-editor";
|
|
26
81
|
```
|
|
27
82
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
},
|
|
43
|
-
rules: {
|
|
44
|
-
// other rules...
|
|
45
|
-
// Enable its recommended rules
|
|
46
|
-
...react.configs.recommended.rules,
|
|
47
|
-
...react.configs['jsx-runtime'].rules,
|
|
48
|
-
},
|
|
49
|
-
})
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
const [visible, setVisible] = useState<boolean>(false);
|
|
86
|
+
|
|
87
|
+
const defaultRender: Render = {
|
|
88
|
+
type: RenderType.Unique,
|
|
89
|
+
rendererOL: {
|
|
90
|
+
'fill-color': [255, 255, 50, 1],
|
|
91
|
+
'stroke-color': [0, 0, 0, 1],
|
|
92
|
+
'stroke-width': 1,
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
const [renderer, setRenderer] = useState<Render>(defaultRender);
|
|
50
97
|
```
|
|
98
|
+
|
|
99
|
+
```tsx
|
|
100
|
+
<StyleEditor visible={visible}
|
|
101
|
+
setVisible={setVisible}
|
|
102
|
+
layerDefaultRenderer={defaultRender}
|
|
103
|
+
layerCurrentRenderer={renderer}
|
|
104
|
+
applyRenderer={(renderer) => setRenderer(renderer)}
|
|
105
|
+
features={features}
|
|
106
|
+
primeReactTheme={"bootstrap4-light-blue"}
|
|
107
|
+
showPreDefinedRamps={true} />
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
***To see a full example click [here](https://github.com/LAND-IT/openlayers-style-editor/blob/master/page/src/examples/Test.tsx).***
|
|
111
|
+
|
|
112
|
+
## Props Details
|
|
113
|
+
|
|
114
|
+
| Name | Type | Requirement | Description | Example |
|
|
115
|
+
|-------------------------|------------------------|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
116
|
+
| `visible` | `boolean` | **mandatory** | Defines if the component<br/> is visible or not | true |
|
|
117
|
+
| `setVisible` | `function` | **mandatory** | Function to set the <br/>visibility of the component | () => setVisible(!visible) |
|
|
118
|
+
| `layerDefaultRenderer` | `Render` | **mandatory** | Default renderer of <br/>the layer to be edited | {<br/> type: RenderType.Unique, <br/> rendererOL: { <br/>  'fill-color': [255, 255, 50, 1], <br/>  'stroke-color': [0, 0, 0, 1], <br/>  'stroke-width': 1<br/> }<br/>} |
|
|
119
|
+
| `layerCurrentRenderer ` | `Render` | **mandatory** | Current renderer of the layer | {<br/> type: RenderType.Unique, <br/> rendererOL: { <br/>  'fill-color': [255, 255, 50, 1], <br/>  'stroke-color': [0, 0, 0, 1], <br/>  'stroke-width': 1<br/> }<br/>} |
|
|
120
|
+
| `applyRenderer` | `function` | **mandatory** | Function to apply the renderer to the layer, it has as parameter the renderer to be applied | (renderer: Render) => setRenderer(renderer) |
|
|
121
|
+
| `features` | `Feature[]` | **mandatory** | Features to be rendered on the map | |
|
|
122
|
+
| `showPreDefinedRamps` | `boolean` | **mandatory** | Show the predefined ramps of the package | true |
|
|
123
|
+
| `moreRamps` | `ColorRamp[]` | optional | An array of color ramps that can be added to the package | [{<br/> id: 28, //id needs to be >=28 <br/> name: "GnBu", <br/> palette: <br/>  [{<br/>   offset: 0.25, <br/>   color: fromString("rgb(186,228,188)")<br/>  },<br/>  {<br/>   offset: 0.5,<br/>   color: fromString("rgb(123,204,196)")<br/>  }, <br/>  {<br/>   offset: 0.75, <br/>   color: fromString("rgb(67,162,202)")<br/>  }]<br/>}] |
|
|
124
|
+
| `predefinedStyles` | `PredefinedRenderer[]` | optional | Predefined styles to be used on the categorized style type | [{<br/> name: "Dangerousness",<br/> renderer: <br/>  [{<br/>   value: "Very High", <br/>   color: [255, 0, 0]<br/>  },<br/>  {<br/>   value: "High", <br/>   color: [255, 128, 0]<br/>  },<br/>  {<br/>   value: "Medium", <br/>   color: [255, 255, 0]<br/>  },<br/>  {<br/>   value: "Low", <br/>   color: [139, 209, 0]<br/>  },<br/>  {<br/>   value: "Very Low", <br/>   color: [56, 168, 0]<br/>  }]<br/>}] |
|
|
125
|
+
| `addingToHeader` | `string` | optional | Text to be added to the header | - Dangerousness Layer |
|
|
126
|
+
| `primeReactTheme` | `string` | optional | PrimeReact theme to be used, all option can be found [here](https://primereact.org/theming/#themes) | bootstrap4-light-blue |
|
|
127
|
+
| `numbersLocale` | `string` | optional | Locale to be used on numbers, represented using BCP 47 language tag. Default is 'en-US' | en-US |
|
|
128
|
+
| `textLocale` | `string` | optional | Locale to be used for text. This package has two options available: 'en' and 'pt'. Default is 'en'. To add a custom locale, use the customLocale prop and in the textLocale prop use 'custom'. | pt |
|
|
129
|
+
| `customLocale` | `Record<string, any>` | optional | Custom locale to be used in case the textLocale is set to 'custom'. This prop must have the same structure as the default locale, that can be found [here](https://github.com/LAND-IT/openlayers-style-editor/blob/master/openlayers-style-editor/src/locales/en/translation.json) | {"common": {<br/> "style_editor": "Editor de Estilos",<br/> "reset_style": "Repor Estilo",<br/> ...<br/>}} |
|
|
130
|
+
|
|
131
|
+
## TODOs
|
|
132
|
+
|
|
133
|
+
- [ ] Add the condition style type
|
|
134
|
+
- [ ] Add a license
|
|
135
|
+
|
|
136
|
+
## Show your support
|
|
137
|
+
|
|
138
|
+
Give a ⭐️ if this project helped you!
|
|
139
|
+
|
|
140
|
+
## Author & Maintainer
|
|
141
|
+
|
|
142
|
+
<img src="https://avatars.githubusercontent.com/u/45342267?v=4" height="80px" style="border-radius:50px" />
|
|
143
|
+
|
|
144
|
+
Márcia Matias
|
|
145
|
+
|
|
146
|
+
- Github: [@MarciaBM](https://github.com/MarciaBM)
|
|
147
|
+
- Personal Page: [marciamatias.github.io](https://marciamatias.github.io/)
|